This resource list introduces libraries and components related to shadcn/ui. These libraries and components provide pre-built and customizable UI components for projects such as React, Next.js, Tailwind CSS, etc. The following is a summary of the main contents of the list:
Note Contents
Awesome shadcn-ui GitHub Repository
Libs and Components
- shadcn-blocks: Blocks is the official shadcn/ui pre-made but customizable components that can be copied and pasted into your projects.
- shadcn-extension: An open-source component collection that extends your UI library, built using shadcn/ui components.
- shadcn-ui-expansions: A lot of useful components which shadcn/ui does not have out of the box.
- shadcn-extends: Intended to be a collection of components built using shadcn/ui.
- shadcn-table-v2: shadcn/ui table component with server-side sorting, filtering, and pagination.
- shadcn-phone-input: Customizable phone input component with proper validation for any country.
- shadcn-phone-input-2: Simple and formatted phone input component built with shadcn/ui and libphonenumber-js.
- phone-input-shadcn-ui: Custom phone number component built with shadcn/ui.
- password-input: shadcn/ui custom password input.
- react-dnd-kit-tailwind-shadcn-ui: Drag and drop accessible kanban board implementing using React, dnd-kit, tailwind, and shadcn/ui.
- nextjs-dnd: Sortable Drag and Drop with Next.js, shadcn/ui, and dnd-kit.
- fancy-multi-select: The Multi Select Component is inspired by campsite.design's and cal.com's settings forms.
- auto-form: A React component that automatically creates a shadcn/ui form based on a zod schema.
- date-range-picker-for-shadcn: Includes multi-month views, text entry, preset ranges, responsive design, and date range comparisons.
- emblor: A highly customizable, accessible, and fully-featured tag input component built with shadcn/ui.
- enhanced-button: An enhanced version of the default shadcn-button component.
- time-picker: A simple TimePicker for your shadcn/ui project.
- shadcn-chat: Customizable and reusable chat component for you to use in your projects.
- nextjs-components: A collection of Next.js components built with TypeScript, React, shadcn/ui, Craft UI, and Tailwind CSS.
- credenza: Ready-made responsive modal component for shadcn/ui.
- country-state-dropdown: This Component is built with Next.js, Tailwind CSS, shadcn/ui & Zustand for state management.
- shadcn-drag-table: A drag-and-drop table component using shadcn/ui and Next.js.
- file-vault: File upload component for React.
- file-uploader: A file uploader built with shadcn/ui and react-dropzone.
- plate: The rich-text editor for React.
- autocomplete-select-shadcn-ui: Autocomplete component built with shadcn/ui and Fancy Multi Select by Maximilian Kaske.
- shadcn-data-table-advanced-col-opions: Column-resizing option to shadcn/ui DataTable.
- pricing-page-shadcn: Pricing Page made with shadcn/ui & Next.js 14. Completely customizable
- neobrutalism-components: Collection of neobrutalism-styled Tailwind React and Shadcn UI components.
- shadcn-stepper: A complete stepper component built with shadcn/ui
- shadcn-linear-combobox: A copy of the combobox that Linear uses to set the priority of a task.
- magicui: React components to build beautiful landing pages using tailwindcss + framer motion + shadcn/ui
- aceternityui: Copy paste the most trending react components without having to worry about styling and animations.
- cult-ui: A well-curated set of animated shadcn-style React components for more specific use-cases.
- planner: Planner is a highly adaptable scheduling component tailored for React applications.
- shadcn-cal: A copy of the monthly calendar used by Cal.com with shadcn/ui, Radix Colors and React Aria.
- shadcn-ui-sidebar: A stunning, functional and responsive retractable sidebar built on top of shadcn/ui.
- capture-photo: Capture-Photo is a versatile, browser-based React component designed to streamline the integration of camera functionalities directly into your web applications.
- search-address: The SearchAddress component provides a flexible and interactive search interface for addresses, utilizing the powerful Nominatim service from OpenStreetMap.
- sortable: A sortable component built with shadcn/ui, radix ui, and dnd-kit.
- uixmat/onborda: Give your application the onboarding it deserves with Onborda product tour for Next.js
- shadcn-multi-select-component: A multi-select component designed with shadcn/ui
- echo-editor: A modern WYSIWYG rich-text editor based on tiptap and shadcn/ui
- clerk-shadcn-theme: Easily synchronize your Clerk <SignIn /> and <SignUp /> components with your shadcn/ui styles
- clerk-elements: Composable components that can be used to build custom UIs on top of Clerk's APIs
Apps
- shadcn-ui: Add components from shadcn/ui directly from VS Code.
Extensions
- vscode-shadcn-svelte: VS Code extension for shadcn/ui components in Svelte projects.
- vscode-shadcn-vue: Extension for integrating shadcn/ui components into Vue.js projects.
- shadcn/ui Components Manager: A plugin for Jetbrain products. It allows you to manage your shadcn/ui components across Svelte, React, Vue, and Solid frameworks with this plugin. Simplify tasks like adding, removing, and updating components.
- raycast-shadcn: Raycast extension to browse shadcn/ui documentation, components, and examples.
- vscode-shadcn-ui-snippets: Easily import and use shadcn-ui components with ease using snippets within VSCode. Just type cn or shadcn in your jsx/tsx file and you will get a list of all the components to choose from.
Colors and Customizations
- zippy starter's shadcn/ui theme generator: Easily create custom themes from a single color that you can copy and paste into your apps.
- 10000+Themes for shadcn/ui: 10000+ Themes for shadcn/ui.
- ui-colorgen: An application designed to assist you with color configuration of shadcn/ui.
- gradient-picker: Fancy Gradient Picker built with Shadcn UI, Radix UI, and Tailwind CSS.
- shadcn-ui-customizer: POC - shadcn/ui themes with color pickers.
- navnote/rangeen: Tool that helps you to create a color palette for your website.
- dizzy: Bootstrap a new Next or Vite project with shadcn/ui. Customize font, icons, colors, spacing, radii, and shadows.
Animations
- magicui.design: Largest collection of open-source react components to build beautiful landing pages.
- motionvariants: Beautiful Framer Motion animations.
Tools
- v0: Vercel's generative UI system, built on shadcn/ui and TailwindCSS, allows effortless UI generation from text prompts and/or images. It produces React and HTML code, integration is also possible via v0 CLI command.
- shadcn-pricing-page-generator: The easiest way to get a React pricing page with shadcn/ui, Radix UI and/or Tailwind CSS.
- invoify: An invoice generator app built using Next.js, Typescript, and shadcn/ui.
- pastecode: Pastebin alternative built with Typescript, Next.js, Drizzle, Shadcn, RSC.
Boilerplates / Templates
- taxonomy: An open source application built using the new router, server components and everything new in Next.js.
- shadcn-landing-page: Landing page template using shadcn/ui, React, TypeScript and Tailwind CSS.
- shadcn-vue-landing-page: Landing page template using Vue, shadcn-vue, TypeScript, Tailwind CSS.
- shadcn-landing-page: Project conversion shadcn-vue-landing-page to nextjs - Landing page template using Nestjs, shadcn/ui, TypeScript, Tailwind CSS.
- turborepo-shadcn-ui-tailwindcss: Turborepo starter with shadcn/ui & Tailwind CSS pre-configured for shared UI components.
- design-system-template: Turborepo + TailwindCSS + Storybook + shadcn/ui.
- next-shadcn-dashboard-starter: Admin Dashboard Starter with Next.js 14 and shadcn/ui.
- chadnext: Quick Starter Template includes Next.js 14 App router, shadcn/ui, LuciaAuth, Prisma, Server Actions, Stripe, Internationalization and more.
- nextjs-mdx-blog: Starter template built with Contentlayer, MDX, shadcn/ui, and Tailwind CSS.
- t3-app-template: This is the admin template for T3 Stack and shadcn/ui
Awesome shadcn-ui GitHub Repository