Skip to main content

A curated list of awesome things related to shadcn/ui.

20k
GitHub Stars
434
Curated Resources
12
Categories
4 hours ago
Last Refreshed
Libs and ComponentsRegistriesPlugins and ExtensionsColors and CustomizationsAnimationsToolsWebsites and PortfoliosPlatformsPortsDesign SystemBoilerplates / TemplatesDevelopment & Contributing

Use this list with your AI agent

Add the Context Awesome MCP server to Claude, Cursor, or any MCP client, then ask:

"Show me for the awesome list resources from awesome-shadcn-ui"

Installation instructions →

What's inside

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.

Libs and Components

  • 21st.dev

    Open source npm for shadcn/ui components. Also: Dribble for design engineers. Install UI components via shadcn CLI, or publish your own.

  • 21st.dev-agent-elements

    Open-source registry of agent UI primitives — chat shell, tool-call cards (Bash, Edit, Search, Todo, Plan), clarifying questions, input bar, streaming markdown. Built on React 19, Tailwind v4, and the Vercel AI SDK.

  • 8bitcn.com

    A set of retro-designed, accessible components and a code distribution platform. Open Source. Open Code.

  • aceternity-ui

    Copy paste the most trending react components without having to worry about styling and animations.

  • agents-ui

    Agents UI is LiveKit’s open source component library built with React and shadcn for designing voice agent interfaces. Start with production-ready defaults, then customize every detail to match your brand.

  • animated-header

    Vercel-like animated header.

Tools

  • 5devs

    A website to get fake Brazilian data for testing purposes.

  • bento-hub

    BentoHub is an application where you can create a bento grid for your GitHub profile readme.

  • cheatsheet

    A comprehensive, interactive reference for shadcn/ui components with live previews, code examples, and instant copy functionality.

  • country-data-in-charts

    Globe Graph is a web app that visualizes countries' data like GDP, GDP per capita, and population in different years using many charts.

  • cut-it

    Link shortener built using Next.js App Router, Server Actions, Drizzle ORM, Turso, and styled with shadcn/ui.

  • cv-forge

    Resume builder built with @shadcn/ui, react-hook-form, and react-pdf.

Boilerplates / Templates

  • a11y-starter-kit

    Free WCAG 2.1 AA starter kit with accessible components, custom a11y hooks, and dark mode. Built with Next.js 16, Tailwind CSS v4, and shadcn/ui.

  • agentic-react-nextjs-shadcn

    Agent-testable SaaS starter built with Next.js 16, shadcn/ui, and Tailwind CSS. Includes accessibility-first components, semantic HTML for AI agent testing, and production-ready patterns.

  • astro-erudite

    An opinionated, unstyled static blogging template—built with Astro, Tailwind, and shadcn/ui.

  • atomic-crm

    Open-source React CRM built on top of Supabase Demo site

  • autoflow

    An open source GraphRAG (Knowledge Graph) built on top of TiDB Vector, LlamaIndex, and DSPy. Demo site .

  • browser-extension-starter-plasmo-shadcn-trpc

    Browser extension starter kit featuring Plasmo, React, Shadcn, and tRPC.

Websites and 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.

  • anishshobithps.com

    Personal portfolio of a software developer, grid-styled design .

  • birobirobiro.dev

    A personal developer portfolio.

  • bucharitesh.in

    A minimal portfolio with awesome craft's registry.

  • chanhdai.com

    A minimal portfolio, component registry, and blog.

  • devfolios

    Find best portfolio inspiration from all over the internet

Ports

  • Angular

    Angular port of shadcn/ui.

  • Basecoat

    Vanilla HTML, CSS and JS port of shadcn/ui.

  • Flutter

    Forui is a Flutter UI library heavily inspired by 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.

Animations

  • animata

    Hand-crafted ✍️ interaction animations and effects from around the internet 🛜 to copy and paste into your project.

  • animate-ui

    A fully animated, open-source React component distribution. Browse a list of animated primitives, components and icons you can install and use in your projects.

  • motionvariants

    Beautiful Framer Motion Animations.

Platforms

  • anonypost

    Share your thoughts and experiences anonymously by posting on the platform. Crafted using t3-stack.

  • auditzap

    AI-powered website audit tool that runs 24 checks across SEO, performance, and site health, then generates code-level fix instructions ranked by revenue impact. Built with Next.js 16, shadcn/ui, Tailwind CSS 4, and Drizzle ORM.

  • citeme

    AI-powered academic citation generator. Searches 11+ databases and formats in 40+ styles (APA, ABNT, MLA, etc.). Web app, Chrome extension, Google Docs add-on, and Word add-in.

  • grade-calculator

    A grade calculator/dashboard for students, aiming to provide a better overview of academic performance.

  • infinitunes

    A simple music player web app built using Next.js, shadcn/ui, Tailwind CSS, Drizzle ORM, and more.

  • kd

    Ad-free Kdrama streaming app. Built with Next.js, Drizzle ORM, NeonDB, and shadcn/ui.

Showing a sample of 434 resources. View the full list on GitHub →