shadcn/ui additional components and resources

Additions since original post :

10/07/2024 :

• Shadcn View Table
• Calendar Date Picker Component in Next.js
• Shadcn Address Autocomplete

24/06/2024 :

• Salad UI

23/06/2024 :

• Minimal Tiptap Editor

22/06/2024 :

• shadcn-tag-input was renamed emblor

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 :

• Autosize Textarea
• Blockquote
• Floating Label
• Input
• Heading With Anchor
• Infinite Scroll
• Loading Button
• Multiple Selector

shadcn/ui expansions

Fancy Multi Select

A Multi Select component inspired by campsite.design’s and cal.com’s settings forms.

Fancy Multi Select

Fancy Box

A Combobox component inspired by GitHub’s PR label selector.

Fancy Box

Fancy Area

A Textarea component inspired by GitHub’s PR comment section.

Fancy Area

shadcn-keyboard-shortcuts

A keyboard shortcuts UI, with mac / PC variants.

https://stackblitz.com/edit/stackblitz-starters-dlsw2v

Image upload

An image upload component with drag and drop, multiple uploads, and progress indicators.

file-vault/components/custom/image-upload.tsx at master · ManishBisht777/file-vault

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.

GitHub - sadmann7/shadcn-table: shadcn table component with server-side sorting, filtering, and…

Shadcn View Table

Shadcn table component with server side sorting, pagination, filtering, and custom views.

GitHub - nainglinnkhant/shadcn-view-table: Shadcn table component with server side sorting…

Emblor (previously shadcn-tag-input)

An input UI for tags. Renamed to emblor.

Introduction

Plate Rich Text Editor

A rich text editor. Still very young, but keep an eye on it.

GitHub - udecode/plate: The rich-text editor for React.

Minimal Tiptap Editor

A minimal Tiptap Editor component built for Shadcn. It provides a simple and clean editor for users to write and format text.

GitHub - Aslam97/shadcn-minimal-tiptap: Minimal Tiptap Editor

Gradient Picker

A gradient / color / background picker.

Gradient Picker | Shadcn UI Component to pick gradients, colors and backgrounds

AutoForm

Create forms automatically from a zod schema.

GitHub - vantezzen/auto-form: 🌟 A React component that automatically creates a @shadcn/ui form…

Credenza Modal

A responsive modal component for desktop and mobile.

GitHub - redpangilinan/credenza: Ready-made responsive modal component for shadcn/ui.

Another multi select component.

Create Next App

Shadcn Address Autocomplete

An address autocomplete component using Google Places API and shadcn components.

GitHub - NiazMorshed2007/shadcn-address-autocomplete: An address autocomplete component built with…

Phone Input

A Phone input component.

GitHub - omeralpi/shadcn-phone-input: Customizable phone input component with proper validation for…

Enhanced Button

A version of the Button component with more variants.

enhanced-button

Date Range Picker

A date range picker based on Radix UI.

GitHub - johnpolacek/date-range-picker-for-shadcn: DateRangePicker is a reusable component for…

shadcn-cal-com

A copy of the monthly calendar used by cal.com.

GitHub - damianricobelli/shadcn-cal-com

Calendar Date Picker Component in Next.js

A calendar Date Picker Component made with Next.js.

GitHub - sersavan/shadcn-calendar-component: A calendar date picker component designed with…

Shadcn country region select

A country / region select input component.

GitHub - inextdeve/shadcn-country-region-select

Chat

A ready to use Chat UI.

GitHub - jakobhoeg/shadcn-chat: Customizable and re-usable chat component for you to use in your…

langui

A collection of UI components for AI projects.

GitHub - ahmadbilaldev/langui: UI for your AI. Open Source Tailwind components tailored for your…

shadcn-phone-input

Another phone input.

GitHub - damianricobelli/shadcn-phone-input

Sortable

A sortable reusable sortable component with shadcn/ui and dnd-kit.

Sortable

Planner

A scheduling component.

GitHub - UretzkyZvi/planner: Planner Component: A React component for dynamic appointment…

@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.

GitHub - Railly/shadcn-ui-customizer: POC - shadcn/ui themes with color pickers

Awesome shadcn/ui

A curated list of additional shadcn/ui components and examples.

GitHub - birobirobiro/awesome-shadcn-ui: A curated list of awesome things related to shadcn/ui.

Next.js 14 Admin Dashboard Starter Template

A ready to use Next.js admin template using shadcn/ui for the UI.

GitHub - Kiranism/next-shadcn-dashboard-starter: Admin Dashboard Starter with Nextjs14 and shadcn…

Veryfront pre-made UI components

Code faster. Deploy instantly — Veryfront

A list of pre made templates ready to be copied and pasted.

10000+ Themes for shadcn/ui

Lots of colors themes combinations.

10000+ Themes for shadcn/ui

shadcn Svelte

Svelte flavor of shadcn/ui.

shadcn-svelte

shadcn Vue

Vue flavor of shadcn/ui.

Shadcn for Vue - shadcn/vue

React native reusables

A very good React native UI library inspired by shadcn/ui.

GitHub - mrzachnugent/react-native-reusables: shadcn/ui for React Native: Copy, paste, and tailor…

React native : nativecn-ui

Another React native implementation of shadcn/ui.

GitHub - Mobilecn-UI/nativecn-ui: Beautiful and customizable React Native components

Flutter shadcn/ui

Shadcn UI for Flutter. Work in progress.

Getting started

Salad UI

A port of shadc/ui to Phoenix Liveview Component.

GitHub - bluzky/salad_ui: Phoenix Liveview component library inspired by shadcn UI

Remix + Vite + shadcn/ui

A ready to use Remix template using shadcn/ui.

GitHub - jacob-ebey/remix-shadcn: Remix + Vite + shadcn/ui starter template.

Figma Design System

This Figma file is the design companion to @shadcn’s incredible new UI system.

@shadcn/ui - Design System | Figma Community

There is also another implementation here, with up to date components and dark mode :

@shadcn/ui Design System 2024 | Figma Community

VSCode Extension

A VSCode extension to install components without the terminal.

shadcn/ui - Visual Studio Marketplace

VSCode UI Snippets Extension

Snippets to easily insert premade JSX and imports.

GitHub - nrjdalal/shadcn-ui-snippets: Simply import and use shadcn-ui components in your project

If you find other resources, leave a comment below !