A curated list of awesome things related to shadcn/ui.

[mrgirff]

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