Skip to content

birobirobiro/awesome-shadcn-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation


logo of awesome-shadcn/ui repository

awesome-shadcn/ui

A curated list of awesome things related to shadcn/ui

Created by: birobirobiro.dev

Awesome

Libs and Components

Name Description Link
21st.dev Open source npm for shadcn/ui components. Also: Dribble for design engineers. Install UI components via shadcn CLI, or publish your own. Link
aceternity-ui Copy paste the most trending react components without having to worry about styling and animations. Link
assistant-ui React Components for AI Chat. Link
autocomplete-select-shadcn-ui Autocomplete component built with shadcn/ui and Fancy Multi Select by Maximilian Kaske. Link
auto-form A React component that automatically creates a shadcn/ui form based on a zod schema. Link
async-select Async Select component built with shadcn/ui with debounce search. Link
bundui A collection of reusable animated components built with Tailwind CSS and Framer Motion. Link
calendar React/shadcn full calendar like Google Calendar Link
capture-photo Browser-based React component for camera functionalities in web applications. Link
clerk-elements Composable components for building custom UIs on top of Clerk's APIs. Link
clerk-shadcn-theme Synchronize Clerk SignIn/SignUp components with shadcn/ui styles. Link
confirm-dialog A confirm dialog component built with shadcn/ui. Link
country-state-dropdown Component built with Nextjs, Tailwindcss, shadcn/ui & Zustand. Link
cult-ui Curated set of animated shadcn-style React components. Link
credenza Ready-made responsive modal component for shadcn/ui. Link
crypto-charts Crypto charts made for shadcn/ui using PythNetwork. Link
date-range-picker-for-shadcn Multi-month views, text entry, preset ranges, responsive design, and date range comparisons. Link
date-time-picker-shadcn Datetime Picker for shadNext Project. Link
datetime-picker Datetime picker with timezone support, min/max dates, and month/year selection. Link
dialog-stack Composable stacked dialogs for shadcn/ui Link
dnd-dashboard Dashboard with drop-to-swap layouts using Next.js, shadcn/ui, and swapy. Link
downshift-shadcn-combobox Combobox/autocomplete component built with shadcn/ui and Downshift. Link
drag-to-resize-sidebar Extended shadcn/ui sidebar component with persisted state drag-to-resize functionality. Link
druid/ui Intercom inspired AI chatbot and UI components built on shadcn/ui. Link
echo-editor Modern WYSIWYG rich-text editor based on tiptap and shadcn/ui. Link
edil-ozi React components with Gsap, framer motion, and tailwind. Link
emblor Customizable, accessible tag input component with shadcn/ui. Link
enhanced-button Enhanced version of the default shadcn-button component. Link
extend-ui Reusable components built on shadcn/ui for web applications. Link
fancy-area Textarea with @mention support inspired by GitHub's PR comment section. Link
fancy-box GitHub PR label selector-inspired Combobox with radix-ui components. Link
fancy-multi-select Multi Select Component inspired by campsite.design and cal.com. Link
fancy-switch Fancy switch component built with shadcn/ui. Link
farmui Styled and animated component library with npm package support. Link
file-uploader File uploader with shadcn/ui and react-dropzone. Link
file-vault File upload component for React. Link
floating-dragable-card Dragable and resizable card using shadcn/ui elements. Link
fusion-ui Library combining shadcn/ui and MagicUI. Link
gluestack-ui React & React Native Components with Tailwind CSS. Link
ibelick/background-snippet Ready to use collection of modern background snippets. Link
image-upload-shadcn Image upload component. Link
indie-ui UI components with variants. Link
inspira-ui UI components for animated interfaces in Vue/NuxtJS. Link
kokonut-ui Free Modern and Customizable components for Next.js. Link
launch-ui Landing page components with React, Shadcn/ui and Tailwind. Link
lingua-time Smart datetime picker with natural language input. Link
lukacho-ui Next Generation UI Components. Link
manfromexistence-ui Components to build beautiful designs. Link
magicui React components for landing pages with tailwindcss + framer motion. Link
maily.to Notion-like powerful email editor. Link
minimal-tiptap Minimal WYSIWYG editor with shadcn/ui and tiptap. Link
mixcnui Collection of animated components for Nextjs. Link
multi-selection Managing multi-selection functionality with highlighter. Link
mynaui TailwindCSS and shadcn/ui UI Kit for Figma and React. Link
neobrutalism-components Neobrutalism-styled Tailwind React and shadcn/ui components. Link
nextjs-components Next.js components with TypeScript and shadcn/ui. Link
nextjs-dnd Sortable Drag and Drop with Next.js and dnd-kit. Link
nextjs-link-pagination Pagination using Nextjs Links and search params. Link
next-shadcn-dashboard-starter Admin Dashboard Starter with Nextjs 14 and Shadcn UI. Link
next-stepper Dynamic multi-step form with Next.js and zustand. Link
novel Notion-style WYSIWYG editor with AI-powered autocompletion. Link
number-flow React component for number transitions and formatting. Link
origin-ui Beautiful UI components with Tailwind CSS and Next.js. Link
password-input shadcn/ui custom password input. Link
payment-gateways Integration of payment gateways with Next.js 14. Link
phone-input-shadcn-ui Custom phone number component with shadcn/ui. Link
planner Adaptable scheduling component for React. Link
plate AI-powered rich-text editor. Link
plate-select-editor Rich multi-select editor. Link
pqoqubbw Open-source animated icons collection. Link
pricing-page-shadcn Customizable pricing page with Next.js 14. Link
progress-button Extended button component with progress UX. Link
react-dnd-kit-tailwind-shadcn-ui Accessible kanban board with dnd-kit. Link
react-highlight-popover Headless component for text selection popovers. Link
react-pdf-flipbook-viewer PDF flipbook viewer with zoom and fullscreen. Link
react-select React-select library with shadcn styling. Link
recursive-dnd-kanban-board Recursive drag and drop kanban board. Link
roadmap-ui Components for interactive roadmaps. Link
search-address Interactive address search using OpenStreetMap. Link
shadcn-address-autocomplete Address autocomplete with Google Places API. Link
shadcn-admin Admin Dashboard UI with shadcn/ui and Vite. Link
shadcn-blocks Official pre-made customizable components. Link
shadcn-cal Cal.com monthly calendar replica with shadcn/ui. Link
shadcn-calendar-heatmap Modern calendar heatmap alternative. Link
shadcn-calendar-component Calendar date picker component. Link
shadcn-chat Customizable chat component. Link
shadcn-carousel-testimonials Carousel Testimonials component. Link
shadcn-chatbot-kit Customizable chatbot components. Link
shadcn-color-picker Color picker with react-color. Link
shadcn-cookie-consent Customizable cookie consent component. Link
shadcn-country-dropdown ISO 3166 country selector dropdown. Link
shadcn-data-table-advanced-col-opions DataTable with column resizing. Link
shadcn-date-picker Advanced date picker with various features. Link
shadcn-drag-table Drag-and-drop table component. Link
shadcn-dropzone File upload component using React-Dropzone, built with accessibility in mind. Link
shadcn-editor Lexical editor with shadcn theme. Link
shadcn-extends Collection of shadcn/ui components. Link
shadcn-extension Open-source component collection. Link
shadcn-image-cropper Image cropper with react-image-crop. Link
shadcn-linear-combobox Linear-style task priority combobox. Link
shadcn-multi-select-component Multi-select component. Link
shadcn-number-scrubber Draggable numeric input component. Link
shadcn-phone-input-2 Phone input with libphonenumber-js. Link
shadcn-phone-input Phone input with country validation. Link
shadcn-pricing-page Responsive pricing component with toggles. Link
shadcn-spinner Spinner component. Link
shadcn-stepper Complete stepper component. Link
shadcn-table-maker Tool for creating dynamic tables. Link
shadcn-table-v2 Table with server-side features. Link
shadcn-timeline Customizable timeline component. Link
shadcn-timeline-2 Alternative timeline component. Link
shadcn-tiptap Custom Tiptap editor extensions. Link
shadcn-tree-view Hierarchical data component. Link
shadcn-ui-blocks Collection of responsive UI blocks. Link
shadcn-ui-expansions Additional useful components. Link
shadcn-ui-sidebar Retractable responsive sidebar. Link
shadcn-ui-templates Free & Premium templates collection. Link
shaduxe-ui Component variants for shadcn/ui. Link
simple-ai Components and blocks to easily build AI apps Link
simplekit Wallet and account component for Wagmi. Link
solanauth Solana wallet authentication modal. Link
sortable Sortable component with dnd-kit. Link
spectrum-ui Collection using Aceternity UI Magic UI. Link
stocks Stock Picker with Next.js charts. Link
stunning-ui Interactive Tailwind components for Vue. Link
supabase-shadcn-database-example supabase + shadcn/ui datatable Link
supercharged-shadcn-components Type-safe form components collection. Link
time-picker Simple TimePicker component. Link
tremor-raw Components for charts and dashboards. Link
twblocks Website blocks based on shadcn & Radix. Link
tweet-to-code Twitter design recreations as code. Link
ui-beats Animated React Components collection. Link
uixmat/onborda Product tour for Next.js applications. Link
vaul Drawer component for React. Link
zoom-charts Zoomable Charts with shadcn/ui. Link

Plugins and Extensions

Name Description Link
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. Link
designgui A Chrome Browser Extension for managing colors in CSS Variables. Link
raycast-shadcn Raycast extension to Browse shadcn/ui documentation, components, and examples. Link
shadcn-hsl-preview shadcn HSL Preview extension for Visual Studio Code. Link
shadcn-ui Add components from shadcn/ui directly from VS Code. Link
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. Link
vscode-shadcn-svelte VS Code extension for shadcn/ui components in Svelte projects. Link
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. Link
vscode-shadcn-vue Extension for integrating shadcn/ui components into Vue.js projects. Link

Colors and Customizations

Name Description Link
10000+Themes for shadcn/ui 10000+ Themes for shadcn/ui. Link
dizzy Bootstrap a new Next or Vite project with shadcn/ui. Customize font, icons, colors, spacing, radii, and shadows. Link
ewgenius/ui Create custom themes for shadcn/ui effortlessly using vibrant palettes from Radix Colors. Link
gradient-picker Fancy Gradient Picker built with shadcn/ui, Radix UI, and Tailwind CSS. Link
navnote/rangeen Tool that helps you to create a colour palette for your website. Link
shadesigner.com A shadcn/ui Palette Generator & Theme Designer with a beautiful interface. Link
shadcn-ui-customizer POC - shadcn/ui themes with color pickers. Link
shadcn theme editor Shadcn Theme Editor is a user-friendly component designed to simplify the process of managing and customizing theme colors in Shadcn-based projects. Link
ui-colorgen An application designed to assist you with color configuration of shadcn/ui. Link
zippy starter's shadcn/ui theme generator Easily create custom themes from a single colour that you can copy and paste into your apps. Link

Animations

Name Description Link
animata Hand-crafted โœ๏ธ interaction animations and effects from around the internet ๐Ÿ›œ to copy and paste into your project. Link
magicui.design Largest collection of open-source react components to build beautiful landing pages. Link
motionvariants Beautiful Framer Motion Animations. Link
tailwindcss-motion A new simple syntax animation library. Batteries included. Infinitely configurable. Link

Tools

Name Description Link
5devs A website to get fake Brazilian data for testing purposes. Link
ai-generator-shadcn-theme AI Shadcn Theme Generator, The AI Shadcn Theme Generator crafts stunning, consistent themes for your shadcn/ui projects in seconds. Link
bento-hub BentoHub is an application where you can create a bento grid for your GitHub profile readme. Link
cut-it Link shortener built using Next.js App Router, Server Actions, Drizzle ORM, Turso, and styled with shadcn/ui. Link
country-data-in-charts Globe Graph is a web app that visualizes countries' data like GDP, GDP per capita, and population in different years using many charts. Link
dev-quotes A website that displays quotes from professional programmers. Link
down-dev-detector This app lists all the services currently down and uses Atlassian Status Page and others (soon). Link
cv-forge Resume builder built with @shadcn/ui, react-hook-form, and react-pdf. Link
excelkits Create free downloadable Shadcn-themed chart images. Supports PNG, JPEG, WEBP, and even WEBM videos. Upload your own data for more realistic designs. Link
form-builder UI-based codegen tool to easily create beautiful and type-safe @shadcn/ui forms. Link
form-builder-fast Shadcn Form Builder - Build forms in minutes for free. Link
hook-again A collection of shadcn/ui installable React Hooks. Link
imgsrc Generate beautiful Open Graph images with zero effort. Link
invoify An invoice generator app built using Next.js, TypeScript, and shadcn/ui. Link
jobsync JobSync is a job seekers' assistant to manage job search efficiently. Link
memfree Open-source hybrid AI search engine, instantly get accurate answers from the internet, bookmarks, notes, and docs. Built using Next.js and shadcn/ui. Link
myinstants The largest instant sound buttons website in Brazil! Link
opensearch-ai SearchGPT/Perplexity clone but personalized for you. Link
pagegen.ai An AI Page Generator with Claude AI, React, and shadcn/ui. Generate web pages from text, screenshots, and templates with one click. Link
pastecode Pastebin alternative built with TypeScript, Next.js, Drizzle, shadcn/ui, and RSC. Link
postgres The in-browser Postgres sandbox with AI assistance. Link
proxmox-helper-scripts A catalog of scripts for your Proxmox VE homelab, built with the Next.js App Router and styled with shadcn/ui. Link
quack-db Open-source in-browser DuckDB SQL editor. Link
qualmeuip Find out your IP address and test your internet speed. Link
shadcn-form-builder Create forms with Shadcn, react-hook-form, and Zod within minutes. Link
shadcn-pricing-page-generator The easiest way to get a React pricing page with shadcn/ui, Radix UI, and/or Tailwind CSS. Link
shadcn-theme-editor Shadcn Theme Editor is a user-friendly component designed to simplify the process of managing and customizing theme colors in Shadcn-based projects. Link
shadcn-zod-form CLI tool to generate shadcn/ui forms from Zod schemas. Link
sharable-form-builder A sharable form builder for creating forms and sharing your form link, based on shadcn/ui and Next.js. Link
someday Free to host and open-source Cal.com/Calendly alternative built on Google Apps Script for Gmail users. Link
tinte An opinionated VS Code Theme Generator ๐ŸŽจ. Link
translate-app Translate App using TypeScript, Tailwind CSS, NextJS, Bun, shadcn/ui, AI SDK/OpenAI, and Zod. Link
typelabs MonkeyType-inspired typing test app built with React, shadcn, and Zustand at its core. Link
ui-builder A React component editor that provides a no-code, visual way to create UIs, fully compatible with shadcn/ui and custom components. Link
ui-fonts Test and preview fonts in real-time for all your design needs. Choose the perfect typeface with ease. Link
v0 Vercel's generative UI system, built on shadcn/ui and TailwindCSS, allows effortless UI generation from text prompts and/or images. Link
vercel-status-tracker Track the status of all of your projects deployed via Vercel. Built with shadcn/ui and TailwindCSS. Link
wallhaven-desktop Wallhaven Wallpaper software desktop. Create a Wallhaven API-based client, a true wallpaper software. Link
xuneix A link rotation tool for enhanced admin panel security. Includes dynamic URLs, expiring tokens, customizable rotation. Link

Websites and Portfolios Inspirations

Name Description Link
andrewsam.xyz A revamped version of the popular tailwind-nextjs-starter-blog using shadcn/ui, along with a resume section and experience timeline component. Link
birobirobiro.dev A personal developer portfolio. Link
godly Astronomically good web design inspiration. Only the best of the best. Link
list.swajp.me It has never been easier to find the right projects or designs by inspiring successful people. Link
Nathan's AI An AI Chatbot acting as a portfolio, built with shadcn/ui components. Link
shubhporwal.me An eye-catching developer portfolio, built on NextJS, GSAP, Tailwind, and React. Link
swajp.me A visually appealing portfolio and resource hub. Link

Platforms

Name Description Link
anonypost Share your thoughts and experiences anonymously by posting on the platform. Crafted using t3-stack. Link
bolhadev The quickest path to learn English is speaking it regularly. Just find someone to chat with. Link
crept-studio Crept is a free Open Source project, made on top of Next.js, Tailwind CSS, and Shadcn UI. You can use it to deliver free TV shows and movies. Link
enjoytown A free anime, manga, movie, and TV-shows streaming platform. Built with Next.js, shadcn/ui. Link
grade-calculator A grade calculator/dashboard for students, aiming to provide a better overview of academic performance. Link
infinitunes A simple music player web app built using Next.js, shadcn/ui, Tailwind CSS, Drizzle ORM, and more. Link
kd Ad-free Kdrama streaming app. Built with Next.js, Drizzle ORM, NeonDB, and shadcn/ui. Link
memergez Quickly generate memes by entering text or an avatar URL, with support for many meme commands. Link
midday-components A collection of open-source components based on Midday features. Link
plotwist Easy management and reviews of your movies, series, and animes using Next.js, Tailwind CSS, Supabase, and shadcn/ui. Link

Ports

Name Description Link
Angular Angular port of shadcn/ui. Link
Flutter Flutter port of shadcn/ui. Link
Franken UI HTML-first, framework-agnostic, beautifully designed components that you can truly copy and paste into your site. Accessible. Customizable. Open Source. Link
JollyUI shadcn/ui compatible react aria components. Link
Kotlin Kotlin port of shadcn/ui. Link
Phoenix Liveview Phoenix Liveview port of shadcn/ui. Link
React Native React Native port of shadcn/ui. Link
React Native (recommended) React Native port of shadcn/ui (recommended). Link
Ruby Ruby port of shadcn/ui. Link
Solid Solid port of shadcn/ui. Link
Svelte Svelte port of shadcn/ui. Link
Swift Swift port of shadcn/ui. Link
Sysinfocus simple/ui Razor component library for Blazor, inspired by shadcn/ui. Link
Vue Vue port of shadcn/ui. Link

Design System

Name Description Link
shadcn-ui-components Every component recreated in Figma. Link
shadcn-ui-storybook (JheanAntunes) All shadcn/ui components registered in the storybook by JheanAntunes. Link
shadcn-ui-storybook (fellipeutaka) All shadcn/ui components registered in the storybook by fellipeutaka. Link

Boilerplates / Templates

Name Description Link
autoflow An open source GraphRAG (Knowledge Graph) built on top of TiDB Vector, LlamaIndex, and DSPy. Demo site. Link
browser-extension-starter-plasmo-shadcn-trpc Browser extension starter kit featuring Plasmo, React, Shadcn, and tRPC. Link
chadnext Quick Starter Template includes Next.js 14 App Router, shadcn/ui, LuciaAuth, Prisma, Server Actions, Stripe, Internationalization, and more. Link
cloudflare-saas-stack An opinionated, batteries-included starter kit for quickly building and deploying SaaS products on Cloudflare. Link
create-tauri-core A project template for creating a Tauri app with Vite, React, and Tailwind CSS. Link
design-system-template Turborepo + TailwindCSS + Storybook + shadcn/ui. Link
easy-ui 50+ High Quality Open Source Website Templates built using NextJS + shadcn/ui + Tailwind CSS + Framer Motion and more. Link
electron-shadcn Electron app template with shadcn/ui and a bunch of other libs and tools ready to use. Link
horizon-ai-nextjs-shadcn-boilerplate Premium AI NextJS & shadcn/ui Boilerplate + Stripe + Supabase + OAuth. Link
kirimase A template and boilerplate for quickly starting your next project with shadcn/ui, Tailwind CSS, and Next.js. Link
magicui-startup-templates Magic UI Startup template built using shadcn/ui + TailwindCSS + Framer Motion. Link
nextMotion Webdev portfolio template with Nodemailer integrated for easy contact form setup. Uses shadcn/ui + TailwindCSS + Framer Motion. Link
next-shadcn-dashboard-starter Admin Dashboard Starter with Next.js 14 and shadcn/ui. Link
next-starter A Next.js starter template packed with features like TypeScript, TailwindCSS, Next-auth, Eslint, Stripe, testing tools, and more. Jumpstart your project with efficiency and style. Link
nextjs-mdx-blog Starter template built with Contentlayer, MDX, shadcn/ui, and Tailwind CSS. Link
next-js-views-template An open-source collection of reusable view components like Calendar, Table, etc., built with Next.js and ShadCN. Easily copy and paste these pre-built UI elements into your project for fast, responsive, and customizable layouts. Link
next-wp Headless Wordpress Starter built with the NextJS App Router and React Server Components. Link
onyx Full stack, batteries-included MVP Template with NextJS 14, Supabase SSR Auth & Postgres DB with CRUD operations, RBAC, Tanstack React Query, Zod Validation, MDX components, Resend, and more. Link
opendocs Beautifully designed template that you can use for your projects for free. Accessible. Customizable. Open Source with i18n support. Link
react-vite-starter React starter powered with Vite + Redux Toolkit + RTKQuery + React Router + shadcn UI and many more. Link
shadcn-landing-page Landing page template using shadcn/ui, React, TypeScript, and Tailwind CSS. Link
shadcn-landing-page (Vue) Project conversion shadcn-vue-landing-page to Next.js - Landing page template using Nestjs, shadcn/ui, TypeScript, and Tailwind CSS. Link
shadcn-nextjs-free-boilerplate Free & Open-source NextJS Boilerplate + ChatGPT API Dashboard Template. Link
shadcn-registry-template Template repository for building a custom component registry for shadcn/ui. Link
shadcn-vue-landing-page Landing page template using Vue, shadcn-vue, TypeScript, and Tailwind CSS. Link
shadcn-next-workflows Interactive workflow builder using React Flows, Next.js, and Shadcn/ui. Create, connect, and validate custom nodes easily. Link
supa-next-shad-auth A fully responsive, fully type-safe, secure server actions, user-friendly customizable UI with best practices. Tech used: NextJS + Supabase + TypeScript + Server Actions + Zod + shadcn/ui. Link
t3-app-template Admin template for T3 Stack and shadcn/ui. Link
taxonomy An open-source application built using the new router, server components, and everything new in Next.js. Link
template-next A clean Next.js template with TypeScript, TailwindCSS, Shadcn/ui, and Prettier. Link
turborepo-shadcn-ui-tailwindcss Turborepo starter with shadcn/ui & TailwindCSS pre-configured for shared UI components. Link
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. Link
wordpress-plugin-boilerplate WordPress Plugin Boilerplate utilizing modern web technologies and tools such as React, TypeScript, SASS, TailwindCSS, Shadcn UI, Vite, Grunt.js, Storybook, HMR, and more. Link

Star History

Star History Chart

Contributors

Thanks goes to all these wonderful people: