Skip to content

Latest commit

 

History

History
312 lines (279 loc) · 36.6 KB

README.md

File metadata and controls

312 lines (279 loc) · 36.6 KB
Raw


logo of awesome-shadcn/ui repository

awesome-shadcn/ui

A curated list of awesome things related to shadcn/ui

Created by: birobirobiro.dev

Awesome

Libs and Components

  • 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.
  • bundui - A collection of reusable animated components built with Tailwind CSS and Framer Motion.
  • 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.
  • confirm-dialog - A confirm dialog component built with shadcn/ui.
  • 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.
  • crypto-charts - Crypto charts made for shadcn/ui using PythNetwork.
  • date-range-picker-for-shadcn - Includes multi-month views, text entry, preset ranges, responsive design, and date range comparisons.
  • date-time-picker-shadcn - Beautifully Crafted Datetime Picker for your shadNext Project.
  • datetime-picker - A powerful datetime picker with support for timezones, minimum and maximum dates, and month/year selection.
  • dnd-dashboard - A beautiful, performant dashboard with drop-to-swap layouts built using Next.js, shadcn/ui, and swapy.
  • downshift-shadcn-combobox - Combobox/autocomplete component built with shadcn/ui and Downshift.
  • drag-to-resize-sidebar - A extended shadcn/ui drag-to-resize component for Next.js applications with persisted state drag-to-resize functionality.
  • druid/ui - Copy paste UI components & an Intercom inspired AI chatbot - elegant, easy to install, fully responsive and customisable. Built on top of shadcn/ui
  • echo-editor - A modern WYSIWYG rich-text editor based on tiptap and shadcn/ui
  • edil-ozi - React components for developers. Gsap + framer motion + tailwind.
  • 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.
  • fancy-switch - A fancy switch component built with shadcn/ui.
  • 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.
  • floating-dragable-card - Dragable and resizable card over view using shadcn/ui elements
  • fusion-ui - Fusion UI library combining shadcn/ui and MagicUI.
  • gluestack-ui - React & React Native Components & Patterns - copy-paste components & patterns crafted with Tailwind CSS (NativeWind)
  • ibelick/background-snippet - Ready to use collection of modern background snippets.
  • image-upload-shadcn - Image upload component
  • indie-ui - UI components with variants - Docs
  • inspira-ui - UI components to build stunning animated interfaces in Vue/NuxtJS
  • kokonut-ui - Free Modern and Customizable components build on top of shadcn for Next.js.
  • launch-ui - Landing page components built with React, Shadcn/ui and Tailwind that you can copy/paste into your project.
  • lingua-time - A smart datetime picker which understands natural language input.
  • lukacho-ui - Next Generation UI Components
  • 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.
  • mixcnui - Mixui is a collection of animated or re-usable component currently for Nextjs.
  • 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.
  • nextjs-link-pagination - shadcn paging/pagination that uses Nextjs Links and search params
  • next-shadcn-dashboard-starter - Admin Dashboard Starter with Nextjs 14 and Shadcn UI
  • next-stepper - A dynamic multi-step form. Built with: [ Next.js | shadcn/ui | zustand | framer-motion ]
  • novel - Novel is a Notion-style WYSIWYG editor with AI-powered autocompletion. Built with Tiptap + Vercel AI SDK.
  • number-flow - A React component to transition, localize, and format numbers. Dependency-free. Accessible. Customizable.
  • origin-ui - Beautiful UI components built with Tailwind CSS and Next.js.
  • password-input - shadcn/ui custom password input.
  • payment-gateways - This repository demonstrates how to integrate popular payment gateways like Stripe, Razorpay, PayPal, and Coinbase into a web application using Next.js 14.
  • 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 - A rich-text editor powered by AI.
  • pqoqubbw - Open-source collection of smooth crafted animated icons for your projects.
  • 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.
  • react-highlight-popover - A headless react component for creating popovers on text selection with zero dependencies.
  • react-select Implementation of the react-select library with shadcn styling. Support for Select, Async-Select, Multi-Select with many configurable options
  • recursive-dnd-kanban-board - Recursively-generated drag and drop Accessible kanban board implementing using Next.js, @dnd-kit, tailwind and shadcn/ui.
  • roadmap-ui - Composable React components for building interactive roadmaps.
  • search-address - The SearchAddress component provides a flexible and interactive search interface for addresses, utilizing the powerful Nominatim service from OpenStreetMap.
  • shadcn-address-autocomplete - An address autocomplete component built with Google Places API and shadcn components.
  • shadcn-admin - Admin Dashboard UI built with shadcn/ui and Vite.
  • 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-heatmap - Modern alternative to primitive react heatmaps built on top of shadcn/ui calendar component.
  • 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-carousel-testimonials - shadcn UI Carousel Testimonials.
  • shadcn-chatbot-kit - Beautifully designed chatbot components based on shadcn/ui. Fully customizable and owned by you.
  • shadcn-color-picker - A color picker build with react-color and shadcn
  • shadcn-cookie-consent - Beautifully designed, customizable cookie consent for web built on top of shadcn-ui and tailwind-css!
  • shadcn-country-dropdown - An ISO 3166 compliant dropdown component for selecting a country.
  • shadcn-data-table-advanced-col-opions - Column-resizing option to shadcn/ui DataTable.
  • shadcn-date-picker - Advanced date picker with range selection, year and month selection, and more.
  • shadcn-drag-table - A drag-and-drop table component using shadcn/ui and Next.js.
  • shadcn-editor - Lexical editor using shadcn theme and components.
  • 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-image-cropper - A minimal image cropper UI built with shadcn and the react-image-crop library.
  • 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-spinner - Spinner component for shadcn/ui.
  • 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-timeline-2 - Shadcn timeline component built with shadcn/ui.
  • shadcn-tiptap - Collection of custom extensions and toolbars for Tiptap editor.
  • shadcn-tree-view - A component for hierarchical lists of data with nested levels that can be expanded and collapsed.
  • 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.
  • shadcn-ui-templates - A collection of Free & Premium templates and resources for shadcn/ui.
  • simplekit - Responsive connect wallet and account component built on top of Wagmi and shadcn/ui.
  • solanauth - Responsive Solana wallet authentication and account modal built on top of @solana/web3.js with NextAuth integration and shadcn/ui
  • sortable - A sortable component built with shadcn/ui, radix ui, and dnd-kit.
  • spectrum-ui - Spectrum UI is a collection of re-usable components built using Aceternity UI Magic UI and shadn/ui
  • stocks - Stock Picker using Next.js, React Server Components, and shadcn/ui charts.
  • stunning-ui - Stunning UI is a collection of interactive Tailwind CSS components built for Vue and Nuxt.
  • supercharged-shadcn-components - A collection of ready-to-use components specializing in building simpler, type-safe react-hook-form components inspired by Material-UI and other libraries.
  • 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.
  • twblocks - Website blocks to copy/paste - based on shadcn & Radix using Tailwind and NextJS
  • ui-beats - Collection of Animated React Components.
  • uixmat/onborda - Give your application the onboarding it deserves with Onborda product tour for Next.js
  • vaul - Drawer component for React.
  • zoom-charts - Zoomable Charts on top of shadcn/ui Charts.

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.
  • designgui - A Chrome Browser Extension for managing colors in CSS Variables.
  • raycast-shadcn - Raycast extension to Browse shadcn/ui documentation, components and examples.
  • shadcn-hsl-preview - shadcn HSL Preview extension for Visual Studio Code.
  • 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.
  • ewgenius/ui - Create custom themes for shadcn/ui effortlessly using vibrant palettes from Radix Colors.
  • 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
  • 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.
  • 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

  • animata - Hand-crafted ✍️ interaction animations and effects from around the internet 🛜 to copy and paste into your project.
  • magicui.design - Largest collection of open-source react components to build beautiful landing pages.
  • motionvariants - Beautiful Framer Motion Animations.
  • tailwindcss-motion - A new simple syntax animation library. Batteries included. Infinitely configurable.

Tools

  • 5devs - A website to get fake brazilian data for testing purposes.
  • bento-hub - BentoHub is a application where you can create a bento grid for your GitHub profile readme.
  • cut-it - Link shortener built using Next.js App Router, Server Actions, Drizzle ORM, Turso and styled with shadcn/ui.
  • country-data-in-charts - Globe Graph is a web app that visualizes the countries data like GDP, GDP per capita, and population in different years using many charts.
  • down-dev-detector - This app lists all the services currently down and uses service Atlassian Status Page and others (soon).
  • 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.
  • hook-again - A collection of shadcn/ui installable React Hooks
  • imgsrc - Generate beautiful Open Graph images with zero effort.
  • invoify - An invoice generator app built using Next.js, Typescript, and shadcn/ui
  • jobsync - JobSync is a job seekers' assistant to manage job search efficiently.
  • 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.
  • metro-sp - Receive automatic real-time updates on incidents and changes on the SP Metro, ViaMobilidade and CPTM lines every 5 minutes.
  • myinstants - The largest instant sound buttons website in Brazil!
  • opensearch-ai - SearchGPT / Perplexity clone, but personalised for you.
  • pastecode - Pastebin alternative built with Typescript, Next.js, Drizzle, shadcn/ui, RSC
  • postgres- The in-browser Postgres sandbox with AI assistance
  • proxmox-helper-scripts - A catalog of scripts for your Proxmox VE homelab, built with the Next.js App Router and styled with shadcn/ui.
  • quack-db - Open-source in-browser DuckDB SQL editor
  • qualmeuip - Find out your IP address and test your internet speed
  • shadcn-form-builder - Create forms with Shadcn, react-hooks-form and zod within minutes
  • shadcn-pricing-page-generator - The easiest way to get a React pricing page with shadcn/ui, Radix UI and/or Tailwind CSS.
  • 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
  • shadcn-zod-form - CLI tool to generate shadcn/ui forms from zod schemas.
  • sharable-form-builder - A sharable form builder for creating forms and sharing your form link, based on shadcn/ui and Next.js.
  • tinte - An opinionated VS Code Theme Generator 🎨
  • 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.
  • ui-builder - A React component editor that provides a no-code, visual way to create UIs, fully compatible with shadcn/ui and custom components.
  • ui-fonts - Test and preview fonts in real-time for all your design needs. Choose the perfect typeface with ease.
  • 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.
  • wallhaven-desktop - Wallhaven Wallpaper software desktop. Create a wallhaven api based client , a true wallpaper software. use Farm , Tauri , React19, shadcn/ui.
  • 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.

Websites and Portfolios Inspirations

Websites

  • godly - Astronomically good web design inspiration. Only the best of the best.
  • list.swajp.me - It has never been easier to find the right projects or designs by inspiring successful people.

Portfolios

  • andrewsam.xyz - A revamped version of the popular tailwind-nextjs-starter-blog using shadcn/ui, along with a resume section and experience timeline component.
  • birobirobiro.dev
  • shubhporwal.me - An eye-catching developer Portfolio, built on NextJS, GSAP, Tailwind and React.
  • swajp.me
  • Nathan's AI - An AI Chatbot acting as a Portfolio, built with shadcn/ui components.

Platforms

  • anonypost - Share your thoughts and experiences anonymously by posting on the platform. Crafted using t3-stack
  • bolhadev - The quickest path to learn English is speaking it regularly. Just find someone to chat with.
  • 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.
  • enjoytown - A free anime, manga, movie, tv-shows streaming platform. Built with Nextjs, shadcn/ui
  • grade-calculator - A grade calculator/dashboard for students, aiming to provide a better overview on the academic performance.
  • 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
  • memergez - Quickly generate memes by entering text or an avatar URL, with support for many meme commands.
  • midday-components - A collection of open-source components based on Midday features.
  • 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
  • Sysinfocus simple/ui - Razor component library for Blazor, inspired by shadcn/ui
  • Vue - Vue port of shadcn/ui

Design System

Boilerplates / Templates

  • browser-extension-starter-plasmo-shadcn-trpc - Browser extension starter kit featuring Plasmo, React, Shadcn, and tRPC.
  • chadnext - Quick Starter Template includes Next.js 14 App router, shadcn/ui, LuciaAuth, Prisma, Server Actions, Stripe, Internationalization and more.
  • cloudflare-saas-stack - An opinionated, batteries-included starter kit for quickly building and deploying SaaS products on Cloudflare.
  • create-tauri-core - A project template for creating a Tauri app with Vite, React, and Tailwind CSS.
  • design-system-template - Turborepo + TailwindCSS + Storybook + shadcn/ui
  • easy-ui - 50+ High Quality Open Source Website Templates built using NextJS + shadcn/ui + Tailwind CSS + Framer Motion and more.
  • 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
  • nextMotion - Webdev portfolio template with nodemailer integrated for easy contact form setup. Uses shadcn/ui + tailwindcss + framer-motion.
  • next-shadcn-dashboard-starter - Admin Dashboard Starter with Next.js 14 and shadcn/ui
  • 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.
  • nextjs-mdx-blog - Starter template built with Contentlayer, MDX, shadcn/ui, and Tailwind CSS.
  • next-js-views-template - An open-source collection of reusable view components like Calendar, Table,etc built with Next.js and ShadCN. Easily copy and paste these pre-built UI elements into your project for fast, responsive, and customizable layouts.
  • next-wp - Headless Wordpress Starter built with the NextJS App Router and React Server Components
  • 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.
  • 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-registry-template - Template repository for building a custom component registry for shadcn/ui.
  • shadcn-vue-landing-page - Landing page template using Vue, shadcn-vue, TypeScript, Tailwind CSS
  • shadcn-next-workflows - Interactive workflow builder using React Flows, Next.js, and Shadcnui. Create, connect, and validate custom nodes easily.
  • 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.
  • 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
  • template-next - A clean Next.js template with TypeScript, TailwindCSS, Shadcn/ui, and Prettier.
  • 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.
  • 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.

Star History

Star History Chart

Contributors

Thanks goes to all these wonderful people: