├── LICENSE
├── README.md
└── assets
├── awesome-logo.svg
└── awesome-shadcn-ui.jpg
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 bytefer
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Awesome Shadcn UI
5 | A curated list of awesome things related to shadcn/ui
6 |
7 |
14 |
15 | ## Saas
16 | | Name | Description | Link |
17 | |------|-------------|------|
18 | | Next Saas Starter | Get started quickly with Next.js, Postgres, Stripe, and shadcn/ui. | https://github.com/leerob/next-saas-starter |
19 | | SaaS Boilerplate | SaaS Boilerplate built with Next.js + Tailwind CSS + Shadcn UI + TypeScript. ⚡️ Full-stack React application with Auth, Multi-tenancy, Roles & Permissions, i18n, Landing Page, DB, Logging, Testing. | https://github.com/ixartz/SaaS-Boilerplate |
20 | | Cloudflare SaaS Kit | An opinionated, batteries-included starter kit for quickly building and deploying SaaS products on Cloudflare. | https://github.com/Dhravya/cloudflare-saas-stack |
21 | | Saasfly | An easy-to-use and enterprise-grade Next.js boilerplate. | https://github.com/saasfly/saasfly |
22 | | Next Saas Stripe Starter | Open-source SaaS Starter with User Roles & Admin Panel. Built using Next.js 14, Prisma, Neon, Auth.js v5, Resend, React Email, Shadcn/ui, Stripe, Server Actions. | https://github.com/mickasmt/next-saas-stripe-starter |
23 | | Relivator Nextjs Template | Build More Efficient, Engaging, and Profitable Online Stores: Relivator Enhances your eCommerce with the Power of shadcn/ui, Next.js 15, React 19, and more. | https://github.com/blefnk/relivator-nextjs-template |
24 | | Nextjs Starter Kit | The Ulimate Nextjs Starter Kit. Build your next SAAS product of your dreams. Batteries included. | https://github.com/michaelshimeles/nextjs-starter-kit |
25 | | Rapidlaunch | Beautiful Next.js SaaS Starterkits, Blocks and guides. Built using Shadcn ui, Next.js 14, DrizzleORM, Resend, and more. | https://github.com/alifarooq9/rapidlaunch |
26 | | Next Supbase Stripe Starter | The highest quality SaaS starter with Next.js, Supabase, Stripe, and shadcn/ui. | https://github.com/KolbySisk/next-supabase-stripe-starter |
27 | | Cella | TypeScript template to build local-first SaaS with hono + pg + drizzle + electric-sql + react + shadcn. | https://github.com/cellajs/cella |
28 | | Hikari | A complete & open source Nextjs.14, Stripe and Supabase SaaS Starter Template using App Router. | https://github.com/antoineross/Hikari |
29 | | Firestarta | Next.js SaaS boilerplate with NextAuth, Prisma, Supabase, Shadcn/ui & Lemon Squeezy Subscriptions. | https://github.com/uixmat/firestarta |
30 | | SaasHQ | Saas CRM/ERP Starter Kit for Nextjs Prisma and Postgres. An excellent resource for buildnig things in Nextjs. | https://github.com/saashqdev/saashq |
31 | | Convex SaaS | A production-ready Convex Stack for your next SaaS application with Convex Auth, Stripe, TanStack, Resend, Tailwindcss, and shadcn. | https://github.com/get-convex/convex-saas |
32 | | Next Money Stripe Starter | Empower your next project with the stack of Next.js 14, Prisma, Supabase, Clerk Auth, Resend, React Email, Shadcn/ui, and Stripe. | https://github.com/virgoone/next-money |
33 |
34 | ## UI Libs
35 | | Name | Description | Link |
36 | |------|-------------|------|
37 | | Aceternity UI | Copy paste the most trending components and use them in your websites without having to worry about styling and animations. | https://ui.aceternity.com/ |
38 | | Magic UI | UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. | https://github.com/magicuidesign/magicui |
39 | | Magic UI Pro | 50+ beautiful sections and templates built with React, Typescript, Tailwind CSS, and Framer Motion. | https://pro.magicui.design/?ref=bytefer |
40 | | Horizon UI | The trendiest & innovative Open Source Admin Template for Chakra UI & React. | https://github.com/horizon-ui/horizon-ui-chakra |
41 | | Assistant UI | React Components for AI Chat 💬 🚀. | https://github.com/Yonom/assistant-ui |
42 | | Cult UI | Components crafted for Design Engineers. Styled using Tailwind CSS, fully compatible with Shadcn, and easy to integrate—just copy and paste. | https://github.com/nolly-studio/cult-ui |
43 | | Eldora UI | Eldora UI is a collection of re-usable components that you can copy and paste into your web apps. | https://github.com/karthikmudunuri/eldoraui |
44 | | Page UI | Landing page UI components for React & Next.js, built on top of TailwindCSS. | https://github.com/danmindru/page-ui |
45 | | Tremor Raw | Copy & paste React components to build modern web applications. Good for building charts. | https://github.com/tremorlabs/tremor-raw |
46 | | Syntax UI | Get free access to pre-built, Tailwind CSS-powered components, animations and effects - brought to life using Framer Motion. | https://github.com/SyntaxUI/syntaxui |
47 | | JollyUI | shadcn/ui compatible react aria components. | https://github.com/jolbol1/jolly-ui |
48 | | Fusion UI | Fusion UI library combining Shadcn/UI and MagicUI. Featuring 150+ free and open-source components. | https://github.com/nyxb-ui/ui |
49 | | Farm UI | FarmUI is client first and animation rich ui component library built on top of radix and shadcn as well other primitive providers that we would like to cover. | https://github.com/kinfe123/farm-ui |
50 | | Indie UI | Indie UI is a free collection of UI components for building web applications. It is built with React and Tailwind CSS. | https://github.com/Ali-Hussein-dev/indie-ui |
51 | | Mixcn UI | 20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. | https://github.com/taqui-786/mixcnui |
52 | | Edil Ozi | Component Library for Developers. Open Source components you can copy and paste to your apps. | https://github.com/Edil-ozi/edil-ozi |
53 | | Bundui | A collection of components that you can copy and paste into your applications. Built with Tailwind CSS and Framer Motion. | https://github.com/bundui/components |
54 | | Lukacho UI | Next Generation UI Components. | https://ui.lukacho.com/components |
55 | | Myna UI | TailwindCSS and shadcn/ui UI Kit for Figma and React. | https://mynaui.com/ |
56 |
57 | ## Templates
58 | | Name | Description | Link |
59 | |------|-------------|------|
60 | | autoflow | pingcap/autoflow is a Graph RAG based and conversational knowledge base tool built with TiDB Serverless Vector Storage. | https://github.com/pingcap/autoflow |
61 | | Magic UI Mobile Template | Features interactive app previews, smooth animations, and mobile-first design. Includes customizable sections for features, benefits, pricing, and app store integration. | https://pro.magicui.design/?ref=bytefer |
62 | | taxonomy | An open source application built using the new router,server components and everything new in Next.js. | https://github.com/shadcn/taxonomy |
63 | | kirimase | A template and boilerplate for quickly starting your next project with shadcn/ui,Tailwind CSS,and Next.js. | https://github.com/nicoalbanese/kirimase |
64 | | next-shadcn-dashboard-starter | Admin Dashboard Starter with Next.js 14 and shadcn/ui. | https://github.com/Kiranism/next-shadcn-dashboard-starter |
65 | | NextMaster | A highly performant e-commerce template using Next.js. | https://github.com/ethanniser/NextFaster |
66 | | shadcn-landing-page | Landing page template using shadcn/ui,React,Typescript and Tailwind CSS. | https://github.com/leoMirandaa/shadcn-landing-page |
67 | | chadnext | Quick Starter Template includes Next.js 14 App router,shadcn/ui,LuciaAuth,Prisma,Server Actions,Stripe,Internationalization and more. | https://github.com/moinulmoin/chadnext |
68 | | Landing page boilerplate | A versatile landing page boilerplate, ideal for various projects and marketing campaigns. | https://github.com/weijunext/landing-page-boilerplate |
69 | | next-starter | A Next.js starter template,packed with features like TypeScript,Tailwind CSS,Next-auth,Eslint,Stripe,testing tools and more. Jumpstart your project with efficiency and style. | https://github.com/Skolaczk/next-starter |
70 | | next-wp | Headless Wordpress Starter built with the NextJS App Router and React Server Components | https://github.com/9d8dev/next-wp |
71 | | nextjs-mdx-blog | Starter template built with Contentlayer,MDX,shadcn/ui,and Tailwind CSS. | https://github.com/ChangoMan/nextjs-mdx-blog |
72 | | shadcn-nextjs-free-boilerplate | Free & Open-source NextJS Boilerplate + ChatGPT API Dashboard Template | https://github.com/horizon-ui/shadcn-nextjs-boilerplate |
73 | | shadcn-landing-page | New design 🎉 Nextjs + Shadcn + TypeScript + Tailwind. | https://github.com/nobruf/shadcn-landing-page |
74 | | t3-app-template | This is the admin template for T3 Stack and shadcn/ui | https://github.com/gaofubin/t3-app-template |
75 | | easy-ui | 50+ High Quality Open Source Website Templates built using NextJS + shadcn/ui + Tailwind CSS + Framer Motion and more. | https://github.com/DarkInventor/easy-ui |
76 | | design-system-template | Turborepo + TailwindCSS + Storybook + shadcn/ui | https://github.com/arevalolance/design-system-template |
77 | | electron-shadcn | Electron app template with shadcn/ui and a bunch of other libs and tools ready to use. | https://github.com/LuanRoger/electron-shadcn |
78 | | shadcn-vue-landing-page | Landing page template using Vue,shadcn-vue,TypeScript,Tailwind CSS | https://github.com/leoMirandaa/shadcn-vue-landing-page |
79 | | 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. | https://github.com/rmourey26/onyx |
80 | | opendocs | Beautifully designed template that you can use for your projects for free. Accessible. Customizable. Open Source with i18n support. | https://github.com/daltonmenezes/opendocs |
81 | | nextMotion | Webdev portfolio template with nodemailer integrated for easy contact form setup. Uses shadcn/ui + tailwindcss + framer-motion. | https://github.com/yoyocharlie/nextMotion |
82 | | turborepo-shadcn-ui-tailwindcss | Turborepo starter with shadcn/ui & Tailwind CSS pre-configured for shared ui components. | https://github.com/henriqpohl/turborepo-shadcn-ui-tailwindcss |
83 | | 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. | https://github.com/JadRizk/turborepo-launchpad |
84 | | supa-next-shad-auth | A fully responsive,fully type safe,secure server actions,user friendly customizable UI with following best practices. Tech used: NextJS + Supabase + TypeScript + Server Actions + Zod + shadcn/ui. | https://github.com/Sahil-Sharma-23/supa-next-shad-auth |
85 | | wordpress-plugin-boilerplate | WordPress Plugin Boilerplate utilizing modern web technologies and tools such as React,TypeScript,SASS,Tailwind CSS,Shadcn UI,Vite,Grunt.js,Storybook,HMR and more. | https://github.com/prappo/wordpress-plugin-boilerplate |
86 | | shadcn-registry-template | Template repository for building a custom component registry for shadcn/ui. | https://github.com/vantezzen/shadcn-registry-template |
87 | | create-tauri-core | A project template for creating a Tauri app with Vite,React,and Tailwind CSS. | https://github.com/mrlightful/create-tauri-core |
88 | | Shadcn UI Templates | A collection of Free & Premium templates and resources for shadcn/ui. | https://shadcnui-templates.com |
89 | | horizon-ai-nextjs-shadcn-boilerplate | Premium AI NextJS & shadcn/ui Boilerplate + Stripe + Supabase + OAuth | https://horizon-ui.com/boilerplate-shadcn |
90 | | template-next | A clean Next.js template with TypeScript,TailwindCSS,Shadcn/ui,and Prettier. | https://template-next-official.vercel.app/ |
91 |
92 | ## Components
93 | | Name | Description | Link |
94 | |------|-------------|------|
95 | | Shadcn UI Sidebar | A composable, themeable and customizable sidebar component. | https://ui.shadcn.com/docs/components/sidebar |
96 | | Novel | Notion-style WYSIWYG editor with AI-powered autocompletion. | https://github.com/steven-tey/novel |
97 | | Plate | Rich-text editor with shadcn/ui. | https://github.com/udecode/plate |
98 | | Vaul | A drawer component for React. | https://github.com/emilkowalski/vaul |
99 | | Number Flow | A React component to transition, format, and localize numbers. | https://github.com/barvian/number-flow |
100 | | Auto Form | Automatically render forms for your existing data schema. | https://github.com/vantezzen/autoform |
101 | | next-stepper | A dynamic multi-step form. Built with: Next.js, shadcn/ui,zustand, framer-motion. | https://github.com/ebulku/next-stepper |
102 | | Form Builder | A dynamic form-building tool that allows users to create, customize, and validate forms seamlessly within web applications. | https://github.com/hasanharman/form-builder |
103 | | Shadcn Table V2 | shadcn/ui table component with server-side sorting, filtering, and pagination. | https://github.com/sadmann7/shadcn-table |
104 | | Neobrutalism Components | Collection of neobrutalism-styled Tailwind components. | https://github.com/ekmas/neobrutalism-components |
105 | | Maily.to | Powerful editor for creating beautiful, pre-designed, mobile-ready emails. | https://github.com/arikchakma/maily.to |
106 | | Background Snippet | Ready to use collection of modern background snippets. | https://github.com/ibelick/background-snippets |
107 | | Shadcn UI Sidebar | A stunning, functional and responsive retractable sidebar built on top of shadcn/ui. | https://github.com/salimi-my/shadcn-ui-sidebar |
108 | | Shadcn UI Expansions | More components built on top of shadcn-ui. | https://github.com/hsuanyi-chou/shadcn-ui-expansions |
109 | | Shadcn UI Blocks | A collection of customized Shadcn UI components and blocks that you can copy and paste into your applications. | https://github.com/akash3444/shadcn-ui-blocks |
110 | | Stepperize | A library for creating step-by-step workflows in your apps. | https://github.com/damianricobelli/stepperize |
111 | | Onborda | An onboarding wizard flow / product tour for Next.js animated by framer motion | https://github.com/uixmat/onborda |
112 | | File Uploader | File uploader built with shadcn/ui and react-dropzone. | https://github.com/sadmann7/file-uploader |
113 | | Fancy Area | The Textarea is inspired by GitHub's PR comment section. The impressive part is the @mention support including hover cards in the preview. | https://craft.mxkaske.dev/post/fancy-area |
114 | | Fancy Box | The Combobox is inspired by GitHub's PR label selector and is powered by shadcn/ui. Almost all elements are radix-ui components, styled with tailwindcss. | https://craft.mxkaske.dev/post/fancy-box |
115 | | Fancy Multi Select | The Multi Select Component is inspired by campsite.design's and cal.com's settings forms. | https://craft.mxkaske.dev/post/fancy-multi-select |
116 | | Shadcn Extension | An open source component collection , that extends your ui library , built using shadcn component | https://github.com/BelkacemYerfa/shadcn-extension |
117 | | Emblor | A fully-featured tag input component built with shadcn/ui. | https://github.com/JaleelB/emblor |
118 | | Date Range Picker | DateRangePicker includes preset date ranges, text entry, calendar selection and date comparison. | https://github.com/johnpolacek/date-range-picker-for-shadcn |
119 | | Time Picker | A simple TimePicker for your shadcn/ui project. | https://github.com/openstatusHQ/time-picker |
120 | | Shadcn Minimal Tiptap | Minimal Tiptap Editor | https://github.com/Aslam97/shadcn-minimal-tiptap |
121 | | Shadcn Multi Select Component | A multi-select component designed with shadcn/ui | https://github.com/sersavan/shadcn-multi-select-component |
122 | | Credenza | Ready-made responsive modal component for shadcn/ui. | https://github.com/redpangilinan/credenza |
123 | | Shadcn Phone Input | Customizable phone input component with proper validation for any country. Built on top of shadcn. | https://github.com/omeralpi/shadcn-phone-input |
124 | | Dnd-Kit Shadcn UI | Drag and drop Accessible kanban board implementing using React, @dnd-kit, tailwind and shadcn/ui. | https://github.com/Georgegriff/react-dnd-kit-tailwind-shadcn-ui |
125 | | dialog-stack | Composable stacked dialogs for shadcn/ui. | https://github.com/haydenbleasel/dialog-stack |
126 | | Enhanced Button | An enhanced version of the default shadcn-button component. | https://github.com/jakobhoeg/enhanced-button |
127 | | Sortable | A sortable component built with shadcn/ui, radix ui, and dnd-kit. | https://github.com/sadmann7/sortable |
128 | | Zoom Charts | Zoomable Charts on top of shadcn/ui Charts. | https://github.com/shelwinsunga/zoom-chart-demo |
129 | | File Vault | File upload component for React. | https://github.com/ManishBisht777/file-vault |
130 | | Shadcn Cal Com | A copy of the monthly calendar used by Cal.com with shadcn/ui, Radix Colors and React Aria. | https://github.com/damianricobelli/shadcn-cal-com |
131 | | Stocks | Stock Picker using Next.js, React Server Components, and shadcn/ui charts. | https://github.com/aryanvichare/stocks |
132 | | Shadcn Image Cropper | Image cropper built with shadcn/ui and react-image-crop | https://github.com/sujjeee/shadcn-image-cropper |
133 | | Planner | Planner is a highly adaptable scheduling component tailored for React applications. | https://github.com/UretzkyZvi/planner |
134 | | Echo Editor | A modern WYSIWYG rich-text editor base on tiptap and shadcn-ui. | https://github.com/Seedsa/echo-editor |
135 | | Shadcn Address Autocomplete | An address autocomplete component built with Google Places API and shadcn components. | https://github.com/NiazMorshed2007/shadcn-address-autocomplete |
136 | | Shadcn Tiptap | Collection of custom extensions and toolbars for Tiptap editor. | https://github.com/NiazMorshed2007/shadcn-tiptap |
137 | | Shadcn Linear Combobox | A copy of the combobox that Linear uses to set the priority of a task. | https://github.com/damianricobelli/shadcn-linear-combobox |
138 | | Country State Dropdown | This Component is built with Nextjs, Tailwindcss, Shadcn-ui & Zustand for state management. | https://github.com/Jayprecode/country-state-dropdown |
139 | | Pricing Page Shadcn | Pricing Page template made with Shadcn UI & Next.js 14. Completely customizable | https://github.com/m4nute/pricing-page-shadcn |
140 | | Lingua Time | A smart datetime picker which understands natural language input. | https://github.com/nainglinnkhant/lingua-time |
141 | | Nextjs Dnd | Sortable Drag and Drop with Next.js, Shadcn UI, and DnD-Kit. | https://github.com/sujjeee/nextjs-dnd |
142 | | Shadcn Calendar Component | A calendar date picker component designed with shadcn/ui. | https://github.com/sersavan/shadcn-calendar-component |
143 | | Search Address | The SearchAddress component provides a flexible and interactive search interface for addresses, utilizing the powerful Nominatim service from OpenStreetMap. | https://github.com/UretzkyZvi/search-address |
144 | | Capture Photo | Capture-Photo is a versatile, browser-based React component designed to streamline the integration of camera functionalities directly into your web applications. | https://github.com/UretzkyZvi/capture-photo |
145 | | React Fancy Switch | React Fancy Switch | https://github.com/Aslam97/react-fancy-switch |
146 | | Shadcn Datetime Picker | Beautifully crafted datetime picker component using shadcn ui | https://github.com/Maliksidk19/shadcn-datetime-picker |
147 | | Crypto Charts | A demo show casing shacn/ui charts with free historical crypto data from pyth. | https://github.com/jstnw10/crypto-charts |
148 | | Shadcn Calendar Heatmap | Modern alternative to primitive react heatmaps built on top of shadcn/ui calendar component. | https://github.com/gurbaaz27/shadcn-calendar-heatmap |
149 | | Shadcn Cookie Consent | Beautifully designed, customizable cookie consent for web built on top of shadcn-ui and tailwind-css! | https://github.com/r2hu1/shadcn-cookie-consent |
150 | | Dnd Dashboard | A beautiful, performant dashboard with drop-to-swap layouts built using Next.js, shadcn/ui, and swapy. | https://github.com/olliethedev/dnd-dashboard |
151 | | React Confirm Dialog | React Confirm Dialog | https://github.com/Aslam97/react-confirm-dialog |
152 | | Shadcn Timeline | Customizable and re-usable timeline component for you to use in your projects. Built on top of shadcn. | https://github.com/timDeHof/shadcn-timeline |
153 | | Image Upload Shadcn | Image upload component | https://github.com/kushagrasarathe/image-upload-shadcn |
154 | | Phone Input Shadcn UI | Custom phone number component built with shadcn/ui. | https://www.armand-salle.fr/post/phone-input-shadcn-ui |
155 | | Shadcn Drag Table | A drag-and-drop table component using shadcn-ui and next.js | https://github.com/zenoncao/shadcn-drag-table |
156 | | Progress Button | About An extension of shadcn/ui button component that uses a state machine to drive a progress UX. | https://github.com/tomredman/ProgressButton |
157 | | Shadcn Tree View | A component for hierarchical lists of data with nested levels that can be expanded and collapsed. | https://github.com/mrlightful/shadcn-tree-view |
158 | | Shadcn Data Table Advanced Col Opions | Column-resizing option to shadcn/ui DataTable. | https://github.com/danielagg/shadcn-data-table-resize-columns |
159 | | Downshift Shadcn Combobox | Combobox/autocomplete component built with shadcn/ui and Downshift. | https://github.com/TheOmer77/downshift-shadcn-combobox |
160 | | Shadcn Carousel Testimonials | shadcn UI Carousel Testimonials | https://github.com/johanguse/shadcn-carousel-testimonials |
161 | | Shadcn Date Picker | Advanced date picker with range selection, year and month selection, and more. | https://github.com/flixlix/shadcn-date-picker |
162 | | Nextjs Link Pagination | Use shadcn pagination components to navigate and update URL params | https://github.com/bryaneaton13/shadcn-next-link-pagination |
163 | | Shadcn Spinner | The shadcn-spinner is a lightweight and customizable loading spinner component, designed to be easily integrated into projects based on shadcn. | https://github.com/allipiopereira/shadcn-spinner |
164 | | Recursive Dnd Kanban Board | Recursively-generated drag and drop Accessible kanban board implementing using Next.js, @dnd-kit, Tailwind CSS and shadcn/ui | https://github.com/mehrdadrafiee/recursive-dnd-kanban-board |
165 | | Clerk Elements | Composable components that can be used to build custom UIs on top of Clerk's APIs. | https://clerk.com/docs/customization/elements/examples/shadcn-ui |
166 | | Simplekit | Responsive connect wallet and account component built on top of Wagmi and shadcn/ui. | https://github.com/vaunblu/SimpleKit |
167 |
168 | ## Colors And Customizations
169 | | Name | Description | Link |
170 | |------|-------------|------|
171 | | Gradient Picker | Fancy Gradient Picker built with shadcn/ui, Radix UI and Tailwind CSS. | https://github.com/Illyism/gradient-picker |
172 | | UI Colorgen | An application designed to assist you with color configuration of shadcn/ui. | https://github.com/mickasmt/ui-colorgen |
173 | | Shadcn UI Customizer | POC - shadcn/ui themes with color pickers | https://github.com/Railly/shadcn-ui-customizer |
174 | | Clerk Shadcn Theme | Easily synchronize your Clerk components with your shadcn/ui styles. | https://github.com/stormynight9/clerk-shadcn-theme |
175 | | Navnote/rangeen | Tool that helps you to create a colour palette for your website. | https://github.com/navnote/rangeen |
176 | | 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. | https://github.com/programming-with-ia/shadcn-theme-editor/ |
177 | | 10000+Themes for Shadcn UI | 10000+ Themes for shadcn/ui. | https://ui.jln.dev/ |
178 | | Dizzy | Customize font, icons, colors, spacing, radii, and shadows. | https://dizzy.systems/ |
179 | | Ewgenius/ui | Create custom themes for shadcn/ui effortlessly using vibrant palettes from Radix Colors. | https://ui.ewgenius.me/shadcn-radix-colors |
180 | | Zippy Shadcn UI Theme Generator. | Easily create custom themes from a single colour that you can copy and paste into your apps. | https://zippystarter.com/tools/shadcn-ui-theme-generator |
181 |
182 | ## Tools
183 | | Name | Description | Link |
184 | |------|-------------|------|
185 | | Fluid Tailwind | Build better responsive designs in less code. | https://github.com/barvian/fluid-tailwind |
186 | | Opensearch AI | SearchGPT / Perplexity clone,but personalised for you. | https://github.com/supermemoryai/opensearch-ai |
187 | | Shadcn Chat | CLI for adding customizable and re-usable chat components to your applications. | https://github.com/jakobhoeg/shadcn-chat |
188 | | Memfree | Open Source Hybrid AI Search Engine,Instantly Get Accurate Answers from the Internet,Bookmarks,Notes,and Docs. Support One-Click Deployment. It built using Next.js,Typescript,and shadcn/ui. | https://github.com/memfreeme/memfree |
189 | | Shadcn Form Builder | Create forms with Shadcn,react-hooks-form and zod within minutes | https://github.com/hasanharman/form-builder |
190 | | Invoify | An invoice generator app built using Next.js,Typescript,and shadcn/ui | https://github.com/aliabb01/invoify |
191 | | Form Builder | UI based codegen tool to easily create Beautiful and Type safe @shadcn/ui forms. | https://github.com/AlandSleman/FormBuilder |
192 | | Tinte | An opinionated theme generator 🎨 (VS Code, shadcn/ui) | https://github.com/Railly/tinte |
193 | | UI Builder | A React component editor that provides a no-code,visual way to create UIs,fully compatible with shadcn/ui and custom components. | https://github.com/olliethedev/ui-builder |
194 | | Cut It | Link shortener built using Next.js App Router,Server Actions,Drizzle ORM,Turso and styled with shadcn/ui. | https://github.com/mehrabmp/cut-it |
195 | | Quack DB | Open-source in-browser DuckDB SQL editor | https://github.com/mattf96s/QuackDB |
196 | | Bento Hub | BentoHub is a application where you can create a bento grid for your GitHub profile readme. | https://github.com/amittam104/BentoHub |
197 | | Translate App | Translate App using TypeScript,Tailwind CSS,NextJS,Bun,shadcn/ui,AI-SDK/OpenAI,Zod | https://github.com/developaul/translate-app |
198 | | Pastecode | Pastebin alternative built with Typescript,Next.js,Drizzle,shadcn/ui,RSC | https://github.com/Quorin/PasteCode.app |
199 | | Typelabs | MonkeyType inspired typing test app built with React,shadcn,and Zustand at it's core. | https://github.com/imsandeshpandey/typelabs |
200 | | Jobsync | JobSync is a job seekers' assistant to manage job search efficiently. | https://github.com/Gsync/jobsync |
201 | | Proxmox Helper Scripts | A catalog of scripts for your Proxmox VE homelab,built with the Next.js App Router and styled with shadcn/ui. | https://github.com/BramSuurdje/proxmox-helper-scripts |
202 | | Shadcn Zod Form | CLI tool to generate shadcn/ui forms from zod schemas. | https://github.com/ilyichv/shadcn-zod-form |
203 | | Wallhaven Desktop | Wallhaven Wallpaper software desktop. Create a wallhaven api based client,a true wallpaper software. use Farm,Tauri,React19,shadcn/ui. | https://github.com/ErKeLost/wallhaven-desktop |
204 | | Awesome Docs Gallery | A crowdsourced, open-source gallery for high-quality dev docs. | https://github.com/Hashnode/awesome-docs-gallery |
205 | | Sharable Form Builder | A sharable form builder for creating forms and sharing your form link,based on shadcn/ui and Next.js. | https://github.com/ayoubben18/sharable-form-builder |
206 | | Down Dev Detector | This app lists all the services currently down and uses service Atlassian Status Page and others (soon). | https://github.com/birobirobiro/downdevdetector |
207 | | Xuneix | A link rotation tool for enhanced admin panel security. It includes dynamic URLs,expiring tokens,customizable rotation. Easily setup with shadcn/ui. Integrates with Vercel KV. | https://github.com/theteleporter/xuneix |
208 | | 5devs | A website to get fake brazilian data for testing purposes. | https://www.5devs.com.br/ |
209 | | CV Forge | Resume builder,build with @shadcn/ui,react-hook-form and react-pdf | https://cvforge.app |
210 | | Imgsrc | Generate beautiful Open Graph images with zero effort. | https://imgsrc.io/ |
211 | | Shadcn Pricing Page Generator | The easiest way to get a React pricing page with shadcn/ui,Radix UI and/or Tailwind CSS. | https://shipixen.com/shadcn-pricing-page |
212 | | 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. | https://v0.dev/ |
213 |
214 | ## Extensions
215 | | Name | Description | Link |
216 | |------|-------------|------|
217 | | Shadcn UI | Add components from shadcn/ui directly from VS Code. | https://marketplace.visualstudio.com/items?itemName=SuhelMakkad.shadcn-ui |
218 | | Vscode Shadcn Svelte | VS Code extension for shadcn/ui components in Svelte projects. | https://marketplace.visualstudio.com/items?itemName=Selemondev.vscode-shadcn-svelte&ssr=false#overview |
219 | | 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. | https://marketplace.visualstudio.com/items?itemName=VeroXyle.shadcn-ui-snippets |
220 | | Shadcn Color Preview | Shadcn HSL Preview extension for Visual Studio Code. | https://marketplace.visualstudio.com/items?itemName=dexxiez.shadcn-color-preview |
221 | | Raycast Shadcn | Raycast extension to Browse shadcn/ui documentation, components and examples. | https://www.raycast.com/luisFilipePT/shadcn-ui |
222 | | Designg UI | A Chrome Browser Extension for managing colors in CSS Variables. | https://www.designgui.io/ |
223 | | 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. | https://github.com/PaoloJN/youtube-ai-extension |
224 | | 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. | https://plugins.jetbrains.com/plugin/23479-shadcn-ui-components-manager |
225 |
226 | ## Ports
227 | | Name | Description | Link |
228 | |------|-------------|------|
229 | | Svelte | Svelte port of shadcn/ui | https://github.com/huntabyte/shadcn-svelte |
230 | | Vue | Vue port of shadcn/ui | https://github.com/radix-vue/shadcn-vue |
231 | | React Native | Universal shadcn/ui for React Native featuring a focused collection of components. | https://github.com/mrzachnugent/react-native-reusables |
232 | | Angular | Angular port of shadcn/ui | https://github.com/goetzrobin/spartan |
233 | | Flutter | Flutter port of shadcn/ui | https://github.com/nank1ro/shadcn-ui |
234 | | Nativecn UI | Beautiful and customizable React Native components. | https://github.com/Mobilecn-UI/nativecn-ui |
235 | | Shadcn UI on Rails | Ruby port of shadcn/ui | https://github.com/aviflombaum/shadcn-rails |
236 | | SaladUI | Phoenix Liveview port of shadcn/ui | https://github.com/bluzky/salad_ui |
237 | | Shadcn Solid | Solid port of shadcn/ui | https://github.com/hngngn/shadcn-solid |
238 | | Swift | Swift port of shadcn/ui | https://github.com/Mobilecn-UI/swiftcn-ui |
239 | | Shadcn Kotlin | Kotlin port of shadcn/ui | https://github.com/dead8309/shadcn-kotlin |
240 | | Franken UI | HTML-first,framework-agnostic,beautifully designed components that you can truly copy and paste into your site. Accessible. Customizable. Open Source. | https://www.franken-ui.dev/ |
241 |
242 | ## Animations
243 | | Name | Description | Link |
244 | |------|-------------|------|
245 | | Animata | Bring your site to life with easy to use animation & interaction code. Copy. Paste. Animate. | https://github.com/codse/animata |
246 | | Motionvariants | A collection of handmade Framer Motion variants made for your next project. | https://github.com/chrisabdo/motionvariants |
247 |
248 | ## Design System
249 | | Name | Description | Link |
250 | |------|-------------|------|
251 | | Craft Design System | Design system for building websites FAST! Uses Next.js, Tailwind, React, Typescript, and shadcn/ui. | https://github.com/brijr/craft |
252 | | Storybook Shadcn UI | Every component recreated in Figma. | https://github.com/JheanAntunes/storybook-shadcn |
253 | | Fellipeutaka/ui | All shadcn/ui components registered in the storybook by JheanAntunes | https://github.com/fellipeutaka/ui |
254 |
255 | ## Platforms
256 | | Name | Description | Link |
257 | |------|-------------|------|
258 | | Plotwist | Open-source easy management and reviews of your movies, series and animes. | https://github.com/plotwist-app/plotwist |
259 | | Infinitunes | A Simple Music Player Web App built using Next.js,shadcn/ui,Tailwind CSS,DrizzleORM and more... | https://github.com/rajput-hemant/infinitunes |
260 | | Bolhadev | The quickest path to learn English is speaking it regularly. Just find someone to chat with. | https://github.com/brunocroh/bolhadev.chat |
261 | | Enjoytown | A free anime,manga,movie,tv-shows streaming platform. Built with Nextjs,shadcn/ui | https://github.com/avalynndev/enjoytown |
262 | | Kd | Ad-free Kdrama streaming app. Built with Nextjs,Drizzle ORM,NeonDB and shadcn/ui | https://github.com/gneiru/kd |
263 | | anonypost | Share your thoughts and experiences anonymously by posting on the platform. Crafted using t3-stack | https://github.com/avalynndev/anonypost |
264 | | Memergez | Quickly generate memes by entering text or an avatar URL,with support for many meme commands. | https://github.com/avalynndev/memergez |
265 | | Grade Calculator | A grade calculator/dashboard for students,aiming to provide a better overview on the academic performance. | https://github.com/noahstreller/grade-calculator |
266 | | 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. | https://github.com/theteleporter/crept-main |
267 |
268 | ## Portfolios
269 | | Name | Description | Link |
270 | |------|-------------|------|
271 | | shubhporwal.me | An eye-catching developer Portfolio,built on NextJS,GSAP,Tailwind and React. | https://github.com/shubh73/devfolio |
272 | | andrewsam.xyz | A revamped version of the popular tailwind-nextjs-starter-blog using shadcn/ui,along with a resume section and experience timeline component. | https://github.com/andrew-sameh/andrewsam.xyz |
273 |
274 | ## Others
275 | | Name | Description | Link |
276 | |------|-------------|------|
277 | | Payment Gateways Demo | This project demonstrates the integration of multiple payment gateways, including Stripe, Razorpay, PayPal and Coinbase using Next.js 14. It showcases how to implement these popular payment solutions in a web application. | https://github.com/PremPrakashCodes/payment-gateways |
278 | | Shadcn Admin | Admin Dashboard UI built with Shadcn and Vite. | https://github.com/satnaing/shadcn-admin |
279 |
280 | ## Contributing
281 |
282 | Discover something fantastic, like a package, article, blog, video, or any other valuable resource? Feel free to contribute by sending a pull request! Your participation is highly appreciated. Thank you! ❤️
283 |
284 | ## Contributors
285 |
286 | Thanks goes to all these wonderful people:
287 |
288 |
289 |
290 |
291 |
--------------------------------------------------------------------------------
/assets/awesome-logo.svg:
--------------------------------------------------------------------------------
1 |
21 |
--------------------------------------------------------------------------------
/assets/awesome-shadcn-ui.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bytefer/awesome-shadcn-ui/47a455ba16f8f83196f3e7249770e5b2ba0aa9a3/assets/awesome-shadcn-ui.jpg
--------------------------------------------------------------------------------
3 | 
12 |
13 |