awesome-shadcn/ui
A curated list of awesome things related to shadcn/ui
Created by: birobirobiro.dev
Libs and Components
- aceternity-ui – Copy paste the most trending react components without having to worry about styling and animations.
- assistant-ui – React Components for AI Chat
- autocomplete-select-shadcn-ui – Autocomplete component built with shadcn/ui and Fancy Multi Select by Maximilian Kaske.
- auto-form – A React component that automatically creates a shadcn/ui form based on a zod schema.
- capture-photo – Capture-Photo is a versatile, browser-based React component designed to streamline the integration of camera functionalities directly into your web applications.
- clerk-elements – Composable components that can be used to build custom UIs on top of Clerk’s APIs
-
clerk-shadcn-theme – Easily synchronize your Clerk
and
components with your shadcn/ui styles - country-state-dropdown – This Component is built with Nextjs, Tailwindcss, shadcn/ui & Zustand for state management.
- cult-ui – A well curated set of animated shadcn-style React components for more specific use-cases.
- credenza – Ready-made responsive modal component for shadcn/ui.
- date-range-picker-for-shadcn – Includes multi-month views, text entry, preset ranges, responsive design, and date range comparisons.
- downshift-shadcn-combobox – Combobox/autocomplete component built with shadcn/ui and Downshift.
- echo-editor – A modern WYSIWYG rich-text editor base on tiptap and shadcn/ui
- 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.
- fancy-multi-select – The Multi Select Component is inspired by campsite.design’s and cal.com’s settings forms.
- farmui – A shadcn and tailwindcss based beautifully styled and animated component library solution with its own npm package to install any component with in a component registery.
- file-uploader – A file uploader built with shadcn/ui and react-dropzone.
- file-vault – File upload component for React.
- ibelick/background-snippet – Ready to use collection of modern background snippets.
- indie-ui – UI components with variants – Docs
- magicui – React components to build beautiful landing pages using tailwindcss + framer motion + shadcn/ui
- neobrutalism-components – Collection of neobrutalism-styled Tailwind React and Shadcn UI components.
- nextjs-components – A collection of Next.js components build with TypeScript, React, shadcn/ui, Craft UI, and Tailwind CSS.
- nextjs-dnd – Sortable Drag and Drop with Next.js, shadcn/ui, and dnd-kit.
- novel – Novel is a Notion-style WYSIWYG editor with AI-powered autocompletion. Built with Tiptap + Vercel AI SDK.
- password-input – shadcn/ui custom password input.
- phone-input-shadcn-ui – Custom phone number component built with shadcn/ui.
- planner – Planner is a highly adaptable scheduling component tailored for React applications.
- plate – The rich-text editor for React.
- pricing-page-shadcn – Pricing Page made with shadcn/ui & Next.js 14. Completely customizable.
- progress-button – An extension of shadcn/ui button component that uses a state machine to drive a progress UX.
- react-dnd-kit-tailwind-shadcn-ui – Drag and drop Accessible kanban board implementing using React, dnd-kit, tailwind, and shadcn/ui.
- search-address – The SearchAddress component provides a flexible and interactive search interface for addresses, utilizing the powerful Nominatim service from OpenStreetMap.
- shadcn-blocks – Blocks is the official shadcn/ui pre-made but customizable components that can be copied and pasted into your projects.
- shadcn-cal – A copy of the monthly calendar used by Cal.com with shadcn/ui, Radix Colors and React Aria.
- shadcn-chat – Customizable and reusable chat component for you to use in your projects.
- shadcn-data-table-advanced-col-opions – Column-resizing option to shadcn/ui DataTable.
- shadcn-drag-table – A drag-and-drop table component using shadcn/ui and Next.js.
- shadcn-extends – Intended to be a collection of components built using shadcn/ui.
- shadcn-extension – An open-source component collection that extends your UI library, built using shadcn/ui components.
- shadcn-linear-combobox – A copy of the combobox that Linear uses to set the priority of a task.
- shadcn-multi-select-component – A multi-select component designed with shadcn/ui
- shadcn-phone-input-2 – Simple and formatted phone input component built with shadcn/ui y libphonenumber-js
- shadcn-phone-input – Customizable phone input component with proper validation for any country.
- shadcn-stepper – A complete stepper component built with shadcn/ui
- shadcn-table-v2 – shadcn/ui table component with server-side sorting, filtering, and pagination.
- shadcn-ui-expansions – A lots of useful components which shadcn/ui does not have out of the box.
- shadcn-ui-sidebar – A stunning, functional and responsive retractable sidebar built on top of shadcn/ui.
- sortable – A sortable component built with shadcn/ui, radix ui, and dnd-kit.
- time-picker – A simple TimePicker for your shadcn/ui project.
- uixmat/onborda – Give your application the onboarding it deserves with Onborda product tour for Next.js
Apps
Plugins and Extensions
- chat-with-youtube – A chrome extension is designed to give you the ability to efficiently summarize videos, easily search for specific parts, and enjoy additional useful features.
- raycast-shadcn – Raycast extension to Browse shadcn/ui documentation, components and examples
- shadcn-ui – Add components from shadcn/ui directly from VS Code.
- 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.
- vscode-shadcn-svelte – VS Code extension for shadcn/ui components in Svelte projects.
- vscode-shadcn-ui-snippets – Easily import and use shadcn-ui components with ease using snippets within VSCode. Just type cn or shadcn in you jsx/tsx file and you will get a list of all the components to choose from.
- vscode-shadcn-vue – Extension for integrating shadcn/ui components into Vue.js projects.
Colors and Customizations
- 10000+Themes for shadcn/ui – 10000+ Themes for shadcn/ui.
- dizzy – Bootstrap a new Next or Vite project with shadcn/ui. Customize font, icons, colors, spacing, radii, and shadows.
- gradient-picker – Fancy Gradient Picker built with Shadcn UI, Radix UI and Tailwind CSS.
- navnote/rangeen – Tool that helps you to create a colour palette for your website
- shadcn-ui-customizer – POC – shadcn/ui themes with color pickers
- ui-colorgen – An application designed to assist you with color configuration of shadcn/ui.
- zippy starter’s shadcn/ui theme generator. – Easily create custom themes from a single colour that you can copy and paste into your apps.
Animations
- magicui.design – Largest collection of open-source react components to build beautiful landing pages.
- motionvariants – Beautiful Framer Motion Animations.
Tools
- 5devs – A website to get fake brazilian data for testing purposes.
- cut-it – Link shortener built using Next.js App Router, Server Actions, Drizzle ORM, Turso and styled with shadcn/ui
- CV Forge – Resume builder, build with @shadcn/ui, react-hook-form and react-pdf
- form-builder – UI based codegen tool to easily create Beautiful and Type safe @shadcn/ui forms.
- imgsrc – Generate beautiful Open Graph images with zero effort.
- invoify – An invoice generator app built using Next.js, Typescript, and shadcn/ui
- pastecode – Pastebin alternative built with Typescript, Next.js, Drizzle, Shadcn, RSC
- QuackDB – Open-source in-browser DuckDB SQL editor
- shadcn-pricing-page-generator – The easiest way to get a React pricing page with shadcn/ui, Radix UI and/or Tailwind CSS.
- translate-app – Translate App using TypeScript, Tailwind CSS, NextJS, Bun, shadcn/ui, AI-SDK/OpenAI, Zod
- 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.
Platforms
- bolhadev – The quickest path to learn English is speaking it regularly. Just find someone to chat with.
- enjoytown – A free anime, manga, movie, tv-shows streaming platform. Built with Nextjs, shadcn/ui
- infinitunes – A Simple Music Player Web App built using Next.js, shadcn/ui, Tailwind CSS, DrizzleORM and more…
- kd – Ad-free Kdrama streaming app. Built with Nextjs, Drizzle ORM, NeonDB and shadcn/ui
- plotwist – Easy management and reviews of your movies, series and animes using Next.js, Tailwind CSS, Supabase and shadcn/ui.
Ports
- Angular – Angular port of shadcn/ui
- Flutter – Flutter port of shadcn/ui
- Franken UI – HTML-first, framework-agnostic, beautifully designed components that you can truly copy and paste into your site. Accessible. Customizable. Open Source.
- JollyUI – shadcn/ui compatible react aria components
- Kotlin – Kotlin port of shadcn/ui
- Phoenix Liveview – Phoenix Liveview port of shadcn/ui
- React Native – React Native port of shadcn/ui
- React Native – React Native port of shadcn/ui (recommended)
- Ruby – Ruby port of shadcn/ui
- Solid – Solid port of shadcn/ui
- Svelte – Svelte port of shadcn/ui
- Swift – Swift port of shadcn/ui
- Vue – Vue port of shadcn/ui
Design System
- shadcn-ui-components – Every component recreated in Figma.
- shadcn-ui-storybook – All shadcn/ui components registered in the storybook by JheanAntunes
- shadcn-ui-storybook – All shadcn/ui components registered in the storybook by fellipeutaka
Boilerplates / Templates
- chadnext – Quick Starter Template includes Next.js 14 App router, shadcn/ui, LuciaAuth, Prisma, Server Actions, Stripe, Internationalization and more.
- design-system-template – Turborepo + TailwindCSS + Storybook + shadcn/ui
- horizon-ai-nextjs-shadcn-boilerplate – Premium AI NextJS & Shadcn UI Boilerplate + Stripe + Supabase + OAuth
- kirimase – A template and boilerplate for quickly starting your next project with shadcn/ui, Tailwind CSS, and Next.js.
- magicui-startup-templates – Magic UI Startup template built using shadcn/ui + tailwindcss + framer-motion
- next-shadcn-dashboard-starter – Admin Dashboard Starter with Next.js 14 and shadcn/ui
- nextjs-mdx-blog – Starter template built with Contentlayer, MDX, shadcn/ui, and Tailwind CSS.
- shadcn-landing-page – Landing page template using shadcn/ui, React, Typescript and Tailwind CSS
- shadcn-landing-page – Project conversion shadcn-vue-landing-page to nextjs – Landing page template using Nestjs, shadcn/ui, TypeScript, Tailwind CSS
- shadcn-nextjs-free-boilerplate – Free & Open-source NextJS Boilerplate + ChatGPT API Dashboard Template
- shadcn-vue-landing-page – Landing page template using Vue, shadcn-vue, TypeScript, Tailwind CSS
- t3-app-template – This is the admin template for T3 Stack and shadcn/ui
- taxonomy – An open source application built using the new router, server components and everything new in Next.js
- turborepo-shadcn-ui-tailwindcss – Turborepo starter with shadcn/ui & Tailwind CSS pre-configured for shared ui components.
- turborepo-launchpad – A comprehensive monorepo boilerplate for shadcn projects using Turbo. It features a highly scalable setup ideal for developing complex applications with shared components and utilities.
Star History
Contributors
Thanks goes to all these wonderful people: