shadcn/ui additional components and resources
Additions since original post :
12/05/2024 :
- sortable
- Planner
07/05/2024 :
- langui
29/04/2024 :
- shadcn-cal-com
- Multi select component
- Shadcn country region select
24/04/2024 :
- shadcn-phone-input
- @react-querybuilder/shadcn-ui
7/04/2024 :
- Flutter shadcn/ui
26/02/2024 :
- shadcnui-expansions
- Fancy Multi Select
- Fancy Box
- Fancy Area
25/02/2024 :
- shadcn-keyboard-shortcuts
- image-upload
shadcn/ui has become very popular due to its ease of use, clean ui and code.
I often need some extra components / libraries that are ready to use in a shadcn/ui project, and with time I gathered some great resources.
So here is a list of these components you may want to use in your projects !
If you find other useful resources, leave a comment below, and I’ll add them to the list.
shadcnui-expansions
A set of extra components built on top of shadcn/ui :
Fancy Multi Select
A Multi Select component inspired by campsite.design’s and cal.com’s settings forms.
Fancy Box
A Combobox component inspired by GitHub’s PR label selector.
Fancy Area
A Textarea component inspired by GitHub’s PR comment section.
shadcn-keyboard-shortcuts
A keyboard shortcuts UI, with mac / PC variants.
Image upload
An image upload component with drag and drop, multiple uploads, and progress indicators.
Advanced Data Table
A set of utilities to create data tables with many useful helpers, and ability to make server-side sorting, filtering and pagination.
Tag Input
A complete UI for tags with add, delete, suggest etc.
Plate Rich Text Editor
A rich text editor. Still very young, but keep an eye on it.
Gradient Picker
A gradient / color / background picker.
Credenza Modal
A responsive modal component for desktop and mobile.
Fancy Multi Select
A multi select component.
Multi select component
Another multi select component.
Enhanced Button
A version of the Button component with more variants.
shadcn-cal-com
A copy of the monthly calendar used by cal.com.
Shadcn country region select
A country / region select input component.
shadcn-phone-input
Another phone input.
Sortable
A sortable reusable sortable component with shadcn/ui and dnd-kit.
@react-querybuilder/shadcn-ui
Unofficial react-querybuilder components for shadcn/ui.
I am the author of this one.
Customizer
An open-source extension of shadcn/ui themes for customizing the theme.
Awesome shadcn/ui
A curated list of additional shadcn/ui components and examples.
Next.js 14 Admin Dashboard Starter Template
A ready to use Next.js admin template using shadcn/ui for the UI.
Veryfront pre-made UI components
A list of pre made templates ready to be copied and pasted.
10000+ Themes for shadcn/ui
Lots of colors themes combinations.
shadcn Svelte
Svelte flavor of shadcn/ui.
shadcn Vue
Vue flavor of shadcn/ui.
React native reusables
A very good React native UI library inspired by shadcn/ui.
React native : nativecn-ui
Another React native implementation of shadcn/ui.
Flutter shadcn/ui
Shadcn UI for Flutter. Work in progress.
Remix + Vite + shadcn/ui
A ready to use Remix template using shadcn/ui.
Figma Design System
This Figma file is the design companion to @shadcn’s incredible new UI system.
There is also another implementation here, with up to date components and dark mode :
VSCode Extension
A VSCode extension to install components without the terminal.
VSCode UI Snippets Extension
Snippets to easily insert premade JSX and imports.
If you find other resources, leave a comment below !