repository·main·Indexed 12 days ago
https://github.com/birobirobiro/awesome-shadcn-uiA curated collection of high-quality resources, libraries, and components designed to extend the shadcn/ui ecosystem. Includes specialized editors, data visualization tools, admin dashboards, interactive UI components, theme generators, and ports for other frameworks like Vue, Svelte, Angular, and React Native.
If you are not using React, you can use various ports of the shadcn/ui design system and component logic for other ecosystems. Key ports include:
The awesome-shadcn-ui repository maintains a curated list of boilerplates, starter kits, and full-stack templates that integrate shadcn/ui. These resources help developers jumpstart projects ranging from simple landing pages to complex SaaS applications, admin dashboards, and even browser extensions.
Common categories of templates include:
chatdeck-shadcn-saas-landing-template, saas-blocks-kit, and magicui-startup-templates designed for product launches.next-shadcn-admin-dashboard, shadcn-ui-dashboard, and tailwind-admin.Next.js (e.g., chadnext, next-js-boilerplate), Astro (astro-erudite), SvelteKit (sveltekit-shadcn-starter-kit), and Vue (shadcn-vue-landing-page).create-next-shadcn-kit (for Next.js) and create-react-shadcn-kit (for Vite/React).ecommerce-kit), Portfolios (devstarter, shadcn-portfolio), and Browser Extensions (browser-extension-starter-plasmo-shadcn-trpc).turborepo-launchpad and design-system-template.The awesome-shadcn-ui repository maintains a curated list of libraries, components, and templates designed to work with or extend the shadcn/ui ecosystem. This includes:
plate), Lexical-based editors (shadcn-editor), and multi-select editors (plate-select-editor).shadcn-date-picker), color pickers (shadcn-color-picker), number scrubbers (shadcn-number-scrubber), and file dropzones (shadcn-dropzone).shadboard, shadcn-admin, shadcn-admin-kit), fintech dashboards (shadcn-fintech), and pricing pages (pricing-page-shadcn, shadcn-pricing-page).react-dnd-kit-tailwind-shadcn-ui, recursive-dnd-kanban-board), maps (shadcn-map, shadcn-google-maps), and chat interfaces (shadcn-chat, shadcn-chatbot-kit).phone-input-shadcn-ui, shadcn-phone-input), icon pickers (shadcn-iconpicker), and progress bars (progress-button, shadcn-stacked-progress-bar).shadcn-blocks, shadcn-blocks-com, shadcn-store, shadcn-space).Registries are collections of components, blocks, or templates that follow the shadcn/ui model (copy-pasteable code). You can use these to extend your UI with specific styles like claymorphism, neobrutalism, or motion-first components.
Key registries include:
The project follows a standard Next.js App Router structure with specific directories for logic and UI:
src/app/: Next.js App Router (API routes, layouts, global styles).src/components/: React components (including ui/ for shadcn/ui primitives).src/hooks/: Custom React hooks for logic (e.g., use-github-auth.ts, use-readme.ts).src/lib/: Utilities and the centralized config.ts.src/providers/: React context providers (e.g., theme-provider.tsx).The awesome-shadcn-ui repository maintains a curated list of tools, libraries, and components designed to enhance the development experience with shadcn/ui. These tools cover various categories including:
form-builder, form-builder-fast, and shadcn-zod-form (a CLI tool to generate forms from Zod schemas) help create type-safe forms.dialectcn and shadcnpreset provide brand-inspired presets, while shadcn-theme-editor simplifies managing theme colors.slidytabs adds sliding animations to <Tabs />, and hook-again provides installable React Hooks.shadcn-play is a playground for previewing components, and shadcn-easy-install allows for one-click installation of multiple components.shadscan provides deterministic UI audits for accessibility, navigation, and forms via terminal or CI.v0 (Vercel's generative UI) and pagegen.ai allow for UI generation from text or images.The awesome-shadcn-ui repository maintains a curated list of libraries, components, and tools designed to extend or complement the shadcn/ui ecosystem. These resources include:
shadcn-tanstack-form (type-safe forms), supercharged-shadcn-components (type-safe forms), stateful-button (async state feedback), and time-picker.shadcn-table-maker, shadcn-table-v2 (server-side), trable-craft (Drizzle ORM powered), tanstack-ui-table, and tnks-data-table (advanced server-side operations).shadcn-ui-sidebar (retractable), teul (grid system), and ui-layouts.tremor (dashboards), zoom-charts, and stocks (Next.js charts).shadcn-timeline, shadcn-tree-view, shadcn-event-calendar, termcn (terminal UIs), and warcraftcn (RTS aesthetics).shadcn-studio (registry), shadcncraft (Figma + React), shadcnui-templates, shadcnship (SaaS registry), and uiable.shadcndashboard and tremor.simple-ai, tool-ui (AI tool calls/MCP), and ui-nference-sh (chatbots/agents).tour, uixmat-onborda, and user-tour-kit (headless onboarding).simple-image-uploader, svelte-image-uploader, and snapcn (Remotion video components).simplekit (Wagmi wallet/account), solanauth (Solana auth), and w3-kit (dApps).shieldcn (Shields.io alternative using Satori).For a complete list and direct links to each project, refer to the original repository documentation.
Access design-related resources to bridge the gap between design and code:
obra-shadcn-ui (replicates v4 components in a composable way) or shadcn-ui-components to implement designs accurately.shadcn-storybook-registry or existing Storybook implementations (by JheanAntunes or fellipeutaka) to view and document atomic-level components in an interactive environment.The application uses GitHub's Device Flow for secure, client-side authentication without needing to store client secrets in the frontend. The flow follows these steps:
startDeviceFlow() to receive a userCode and verificationUri.// 1. Start device flow
const { userCode, verificationUri } = await startDeviceFlow();
// 2. User authorizes on GitHub
// 3. Poll for access token
// 4. Get user info and create authenticated Octokit