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