Awesome Shadcn Ui Save

awesome-shadcn/ui

A curated list of awesome things related to shadcn/ui

Libs and Components

• shadcn-blocks - Blocks is the official shadcn/ui pre-made but customizable components that can be copied and pasted into your projects.
• shadcn-extension - An open-source component collection that extends your UI library, built using shadcn/ui components.
• shadcn-ui-expansions - A lots of useful components which shadcn/ui does not have out of the box.
• shadcn-extends - Intended to be a collection of components built using shadcn/ui.
• shadcn-table-v2 - shadcn/ui table component with server-side sorting, filtering, and pagination.
• shadcn-phone-input - Customizable phone input component with proper validation for any country.
• shadcn-phone-input-2 - Simple and formatted phone input component built with shadcn/ui y libphonenumber-js
• phone-input-shadcn-ui - Custom phone number component built with shadcn/ui.
• password-input - shadcn/ui custom password input.
• react-dnd-kit-tailwind-shadcn-ui - Drag and drop Accessible kanban board implementing using React, dnd-kit, tailwind, and shadcn/ui.
• nextjs-dnd - Sortable Drag and Drop with Next.js, shadcn/ui, and dnd-kit.
• fancy-multi-select - The Multi Select Component is inspired by campsite.design's and cal.com's settings forms.
• auto-form - A React component that automatically creates a shadcn/ui form based on a zod schema.
• date-range-picker-for-shadcn - Includes multi-month views, text entry, preset ranges, responsive design, and date range comparisons.
• emblor - A highly customizable, accessible, and fully-featured tag input component built with shadcn/ui.
• enhanced-button - An enhanced version of the default shadcn-button component.
• time-picker - A simple TimePicker for your shadcn/ui project.
• shadcn-chat - Customizable and reusable chat component for you to use in your projects.
• nextjs-components - A collection of Next.js components build with TypeScript, React, shadcn/ui, Craft UI, and Tailwind CSS.
• credenza - Ready-made responsive modal component for shadcn/ui.
• country-state-dropdown - This Component is built with Nextjs, Tailwindcss, shadcn/ui & Zustand for state management.
• shadcn-drag-table - A drag-and-drop table component using shadcn/ui and Next.js.
• file-vault - File upload component for React.
• file-uploader - A file uploader built with shadcn/ui and react-dropzone.
• plate - The rich-text editor for React.
• clerk-shadcn-theme - Easily synchronize your Clerk <SignIn /> and <SignUp /> components with your shadcn/ui styles.
• autocomplete-select-shadcn-ui - Autocomplete component built with shadcn/ui and Fancy Multi Select by Maximilian Kaske.
• shadcn-data-table-advanced-col-opions - Column-resizing option to shadcn/ui DataTable.
• pricing-page-shadcn - Pricing Page made with shadcn/ui & Next.js 14. Completely customizable
• neobrutalism-components - Collection of neobrutalism-styled Tailwind React and Shadcn UI components.
• shadcn-stepper - A complete stepper component built with shadcn/ui
• shadcn-linear-combobox - A copy of the combobox that Linear uses to set the priority of a task.
• magicui - React components to build beautiful landing pages using tailwindcss + framer motion + shadcn/ui
• planner - Planner is a highly adaptable scheduling component tailored for React applications.
• shadcn-cal - A copy of the monthly calendar used by Cal.com with shadcn/ui, Radix Colors and React Aria.
• shadcn-ui-sidebar - A stunning and functional retractable sidebar for Next.js using shadcn/ui complete with desktop and mobile responsiveness.

Apps

Plugins and 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-vue - Extension for integrating shadcn/ui components into Vue.js projects.
• shadcn/ui Components Manager - A plugin for Jetbrain products. It allows you to manage your shadcn/ui components across Svelte, React, Vue, and Solid frameworks with this plugin. Simplify tasks like adding, removing, and updating components.
• raycast-shadcn - Raycast extension to Browse shadcn/ui documentation, components and examples

Colors and Customizations

• zippy starter's shadcn/ui theme generator. - Easily create custom themes from a single colour that you can copy and paste into your apps.
• 10000+Themes for shadcn/ui - 10000+ Themes for shadcn/ui.
• ui-colorgen - An application designed to assist you with color configuration of shadcn/ui.
• gradient-picker - Fancy Gradient Picker built with Shadcn UI, Radix UI and Tailwind CSS.
• shadcn-ui-customizer - POC - shadcn/ui themes with color pickers

Animations

• magicui.design - Largest collection of open-source react components to build beautiful landing pages.
• motionvariants - Beautiful Framer Motion Animations.

Tools

• v0 - Vercel's generative UI system, built on shadcn/ui and TailwindCSS, allows effortless UI generation from text prompts and/or images. It produces React and HTML code, integration is also possible via v0 CLI command.
• shadcn-pricing-page-generator - The easiest way to get a React pricing page with shadcn/ui, Radix UI and/or Tailwind CSS.
• invoify - An invoice generator app built using Next.js, Typescript, and shadcn/ui
• pastecode - Pastebin alternative built with Typescript, Next.js, Drizzle, Shadcn, RSC
• form-builder - UI based codegen tool to easily create Beautiful and Type safe @shadcn/ui forms.
• cut-it - Link shortener built using Next.js App Router, Server Actions, Drizzle ORM, Turso and styled with shadcn/ui
• 5devs - A website to get fake brazilian data for testing purposes.

Platforms

• plotwist - Easy management and reviews of your movies, series and animes using Next.js, Tailwind CSS, Supabase and 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

Ports

• Svelte - Svelte port of shadcn/ui
• Vue - Vue port of shadcn/ui
• React Native - React Native port of shadcn/ui (recommended)
• React Native - React Native port of shadcn/ui
• Swift - Swift port of shadcn/ui
• Flutter - Flutter port of shadcn/ui
• Ruby - Ruby port of shadcn/ui
• Kotlin - Kotlin port of shadcn/ui
• Solid - Solid, port of shadcn/ui
• Angular - Angular, port of shadcn/ui
• JollyUI - shadcn/ui compatible react aria components

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

• taxonomy - An open source application built using the new router, server components and everything new in Next.js
• shadcn-landing-page - Landing page template using shadcn/ui, React, Typescript and Tailwind CSS
• turborepo-shadcn-ui-tailwindcss - Turborepo starter with shadcn/ui & Tailwind CSS pre-configured for shared ui components.
• design-system-template - Turborepo + TailwindCSS + Storybook + shadcn/ui
• next-shadcn-dashboard-starter - Admin Dashboard Starter with Next.js 14 and shadcn/ui
• chadnext - Quick Starter Template includes Next.js 14 App router, shadcn/ui, LuciaAuth, Prisma, Server Actions, Stripe, Internationalization and more.
• nextjs-mdx-blog - Starter template built with Contentlayer, MDX, shadcn/ui, and Tailwind CSS.
• t3-app-template - This is the admin template for T3 Stack and shadcn/ui
• magicui-startup-templates - Magic UI Startup template built using shadcn/ui + tailwindcss + framer-motion

Star History

Contributors

Thanks goes to all these wonderful people: