Awesome Shadcn UI

A curated list of awesome things related to shadcn/ui

Saas

• Next Saas Starter - Get started quickly with Next.js, Postgres, Stripe, and shadcn/ui.
• 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.
• Cloudflare SaaS Kit - An opinionated, batteries-included starter kit for quickly building and deploying SaaS products on Cloudflare.
• Saasfly - An easy-to-use and enterprise-grade Next.js boilerplate.
• 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.
• 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.
• Nextjs Starter Kit - The Ulimate Nextjs Starter Kit. Build your next SAAS product of your dreams. Batteries included.
• Rapidlaunch - Beautiful Next.js SaaS Starterkits, Blocks and guides. Built using Shadcn ui, Next.js 14, DrizzleORM, Resend, and more.
• Next Supbase Stripe Starter - The highest quality SaaS starter with Next.js, Supabase, Stripe, and shadcn/ui.
• Cella - TypeScript template to build local-first SaaS with hono + pg + drizzle + electric-sql + react + shadcn.
• Hikari - A complete & open source Nextjs.14, Stripe and Supabase SaaS Starter Template using App Router.
• Firestarta - Next.js SaaS boilerplate with NextAuth, Prisma, Supabase, Shadcn/ui & Lemon Squeezy Subscriptions.
• SaasHQ - Saas CRM/ERP Starter Kit for Nextjs Prisma and Postgres. An excellent resource for buildnig things in Nextjs.
• Convex SaaS - A production-ready Convex Stack for your next SaaS application with Convex Auth, Stripe, TanStack, Resend, Tailwindcss, and shadcn.
• 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.

UI Libs

• Aceternity UI - Copy paste the most trending components and use them in your websites without having to worry about styling and animations.
• Magic UI - UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps.
• Magic UI Pro - 50+ beautiful sections and templates built with React, Typescript, Tailwind CSS, and Framer Motion.
• Horizon UI - The trendiest & innovative Open Source Admin Template for Chakra UI & React.
• Assistant UI - React Components for AI Chat 💬 🚀.
• Cult UI - Components crafted for Design Engineers. Styled using Tailwind CSS, fully compatible with Shadcn, and easy to integrate—just copy and paste.
• Eldora UI - Eldora UI is a collection of re-usable components that you can copy and paste into your web apps.
• Page UI - Landing page UI components for React & Next.js, built on top of TailwindCSS.
• Tremor Raw - Copy & paste React components to build modern web applications. Good for building charts.
• Syntax UI - Get free access to pre-built, Tailwind CSS-powered components, animations and effects - brought to life using Framer Motion.
• JollyUI - shadcn/ui compatible react aria components.
• Fusion UI - Fusion UI library combining Shadcn/UI and MagicUI. Featuring 150+ free and open-source components.
• 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.
• Indie UI - Indie UI is a free collection of UI components for building web applications. It is built with React and Tailwind CSS.
• Mixcn UI - 20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion.
• Edil Ozi - Component Library for Developers. Open Source components you can copy and paste to your apps.
• Bundui - A collection of components that you can copy and paste into your applications. Built with Tailwind CSS and Framer Motion.
• Lukacho UI - Next Generation UI Components.
• Myna UI - TailwindCSS and shadcn/ui UI Kit for Figma and React.

Templates

• autoflow - pingcap/autoflow is a Graph RAG based and conversational knowledge base tool built with TiDB Serverless Vector Storage.
• 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.
• taxonomy - An open source application built using the new router,server components and everything new in Next.js.
• kirimase - A template and boilerplate for quickly starting your next project with shadcn/ui,Tailwind CSS,and Next.js.
• next-shadcn-dashboard-starter - Admin Dashboard Starter with Next.js 14 and shadcn/ui.
• [NextMaster](A highly performant e-commerce template using Next.js.)
• shadcn-landing-page - Landing page template using shadcn/ui,React,Typescript and Tailwind CSS.
• chadnext - Quick Starter Template includes Next.js 14 App router,shadcn/ui,LuciaAuth,Prisma,Server Actions,Stripe,Internationalization and more.
• Landing page boilerplate - A versatile landing page boilerplate, ideal for various projects and marketing campaigns.
• 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.
• next-wp - Headless Wordpress Starter built with the NextJS App Router and React Server Components
• nextjs-mdx-blog - Starter template built with Contentlayer,MDX,shadcn/ui,and Tailwind CSS.
• shadcn-nextjs-free-boilerplate - Free & Open-source NextJS Boilerplate + ChatGPT API Dashboard Template
• shadcn-landing-page - New design 🎉 Nextjs + Shadcn + TypeScript + Tailwind.
• t3-app-template - This is the admin template for T3 Stack and shadcn/ui
• easy-ui - 50+ High Quality Open Source Website Templates built using NextJS + shadcn/ui + Tailwind CSS + Framer Motion and more.
• design-system-template - Turborepo + TailwindCSS + Storybook + shadcn/ui
• electron-shadcn - Electron app template with shadcn/ui and a bunch of other libs and tools ready to use.
• shadcn-vue-landing-page - Landing page template using Vue,shadcn-vue,TypeScript,Tailwind CSS
• 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.
• opendocs - Beautifully designed template that you can use for your projects for free. Accessible. Customizable. Open Source with i18n support.
• nextMotion - Webdev portfolio template with nodemailer integrated for easy contact form setup. Uses shadcn/ui + tailwindcss + framer-motion.
• 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.
• 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.
• 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.
• shadcn-registry-template - Template repository for building a custom component registry for shadcn/ui.
• create-tauri-core - A project template for creating a Tauri app with Vite,React,and Tailwind CSS.
• Shadcn UI Templates - A collection of Free & Premium templates and resources for shadcn/ui.
• horizon-ai-nextjs-shadcn-boilerplate - Premium AI NextJS & shadcn/ui Boilerplate + Stripe + Supabase + OAuth
• template-next - A clean Next.js template with TypeScript,TailwindCSS,Shadcn/ui,and Prettier.

Components

• Shadcn UI Sidebar - A composable, themeable and customizable sidebar component.
• Novel - Notion-style WYSIWYG editor with AI-powered autocompletion.
• Plate - Rich-text editor with shadcn/ui.
• Vaul - A drawer component for React.
• Number Flow - A React component to transition, format, and localize numbers.
• Auto Form - Automatically render forms for your existing data schema.
• next-stepper - A dynamic multi-step form. Built with: Next.js | shadcn/ui | zustand | framer-motion.
• Form Builder - A dynamic form-building tool that allows users to create, customize, and validate forms seamlessly within web applications.
• Shadcn Table V2 - shadcn/ui table component with server-side sorting, filtering, and pagination.
• Neobrutalism Components - Collection of neobrutalism-styled Tailwind components.
• Maily.to - Powerful editor for creating beautiful, pre-designed, mobile-ready emails.
• Background Snippet - Ready to use collection of modern background snippets.
• Shadcn UI Sidebar - A stunning, functional and responsive retractable sidebar built on top of shadcn/ui.
• Shadcn UI Expansions - More components built on top of shadcn-ui.
• Stepperize - A library for creating step-by-step workflows in your apps.
• Onborda - An onboarding wizard flow / product tour for Next.js animated by framer motion
• File Uploader - File uploader built with shadcn/ui and react-dropzone.
• 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.
• 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.
• Fancy Multi Select - The Multi Select Component is inspired by campsite.design's and cal.com's settings forms.
• Shadcn Extension - An open source component collection , that extends your ui library , built using shadcn component
• Emblor - A fully-featured tag input component built with shadcn/ui.
• Date Range Picker - DateRangePicker includes preset date ranges, text entry, calendar selection and date comparison.
• Time Picker - A simple TimePicker for your shadcn/ui project.
• Shadcn Minimal Tiptap - Minimal Tiptap Editor
• Shadcn Multi Select Component - A multi-select component designed with shadcn/ui
• Credenza - Ready-made responsive modal component for shadcn/ui.
• Shadcn Phone Input - Customizable phone input component with proper validation for any country. Built on top of shadcn.
• Dnd-Kit Shadcn UI - Drag and drop Accessible kanban board implementing using React, @dnd-kit, tailwind and shadcn/ui.
• dialog-stack - Composable stacked dialogs for shadcn/ui.
• Enhanced Button - An enhanced version of the default shadcn-button component.
• Sortable - A sortable component built with shadcn/ui, radix ui, and dnd-kit.
• Zoom Charts - Zoomable Charts on top of shadcn/ui Charts.
• File Vault - File upload component for React.
• Shadcn Cal Com - A copy of the monthly calendar used by Cal.com with shadcn/ui, Radix Colors and React Aria.
• Stocks - Stock Picker using Next.js, React Server Components, and shadcn/ui charts.
• Shadcn Image Cropper - Image cropper built with shadcn/ui and react-image-crop
• Planner - Planner is a highly adaptable scheduling component tailored for React applications.
• Echo Editor - A modern WYSIWYG rich-text editor base on tiptap and shadcn-ui.
• Shadcn Address Autocomplete - An address autocomplete component built with Google Places API and shadcn components.
• Shadcn Tiptap - Collection of custom extensions and toolbars for Tiptap editor.
• Shadcn Linear Combobox - A copy of the combobox that Linear uses to set the priority of a task.
• Country State Dropdown - This Component is built with Nextjs, Tailwindcss, Shadcn-ui & Zustand for state management.
• Pricing Page Shadcn - Pricing Page template made with Shadcn UI & Next.js 14. Completely customizable
• Lingua Time - A smart datetime picker which understands natural language input.
• Nextjs Dnd - Sortable Drag and Drop with Next.js, Shadcn UI, and DnD-Kit.
• Shadcn Calendar Component - A calendar date picker component designed with shadcn/ui.
• Search Address - The SearchAddress component provides a flexible and interactive search interface for addresses, utilizing the powerful Nominatim service from OpenStreetMap.
• Capture Photo - Capture-Photo is a versatile, browser-based React component designed to streamline the integration of camera functionalities directly into your web applications.
• React Fancy Switch - React Fancy Switch
• Shadcn Datetime Picker - Beautifully crafted datetime picker component using shadcn ui
• Crypto Charts - A demo show casing shacn/ui charts with free historical crypto data from pyth.
• Shadcn Calendar Heatmap - Modern alternative to primitive react heatmaps built on top of shadcn/ui calendar component.
• Shadcn Cookie Consent - Beautifully designed, customizable cookie consent for web built on top of shadcn-ui and tailwind-css!
• Dnd Dashboard - A beautiful, performant dashboard with drop-to-swap layouts built using Next.js, shadcn/ui, and swapy.
• React Confirm Dialog - React Confirm Dialog
• Shadcn Timeline - Customizable and re-usable timeline component for you to use in your projects. Built on top of shadcn.
• Image Upload Shadcn - Image upload component
• Phone Input Shadcn UI - Custom phone number component built with shadcn/ui.
• Shadcn Drag Table - A drag-and-drop table component using shadcn-ui and next.js
• Progress Button - About An extension of shadcn/ui button component that uses a state machine to drive a progress UX.
• Shadcn Tree View - A component for hierarchical lists of data with nested levels that can be expanded and collapsed.
• Shadcn Data Table Advanced Col Opions - Column-resizing option to shadcn/ui DataTable.
• Downshift Shadcn Combobox - Combobox/autocomplete component built with shadcn/ui and Downshift.
• Shadcn Carousel Testimonials - shadcn UI Carousel Testimonials
• Shadcn Date Picker - Advanced date picker with range selection, year and month selection, and more.
• Nextjs Link Pagination - Use shadcn pagination components to navigate and update URL params
• Shadcn Spinner
• Recursive Dnd Kanban Board - Recursively-generated drag and drop Accessible kanban board implementing using Next.js, @dnd-kit, Tailwind CSS and shadcn/ui
• Clerk Elements - Composable components that can be used to build custom UIs on top of Clerk's APIs.
• Simplekit - Responsive connect wallet and account component built on top of Wagmi and shadcn/ui.

Colors And Customizations

• Gradient Picker - Fancy Gradient Picker built with shadcn/ui, Radix UI and Tailwind CSS.
• UI Colorgen - An application designed to assist you with color configuration of shadcn/ui.
• Shadcn UI Customizer - POC - shadcn/ui themes with color pickers
• Clerk Shadcn Theme - Easily synchronize your Clerk components with your shadcn/ui styles.
• Navnote/rangeen - Tool that helps you to create a colour palette for your website.
• 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.
• 10000+Themes for Shadcn UI - 10000+ Themes for shadcn/ui.
• Dizzy - Customize font, icons, colors, spacing, radii, and shadows.
• Ewgenius/ui - Create custom themes for shadcn/ui effortlessly using vibrant palettes from Radix Colors.
• Zippy Shadcn UI Theme Generator. - Easily create custom themes from a single colour that you can copy and paste into your apps.

Tools

• Fluid Tailwind - Build better responsive designs in less code.
• Opensearch AI - SearchGPT / Perplexity clone,but personalised for you.
• Shadcn Chat - CLI for adding customizable and re-usable chat components to your applications.
• 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.
• Shadcn Form Builder - Create forms with Shadcn,react-hooks-form and zod within minutes
• Invoify - An invoice generator app built using Next.js,Typescript,and shadcn/ui
• Form Builder - UI based codegen tool to easily create Beautiful and Type safe @shadcn/ui forms.
• Tinte - An opinionated theme generator 🎨 (VS Code, shadcn/ui)
• UI Builder - A React component editor that provides a no-code,visual way to create UIs,fully compatible with shadcn/ui and custom components.
• Cut It - Link shortener built using Next.js App Router,Server Actions,Drizzle ORM,Turso and styled with shadcn/ui.
• Quack DB - Open-source in-browser DuckDB SQL editor
• Bento Hub - BentoHub is a application where you can create a bento grid for your GitHub profile readme.
• Translate App - Translate App using TypeScript,Tailwind CSS,NextJS,Bun,shadcn/ui,AI-SDK/OpenAI,Zod
• Pastecode - Pastebin alternative built with Typescript,Next.js,Drizzle,shadcn/ui,RSC
• Typelabs - MonkeyType inspired typing test app built with React,shadcn,and Zustand at it's core.
• Jobsync - JobSync is a job seekers' assistant to manage job search efficiently.
• Proxmox Helper Scripts - A catalog of scripts for your Proxmox VE homelab,built with the Next.js App Router and styled with shadcn/ui.
• Shadcn Zod Form - CLI tool to generate shadcn/ui forms from zod schemas.
• Wallhaven Desktop - Wallhaven Wallpaper software desktop. Create a wallhaven api based client,a true wallpaper software. use Farm,Tauri,React19,shadcn/ui.
• Awesome Docs Gallery - A crowdsourced, open-source gallery for high-quality dev docs.
• Sharable Form Builder - A sharable form builder for creating forms and sharing your form link,based on shadcn/ui and Next.js.
• Down Dev Detector - This app lists all the services currently down and uses service Atlassian Status Page and others (soon).
• 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.
• 5devs - A website to get fake brazilian data for testing purposes.
• CV Forge - Resume builder,build with @shadcn/ui,react-hook-form and react-pdf
• Imgsrc - Generate beautiful Open Graph images with zero effort.
• Shadcn Pricing Page Generator - The easiest way to get a React pricing page with shadcn/ui,Radix UI and/or Tailwind CSS.
• 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.

Extensions

• Shadcn UI - Add components from shadcn/ui directly from VS Code.
• 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.
• Shadcn Color Preview - Shadcn HSL Preview extension for Visual Studio Code.
• Raycast Shadcn - Raycast extension to Browse shadcn/ui documentation, components and examples.
• Designg UI - A Chrome Browser Extension for managing colors in CSS Variables.
• 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.
• 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.

Ports

• Svelte - Svelte port of shadcn/ui
• Vue - Vue port of shadcn/ui
• React Native - Universal shadcn/ui for React Native featuring a focused collection of components.
• Angular - Angular port of shadcn/ui
• Flutter - Flutter port of shadcn/ui
• Nativecn UI - Beautiful and customizable React Native components.
• Shadcn UI on Rails - Ruby port of shadcn/ui
• SaladUI - Phoenix Liveview port of shadcn/ui
• Shadcn Solid - Solid port of shadcn/ui
• Swift - Swift port of shadcn/ui
• Shadcn Kotlin - Kotlin 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.

Animations

• Animata - Bring your site to life with easy to use animation & interaction code. Copy. Paste. Animate.
• Motionvariants - A collection of handmade Framer Motion variants made for your next project.

Design System

• Craft Design System - Design system for building websites FAST! Uses Next.js, Tailwind, React, Typescript, and shadcn/ui.
• Storybook Shadcn UI - Every component recreated in Figma.
• Fellipeutaka/ui - All shadcn/ui components registered in the storybook by JheanAntunes

Platforms

• Plotwist - Open-source easy management and reviews of your movies, series and animes.
• Infinitunes - A Simple Music Player Web App built using Next.js,shadcn/ui,Tailwind CSS,DrizzleORM and more...
• 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
• Kd - Ad-free Kdrama streaming app. Built with Nextjs,Drizzle ORM,NeonDB and shadcn/ui
• anonypost - Share your thoughts and experiences anonymously by posting on the platform. Crafted using t3-stack
• Memergez - Quickly generate memes by entering text or an avatar URL,with support for many meme commands.
• Grade Calculator - A grade calculator/dashboard for students,aiming to provide a better overview on the academic performance.
• 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.

Portfolios

• shubhporwal.me - An eye-catching developer Portfolio,built on NextJS,GSAP,Tailwind and React.
• andrewsam.xyz - A revamped version of the popular tailwind-nextjs-starter-blog using shadcn/ui,along with a resume section and experience timeline component.

Others

• 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.
• Shadcn Admin - Admin Dashboard UI built with Shadcn and Vite.

Contributing

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! ❤️

Contributors

Thanks goes to all these wonderful people: