Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

awesome-shadcn-ui

A curated list of awesome things related to shadcn/ui.
https://github.com/birobirobiro/awesome-shadcn-ui

Last synced: 5 days ago
JSON representation

  • Libs and Components

    • bundui - A collection of reusable animated components built with Tailwind CSS and Framer Motion.
    • image-upload-shadcn - Image upload component
    • lingua-time - A smart datetime picker which understands natural language input.
    • shadcn-color-picker - A color picker build with react-color and shadcn
    • shadcn-tree-view - A component for hierarchical lists of data with nested levels that can be expanded and collapsed.
    • shadcn-ui-templates - A collection of Free & Premium templates and resources for shadcn/ui.
    • ui-beats - Collection of Animated React Components.
    • dnd-dashboard - A beautiful, performant dashboard with drop-to-swap layouts built using Next.js, shadcn/ui, and swapy
    • assistant-ui - React Components for AI Chat.
    • 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-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.
    • 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.
    • 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-switch - A fancy switch component built with shadcn/ui.
    • file-uploader - A file uploader built with shadcn/ui and react-dropzone.
    • file-vault - File upload component for React.
    • fusion-ui - Fusion UI library combining shadcn/ui and MagicUI.
    • indie-ui - UI components with variants - [Docs](https://ui.indie-starter.dev)
    • 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.
    • neobrutalism-components - Collection of neobrutalism-styled Tailwind React and shadcn/ui components.
    • 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](https://tiptap.dev/) + [Vercel AI SDK](https://sdk.vercel.ai/docs).
    • 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-address-autocomplete - An address autocomplete component built with Google Places API and shadcn components.
    • 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-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-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-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-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.
    • simplekit - Responsive connect wallet and account component built on top of Wagmi and shadcn/ui.
    • sortable - A sortable component built with shadcn/ui, radix ui, and dnd-kit.
    • stocks - Stock Picker using Next.js, React Server Components, and shadcn/ui charts.
    • 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
    • zoom-charts - Zoomable Charts on top of shadcn/ui Charts.
    • nextjs-link-pagination - shadcn paging/pagination that uses Nextjs Links and search params (like `example.com?page=4`)
    • 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.
    • shadcn-cookie-consent - Beautifully designed, customizable cookie consent for web built on top of shadcn-ui and tailwind-css!
    • shadcn-tiptap - Collection of custom extensions and toolbars for Tiptap editor.
    • datetime-picker - A powerful datetime picker with support for timezones, minimum and maximum dates, and month/year selection.
    • inspira-ui - UI components to build stunning animated interfaces in Vue/NuxtJS
    • number-flow - A React component to transition, localize, and format numbers. Dependency-free. Accessible. Customizable.
    • stunning-ui - Stunning UI is a collection of interactive Tailwind CSS components built for Vue and Nuxt.
    • edil-ozi - React components for developers. Gsap + framer motion + tailwind.
    • 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.
    • lukacho-ui - Next Generation UI Components
    • mynaui - TailwindCSS and shadcn/ui UI Kit for Figma and React.
    • shadcn-calendar-heatmap - Modern alternative to primitive react heatmaps built on top of shadcn/ui calendar component.
    • shadcn-date-picker - Advanced date picker with range selection, year and month selection, and more.
    • origin-ui - Beautiful UI components built with Tailwind CSS and Next.js.
    • shadcn-spinner - Spinner component for shadcn/ui.
    • vaul - Drawer component for React.
    • motion-number - Transition, format, and localize numbers with a ~3kB Framer Motion component. Accessible and customizable.
    • react-highlight-popover - A headless react component for creating popovers on text selection with zero dependencies.
    • recursive-dnd-kanban-board - Recursively-generated drag and drop Accessible kanban board implementing using Next.js, @dnd-kit, tailwind and shadcn/ui.
    • shadcn-admin - Admin Dashboard UI built with shadcn/ui and Vite.
    • ibelick/background-snippet - Ready to use collection of modern background snippets.
    • aceternity-ui - Copy paste the most trending react components without having to worry about styling and animations.
    • autocomplete-select-shadcn-ui - Autocomplete component built with shadcn/ui and Fancy Multi Select by Maximilian Kaske.
    • 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](https://www.npmjs.com/package/@kinfe123/farm-ui) to install any component with in a component registery.
    • password-input - shadcn/ui custom password input.
    • clerk-elements - Composable components that can be used to build custom UIs on top of Clerk's APIs.
    • 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.
    • nextjs-components - A collection of Next.js components build with TypeScript, React, shadcn/ui, Craft UI, and Tailwind CSS.
    • phone-input-shadcn-ui - Custom phone number component built with shadcn/ui.
    • 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-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.
    • date-time-picker-shadcn - Beautifully Crafted Datetime Picker for your shadNext Project.
    • react-select - select library with shadcn styling. Support for Select, Async-Select, Multi-Select with many configurable options

  • Apps

    • Tools

      • 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.
      • 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.
      • sharable-form-builder - A sharable form builder for creating forms and sharing your form link, based on shadcn/ui and Next.js.
      • cut-it - Link shortener built using Next.js App Router, Server Actions, Drizzle ORM, Turso and styled with shadcn/ui.
      • down-dev-detector - This app lists all the services currently down and uses service Atlassian Status Page and others (soon).
      • form-builder - UI based codegen tool to easily create Beautiful and Type safe @shadcn/ui forms.
      • 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.
      • pastecode - Pastebin alternative built with Typescript, Next.js, Drizzle, shadcn/ui, RSC
      • 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
      • translate-app - Translate App using TypeScript, Tailwind CSS, NextJS, Bun, shadcn/ui, AI-SDK/OpenAI, Zod
      • wallhaven-desktop - Wallhaven Wallpaper software desktop. Create a wallhaven api based client , a true wallpaper software. use Farm , Tauri , React19, shadcn/ui.
      • bento-hub - BentoHub is a application where you can create a bento grid for your GitHub profile readme.
      • opensearch-ai - SearchGPT / Perplexity clone, but personalised for you.
      • postgres - The in-browser Postgres sandbox with AI assistance
      • tinte - An opinionated VS Code Theme Generator 🎨
      • 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.
      • ui-fonts - Test and preview fonts in real-time for all your design needs. Choose the perfect typeface with ease.
      • shadcn-form-builder - Create forms with Shadcn, react-hooks-form and zod within minutes
      • shadcn-zod-form - CLI tool to generate shadcn/ui forms from zod schemas.
      • ui-builder - A React component editor that provides a no-code, visual way to create UIs, fully compatible with shadcn/ui and custom components.
      • hook-again - A collection of shadcn/ui installable React Hooks
      • 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.
      • typelabs - MonkeyType inspired typing test app built with React, shadcn, and Zustand at it's core.
      • 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!
      • qualmeuip - Find out your IP address and test your internet speed

    • Colors and Customizations

      • 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.
      • ewgenius/ui - Create custom themes for shadcn/ui effortlessly using vibrant palettes from [Radix Colors](https://www.radix-ui.com/colors).
      • 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.
      • 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

      • motionvariants - Beautiful Framer Motion Animations.
      • magicui.design - Largest collection of open-source react components to build beautiful landing pages.
      • animata - Hand-crafted ✍️ interaction animations and effects from around the internet 🛜 to copy and paste into your project.

    • Plugins and Extensions

      • shadcn-hsl-preview - shadcn HSL Preview extension for Visual Studio Code.
      • designgui - 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.
      • 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.

  • Websites and Portfolios Inspirations

    • 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.
      • swajp.me
      • birobirobiro.dev
      • shubhporwal.me - An eye-catching developer Portfolio, built on NextJS, GSAP, Tailwind and React.

    • 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.

  • Ports

    • Portfolios

      • Sysinfocus simple/ui - Razor component library for Blazor, inspired by shadcn/ui
      • Angular - Angular port of shadcn/ui
      • Flutter - Flutter port of shadcn/ui
      • 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

  • Boilerplates / Templates

    • Portfolios

      • create-tauri-core - A project template for creating a Tauri app with Vite, React, and Tailwind CSS.
      • nextMotion - Webdev portfolio template with nodemailer integrated for easy contact form setup. Uses shadcn/ui + tailwindcss + framer-motion.
      • template-next - A clean Next.js template with TypeScript, TailwindCSS, Shadcn/ui, and Prettier.
      • 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.
      • 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.
      • 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](https://github.com/leoMirandaa/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.
      • shadcn-registry-template - Template repository for building a custom component registry for shadcn/ui.
      • easy-ui - 50+ High Quality Open Source Website Templates built using NextJS + shadcn/ui + Tailwind CSS + Framer Motion and more.
      • 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.
      • 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.
      • 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.
      • cloudflare-saas-stack - An opinionated, batteries-included starter kit for quickly building and deploying SaaS products on Cloudflare.
      • 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
      • opendocs - Beautifully designed template that you can use for your projects for free. Accessible. Customizable. Open Source with i18n support.
      • browser-extension-starter-plasmo-shadcn-trpc - Browser extension starter kit featuring Plasmo, React, Shadcn, and tRPC.
      • shadcn-next-workflows - Interactive workflow builder using React Flows, Next.js, and Shadcnui. Create, connect, and validate custom nodes easily.

  • Platforms

    • Portfolios

      • anonypost - Share your thoughts and experiences anonymously by posting on the platform. Crafted using t3-stack
      • 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
      • 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.
      • memergez - Quickly generate memes by entering text or an avatar URL, with support for many meme commands.
      • plotwist - Easy management and reviews of your movies, series and animes using Next.js, Tailwind CSS, Supabase and shadcn/ui.
      • bolhadev - The quickest path to learn English is speaking it regularly. Just find someone to chat with.
      • grade-calculator - A grade calculator/dashboard for students, aiming to provide a better overview on the academic performance.

  • Design System

    • Portfolios

      • shadcn-ui-components - Every component recreated in Figma.
      • shadcn-ui-storybook - All shadcn/ui components registered in the storybook by [JheanAntunes](https://github.com/JheanAntunes/storybook-shadcn)

    • Tools

      • shadcn-ui-storybook - All shadcn/ui components registered in the storybook by [fellipeutaka](https://github.com/fellipeutaka/ui)
Programming Languages
TypeScript 100 JavaScript 3 Vue 2 CSS 2 Swift 1 Svelte 1 HTML 1 Elixir 1 Kotlin 1 Dart 1
Categories
Libs and Components 100 Apps 53 Boilerplates / Templates 30 Ports 13 Platforms 9 Websites and Portfolios Inspirations 6 Design System 3
Sub Categories
Portfolios 58 Tools 33 Colors and Customizations 9 Plugins and Extensions 9 Animations 3 Websites 2
Keywords
shadcn-ui 53 nextjs 35 react 32 tailwindcss 31 typescript 24 shadcn 22 radix-ui 12 nextjs14 11 ui 10 shadcnui 6 ui-library 6 tailwind 6 component 6 ui-components 5 vercel 5 reactjs 5 dashboard 5 shadcn-ui-starter 5 react-component 4 tiptap 4 nextjs13 4 vite 4 components 4 prisma 4 zod 4 react-hook-form 4 autocomplete 3 stripe 3 nextjs-template 3 turborepo 3 nextjs-boilerplate 3 responsive-design 3 admin-dashboard 3 wysiwyg 3 storybook 3 drizzle-orm 3 tanstack-table 3 uploadthing 3 next-auth 3 framer-motion 3 shadcn-vue 2 rich-text-editor 2 dnd-kit 2 ai 2 turborepo-example 2 darkmode 2 radix-vue 2 starter 2 chatgpt 2 vue 2