[ { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ngithub: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]\npatreon: # Replace with a single Patreon username\nopen_collective: # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\nlfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry\npolar: # Replace with a single Polar username\nbuy_me_a_coffee: # Replace with a single Buy Me a Coffee username\nthanks_dev: # Replace with a single thanks.dev username\ncustom: [\"https://buy.stripe.com/9B6cN6eZq6N136ygPm0Jq02\"]\n" }, { "path": ".github/pull_request_template.md", "content": "---\nname: \"feat: Add new awesome resource\"\nabout: \"Propose adding a new awesome resource related to shadcn/ui\"\nlabels:\n - feature\n---\n\n## Submission Options\n\nYou can submit resources in two ways:\n\n1. **Via Website**: Use the [awesome-shadcn-ui.vercel.app](https://awesome-shadcn-ui.vercel.app/) submission form for a guided experience\n2. **Via GitHub PR**: Use this template to create a pull request directly\n\n## Describe the awesome resource you want to add\n\n**What is it?** \n> Briefly explain what this resource is and why it's awesome...\n-\n\n## **Which section does it belong to?** \n- [ ] Libs and Components \n- [ ] Plugins and Extensions \n- [ ] Colors and Customizations \n- [ ] Animations \n- [ ] Tools \n- [ ] Websites and Portfolios Inspirations \n- [ ] Platforms \n- [ ] Ports \n- [ ] Design System \n- [ ] Boilerplates / Templates \n\n**Additional details (optional)** \n> Include screenshots, demos, or any other useful context...\n-\n\n## **Checklist**\n- [ ] I verified that the resource is listed in alphabetical order within its section.\n- [ ] I checked that the resource is not already listed.\n- [ ] I provided a clear and concise description of the resource.\n- [ ] I included a valid and working link to the resource.\n- [ ] I assigned the correct section to the resource.\n\n**Important Notes:** \n1. If you are introducing a new section, you must also add it to the `README.md` file and update the table of contents accordingly. \n2. This repository focuses on open-source and freely accessible projects. Paid or fully commercial resources will not be accepted. \n\n## Required Table Format\n\n**Format your entry exactly like this:**\n\n```markdown\n| Name | Description | [Link](Your_Link_Here) |\n```\n\n**Table Structure:**\n- **Name**: The resource name (keep it concise)\n- **Description**: Brief description of what the resource does\n- **Link**: Working link to the resource\n- **Date**: Leave empty - our system adds this automatically when merged\n\n**Formatting Rules:**\n- Each entry must be on a single line\n- Use proper markdown table syntax with `|` separators\n- Don't add dates manually - the system handles this\n- Ensure your link is working and accessible\n\nThank you for contributing to the awesome-shadcn/ui repository!" }, { "path": ".github/workflows/add-dates.yml", "content": "name: Add Dates to New Resources\n\non:\n push:\n branches:\n - main\n paths:\n - 'README.md'\n\njobs:\n add-dates:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout main\n uses: actions/checkout@v4\n\n - name: Set up Node.js\n uses: actions/setup-node@v4\n with:\n node-version: '20'\n\n - name: Add dates to new resources\n run: node scripts/add-dates.js\n\n - name: Commit changes (if any)\n run: |\n git config --local user.email \"github-actions[bot]@users.noreply.github.com\"\n git config --local user.name \"github-actions[bot]\"\n git add README.md\n git diff --quiet && git diff --staged --quiet || git commit -m \"Add dates to new resources\"\n git push\n" }, { "path": ".github/workflows/format-readme.yml", "content": "name: Format README\n\non:\n pull_request:\n paths:\n - \"README.md\"\n workflow_dispatch:\n\njobs:\n format-readme:\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout PR\n uses: actions/checkout@v4\n with:\n fetch-depth: 0\n\n - name: Set up Node.js\n uses: actions/setup-node@v4\n with:\n node-version: \"20\"\n\n - name: Format README\n run: node scripts/format-readme.js\n\n - name: Commit changes (if any)\n run: |\n git config --local user.email \"github-actions[bot]@users.noreply.github.com\"\n git config --local user.name \"github-actions[bot]\"\n git add README.md\n git diff --quiet && git diff --staged --quiet || git commit -m \"Format README.md\"\n # Empurra para a branch do PR\n git push origin HEAD:${{ github.head_ref }}\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n.open-next/\n\n.agents\n.claude\n.mcp.json" }, { "path": "DEVELOPMENT.md", "content": "# Development Guide\n\nThis guide covers the development setup, architecture, and configuration of the awesome-shadcn-ui website.\n\n## Quick Start\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n```\n\n## Project Structure\n\n```\nsrc/\n├── app/ # Next.js App Router\n│ ├── api/ # API routes\n│ │ └── github/ # GitHub OAuth & PR submission\n│ ├── globals.css # Global styles\n│ └── layout.tsx # Root layout\n├── components/ # React components\n│ ├── ui/ # shadcn/ui components\n│ ├── item-card.tsx # Resource card component\n│ └── pr-submission-dialog.tsx\n├── hooks/ # Custom React hooks\n│ ├── use-bookmark.ts # Bookmark management\n│ ├── use-debounce.ts # Search debouncing\n│ ├── use-github-auth.ts # GitHub OAuth flow\n│ ├── use-pr-submission.ts # PR creation logic\n│ └── use-readme.ts # README parsing\n├── lib/ # Utilities & configuration\n│ ├── config.ts # Centralized config\n│ └── utils.ts # Helper functions\n└── providers/ # React context providers\n ├── theme-provider.tsx\n └── providers.tsx\n```\n\n## Configuration\n\n### Centralized Config (`src/lib/config.ts`)\n\nAll configuration is centralized in one file:\n\n```typescript\nexport const GITHUB_CONFIG = {\n CLIENT_ID: \"Ov23lizgfZ4yKq0NxcTm\", // GitHub OAuth App\n REPO_OWNER: \"birobirobiro\", // Repository owner\n REPO_NAME: \"awesome-shadcn-ui\", // Repository name\n DEVICE_FLOW_URL: \"https://github.com/login/device/code\",\n ACCESS_TOKEN_URL: \"https://github.com/login/oauth/access_token\",\n SCOPES: [\"repo\"], // Required permissions\n FORK_CREATION_DELAY: 5000, // Delay for fork creation\n};\n\nexport const PR_TEMPLATE = {\n HEADER: { /* PR template structure */ },\n CATEGORIES: [ /* Available categories */ ],\n CHECKLIST_ITEMS: { /* Automated checklist */ }\n};\n\nexport const ERROR_MESSAGES = { /* Error messages */ };\nexport const STATUS_MESSAGES = { /* Status messages */ };\n```\n\n## Key Features\n\n### Resource Display\n- **Source**: Fetches from GitHub README.md\n- **Parsing**: `use-readme.ts` hook parses markdown tables\n- **Caching**: 30-minute cache to reduce API calls\n- **Categories**: Automatically groups by README sections\n\n### Search & Filtering\n- **Real-time search** with debouncing (300ms)\n- **Category filtering** with URL state management\n- **Layout switching** (compact, grid, row)\n- **Bookmark system** with localStorage persistence\n\n### PR Submission System\n- **GitHub OAuth**: Device flow for secure authentication\n- **One-time access**: No credential storage\n- **Automated workflow**:\n 1. Check/create user fork\n 2. Create feature branch\n 3. Update README with new resource\n 4. Create pull request with template\n- **Duplicate prevention**: Checks existing resources\n- **Alphabetical sorting**: Maintains README organization\n\n### GitHub Integration\n\n#### OAuth Flow (`use-github-auth.ts`)\n```typescript\n// 1. Start device flow\nconst { userCode, verificationUri } = await startDeviceFlow();\n\n// 2. User authorizes on GitHub\n// 3. Poll for access token\n// 4. Get user info and create authenticated Octokit\n```\n\n#### PR Creation (`use-pr-submission.ts`)\n```typescript\n// 1. Check/create fork\n// 2. Create branch from latest commit\n// 3. Fetch latest README from upstream\n// 4. Insert new resource alphabetically\n// 5. Commit changes\n// 6. Create PR with template\n```\n\n## UI Components\n\n### shadcn/ui Integration\n- **Components**: Button, Dialog, Input, Select, Badge, etc.\n- **Theming**: Dark/light mode with next-themes\n- **Styling**: Tailwind CSS with custom design system\n- **Accessibility**: Built-in ARIA support\n\n### Custom Components\n- **ItemCard**: Displays resource information\n- **PRSubmissionDialog**: Handles GitHub authentication and form\n- **LayoutSwitcher**: Toggle between view modes\n- **SearchBar**: Real-time search with debouncing\n\n## Data Flow\n\n```\nGitHub README.md → use-readme.ts → Resource[] → UI Components\n ↓\nUser Submission → PR Dialog → GitHub OAuth → PR Creation\n```\n\n## Development Workflow\n\n### Adding New Features\n1. **Hooks**: Add custom logic in `src/hooks/`\n2. **Components**: Create reusable components in `src/components/`\n3. **API**: Add endpoints in `src/app/api/`\n4. **Config**: Update centralized config in `src/lib/config.ts`\n\n### Environment Variables\n```bash\n# No environment variables required\n# All config is in src/lib/config.ts\n```\n\n### Testing\n```bash\n# Run type checking\nnpm run type-check\n\n# Run linting\nnpm run lint\n\n# Build check\nnpm run build\n```\n\n## Dependencies\n\n### Core\n- **Next.js 15.2.4**: React framework with App Router\n- **React 19**: UI library\n- **TypeScript 5.8.3**: Type safety\n\n### UI & Styling\n- **shadcn/ui**: Component library (Radix UI primitives)\n- **Tailwind CSS 4.1.11**: Utility-first CSS\n- **next-themes 0.4.6**: Theme management\n- **Lucide React 0.509.0**: Icons\n- **Framer Motion 11.0.0**: Animations\n\n### GitHub Integration\n- **@octokit/rest 22.0.0**: GitHub API client\n- **Device Flow OAuth**: Secure authentication\n\n### Utilities\n- **clsx 2.1.1**: Conditional classes\n- **tailwind-merge 2.6.0**: Tailwind class merging\n- **sonner 1.7.4**: Toast notifications\n- **class-variance-authority 0.7.1**: Component variants\n- **cmdk 1.0.0**: Command palette\n\n## Contributing\n\n1. **Fork the repository**\n2. **Create feature branch**: `git checkout -b feature/amazing-feature`\n3. **Make changes** following the existing patterns\n4. **Test thoroughly** with different scenarios\n5. **Submit PR** with clear description\n\n## Architecture Decisions\n\n### Why Device Flow OAuth?\n- **Security**: No client secrets in frontend\n- **User-friendly**: No redirects, works everywhere\n- **Temporary**: One-time access, no permanent storage\n\n### Why Centralized Config?\n- **Maintainability**: Single source of truth\n- **Type Safety**: TypeScript constants\n- **Consistency**: Same values across all files\n\n### Why README as Data Source?\n- **User Readme View**: Easily User Viewable\n- **Simplicity**: No database required\n- **Version Control**: Changes tracked in Git\n- **Transparency**: Public data source\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2024 João Inácio Neto\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "

\n \n \"awesome-shadcn/ui\n \n

\n\n

awesome-shadcn/ui

\n\n

\n A curated list of awesome things related to shadcn/ui\n

\n\n

\n Created by birobirobiro.dev
\n Site by bankkroll.xyz
\n Sponsored by
\n \n \"shadcnstudio.com\"\n \n \n \"shadcnblocks.com\"\n \n \n \"shadcnuikit.com\"\n \n

\n\n

\n \n \"Awesome\"\n \n

\n\n## Libs and Components\n\n| Name | Description | Link | Date |\n| ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---------- |\n| 21st.dev | Open source npm for shadcn/ui components. Also: Dribble for design engineers. Install UI components via shadcn CLI, or publish your own. | [Link](https://21st.dev/) | 2024-12-06 |\n| 8bitcn.com | A set of retro-designed, accessible components and a code distribution platform. Open Source. Open Code. | [Link](https://www.8bitcn.com/) | 2025-04-12 |\n| aceternity-ui | Copy paste the most trending react components without having to worry about styling and animations. | [Link](https://ui.aceternity.com/) | 2024-12-06 |\n| 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. | [Link](https://livekit.io/ui) | 2026-03-04 |\n| animated-header | Vercel-like animated header. | [Link](https://github.com/mehrdadrafiee/animated-header) | 2025-10-20 |\n| animated-tabs | Vercel-like animated tabs. | [Link](https://github.com/mehrdadrafiee/animated-tabs) | 2025-04-06 |\n| assistant-ui | React Components for AI Chat. | [Link](https://github.com/Yonom/assistant-ui) | 2024-09-23 |\n| audio/ui | A set of accessible and composable Audio UI components. Built on top of shadcn/ui, it's designed for you to copy, paste, and own. | [Link](https://github.com/ouestlabs/audio-ui) | 2025-11-20 |\n| autocomplete-select-shadcn-ui | Autocomplete component built with shadcn/ui and Fancy Multi Select by Maximilian Kaske. | [Link](https://www.armand-salle.fr/post/autocomplete-select-shadcn-ui) | 2024-04-07 |\n| auto-form | A React component that automatically creates a shadcn/ui form based on a zod schema. | [Link](https://github.com/vantezzen/auto-form) | 2024-04-29 |\n| async-select | Async Select component built with shadcn/ui with debounce search. | [Link](https://async.rdsx.dev) | 2024-07-22 |\n| berlix | Animated components library built using Tailwind CSS and Motion | [Link](https://berlix.vercel.app) | 2025-06-10 |\n| big-calendar | A modern, feature-rich calendar application with multiple viewing options built using Next.js, TypeScript, and Tailwind CSS. | [Link](https://github.com/lramos33/big-calendar) | 2025-03-08 |\n| billingsdk | Modern, type-safe billing and subscription management components for React, built with TypeScript and Tailwind CSS. Designed to work seamlessly alongside shadcn/ui by [Dodo Payments](https://dodopayments.com/). [GitHub](https://github.com/dodopayments/billingsdk) | [Link](https://billingsdk.com/) | 2025-09-06 |\n| billui | Open source billing components for React built with Shadcn. Pricing cards, payment methods, invoice history and more. | [Link](https://github.com/commet-labs/billui) | 2025-12-25 |\n| blocks.so | A set of clean, modern building blocks to copy and paste into your apps. Works with all React frameworks. | [Link](https://github.com/ephraimduncan/blocks) | 2025-09-06 |\n| buouui | A UI component library and template suite based on shadcn/ui with stunning landing pages, templates, and rich animations. | [Link](https://buouui.com) | 2025-04-06 |\n| bundui | A collection of reusable animated components built with Tailwind CSS and Framer Motion. | [Link](https://bundui.io) | 2024-09-23 |\n| calendar | React/shadcn full calendar like Google Calendar | [Link](https://github.com/charlietlamb/calendar) | 2024-05-03 |\n| calendar-cn | A beautifully crafted calendar component built with shadcn/ui and Tailwind CSS, inspired by Notion Calendar. Week view, dark mode, and more. | [Link](https://github.com/vmnog/calendarcn) | 2026-03-05 |\n| capture-photo | Browser-based React component for camera functionalities in web applications. | [Link](https://github.com/UretzkyZvi/capture-photo) | 2024-05-06 |\n| carouselcn | Copy-paste carousel components and examples for your react apps | [Link](https://github.com/mnove/carouselcn) | 2026-01-27 |\n| cascader-shadcn | A cascading dropdown menu component for selecting hierarchical data like locations, categories, or organizational structures. | [Link](https://github.com/Ademking/cascader-shadcn) | 2025-12-04 |\n| chanhdai-components | A collection of reusable components. Trusted registry for shadcn/ui. | [Link](https://chanhdai.com/components) | 2026-03-01 |\n| clerk-elements | Composable components for building custom UIs on top of Clerk's APIs. | [Link](https://clerk.com/docs/elements/examples/shadcn-ui) | 2024-06-07 |\n| clerk-shadcn-theme | Synchronize Clerk SignIn/SignUp components with shadcn/ui styles. | [Link](https://github.com/stormynight9/clerk-shadcn-theme) | 2024-06-07 |\n| commerce-ui | Components, blocks and examples to build e-commerce storefronts and apps. | [Link](https://github.com/stackzero-labs/ui) | 2025-02-20 |\n| confirm-dialog | A confirm dialog component built with shadcn/ui. | [Link](https://github.com/Aslam97/react-confirm-dialog) | 2024-07-02 |\n| country-state-dropdown | Component built with Nextjs, Tailwindcss, shadcn/ui & Zustand. | [Link](https://github.com/Jayprecode/country-state-dropdown) | 2024-02-22 |\n| creatorem/ui | Missing awesome shadcn components (like Tour, Stepper, QRCode Motion Dialog -> to imitate native behaviour ...) built on top of radix primitives and motion. | [Link](https://github.com/creatorem/ui) | 2025-12-19 |\n| credenza | Ready-made responsive modal component for shadcn/ui. | [Link](https://github.com/redpangilinan/credenza) | 2024-06-07 |\n| crypto-charts | Crypto charts made for shadcn/ui using PythNetwork. | [Link](https://github.com/jstnw10/crypto-charts) | 2024-07-16 |\n| cult-ui | Curated set of animated shadcn-style React components. | [Link](https://www.cult-ui.com/) | 2024-05-29 |\n| custom-admin-dashboard | A minimal, open-source ecommerce admin dashboard template built with shadcn/ui and Next.js. Includes products, products creation and details page, order, customer, and settings pages. | [Link](https://github.com/S5SAJID/custom-ecom) | 2025-09-06 |\n| data-command | Component for building dynamic command palettes with API-powered data. | [Link](https://shadcn.davidsling.in/components/data-command) | 2025-09-06 |\n| date-range-picker-for-shadcn | Multi-month views, text entry, preset ranges, responsive design, and date range comparisons. | [Link](https://github.com/johnpolacek/date-range-picker-for-shadcn) | 2024-04-29 |\n| date-time-picker-shadcn | Datetime Picker for shadNext Project. | [Link](https://shadcn-datetime-picker.vercel.app) | 2024-07-16 |\n| date-time-range-picker-shadcn | Fully featured date-time range picker with multi-month views, timezone support, preset ranges, and modular components for date and time selection. | [Link](https://date-time-range-picker.vercel.app/) | 2025-03-08 |\n| datetime-picker | Datetime picker with timezone support, min/max dates, and month/year selection. | [Link](https://shadcn-datetime-picker-xi.vercel.app) | 2024-07-16 |\n| dnd-dashboard | Dashboard with drop-to-swap layouts using Next.js, shadcn/ui, and swapy. | [Link](https://github.com/olliethedev/dnd-dashboard) | 2024-10-17 |\n| downshift-shadcn-combobox | Combobox/autocomplete component built with shadcn/ui and Downshift. | [Link](https://github.com/TheOmer77/downshift-shadcn-combobox) | 2024-06-27 |\n| drag-to-resize-sidebar | Extended shadcn/ui sidebar component with persisted state drag-to-resize functionality. | [Link](https://github.com/lumpinif/drag-to-resize-sidebar) | 2024-11-21 |\n| druid/ui | Intercom inspired AI chatbot and UI components built on shadcn/ui. | [Link](https://druidui.com/) | 2024-11-21 |\n| drop-drawer | A dropdown menu on desktop and a drawer on mobile devices. | [Link](https://github.com/jiaweing/DropDrawer) | 2025-05-13 |\n| dy-comps | shacn/ui & Framer Motion React components — flexible, responsive & easy to drop into any project. | [Link](https://dycomps.oimmi.com/) | 2025-03-08 |\n| dynamic-svg-arrow | Connect any two elements with beautiful, animated paths. Control curve shape, routing, layering, arrowheads, gradients, and responsive behavior in real-time. | [Link](https://dsa.hncore.website/) | 2025-10-09 |\n| echo-editor | Modern WYSIWYG rich-text editor based on tiptap and shadcn/ui. | [Link](https://github.com/Seedsa/echo-editor) | 2024-06-07 |\n| edil-ozi | React components with Gsap, framer motion, and tailwind. | [Link](https://edilozi.pro/) | 2024-06-27 |\n| eldora-ui | free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. | [Link](https://eldoraui.site/) | 2024-12-06 |\n| emblor | Customizable, accessible tag input component with shadcn/ui. | [Link](https://github.com/JaleelB/emblor) | 2024-04-29 |\n| enhanced-button | Enhanced version of the default shadcn-button component. | [Link](https://github.com/jakobhoeg/enhanced-button) | 2024-04-29 |\n| envin | Framework-agnostic, type-safe tool to validate and preview your environment variables - powered by your favorite schema validator. | [Link](https://envin.turbostarter.dev) | 2025-07-07 |\n| eo-n/ui | Enhanced UI components built on shadcn’s robust foundation, integrated with Base UI and Tailwind CSS for a modern and customizable design system. | [Link](https://github.com/aeonzz/eo-n) | 2025-04-04 |\n| event-timeline-roadmap | A pair of customizable, animated event timeline and roadmap components | [Link](https://roadmap.hncore.website/) | 2025-04-01 |\n| extend-ui | Reusable components built on shadcn/ui for web applications. | [Link](https://www.extend-ui.com/) | 2024-11-28 |\n| fancy-area | Textarea with @mention support inspired by GitHub's PR comment section. | [Link](https://craft.mxkaske.dev/post/fancy-area) | 2024-06-27 |\n| fancy-box | GitHub PR label selector-inspired Combobox with radix-ui components. | [Link](https://craft.mxkaske.dev/post/fancy-box) | 2024-07-11 |\n| fancy-multi-select | Multi Select Component inspired by campsite.design and cal.com. | [Link](https://craft.mxkaske.dev/post/fancy-multi-select) | 2024-04-29 |\n| fancy-switch | Fancy switch component built with shadcn/ui. | [Link](https://github.com/Aslam97/react-fancy-switch) | 2024-07-11 |\n| farmui | Styled and animated component library with npm package support. | [Link](https://farmui.com) | 2024-06-08 |\n| file-uploader | File uploader with shadcn/ui and react-dropzone. | [Link](https://github.com/sadmann7/file-uploader) | 2024-06-07 |\n| file-vault | File upload component for React. | [Link](https://github.com/ManishBisht777/file-vault) | 2024-06-07 |\n| floating-dragable-card | Dragable and resizable card using shadcn/ui elements. | [Link](https://github.com/nishansanjuka/react-drag-card) | 2024-11-13 |\n| fusion-ui | Library combining shadcn/ui and MagicUI. | [Link](https://github.com/nyxb-ui/ui) | 2024-07-02 |\n| glasscn-ui | shadcn/ui component library with glassmorphism variants, and many additional components. | [Link](https://github.com/itsjavi/glasscn-ui) | 2025-06-10 |\n| glitchcn-ui | A terminal-styled cyberpunk component library for Next.js with scanline effects, glowing borders, and monospace typography. | [Link](https://glitchcn-ui.vercel.app/) | 2026-02-06 |\n| gluestack-ui | React & React Native Components with Tailwind CSS. | [Link](https://gluestack.io) | 2024-11-08 |\n| goey-toast | Morphing toast notifications for React. Organic blob animations, promise tracking, and full customization out of the box | [Link](https://goey-toast.vercel.app/) | 2026-02-14 |\n| heroicons-animated | An open-source collection of 316 beautifully animated heroicons for your projects. | [Link](https://heroicons-animated.vercel.app/) | 2026-01-23 |\n| hexta-ui | Build stunning websites effortlessly. Modern, responsive, and customizable UI components for Next.js. Copy, adapt, and personalize them. | [Link](https://hextaui.com) | 2025-05-14 |\n| ibelick/background-snippet | Ready to use collection of modern background snippets. | [Link](https://bg.ibelick.com/) | 2024-06-09 |\n| image-crop-field | Image crop field with shadcn/ui. This component is a wrapper around the react-easy-crop component. | [Link](https://github.com/JsCodeDevlopment/upload-crop-image) | 2025-10-01 |\n| image-upload-shadcn | Image upload component. | [Link](https://github.com/kushagrasarathe/image-upload-shadcn) | 2024-10-22 |\n| indie-ui | UI components with variants. | [Link](https://github.com/Ali-Hussein-dev/indie-ui) | 2024-06-07 |\n| inspira-ui | UI components for animated interfaces in Vue/NuxtJS. | [Link](https://inspira-ui.com/) | 2024-10-22 |\n| jolyui | JolyUI is a modern React component library built with TypeScript, Tailwind CSS and Motion. It offers a wide range of customizable and accessible UI components to help you build stunning web applications quickly and efficiently. | [Link](https://github.com/Johuniq/jolyui) | 2026-01-23 |\n| junwen-k/ui-x | Additional beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. | [Link](https://ui-x.junwen-k.dev/) | 2025-02-03 |\n| kanban-board | A production‑ready Kanban board built on shadcn/ui with React & Tailwind CSS: zero dependencies, drag‑and‑drop, keyboard accessibility and seamless theming. | [Link](https://shadcn-kanban-board.com/) | 2025-07-15 |\n| kibo-ui | Kibo UI is designed to be a more comprehensive library of components that can be used to build more complex applications. | [Link](https://www.kibo-ui.com/overview) | 2025-04-04 |\n| kokonut-ui | Free Modern and Customizable components for Next.js. | [Link](https://kokonutui.com/) | 2024-11-08 |\n| ktui | Open-source collection of customizable UI components for Tailwind CSS and vanilla JavaScript | [Link](https://github.com/keenthemes/ktui) | 2025-06-10 |\n| launch-ui | Landing page components with React, Shadcn/ui and Tailwind. | [Link](https://www.launchuicomponents.com/) | 2024-11-12 |\n| lingua-time | Smart datetime picker with natural language input. | [Link](https://github.com/nainglinnkhant/lingua-time) | 2024-10-22 |\n| linked-chart | Chart component linked with data-table. | [Link](https://github.com/ardasisbot/linked-chart) | 2025-02-03 |\n| lukacho-ui | Next Generation UI Components. | [Link](https://ui.lukacho.com/components) | 2024-07-02 |\n| magicui | React components for landing pages with tailwindcss + framer motion. | [Link](https://magicui.design) | 2024-04-25 |\n| maily.to | Notion-like powerful email editor. | [Link](https://github.com/arikchakma/maily.to) | 2024-06-15 |\n| manfromexistence-ui | Components to build beautiful designs. | [Link](https://github.com/manfromexistence/ui) | 2024-12-26 |\n| manifest-ui | Components for ChatGPT Apps and MCP Apps. | [Link](https://ui.manifest.build) | 2025-12-23 |\n| matsu-theme | Ghibli Studio inspired theme for shadcn/ui made by Matt Wierzbicki | [Link](https://matsu-theme.vercel.app/) | 2025-04-23 |\n| mindmapcn | Beautiful mind maps, works seamlessly with shadcn/ui. | [Link](https://github.com/SSShooter/mindmapcn) | 2026-01-27 |\n| minimal-tiptap | Minimal WYSIWYG editor with shadcn/ui and tiptap. | [Link](https://github.com/Aslam97/shadcn-minimal-tiptap) | 2024-06-22 |\n| mixcnui | Collection of animated components for Nextjs. | [Link](https://github.com/taqui-786/mixcnui) | 2024-07-07 |\n| modal-control-query | A hook to control shadcn modal components using query params | [Link](https://shadcn.davidsling.in/hooks/use-modal-control-query) | 2025-11-02 |\n| moleculeui | A modern React component library focused on intuitive interactions and seamless user experiences. | [Link](https://www.moleculeui.design/) | 2025-09-06 |\n| multi-selection | Managing multi-selection functionality with highlighter. | [Link](https://github.com/sherifawad/multi-selection-with-add-remove) | 2025-01-21 |\n| mvpblocks | Copy-paste beautiful, responsive components without worrying about styling or animations. Build faster, launch sooner. | [Link](https://blocks.mvp-subha.me) | 2025-05-14 |\n| mynaui | TailwindCSS and shadcn/ui UI Kit for Figma and React. | [Link](https://mynaui.com/) | 2024-06-22 |\n| neobrutalism-components | Neobrutalism-styled Tailwind React and shadcn/ui components. | [Link](https://github.com/ekmas/neobrutalism-components) | 2024-04-07 |\n| nextjs-components | Next.js components with TypeScript and shadcn/ui. | [Link](https://components.bridger.to/) | 2024-06-07 |\n| nextjs-dnd | Sortable Drag and Drop with Next.js and dnd-kit. | [Link](https://github.com/sujjeee/nextjs-dnd) | 2024-04-09 |\n| nextjs-link-pagination | Pagination using Nextjs Links and search params. | [Link](https://shadcn-next-link-pagination.vercel.app) | 2024-07-30 |\n| nextjs-multi-image-upload | Compact, responsive file uploader with shadcn/ui, React Hook Form, and cloud support (S3/R2). | [Link](https://github.com/jacksonkasi0/nextjs-multi-image-upload) | 2025-02-23 |\n| next-shadcn-dashboard-starter | Admin Dashboard Starter with Nextjs 14 and Shadcn UI. | [Link](https://github.com/Kiranism/next-shadcn-dashboard-starter) | 2024-06-06 |\n| next-stepper | Dynamic multi-step form with Next.js and zustand. | [Link](https://github.com/ebulku/next-stepper) | 2024-11-25 |\n| novel | Notion-style WYSIWYG editor with AI-powered autocompletion. | [Link](https://github.com/steven-tey/novel) | 2024-06-11 |\n| number-flow | React component for number transitions and formatting. | [Link](https://number-flow.barvian.me/) | 2024-10-17 |\n| origin-ui | Beautiful UI components with Tailwind CSS and Next.js. | [Link](https://originui.com/) | 2024-10-28 |\n| password-input | shadcn/ui custom password input. | [Link](https://gist.github.com/mjbalcueva/b21f39a8787e558d4c536bf68e267398) | 2024-03-28 |\n| payment-gateways | Integration of payment gateways with Next.js 14. | [Link](https://github.com/PremPrakashCodes/payment-gateways) | 2024-08-05 |\n| pdfx | shadcn/ui-style PDF component library for React. Copy-paste components built on @react-pdf/renderer run pdfx add invoice and own the code. | [Link](https://github.com/akii09/pdfx) | 2026-02-28 |\n| phone-input-shadcn-ui | Custom phone number component with shadcn/ui. | [Link](https://www.armand-salle.fr/post/phone-input-shadcn-ui) | 2024-06-07 |\n| pittaya-ui | A fully open-source UI library for React, powered by TypeScript and Tailwind CSS. Fast, composable, and ready for production. | [Link](https://github.com/pittaya-ui/ui-kit) | 2026-01-27 |\n| planner | Adaptable scheduling component for React. | [Link](https://github.com/UretzkyZvi/planner) | 2024-04-29 |\n| plate | AI-powered rich-text editor. | [Link](https://github.com/udecode/plate) | 2024-03-21 |\n| plate-select-editor | Rich multi-select editor. | [Link](https://platejs.org/docs/multi-select) | 2024-11-28 |\n| pqoqubbw | Open-source animated icons collection. | [Link](https://icons.pqoqubbw.dev/) | 2024-11-21 |\n| pricing-page-shadcn | Customizable pricing page with Next.js 14. | [Link](https://github.com/m4nute/pricing-page-shadcn) | 2024-04-07 |\n| progress-button | Extended button component with progress UX. | [Link](https://github.com/tomredman/ProgressButton) | 2024-07-10 |\n| re-ui | Open-source collection of UI components and animated effects built with React, Typescript, Tailwind CSS, and Motion. Pairs beautifully with shadcn/ui | [Link](https://reui.io/) | 2025-09-06 |\n| react-dnd-kit-tailwind-shadcn-ui | Accessible kanban board with dnd-kit. | [Link](https://github.com/Georgegriff/react-dnd-kit-tailwind-shadcn-ui) | 2024-03-27 |\n| react-highlight-popover | Headless component for text selection popovers. | [Link](https://react-highlight-popover.omsimos.com) | 2024-10-03 |\n| react-pdf-flipbook-viewer | PDF flipbook viewer with zoom and fullscreen. | [Link](https://github.com/mohitkumawat310/react-pdf-flipbook-viewer) | 2024-12-26 |\n| react-select | React-select library with shadcn styling. | [Link](https://gist.github.com/ilkou/7bf2dbd42a7faf70053b43034fc4b5a4) | 2024-07-22 |\n| react-wheel-picker | iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support. | [Link](https://react-wheel-picker.chanhdai.com) | 2025-09-11 |\n| recursive-dnd-kanban-board | Recursive drag and drop kanban board. | [Link](https://github.com/mehrdadrafiee/recursive-dnd-kanban-board) | 2024-10-03 |\n| retro-ui | An open source component library, inspred by neo brutalism design system | [Link](https://retroui.dev) | 2025-05-13 |\n| roadmap-ui | Components for interactive roadmaps. | [Link](https://github.com/haydenbleasel/roadmap-ui) | 2024-12-26 |\n| ruixen-ui | Ruixen UI: Lightweight & Customizable React Library | [Link](https://github.com/ruixenui/ruixen.com) | 2025-12-04 |\n| search-address | Interactive address search using OpenStreetMap. | [Link](https://github.com/UretzkyZvi/search-address) | 2024-05-07 |\n| shadboard | An admin dashboard template built with Next.js 15, React 19, Tailwind CSS v4, and Shadcn/UI components, featuring starter and full kits for scalable, user-friendly web apps. | [Link](https://github.com/Qualiora/shadboard) | 2025-04-22 |\n| shadcn-address-autocomplete | Address autocomplete with Google Places API. | [Link](https://github.com/NiazMorshed2007/shadcn-address-autocomplete) | 2024-07-10 |\n| shadcn-admin | Admin Dashboard UI with shadcn/ui and Vite. | [Link](https://github.com/satnaing/shadcn-admin) | 2024-12-27 |\n| shadcn-admin-kit | Powerful open-source shadcn components to build beautiful internal tools, admin panels, and dashboards with React | [Link](https://github.com/marmelab/shadcn-admin-kit) | 2025-07-07 |\n| shadcn-blocks | Official pre-made customizable components. | [Link](https://ui.shadcn.com/blocks) | 2024-03-27 |\n| shadcn-blocks-com | Hundreds of extra blocks built with shadcn/ui. | [Link](https://www.shadcnblocks.com) | 2025-02-23 |\n| shadcn-builder | Create beautiful, responsive forms with the easy-to-use form builder and generate React code using shadcn/ui components. | [Link](https://www.shadcn-builder.com/?utm_source=github&utm_content=awesome-shadcn-ui) | 2025-03-31 |\n| shadcn-cal | Cal.com monthly calendar replica with shadcn/ui. | [Link](https://shadcn-cal-com.vercel.app/?date=2024-04-29) | 2024-05-03 |\n| shadcn-calendar-heatmap | Modern calendar heatmap alternative. | [Link](https://shadcn-calendar-heatmap.vercel.app/) | 2024-07-02 |\n| shadcn-calendar-component | Calendar date picker component. | [Link](https://github.com/sersavan/shadcn-calendar-component) | 2024-07-02 |\n| shadcn-chat | Customizable chat component. | [Link](https://github.com/jakobhoeg/shadcn-chat) | 2024-04-29 |\n| shadcn-carousel-testimonials | Carousel Testimonials component. | [Link](https://github.com/johanguse/shadcn-carousel-testimonials) | 2024-07-16 |\n| shadcn-chatbot-kit | Customizable chatbot components. | [Link](https://shadcn-chatbot-kit.vercel.app/) | 2024-12-27 |\n| shadcn-color-picker | Color picker with react-color. | [Link](https://shadcn-color-picker.vercel.app/) | 2024-09-23 |\n| shadcn-cookies | Sleek and flexible cookie consent component, designed with shadcn/ui | [Link](https://shadcn-cookies.vercel.app/) | 2025-02-06 |\n| shadcn-cookie-consent | Customizable cookie consent component. | [Link](https://github.com/r2hu1/shadcn-cookie-consent) | 2024-10-17 |\n| shadcn-components-blocks | The ultimate blocks and components for Shadcn UI & Tailwind CSS. | [Link](https://shadcncomponents.dev/) | 2025-09-06 |\n| shadcn-country-dropdown | ISO 3166 country selector dropdown. | [Link](https://shadcn-country-dropdown.vercel.app/) | 2024-12-27 |\n| shadcn-data-table-advanced-col-opions | DataTable with column resizing. | [Link](https://github.com/danielagg/shadcn-data-table-advanced-col-opions) | 2024-04-07 |\n| shadcn-date-picker | Advanced date picker with various features. | [Link](https://date-picker.luca-felix.com) | 2024-07-25 |\n| shadcn-drag-and-drop-sort | Drag-and-drop sortable list of pills of different widths using dnd-kit. | [Link](https://github.com/crystaltai/shadcn-drag-and-drop) | 2025-02-03 |\n| shadcn-drag-table | Drag-and-drop table component. | [Link](https://github.com/zenoncao/shadcn-drag-table) | 2024-02-22 |\n| shadcn-dropzone | File upload component using React-Dropzone, built with accessibility in mind. | [Link](https://github.com/janglad/shadcn-dropzone) | 2025-01-13 |\n| shadcn-editor | Lexical editor with shadcn theme. | [Link](https://github.com/htmujahid/shadcn-editor) | 2024-11-08 |\n| shadcn-examples | Dozens of advanced shadcn/ui examples. Easily integrate sample applications and components into your project. | [Link](https://shadcnexamples.com) | 2025-06-04 |\n| shadcn-extends | Collection of shadcn/ui components. | [Link](https://github.com/lucioew28/extends) | 2024-06-07 |\n| shadcn-extension | Open-source component collection. | [Link](https://github.com/BelkacemYerfa/shadcn-extension) | 2024-06-07 |\n| shadcn-font-picker | Font picker using shadcn/ui components and google font API. | [Link](https://shadcn-font-picker.vercel.app) | 2025-04-22 |\n| shadcn-full-calendar | A feature-rich calendar application built with React, TypeScript, and ShadCN UI components. This project provides a customizable and interactive calendar experience with multiple views, event management, and a modern UI. | [Link](https://github.com/yassir-jeraidi/full-calendar) | 2025-07-07 |\n| shadcn-iconpicker | React/shadcn simple icon picker using lucide icons. | [Link](https://icon-picker.alan-courtois.fr/) | 2025-02-20 |\n| shadcn-image-cropper | Image cropper with react-image-crop. | [Link](https://github.com/sujjeee/shadcn-image-cropper) | 2024-11-08 |\n| shadcn-io | Advanced Shadcn/UI components. | [Link](https://shadcn.io) | 2025-09-06 |\n| shadcn-linear-combobox | Linear-style task priority combobox. | [Link](https://github.com/damianricobelli/shadcn-linear-combobox) | 2024-04-25 |\n| shadcn-location-picker | Simple google maps location picker. | [Link](https://github.com/brielov/shadcn-location-picker) | 2025-03-04 |\n| shadcn-map | A map component built for shadcn/ui using Leaflet and React Leaflet. | [Link](https://shadcn-map.vercel.app/) | 2025-09-30 |\n| shadcn-multi-select-component | Multi-select component. | [Link](https://github.com/sersavan/shadcn-multi-select-component) | 2024-06-07 |\n| shadcn-number-scrubber | Draggable numeric input component. | [Link](https://github.com/camwebby/shadcn-react-number-scrubber) | 2025-01-07 |\n| shadcn-packaged | This is an npm package that exports all shadcn/ui components without the need for a CLI, designed for ease of use. | [Link](https://github.com/anuoua/shadcn-packaged) | 2025-02-27 |\n| shadcn-phone-input-2 | Phone input with libphonenumber-js. | [Link](https://github.com/damianricobelli/shadcn-phone-input) | 2024-06-07 |\n| shadcn-phone-input | Phone input with country validation. | [Link](https://github.com/omeralpi/shadcn-phone-input) | 2024-03-27 |\n| shadcn-portable-text-editor | A headless rich text editor built upon Sanity's Portable Text Editor with opinionated starting styles | | 2025-09-06 |\n| shadcn-pricing-page | Responsive pricing component with toggles. | [Link](https://github.com/aymanch-03/shadcn-pricing-page) | 2024-03-08 |\n| shadcn-space | Open-source shadcn/ui blocks, components, and templates built with React, Tailwind, and Base UI. | [Link](https://github.com/shadcnspace/shadcnspace) | 2026-02-27 |\n| shadcn-spinner | Spinner component. | [Link](https://github.com/allipiopereira/shadcn-spinner) | 2024-12-09 |\n| shadcn-stepper | Complete stepper component. | [Link](https://github.com/damianricobelli/stepperize) | 2024-04-25 |\n| shadcn-studio | Open Source Registry of Shadcn components and blocks. | [Link](https://shadcnstudio.com/) | 2025-04-24 |\n| shadcn-table-maker | Tool for creating dynamic tables. | [Link](https://shadcn-table-maker.vercel.app/) | 2024-12-09 |\n| shadcn-table-v2 | Table with server-side features. | [Link](https://github.com/sadmann7/shadcn-table) | 2024-03-27 |\n| shadcn-tanstack-form | Seamless shadcn TanStack Form component set. Fully featured with validation support and type-safety. | [Link](https://shadcn-tanstack-form.felipestanzani.com/) | 2025-10-08 |\n| shadcn-timeline | Customizable timeline component. | [Link](https://github.com/timDeHof/shadcn-timeline) | 2024-06-22 |\n| shadcn-timeline-2 | Alternative timeline component. | [Link](https://timeline.rilcy.app) | 2024-11-08 |\n| shadcn-tiptap | Custom Tiptap editor extensions. | [Link](https://github.com/NiazMorshed2007/shadcn-tiptap) | 2024-11-08 |\n| shadcn-vaults | Collection of various interactive components & blocks for Internal Tools UI like Dashboard, Monitoring, Admin, CMS, and more. Specifically made for Full-Stack Dev | [Link](https://shadcn-vaults.vercel.app/) | 2025-07-03 |\n| shadcn-tree-view | Hierarchical data component. | [Link](https://github.com/mrlightful/shadcn-tree-view) | 2024-09-23 |\n| shadcn-ui-blocks | Collection of responsive UI blocks. | [Link](https://shadcn-ui-blocks.vercel.app/) | 2024-06-15 |\n| shadcn-ui-expansions | Additional useful components. | [Link](https://github.com/hsuanyi-chou/shadcn-ui-expansions) | 2024-06-07 |\n| shadcn-ui-sidebar | Retractable responsive sidebar. | [Link](https://github.com/salimi-my/shadcn-ui-sidebar) | 2024-05-03 |\n| shadcn-ui-templates | Free & Premium templates collection. | [Link](https://shadcnui-templates.com) | 2024-09-18 |\n| shadcnship | Production-ready shadcn/ui component registry for building modern SaaS applications with Next.js, TypeScript, and Tailwind CSS. | [Link](https://github.com/arnaudvolp/shadcnship) | 2026-01-31 |\n| shaduxe-ui | Component variants for shadcn/ui. | [Link](https://ui.shaduxe.com) | 2024-12-27 |\n| shadcn-event-calendar | A beautiful and flexible event calendar component inspired by Google Calendar and Notion, built with Shadcn UI, TailwindCSS, and Framer Motion. | [Link](https://shadcn-event-calendar.vercel.app) | 2025-07-16 |\n| shsfui | Motion-first React components built with Tailwind CSS + Framer Motion. | [Link](https://www.shsfui.com) | 2025-03-12 |\n| shuip | Provides ready-to-use, business-focused components that help you ship faster. | [Link](https://shuip.plvo.dev/docs) | 2025-10-09 |\n| siddz-ui | A curated collection of modern, reusable React components. Built with performance and accessibility in mind. Copy, paste, and customize. | [Link](https://siddz.com/components) | 2026-02-13 |\n| simple-ai | Components and blocks to easily build AI apps | [Link](https://simple-ai.dev) | 2025-01-21 |\n| simple-image-uploader | Image uploader with dnd, validation and previews | [Link](https://simple-image-uploader-bice.vercel.app/) | 2025-03-25 |\n| simplekit | Wallet and account component for Wagmi. | [Link](https://github.com/vaunblu/SimpleKit) | 2024-09-18 |\n| skiper-ui | Stand out from others with this crazzy ui library built with shad-cn cli | [Link](https://skiper-ui.com/) | 2025-02-03 |\n| solanauth | Solana wallet authentication modal. | [Link](https://solanauth.vercel.app/) | 2024-11-25 |\n| sortable | Sortable component with dnd-kit. | [Link](https://github.com/sadmann7/sortable) | 2024-04-09 |\n| spectrum-ui | Collection using Aceternity UI Magic UI. | [Link](https://github.com/arihantcodes/spectrum-ui) | 2024-11-25 |\n| stateful-button | A shadcn/ui button component that provides clear visual feedback with full accessibility support for loading/progress, success, and error states during asynchronous operations. | [Link](https://github.com/nanyx95/Stateful-Button-React) | 2025-09-06 |\n| stocks | Stock Picker with Next.js charts. | [Link](https://github.com/aryanvichare/stocks) | 2024-07-07 |\n| supabase-shadcn-database-example | supabase + shadcn/ui datatable | [Link](https://github.com/thisisfel1x/supabase-shadcn-database-example) | 2024-12-30 |\n| supercharged-shadcn-components | Type-safe form components collection. | [Link](https://github.com/slickwit/supercharged-shadcn-components) | 2024-11-25 |\n| svelte-image-uploader | Svelte image uploader with dnd, validation and previews. | [Link](https://svelte-image-uploader.vercel.app/) | 2025-06-10 |\n| trable-craft | Drizzle ORM-powered table engine that auto-generates tables from your schema. Built on TanStack Table with server-side filtering, sorting, pagination, search, export, and URL state sync. | [Link](https://github.com/jacksonkasi1/TableCraft) | 2026-02-27 |\n| tanstack-ui-table | Customizable table with @tanstack/table and shadcn/ui | [Link](https://github.com/drefahl/tanstack-ui-table) | 2025-02-27 |\n| the-gridcn | Tron inspired shadcn/ui theme | [Link](https://thegridcn.com/) | 2026-02-06 |\n| time-picker | Simple TimePicker component. | [Link](https://github.com/openstatusHQ/time-picker) | 2024-04-29 |\n| tnks-data-table | Advanced data table component built with shadcn/ui and TanStack Table featuring server-side operations, row selection, filtering, column customization, and export functionality. Fully TypeScript compatible with comprehensive documentation. | [Link](https://github.com/jacksonkasi1/tnks-data-table) | 2025-04-19 |\n| tool-ui | Beautiful, ready-to-use UI components for AI tool calls and MCP UI. | [Link](https://www.tool-ui.com/) | 2025-12-10 |\n| tour | A component for building onboarding tours. Designed to integrate with shadcn/ui. | [Link](https://onboarding-tour.vercel.app) | 2025-12-04 |\n| tremor | Components for charts and dashboards. | [Link](https://github.com/tremorlabs/tremor) | 2024-06-15 |\n| twblocks | Website blocks based on shadcn & Radix. | [Link](https://github.com/tommyjepsen/twblocks) | 2024-11-25 |\n| tweet-to-code | Twitter design recreations as code. | [Link](https://tweet-to-code.vercel.app/) | 2024-12-26 |\n| ui-beats | Animated React Components collection. | [Link](https://uibeats.com) | 2024-09-23 |\n| ui-layouts | UI Layouts isn’t just a library. It’s a complete toolkit with components, effects, design tools, and ready-to-use blocks, everything you need to build modern interfaces, faster. | [Link](https://www.ui-layouts.com/) | 2025-10-15 |\n| ui-nference-sh | a shadcn registry of react ui components for building ai-powered applications, chatbots, and ai agent interfaces. | [Link](https://ui.inference.sh/) | 2026-02-13 |\n| uixmat-onborda | Product tour for Next.js applications. | [Link](https://github.com/uixmat/onborda) | 2024-06-07 |\n| uselayouts | Free premium animated React components and micro-interactions built with Framer Motion and Tailwind CSS. Modern, ready-to-use motion components for high-converting websites. | [Link](https://uselayouts.com) | 2026-01-23 |\n| vaul | Drawer component for React. | [Link](https://vaul.emilkowal.ski/) | 2024-06-07 |\n| vengence-ui | A modern, animated UI component library designed to help developers build beautiful landing pages and interfaces faster. | [Link](https://www.vengenceui.com/) | 2026-02-17 |\n| vyoma-ui | Beautiful Components Made on top of Shadcn/ui with Spatial Wisdom Inside. Truly Beyond UI. | [Link](https://vyomaui.design/) | 2025-07-15 |\n| warcraftcn | A set of components inspired by classic Warcraft III RTS UI aesthetics | [Link](https://www.warcraftcn.com/) | 2026-02-06 |\n| wds registry | A collection of components that you can use to build your own component library. | [Link](https://wds-shadcn-registry.netlify.app) | 2025-09-06 |\n| zoom-charts | Zoomable Charts with shadcn/ui. | [Link](https://github.com/shelwinsunga/zoom-chart-demo) | 2024-07-16 |\n\n## Registries\n\n| Name | Description | Link | Date |\n| ------------------ | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------ | ---------- |\n| efferd | ready-to-use shadcn blocks that just work — modern, responsive, and built for speed. | [Link](http://efferd.com/) | 2026-03-05 |\n| more-shadcn | A collection of high-quality, copy-paste components for Svelte 5, built on top of shadcn-svelte. | [Link](https://more-shadcn.noair.fun/) | 2026-01-23 |\n| neobrutalism-vue | A vue-based registry of neobrutalism-styled Tailwind components. | [Link](https://github.com/michaelsieminski/neobrutalism-vue) | 2025-12-04 |\n| registry.directory | A curated directory to discover, preview, and copy shadcn/ui registries. | [Link](https://github.com/rbadillap/registry.directory) | 2025-09-20 |\n| tailark | Shadcn blocks for building modern marketing websites | [Link](https://tailark.com) | 2026-02-06 |\n| undraw-cn | Beautiful, customizable React components for unDraw illustrations. | [Link](https://undraw-cn.vaatun.com) | 2025-12-04 |\n\n## Plugins and Extensions\n\n| Name | Description | Link | Date |\n| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ---------- |\n| 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. | [Link](https://chat-with-youtube.vercel.app/) | 2024-06-07 |\n| designgui | A Chrome Browser Extension for managing colors in CSS Variables. | [Link](https://www.designgui.io/) | 2024-09-05 |\n| imprompt | A Chrome extension that enhances prompts on AI websites directly, making your AI prompts more effective and productive. | [Link](https://github.com/avalynndev/imprompt) | 2025-09-06 |\n| raycast-shadcn | Raycast extension to Browse shadcn/ui documentation, components, and examples. | [Link](https://www.raycast.com/luisFilipePT/shadcn-ui) | 2024-06-05 |\n| shadcn-hsl-preview | shadcn HSL Preview extension for Visual Studio Code. | [Link](https://marketplace.visualstudio.com/items?itemName=dexxiez.shadcn-color-preview) | 2024-09-05 |\n| shadcn-ui | Add components from shadcn/ui directly from VS Code. | [Link](https://marketplace.visualstudio.com/items?itemName=SuhelMakkad.shadcn-ui) | 2024-03-08 |\n| 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. | [Link](https://plugins.jetbrains.com/plugin/23479-shadcn-ui-components-manager) | 2024-03-28 |\n| vscode-shadcn-svelte | VS Code extension for shadcn/ui components in Svelte projects. | [Link](https://marketplace.visualstudio.com/items?itemName=Selemondev.vscode-shadcn-svelte&ssr=false#overview) | 2024-03-28 |\n| vscode-shadcn-ui-snippets | Easily import and use shadcn-ui components with ease using snippets within VSCode. Just type cn or shadcn in your jsx/tsx file and you will get a list of all the components to choose from. | [Link](https://marketplace.visualstudio.com/items?itemName=VeroXyle.shadcn-ui-snippets) | 2024-06-05 |\n| vscode-shadcn-vue | Extension for integrating shadcn/ui components into Vue.js projects. | [Link](https://marketplace.visualstudio.com/items?itemName=Selemondev.shadcn-vue) | 2024-03-28 |\n\n## Colors and Customizations\n\n| Name | Description | Link | Date |\n| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------- |\n| 10000+Themes for shadcn/ui | 10000+ Themes for shadcn/ui. | [Link](https://ui.jln.dev/) | 2024-02-22 |\n| dizzy | Bootstrap a new Next or Vite project with shadcn/ui. Customize font, icons, colors, spacing, radii, and shadows. | [Link](https://dizzy.systems) | 2024-06-05 |\n| ewgenius/ui | Create custom themes for shadcn/ui effortlessly using vibrant palettes from Radix Colors. | [Link](https://ui.ewgenius.me/shadcn-radix-colors) | 2024-10-11 |\n| gradient-picker | Fancy Gradient Picker built with shadcn/ui, Radix UI, and Tailwind CSS. | [Link](https://github.com/Illyism/gradient-picker) | 2024-03-08 |\n| navnote/rangeen | Tool that helps you to create a colour palette for your website. | [Link](https://github.com/navnote/rangeen) | 2024-06-05 |\n| shadesigner.com | A shadcn/ui Palette Generator & Theme Designer with a beautiful interface. | [Link](https://shadesigner.com) | 2024-12-26 |\n| shadcn-ui-customizer | POC - shadcn/ui themes with color pickers. | [Link](https://github.com/Railly/shadcn-ui-customizer) | 2024-03-08 |\n| 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. | [Link](https://github.com/programming-with-ia/shadcn-theme-editor/) | 2024-08-19 |\n| smui | Nord-inspired terminal theme for shadcn/ui with monospace typography, zero border radius, and frost-blue accents. | [Link](https://smui.statico.io) | 2026-02-18 |\n| tweakcn | powerful theme editor for shadcn/ui components, offering beautifully designed themes and seamless Tailwind CSS V4 integration | [Link](https://tweakcn.com/) | 2025-03-25 |\n| ui-colorgen | An application designed to assist you with color configuration of shadcn/ui. | [Link](https://ui-colorgen.vercel.app/) | 2024-02-22 |\n| zippy starter's shadcn/ui theme generator | Easily create custom themes from a single colour that you can copy and paste into your apps. | [Link](https://zippystarter.com/tools/shadcn-ui-theme-generator) | 2024-03-13 |\n\n## Animations\n\n| Name | Description | Link | Date |\n| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ---------- |\n| animata | Hand-crafted ✍️ interaction animations and effects from around the internet 🛜 to copy and paste into your project. | [Link](https://animata.design) | 2024-08-26 |\n| 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. | [Link](https://animate-ui.com/) | 2025-10-15 |\n| magicui.design | Largest collection of open-source react components to build beautiful landing pages. | [Link](https://magicui.design) | 2024-04-25 |\n| motionvariants | Beautiful Framer Motion Animations. | [Link](https://github.com/chrisabdo/motionvariants) | 2024-03-08 |\n| smooth-ui | Highly customizable, production-ready UI blocks for building beautiful websites and apps that look and feel the way you mean it. | [Link](https://smoothui.dev/) | 2025-10-15 |\n| tailwindcss-motion | A new simple syntax animation library. Batteries included. Infinitely configurable. | [Link](https://rombo.co/tailwind/) | 2024-11-13 |\n\n## Tools\n\n| Name | Description | Link | Date |\n| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ---------- |\n| 5devs | A website to get fake Brazilian data for testing purposes. | [Link](https://www.5devs.com.br/) | 2024-05-31 |\n| bento-hub | BentoHub is an application where you can create a bento grid for your GitHub profile readme. | [Link](https://github.com/amittam104/BentoHub) | 2024-09-09 |\n| cheatsheet | A comprehensive, interactive reference for shadcn/ui components with live previews, code examples, and instant copy functionality. | [Link](https://shadcnstore.com/cheatsheet/) | 2025-09-22 |\n| cut-it | Link shortener built using Next.js App Router, Server Actions, Drizzle ORM, Turso, and styled with shadcn/ui. | [Link](https://github.com/mehrabmp/cut-it) | 2024-06-07 |\n| 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. | [Link](https://globe-graph.vercel.app/) | 2024-09-09 |\n| dev-quotes | A website that displays quotes from professional programmers. | [Link](https://dev-quotes-six.vercel.app/) | 2025-01-07 |\n| down-dev-detector | This app lists all the services currently down and uses Atlassian Status Page and others (soon). | [Link](https://github.com/birobirobiro/downdevdetector) | 2024-11-04 |\n| cv-forge | Resume builder built with @shadcn/ui, react-hook-form, and react-pdf. | [Link](https://cvforge.app) | 2024-11-04 |\n| focus-brew | A free productivity toolkit that combines essential tools to help you stay focused, organized, and efficient throughout your workday. | [Link](https://focusbrew.vercel.app) | 2025-05-14 |\n| form-builder | UI-based codegen tool to easily create beautiful and type-safe @shadcn/ui forms. | [Link](https://github.com/AlandSleman/FormBuilder) | 2024-06-07 |\n| form-builder-fast | Shadcn Form Builder - Build forms in minutes for free. | [Link](https://ui.indie-starter.dev/form-builder) | 2024-12-26 |\n| graphitup | Create free downloadable Shadcn-themed chart images. Supports PNG, JPEG, WEBP, and even WEBM videos. Upload your own data for more realistic designs. | [Link](https://graphitup.com/tools) | 2025-12-26 |\n| hook-again | A collection of shadcn/ui installable React Hooks. | [Link](https://github.com/ilyichv/hookagain) | 2024-11-04 |\n| Img2m3 | A developer tool that automates the process of creating cohesive, accessible design systems. It bridges the gap between Google's Material Design 3 algorithms and the modern Tailwind CSS v4 ecosystem. | [Link](https://img2m3.vercel.app/studio) | 2026-01-23 |\n| imgsrc | Generate beautiful Open Graph images with zero effort. | [Link](https://imgsrc.io/) | 2024-05-31 |\n| invoify | An invoice generator app built using Next.js, TypeScript, and shadcn/ui. | [Link](https://github.com/aliabb01/invoify) | 2024-03-27 |\n| jobsync | JobSync is a job seekers' assistant to manage job search efficiently. | [Link](https://github.com/Gsync/jobsync) | 2024-07-17 |\n| memfree | Open-source hybrid AI search engine, instantly get accurate answers from the internet, bookmarks, notes, and docs. Built using Next.js and shadcn/ui. | [Link](https://github.com/memfreeme/memfree) | 2024-07-22 |\n| opensearch-ai | SearchGPT/Perplexity clone but personalized for you. | [Link](https://github.com/supermemoryai/opensearch-ai) | 2024-12-26 |\n| pagegen.ai | An AI Page Generator with Claude AI, React, and shadcn/ui. Generate web pages from text, screenshots, and templates with one click. | [Link](https://pagegen.ai) | 2024-12-26 |\n| pastecode | Pastebin alternative built with TypeScript, Next.js, Drizzle, shadcn/ui, and RSC. | [Link](https://github.com/Quorin/PasteCode.app) | 2024-06-07 |\n| pictera | Generate Open Graph images without design skills. | [Link](https://pictera.co) | 2025-10-08 |\n| proxmox-helper-scripts | A catalog of scripts for your Proxmox VE homelab, built with the Next.js App Router and styled with shadcn/ui. | [Link](https://github.com/BramSuurdje/proxmox-helper-scripts) | 2024-07-16 |\n| quack-db | Open-source in-browser DuckDB SQL editor. | [Link](https://github.com/mattf96s/QuackDB) | 2024-10-03 |\n| shadcn-easy-install | Install all shadcn components easily. One-click to install all selected components. | [Link](https://shadcn-easy-install.vercel.app/) | 2025-06-10 |\n| shadcn-form-builder | Create forms with Shadcn, react-hook-form, and Zod within minutes. | [Link](https://shadcn-form-build.vercel.app/) | 2024-10-03 |\n| shadcn-hooks | A comprehensive React Hooks Collection built with Shadcn. | [Link](https://shadcn-hooks.com/) | 2025-10-13 |\n| shadcn-play | A playground for building and previewing shadcn/ui components with a live editor. | [Link](https://github.com/ephraimduncan/shadcn-play) | 2026-02-13 |\n| shadcn-pricing-page-generator | The easiest way to get a React pricing page with shadcn/ui, Radix UI, and/or Tailwind CSS. | [Link](https://shipixen.com/shadcn-pricing-page) | 2024-03-08 |\n| 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. | [Link](https://shadcnthemeeditor.vercel.app) | 2024-08-19 |\n| shadcn-zod-form | CLI tool to generate shadcn/ui forms from Zod schemas. | [Link](https://github.com/ilyichv/shadcn-zod-form) | 2024-10-03 |\n| sharable-form-builder | A sharable form builder for creating forms and sharing your form link, based on shadcn/ui and Next.js. | [Link](https://github.com/ayoubben18/sharable-form-builder) | 2024-10-12 |\n| shoogle | A shadcn search engine | [Link](https://shoogle.dev/) | 2026-02-13 |\n| slidytabs | A tool that adds a sliding indicator animation to shadcn `` without changing how you use or customize the component | [Link](https://slidytabs.dev) | 2026-01-23 |\n| someday | Free to host and open-source Cal.com/Calendly alternative built on Google Apps Script for Gmail users. | [Link](https://github.com/rbbydotdev/someday) | 2024-12-26 |\n| sweep | Sweep is a modern, open-source gradient generator built for designers and developers. Create beautiful linear and radial gradients with real-time preview, noise/blur effects, and export to CSS, Tailwind, SVG, or JPG. Free forever. No sign-up required. | [Link](https://github.com/Johuniq/sweep) | 2025-11-11 |\n| tancn | Build powerful forms and tables with ease using TanStack technologies | [Link](https://tancn.dev/) | 2025-11-02 |\n| tinte | An opinionated VS Code Theme Generator 🎨. | [Link](https://tinte.railly.dev/) | 2024-10-03 |\n| translate-app | Translate App using TypeScript, Tailwind CSS, NextJS, Bun, shadcn/ui, AI SDK/OpenAI, and Zod. | [Link](https://github.com/developaul/translate-app) | 2024-07-08 |\n| typelabs | MonkeyType-inspired typing test app built with React, shadcn, and Zustand at its core. | [Link](https://github.com/imsandeshpandey/typelabs) | 2024-07-08 |\n| ui-builder | A React component editor that provides a no-code, visual way to create UIs, fully compatible with shadcn/ui and custom components. | [Link](https://github.com/olliethedev/ui-builder) | 2024-10-11 |\n| ui-fonts | Test and preview fonts in real-time for all your design needs. Choose the perfect typeface with ease. | [Link](https://www.uifonts.app/) | 2024-10-23 |\n| v0 | Vercel's generative UI system, built on shadcn/ui and TailwindCSS, allows effortless UI generation from text prompts and/or images. | [Link](https://v0.dev/) | 2024-03-27 |\n| vercel-status-tracker | Track the status of all of your projects deployed via Vercel. Built with shadcn/ui and TailwindCSS. | [Link](https://vercel-status-tracker.vercel.app) | 2025-01-02 |\n| wallhaven-desktop | Wallhaven Wallpaper software desktop. Create a Wallhaven API-based client, a true wallpaper software. | [Link](https://github.com/ErKeLost/wallhaven-desktop) | 2024-10-23 |\n\n## Websites and Portfolios\n\n| Name | Description | Link | Date |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | ---------- |\n| andrewsam.xyz | A revamped version of the popular tailwind-nextjs-starter-blog using shadcn/ui, along with a resume section and experience timeline component. | [Link](https://www.andrewsam.xyz/) | 2024-09-18 |\n| anishshobithps.com | Personal portfolio of a software developer, grid-styled design . | [Link](https://anishshobithps.com/) | 2026-02-27 |\n| birobirobiro.dev | A personal developer portfolio. | [Link](https://birobirobiro.dev/) | 2024-07-29 |\n| bucharitesh.in | A minimal portfolio with awesome craft's registry. | [Link](https://bucharitesh.in) | 2025-12-25 |\n| chanhdai.com | A minimal portfolio, component registry, and blog. | [Link](https://chanhdai.com) | 2025-09-11 |\n| devfolios | Find best portfolio inspiration from all over the internet | [Link](https://devfolios-one.vercel.app/) | 2025-10-25 |\n| godly | Astronomically good web design inspiration. Only the best of the best. | [Link](https://godly.website/) | 2024-07-29 |\n| hritu.art | A clean, modern designer portfolio blending minimal aesthetics with functional UI and built-in email support via React Email. | [Link](https://github.com/suraj-xd/design-portfolio) | 2025-06-10 |\n| kinhdev24 | Developer portfolio built with Next.js, shadcn/ui, Aceternity, and Magic UI | [Link](https://kinhdev.id.vn/) | 2025-07-08 |\n| list.swajp.me | It has never been easier to find the right projects or designs by inspiring successful people. | [Link](https://list.swajp.me) | 2024-07-29 |\n| mpakravan | Portfolio website using React, Next.js, Tailwind CSS, ShadCN, and GSAP, modern design system. | [Link](https://mpakravan.com/en) | 2025-10-26 |\n| nathans-ai | An AI Chatbot acting as a portfolio, built with shadcn/ui components. | [Link](https://chat.brodin.dev) | 2024-11-21 |\n| ifte-13 | Portfolio made with Next.js, shadcn/ui (with magic ui ) and Email.js | [Link](https://ifte-13.vercel.app/) | 2025-10-25 |\n| shubhporwal.me | An eye-catching developer portfolio, built on NextJS, GSAP, Tailwind, and React. | [Link](https://www.shubhporwal.me/) | 2024-10-03 |\n| swajp.me | A visually appealing portfolio and resource hub. | [Link](https://swajp.me) | 2024-07-29 |\n| windows-11-clone | A sleek Windows 11 clone built with React, Next.js, Tailwind CSS, ShadCN, and Framer-Motion, featuring smooth animations, draggable windows, and a modern design system. | [Link](https://win11.oimmi.com/) | 2025-02-20 |\n\n## Platforms\n\n| Name | Description | Link | Date |\n| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ---------- |\n| anonypost | Share your thoughts and experiences anonymously by posting on the platform. Crafted using t3-stack. | [Link](https://github.com/avalynndev/anonypost) | 2024-07-17 |\n| bolhadev | The quickest path to learn English is speaking it regularly. Just find someone to chat with. | [Link](https://bolhadev.chat/) | 2024-06-04 |\n| 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. | [Link](https://citeme.app) | 2026-03-03 |\n| enjoytown | A free anime, manga, movie, and TV-shows streaming platform. Built with Next.js, shadcn/ui. | [Link](https://github.com/avalynndev/enjoytown) | 2024-06-04 |\n| grade-calculator | A grade calculator/dashboard for students, aiming to provide a better overview of academic performance. | [Link](https://grades.nstr.dev/) | 2024-12-27 |\n| infinitunes | A simple music player web app built using Next.js, shadcn/ui, Tailwind CSS, Drizzle ORM, and more. | [Link](https://github.com/rajput-hemant/infinitunes) | 2024-06-04 |\n| kd | Ad-free Kdrama streaming app. Built with Next.js, Drizzle ORM, NeonDB, and shadcn/ui. | [Link](https://github.com/gneiru/kd) | 2024-05-31 |\n| memergez | Quickly generate memes by entering text or an avatar URL, with support for many meme commands. | [Link](https://github.com/avalynndev/memergez) | 2024-08-26 |\n| midday-components | A collection of open-source components based on Midday features. | [Link](https://midday.ai/components) | 2024-11-21 |\n| multiboard | Minimal Kanban platform. Built with Better-Auth, Next.js, ZenStack, Prisma, and shadcn/ui. | [Link](https://github.com/olliethedev/multiboard) | 2025-07-15 |\n| openhive | Open-source, self-hosted Slack alternative with channels, DMs, threads, reactions, file uploads, and video/audio calls. Built with Next.js, Supabase, Zustand, and shadcn/ui. | [Link](https://github.com/arseneHuot/openhive) | 2026-03-14 |\n| plotwist | Easy management and reviews of your movies, series, and animes using Next.js, Tailwind CSS, Supabase, and shadcn/ui. | [Link](https://plotwist.app/en-US) | 2024-05-31 |\n| snapimg | Fast, privacy-focused image compression tool supporting PNG, JPEG, WebP, AVIF. Built with React 19, Vite, Tailwind CSS, and shadcn/ui. | [Link](https://github.com/Moresl/snapimg) | 2025-12-15 |\n| veritas-kanban | Self-hosted Kanban board with AI agent integration, time tracking, and 1,255 tests. Built with React 19, Vite 6, TanStack Query, dnd-kit, and shadcn/ui. | [Link](https://github.com/BradGroux/veritas-kanban) | 2026-01-29 |\n| xeramail | Temporary email address service built with Next.js and shadcn/ui, offering fast inbox access, modern UI, and better control over disposable emails. | [Link](https://xeramail.com) | 2026-01-01 |\n| youropinion.is | Free survey platform which supports importing your exisitng shadcn/ui theme | [Link](https://youropinion.is/news/202505-match-my-style) | 2025-06-16 |\n\n## Ports\n\n| Name | Description | Link | Date |\n| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ---------- |\n| Angular | Angular port of shadcn/ui. | [Link](https://github.com/goetzrobin/spartan) | 2024-03-21 |\n| Basecoat | Vanilla HTML, CSS and JS port of shadcn/ui. | [Link](https://basecoatui.com) | 2025-07-07 |\n| Flutter | Flutter port of shadcn/ui. | [Link](https://github.com/nank1ro/shadcn-ui) | 2024-06-07 |\n| Franken UI | HTML-first, framework-agnostic, beautifully designed components that you can truly copy and paste into your site. Accessible. Customizable. Open Source. | [Link](https://www.franken-ui.dev/) | 2024-06-07 |\n| JollyUI | shadcn/ui compatible react aria components. | [Link](https://github.com/jolbol1/jolly-ui) | 2024-06-07 |\n| Kotlin | Kotlin port of shadcn/ui. | [Link](https://github.com/dead8309/shadcn-kotlin) | 2024-06-07 |\n| mkdocs-shadcn | MkDocs port of shadcn/ui. | [Link](https://github.com/asiffer/mkdocs-shadcn) | 2025-07-07 |\n| .NET (ShadUI) | Avalonia port of shadcn/ui. Based on SukiUI | [Link](https://github.com/accntech/shad-ui/) | 2024-02-22 |\n| Phoenix Liveview | Phoenix Liveview port of shadcn/ui. | [Link](https://github.com/bluzky/salad_ui) | 2024-06-07 |\n| React Native | React Native port of shadcn/ui. | [Link](https://github.com/Mobilecn-UI/nativecn-ui) | 2024-06-07 |\n| React Native (recommended) | React Native port of shadcn/ui (recommended). | [Link](https://github.com/mrzachnugent/react-native-reusables) | 2024-12-27 |\n| Ruby | Ruby port of shadcn/ui. | [Link](https://github.com/aviflombaum/shadcn-rails) | 2024-06-07 |\n| Solid | Solid port of shadcn/ui. | [Link](https://github.com/hngngn/shadcn-solid) | 2024-03-28 |\n| Svelte | Svelte port of shadcn/ui. | [Link](https://github.com/huntabyte/shadcn-svelte) | 2024-02-22 |\n| Swift | Swift port of shadcn/ui. | [Link](https://github.com/Mobilecn-UI/swiftcn-ui) | 2024-06-07 |\n| Sysinfocus simple/ui | Razor component library for Blazor, inspired by shadcn/ui. | [Link](https://sysinfocus.github.io/shadcn-inspired/) | 2024-09-09 |\n| Vue | Vue port of shadcn/ui. | [Link](https://github.com/radix-vue/shadcn-vue) | 2024-02-22 |\n\n## Design System\n\n| Name | Description | Link | Date |\n| ---------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------- |\n| shadcn-storybook-registry | Registry of stories for the shadcn components. Quickly get the atomic level components documented in Storybook. | [Link](https://registry.lloydrichards.dev/) | 2025-02-07 |\n| obra-shadcn-ui | This file replicates all 51 shadcn/ui v4 components in a composable way as a reusable Figma library.. | [Link](https://www.figma.com/community/file/1514746685758799870/obra-shadcn-ui) | 2025-06-16 |\n| shadcn-ui-components | Every component recreated in Figma. | [Link](https://www.figma.com/community/file/1342715840824755935/shadcn-ui-components) | 2024-03-21 |\n| shadcn-ui-storybook (JheanAntunes) | All shadcn/ui components registered in the storybook by JheanAntunes. | [Link](https://65711ecf32bae758b457ae34-uryqbzvojc.chromatic.com/) | 2024-12-27 |\n| shadcn-ui-storybook (fellipeutaka) | All shadcn/ui components registered in the storybook by fellipeutaka. | [Link](https://fellipeutaka-ui.vercel.app/?path=/docs/components-accordion--docs) | 2024-12-27 |\n\n## Boilerplates / Templates\n\n| Name | Description | Link | Date |\n| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |\n| 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. | [Link](https://github.com/iscale-llc/agentic-react-nextjs-shadcn) | 2026-03-03 |\n| astro-erudite | An opinionated, unstyled static blogging template—built with Astro, Tailwind, and shadcn/ui. | [Link](https://github.com/jktrn/astro-erudite) | 2025-10-25 |\n| atomic-crm | Open-source React CRM built on top of Supabase [Demo site](https://marmelab.com/atomic-crm-demo) | [Link](https://github.com/marmelab/atomic-crm) | 2025-09-16 |\n| autoflow | An open source GraphRAG (Knowledge Graph) built on top of TiDB Vector, LlamaIndex, and DSPy. [Demo site](https://tidb.ai). | [Link](https://github.com/pingcap/autoflow) | 2024-12-06 |\n| browser-extension-starter-plasmo-shadcn-trpc | Browser extension starter kit featuring Plasmo, React, Shadcn, and tRPC. | [Link](https://github.com/poweroutlet2/browser-extension-starter-plasmo-shadcn-trpc) | 2024-10-29 |\n| chadnext | Quick Starter Template includes Next.js 14 App Router, shadcn/ui, LuciaAuth, Prisma, Server Actions, Stripe, Internationalization, and more. | [Link](https://github.com/moinulmoin/chadnext) | 2024-04-25 |\n| cloudflare-saas-stack | An opinionated, batteries-included starter kit for quickly building and deploying SaaS products on Cloudflare. | [Link](https://github.com/Dhravya/cloudflare-saas-stack) | 2024-07-24 |\n| create-tauri-core | A project template for creating a Tauri app with Vite, React, and Tailwind CSS. | [Link](https://github.com/mrlightful/create-tauri-core) | 2024-09-23 |\n| design-system-template | Turborepo + TailwindCSS + Storybook + shadcn/ui. | [Link](https://github.com/arevalolance/design-system-template) | 2024-06-06 |\n| devstarter | Devstarter is a bold, one-page developer portfolio template with a distinctive cyberpunk aesthetic. Built with Next.js, shadcn/ui, and Tailwind CSS, it's designed to help developers showcase their work, skills, and personality in a way that stands out. | [Link](https://github.com/zippystarter/template-devstarter) | 2026-01-27 |\n| easy-ui | 50+ High Quality Open Source Website Templates built using NextJS + shadcn/ui + Tailwind CSS + Framer Motion and more. | [Link](https://github.com/DarkInventor/easy-ui) | 2024-08-06 |\n| ecommerce-kit | Next.js starter kit with the tools you need to quickly launch your e-commerce site. | [Link](https://ecommercekit.dev) | 2025-09-06 |\n| electron-shadcn | Electron app template with shadcn/ui and a bunch of other libs and tools ready to use. | [Link](https://github.com/LuanRoger/electron-shadcn) | 2024-06-17 |\n| forjnot | Modern Project Starter Kit | Launch your next project faster with Forjnot - A professional, customizable and clean starting point featuring modern tech stack and best practices | 2025-11-20 |\n| full-stack-monorepo-starter | Full stack monorepo template built using shadcn/ui + Fastify + graphql + vitejs + Docker and more. | [Link](https://github.com/mnove/monorepo-starter-graphql) | 2025-06-10 |\n| fumadocs-starter | A fully-fledged Fumadocs starter template with built-in plugins, AI features, and everything you need to build your next docs site. | [Link](https://github.com/techwithanirudh/fumadocs-starter) | 2025-11-20 |\n| horizon-ai-nextjs-shadcn-boilerplate | Premium AI NextJS & shadcn/ui Boilerplate + Stripe + Supabase + OAuth. | [Link](https://horizon-ui.com/boilerplate-shadcn) | 2024-05-24 |\n| kirimase | A template and boilerplate for quickly starting your next project with shadcn/ui, Tailwind CSS, and Next.js. | [Link](https://kirimase.dev/) | 2024-06-11 |\n| login-auth | A login authentication web app built with Vite + React, Tailwind CSS, and Shadcn UI. It uses Firebase for Google sign-in, email sign-up, and password reset. | [Link](https://shadcn-login-auth.vercel.app/) | 2026-03-15 |\n| magicui-startup-templates | Magic UI Startup template built using shadcn/ui + TailwindCSS + Framer Motion. | [Link](https://magicui.design/docs/templates/startup) | 2024-04-25 |\n| next-shadcn-admin-dashboard | Modern Admin Dashboard Template built with Shadcn UI and Next.js 15 | [Link](https://github.com/arhamkhnz/next-shadcn-admin-dashboard) | 2025-10-25 |\n| nextMotion | Webdev portfolio template with Nodemailer integrated for easy contact form setup. Uses shadcn/ui + TailwindCSS + Framer Motion. | [Link](https://github.com/yoyocharlie/nextMotion) | 2024-09-23 |\n| next-js-boilerplate | Quickly set up a Next.js project with TypeScript, NextAuth.js, PostgreSQL (Prisma), Sentry, Tailwind CSS v4, shadcn/ui, Zod, Zustand, nuqs, ESLint, Husky, and Prettier. [Demo site](https://next-js-boilerplate-sage-nine.vercel.app/). | [Link](https://github.com/AbhishekSharma55/next-js-boilerplate) | 2025-09-08 |\n| next-shadcn-dashboard-starter | Admin Dashboard Starter with Nextjs 14 and shadcn/ui. | [Link](https://github.com/Kiranism/next-shadcn-dashboard-starter) | 2024-06-06 |\n| next-starter | A Next.js starter template packed with features like TypeScript, TailwindCSS, Next-auth, Eslint, Stripe, testing tools, and more. Jumpstart your project with efficiency and style. | [Link](https://github.com/Skolaczk/next-starter) | 2024-09-23 |\n| nextjs-mdx-blog | Starter template built with Contentlayer, MDX, shadcn/ui, and Tailwind CSS. | [Link](https://github.com/ChangoMan/nextjs-mdx-blog) | 2024-04-25 |\n| 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. | [Link](https://next-js-views-template.vercel.app) | 2024-11-21 |\n| next-wp | Headless Wordpress Starter built with the NextJS App Router and React Server Components. | [Link](https://github.com/9d8dev/next-wp) | 2024-11-21 |\n| 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. | [Link](https://github.com/rmourey26/onyx) | 2024-08-13 |\n| opendocs | Beautifully designed template that you can use for your projects for free. Accessible. Customizable. Open Source with i18n support. | [Link](https://opendocs.daltonmenezes.com/) | 2024-07-29 |\n| react-starter-kit | An opinionated, full-stack boilerplate for building modern web apps on the edge. Features Bun, React 19, tRPC, Drizzle ORM, and Cloudflare Workers. | [Link](https://github.com/kriasoft/react-starter-kit) | 2025-09-06 |\n| react-vite-starter | React starter powered with Vite + Redux Toolkit + RTKQuery + React Router + shadcn UI and many more. | [Link](https://github.com/tejachundru/react-vite-starter) | 2024-12-02 |\n| shadcn-admin | A admin dashboard template for Next.js, React, Vite and Vue.js, built with Tailwind CSS. | [Link](https://shadcnadmin.com) | 2025-12-12 |\n| shadcn-landing-page | Landing page template using shadcn/ui, React, TypeScript, and Tailwind CSS. | [Link](https://github.com/leoMirandaa/shadcn-landing-page) | 2024-06-06 |\n| shadcn-landing-page (Vue) | Project conversion [shadcn-vue-landing-page](https://github.com/leoMirandaa/shadcn-vue-landing-page) to Next.js - Landing page template using Nestjs, shadcn/ui, TypeScript, and Tailwind CSS. | [Link](https://github.com/nobruf/shadcn-landing-page) | 2024-12-27 |\n| shadcn-nextjs-free-boilerplate | Free & Open-source NextJS Boilerplate + ChatGPT API Dashboard Template. | [Link](https://github.com/horizon-ui/shadcn-nextjs-boilerplate) | 2024-05-24 |\n| shadcn-nextjs-dashboard | Admin Dashboard UI built with Shadcn and NextJS. Free and Open-source. | [Link](https://github.com/NaveenDA/shadcn-nextjs-dashboard) | 2025-06-22 |\n| shadcn-portfolio | A portfolio template, which uses shadcn-ui and Next.JS. | [Link](https://github.com/techwithanirudh/shadcn-portfolio) | 2025-11-20 |\n| shadcn-registry-template | Template repository for building a custom component registry for shadcn/ui. | [Link](https://github.com/vantezzen/shadcn-registry-template) | 2024-09-05 |\n| shadcn-saas-landing | A full-fledged SaaS Landing template built using Next.JS, shadcn/ui, and fumadocs. | [Link](https://github.com/techwithanirudh/shadcn-saas-landing) | 2025-11-20 |\n| shadcn-ui-dashboard | Multipurpose and powerful admin dashboard template compatible with shadcn/ui. | [Link](https://shadcnuidashboard.com) | 2025-09-21 |\n| shadcn-vue-landing-page | Landing page template using Vue, shadcn-vue, TypeScript, and Tailwind CSS. | [Link](https://github.com/leoMirandaa/shadcn-vue-landing-page) | 2024-06-06 |\n| shadcn-next-workflows | Interactive workflow builder using React Flows, Next.js, and Shadcn/ui. Create, connect, and validate custom nodes easily. | [Link](https://github.com/nobruf/shadcn-next-workflows) | 2024-10-29 |\n| supa-next-shad-auth | A fully responsive, fully type-safe, secure server actions, user-friendly customizable UI with best practices. Tech used: NextJS + Supabase + TypeScript + Server Actions + Zod + shadcn/ui. | [Link](https://github.com/Sahil-Sharma-23/supa-next-shad-auth) | 2024-07-02 |\n| sveltekit-shadcn-starter-kit | Production ready open-source generic app template featuring database abstraction (Drizzle & Postgres), server utilities, tests, authentication (better-auth), i18n + RTL/LTR support, mdsvex, predefined pages and content (policies, legal, etc.), App Shell component, base and custom components built with shadcn/ui, Cookies management (compliance), SEO managemnt support, CLI tooling and more. [Demo](https://ssv5.templates.guylahav.com) | [Link](https://github.com/GantonL/templates/tree/main/sveltekit-shadcn-v5) | 2025-09-23 |\n| t3-app-template | Admin template for T3 Stack and shadcn/ui. | [Link](https://github.com/gaofubin/t3-app-template) | 2024-04-25 |\n| tailwind-admin | Open Source Shadcn Dashboard Template Built On React and Tailwind CSS | [Link](https://github.com/Tailwind-Admin/free-tailwind-admin-dashboard-template) | 2026-01-03 |\n| taxonomy | An open-source application built using the new router, server components, and everything new in Next.js. | [Link](https://github.com/shadcn/taxonomy) | 2024-03-21 |\n| template-next | A clean Next.js template with TypeScript, TailwindCSS, Shadcn/ui, and Prettier. | [Link](https://template-next-official.vercel.app/) | 2024-09-24 |\n| turborepo-nextjs-wxt-shadcn-boilerplate | Turborepo boilerplate featuring web and web-extension apps with shadcn/ui for shared ui components and unified Typescript, ESLint, Tailwind CSS, and Prettier configs. | [Link](https://github.com/Aniket-508/turborepo-nextjs-wxt-shadcn-boilerplate) | 2025-04-24 |\n| turborepo-shadcn-ui-tailwindcss | Turborepo starter with shadcn/ui & TailwindCSS pre-configured for shared UI components. | [Link](https://github.com/henriqpohl/turborepo-shadcn-ui-tailwindcss) | 2024-06-06 |\n| 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. | [Link](https://github.com/JadRizk/turborepo-launchpad) | 2024-06-10 |\n| waitly | A simple and useful waitlist Next.js and Shadcn UI template. | [Link](https://shadcnuikit.com/template/waitly-free-waitlist-template) | 2025-12-19 |\n| wordpress-plugin-boilerplate | WordPress Plugin Boilerplate utilizing modern web technologies and tools such as React, TypeScript, SASS, TailwindCSS, Shadcn UI, Vite, Grunt.js, Storybook, HMR, and more. | [Link](https://github.com/prappo/wordpress-plugin-boilerplate) | 2024-09-24 |\n\n## Star History\n\n\n \n \n \"Star\n\n\n## Contributors\n\nThanks goes to all these wonderful people:\n\n\n \n\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Development & Contributing\n\n### For the Website\n\n- **Development Guide**: See [DEVELOPMENT.md](DEVELOPMENT.md) for setup, architecture, and configuration\n- **Contributing**: Fork the repository, create a feature branch, and submit a PR\n\n### For the Awesome List\n\n- **Via Website**: Use the built-in submission form at [awesome-shadcn-ui.vercel.app](https://awesome-shadcn-ui.vercel.app/)\n- **Via GitHub**: Follow the [PR template](.github/pull_request_template.md) when creating pull requests\n- **Guidelines**: Ensure resources are shadcn/ui related, well-documented, and actively maintained\n" }, { "path": "components.json", "content": "{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"radix-lyra\",\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n \"config\": \"\",\n \"css\": \"src/app/globals.css\",\n \"baseColor\": \"zinc\",\n \"cssVariables\": true,\n \"prefix\": \"\"\n },\n \"iconLibrary\": \"lucide\",\n \"rtl\": false,\n \"menuColor\": \"default\",\n \"menuAccent\": \"subtle\",\n \"aliases\": {\n \"components\": \"@/components\",\n \"utils\": \"@/lib/utils\",\n \"ui\": \"@/components/ui\",\n \"lib\": \"@/lib\",\n \"hooks\": \"@/hooks\"\n },\n \"registries\": {\n \"@diceui\": \"https://diceui.com/r/{name}.json\"\n }\n}\n" }, { "path": "next.config.mjs", "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n reactStrictMode: true,\n eslint: {\n ignoreDuringBuilds: true,\n },\n typescript: {\n ignoreBuildErrors: true,\n },\n compiler: {\n removeConsole:\n process.env.NODE_ENV === \"production\" ? { exclude: [\"error\"] } : false,\n },\n};\n\nexport default nextConfig;\n" }, { "path": "open-next.config.ts", "content": "import { defineCloudflareConfig } from \"@opennextjs/cloudflare\";\n\nexport default defineCloudflareConfig();\n" }, { "path": "package.json", "content": "{\n \"name\": \"awesome-shadcn-ui\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev --turbo\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"preview\": \"opennextjs-cloudflare build && opennextjs-cloudflare preview\",\n \"deploy\": \"opennextjs-cloudflare build && opennextjs-cloudflare deploy\",\n \"cf-typegen\": \"wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts\",\n \"format\": \"prettier --write ./src\",\n \"lint\": \"next lint\",\n \"type-check\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"@base-ui/react\": \"^1.2.0\",\n \"@hugeicons/core-free-icons\": \"^3.3.0\",\n \"@hugeicons/react\": \"^1.1.5\",\n \"@next/third-parties\": \"^16.1.6\",\n \"@octokit/rest\": \"^22.0.0\",\n \"@opennextjs/cloudflare\": \"^1.16.1\",\n \"@radix-ui/react-avatar\": \"1.1.9\",\n \"@radix-ui/react-dialog\": \"1.1.13\",\n \"@radix-ui/react-dropdown-menu\": \"2.1.14\",\n \"@radix-ui/react-icons\": \"^1.3.0\",\n \"@radix-ui/react-label\": \"^2.1.7\",\n \"@radix-ui/react-navigation-menu\": \"^1.2.14\",\n \"@radix-ui/react-popover\": \"1.1.13\",\n \"@radix-ui/react-scroll-area\": \"^1.2.10\",\n \"@radix-ui/react-select\": \"2.2.4\",\n \"@radix-ui/react-separator\": \"1.1.6\",\n \"@radix-ui/react-slot\": \"1.2.2\",\n \"@radix-ui/react-toggle\": \"1.1.8\",\n \"@radix-ui/react-toggle-group\": \"1.1.9\",\n \"@radix-ui/react-tooltip\": \"1.2.6\",\n \"@radix-ui/react-use-controllable-state\": \"^1.2.2\",\n \"@tailwindcss/postcss\": \"^4.1.11\",\n \"axios\": \"^1.12.0\",\n \"class-variance-authority\": \"^0.7.1\",\n \"clsx\": \"^2.1.1\",\n \"cmdk\": \"1.0.0\",\n \"date-fns\": \"^4.1.0\",\n \"embla-carousel-react\": \"^8.6.0\",\n \"eslint-config-next\": \"^16.0.10\",\n \"input-otp\": \"^1.4.2\",\n \"lucide-react\": \"^0.509.0\",\n \"motion\": \"^12.23.24\",\n \"next\": \"16.0.10\",\n \"next-themes\": \"^0.4.6\",\n \"radix-ui\": \"latest\",\n \"react\": \"^19.2.3\",\n \"react-day-picker\": \"^9.14.0\",\n \"react-dom\": \"^19.2.3\",\n \"react-resizable-panels\": \"^4.6.5\",\n \"recharts\": \"2.15.4\",\n \"sonner\": \"^1.7.4\",\n \"vaul\": \"^1.1.2\"\n },\n \"devDependencies\": {\n \"@types/node\": \"24.0.10\",\n \"@types/react\": \"^19\",\n \"prettier\": \"^3\",\n \"shadcn\": \"^3.8.5\",\n \"tailwind-merge\": \"^2.6.0\",\n \"tailwindcss\": \"^4.1.11\",\n \"tw-animate-css\": \"^1.3.4\",\n \"typescript\": \"5.8.3\",\n \"wrangler\": \"^4.61.1\"\n }\n}\n" }, { "path": "postcss.config.mjs", "content": "/** @type {import('postcss-load-config').Config} */\nconst config = {\n plugins: {\n \"@tailwindcss/postcss\": {},\n },\n};\n\nexport default config;\n" }, { "path": "scripts/add-dates.js", "content": "const fs = require('fs');\n\nconst path = 'README.md';\nlet content;\ntry {\n content = fs.readFileSync(path, 'utf8');\n} catch (error) {\n console.error(`Error reading README.md: ${error.message}`);\n process.exit(1);\n}\nconst lines = content.split('\\n');\n\nconst currentDate = new Date().toISOString().split('T')[0]; // e.g., 2025-07-02\nconst updatedLines = [];\nlet changesCount = 0;\n\nconsole.log(`Processing README.md with ${lines.length} lines`);\n\n// Function to validate ISO date format (YYYY-MM-DD)\nfunction isValidDate(dateString) {\n const regex = /^\\d{4}-\\d{2}-\\d{2}$/;\n if (!regex.test(dateString)) return false;\n const date = new Date(dateString);\n return date instanceof Date && !isNaN(date);\n}\n\nlet inTable = false;\nlet tableHasDateColumn = false;\nlet headerLineCount = 0;\nlet dateColumnIndex = -1;\n\nfor (let i = 0; i < lines.length; i++) {\n const line = lines[i];\n\n // Reset table state when hitting a new section\n if (line.startsWith('## ')) {\n inTable = false;\n tableHasDateColumn = false;\n headerLineCount = 0;\n dateColumnIndex = -1;\n }\n\n if (line.startsWith('|')) {\n if (!inTable) {\n // First line of a new table (header)\n inTable = true;\n headerLineCount = 1;\n\n // Check if the table header has a date column and find its index\n const parts = line.split('|').map(part => part.trim());\n dateColumnIndex = parts.findIndex(part => part === 'Date');\n tableHasDateColumn = dateColumnIndex > -1;\n updatedLines.push(line);\n continue;\n } else {\n headerLineCount++;\n }\n\n // Skip header and separator rows\n if (headerLineCount <= 2) {\n updatedLines.push(line);\n continue;\n }\n\n // Process data rows\n if (tableHasDateColumn && dateColumnIndex > 0) {\n // Split the line into parts, preserving the original structure\n const parts = line.split('|');\n \n // Ensure we have enough parts for the date column\n while (parts.length <= dateColumnIndex + 1) {\n parts.push('');\n }\n \n // Get the current date value (trimmed)\n const currentDateValue = parts[dateColumnIndex].trim();\n \n // Only add date if it's empty, whitespace, or invalid\n if (!currentDateValue || currentDateValue === '' || !isValidDate(currentDateValue)) {\n parts[dateColumnIndex] = ` ${currentDate} `;\n changesCount++;\n }\n \n // Reconstruct the line\n const newLine = parts.join('|');\n updatedLines.push(newLine);\n } else {\n // No date column or invalid structure, keep as is\n updatedLines.push(line);\n }\n } else {\n // Not a table row\n updatedLines.push(line);\n }\n}\n\n// Log summary\nconsole.log(`Completed processing. Made ${changesCount} changes to date columns.`);\n\nif (changesCount > 0) {\n try {\n fs.writeFileSync(path, updatedLines.join('\\n'));\n console.log('Changes written to README.md');\n } catch (error) {\n console.error(`Error writing to README.md: ${error.message}`);\n process.exit(1);\n }\n} else {\n console.log('No changes needed, file not modified');\n}\n" }, { "path": "scripts/format-readme.js", "content": "const fs = require('fs');\nconst path = 'README.md';\n\nlet content;\ntry {\n content = fs.readFileSync(path, 'utf8');\n} catch (err) {\n console.error(`Error reading README.md: ${err.message}`);\n process.exit(1);\n}\n\n// Split the content into lines\nconst lines = content.split('\\n');\nconst updatedLines = [];\n\nlet inTable = false;\n\nfor (let line of lines) {\n if (line.startsWith('|')) {\n inTable = true;\n\n // Remove internal line breaks and extra spaces in cells\n const parts = line.split('|').map(cell => cell.replace(/\\n/g, ' ').trim());\n\n // Rebuild the line with pipes, keeping one line per entry\n const formattedLine = '| ' + parts.filter((_, i) => i !== 0 && i !== parts.length - 1 || parts[i] !== '').join(' | ') + ' |';\n\n updatedLines.push(formattedLine);\n } else {\n if (inTable) {\n inTable = false;\n }\n updatedLines.push(line);\n }\n}\n\n// Overwrite README.md with the updated lines\ntry {\n fs.writeFileSync(path, updatedLines.join('\\n'));\n console.log('README.md formatted successfully!');\n} catch (err) {\n console.error(`Error writing README.md: ${err.message}`);\n process.exit(1);\n}" }, { "path": "src/app/[...not-found]/page.tsx", "content": "import { notFound } from \"next/navigation\";\n\nexport default function CatchAllNotFound() {\n notFound();\n}\n" }, { "path": "src/app/api/github/callback/route.ts", "content": "import { NextRequest, NextResponse } from \"next/server\";\n\nexport async function GET(request: NextRequest) {\n const searchParams = request.nextUrl.searchParams;\n const code = searchParams.get(\"code\");\n const state = searchParams.get(\"state\");\n const error = searchParams.get(\"error\");\n\n if (error) {\n console.error(\"GitHub OAuth error:\", error);\n return NextResponse.redirect(\n new URL(`/?error=${encodeURIComponent(error)}`, request.url),\n );\n }\n\n if (!code) {\n console.error(\"No authorization code received\");\n return NextResponse.redirect(new URL(\"/?error=no_code\", request.url));\n }\n\n // For device flow, we don't need to handle the callback here\n // The device flow handles everything through the device-flow endpoint\n // This endpoint is just required by GitHub App configuration\n console.log(\"GitHub App callback received:\", { code, state });\n\n return NextResponse.redirect(new URL(\"/?success=authorized\", request.url));\n}\n" }, { "path": "src/app/api/github/device-flow/route.ts", "content": "import { ERROR_MESSAGES, GITHUB_CONFIG } from \"@/lib/config\";\nimport { NextRequest, NextResponse } from \"next/server\";\n\nexport async function POST(request: NextRequest) {\n try {\n const body = await request.json();\n\n if (body.action === \"start\") {\n // Start the GitHub App device flow\n const response = await fetch(GITHUB_CONFIG.DEVICE_FLOW_URL, {\n method: \"POST\",\n headers: GITHUB_CONFIG.API_HEADERS,\n body: JSON.stringify({\n client_id: GITHUB_CONFIG.CLIENT_ID,\n scope: GITHUB_CONFIG.SCOPES.join(\" \"),\n }),\n });\n\n if (!response.ok) {\n const errorText = await response.text();\n console.error(\n \"GitHub device flow start error:\",\n response.status,\n errorText,\n );\n console.error(\"Request details:\", {\n client_id: GITHUB_CONFIG.CLIENT_ID,\n scope: GITHUB_CONFIG.SCOPES.join(\" \"),\n url: GITHUB_CONFIG.DEVICE_FLOW_URL,\n });\n throw new Error(\n `${ERROR_MESSAGES.GITHUB_API}: ${response.status} - ${errorText}`,\n );\n }\n\n const data = await response.json();\n return NextResponse.json(data);\n } else if (body.action === \"poll\") {\n // Poll for the GitHub App user access token\n const response = await fetch(GITHUB_CONFIG.ACCESS_TOKEN_URL, {\n method: \"POST\",\n headers: GITHUB_CONFIG.API_HEADERS,\n body: JSON.stringify({\n client_id: GITHUB_CONFIG.CLIENT_ID,\n device_code: body.device_code,\n grant_type: \"urn:ietf:params:oauth:grant-type:device_code\",\n }),\n });\n\n if (!response.ok) {\n const errorText = await response.text();\n console.error(\n \"GitHub device flow poll error:\",\n response.status,\n errorText,\n );\n throw new Error(\n `${ERROR_MESSAGES.GITHUB_API}: ${response.status} - ${errorText}`,\n );\n }\n\n const data = await response.json();\n return NextResponse.json(data);\n }\n\n return NextResponse.json(\n { error: ERROR_MESSAGES.INVALID_ACTION },\n { status: 400 },\n );\n } catch (error: any) {\n console.error(\"GitHub device flow error:\", error);\n return NextResponse.json(\n { error: error.message || ERROR_MESSAGES.INTERNAL_SERVER },\n { status: 500 },\n );\n }\n}\n" }, { "path": "src/app/api/submit-resource/route.ts", "content": "import { NextRequest, NextResponse } from \"next/server\";\nimport { Octokit } from \"@octokit/rest\";\n\nconst GITHUB_CONFIG = {\n REPO_OWNER: \"birobirobiro\",\n REPO_NAME: \"awesome-shadcn-ui\",\n BRANCH: \"main\",\n};\n\ninterface SubmissionData {\n name: string;\n description: string;\n url: string;\n category: string;\n}\n\nfunction insertResourceIntoReadme(\n readmeContent: string,\n submission: SubmissionData,\n): { content: string; error?: string } {\n const lines = readmeContent.split(\"\\n\");\n const newEntry = `| ${submission.name} | ${submission.description} | [Link](${submission.url}) |`;\n\n let insertIndex = -1;\n let inTargetSection = false;\n let inTable = false;\n\n for (let i = 0; i < lines.length; i++) {\n const line = lines[i];\n\n if (\n line.startsWith(\"## \") &&\n line.toLowerCase().includes(submission.category.toLowerCase())\n ) {\n inTargetSection = true;\n continue;\n }\n\n if (\n inTargetSection &&\n line.startsWith(\"## \") &&\n !line.toLowerCase().includes(submission.category.toLowerCase())\n ) {\n break;\n }\n\n if (inTargetSection && line.startsWith(\"| Name\")) {\n inTable = true;\n continue;\n }\n\n if (inTable && line.match(/^\\|[\\s-]+\\|/)) {\n continue;\n }\n\n if (inTable && line.startsWith(\"|\") && !line.match(/^\\|[\\s-]+\\|/)) {\n const parts = line.split(\"|\").map((part) => part.trim());\n if (parts.length >= 2) {\n const existingName = parts[1];\n\n const existingUrlMatch = line.match(/\\[Link\\]\\(([^)]+)\\)/);\n const existingUrl = existingUrlMatch ? existingUrlMatch[1] : null;\n\n if (existingName.toLowerCase() === submission.name.toLowerCase()) {\n return {\n content: \"\",\n error: `Resource \"${submission.name}\" already exists in this section.`,\n };\n }\n\n if (\n existingUrl &&\n existingUrl.toLowerCase() === submission.url.toLowerCase()\n ) {\n return {\n content: \"\",\n error: `This URL already exists in this section.`,\n };\n }\n\n if (existingName.toLowerCase() > submission.name.toLowerCase()) {\n insertIndex = i;\n break;\n }\n }\n }\n\n if (inTable && (!line.startsWith(\"|\") || line.trim() === \"\")) {\n if (insertIndex === -1) {\n insertIndex = i;\n }\n break;\n }\n }\n\n if (insertIndex === -1) {\n return {\n content: \"\",\n error: `Could not find insertion point for category \"${submission.category}\".`,\n };\n }\n\n lines.splice(insertIndex, 0, newEntry);\n return { content: lines.join(\"\\n\") };\n}\n\nfunction generatePRBody(submission: SubmissionData): string {\n return `---\nname: \"feat: Add new awesome resource\"\nabout: \"Propose adding a new awesome resource related to shadcn/ui\"\nlabels:\n - feature\n---\n\n## Describe the awesome resource you want to add\n\n**What is it?** \n${submission.description}\n\n## **Which section does it belong to?** \n- [x] ${submission.category}\n\n## **Additional details (optional)**\nResource URL: ${submission.url}\n\n## **Checklist**\n- [x] Resource is automatically sorted alphabetically within its section.\n- [x] Duplicate checking is performed automatically.\n- [x] Table formatting is handled automatically.\n- [x] Includes a valid and working link to the resource.\n- [x] Automatically assigned the correct section to the resource.\n`;\n}\n\nexport async function POST(request: NextRequest) {\n try {\n const submission: SubmissionData = await request.json();\n\n if (\n !submission.name ||\n !submission.description ||\n !submission.url ||\n !submission.category\n ) {\n return NextResponse.json(\n { error: \"All fields are required\" },\n { status: 400 },\n );\n }\n\n const githubToken = process.env.GITHUB_TOKEN;\n\n if (!githubToken) {\n return NextResponse.json(\n { error: \"Server configuration error\" },\n { status: 500 },\n );\n }\n\n const octokit = new Octokit({ auth: githubToken });\n\n const { data: readmeData } = await octokit.repos.getContent({\n owner: GITHUB_CONFIG.REPO_OWNER,\n repo: GITHUB_CONFIG.REPO_NAME,\n path: \"README.md\",\n });\n\n if (\n Array.isArray(readmeData) ||\n !(\"content\" in readmeData) ||\n !readmeData.sha\n ) {\n return NextResponse.json(\n { error: \"Could not fetch README\" },\n { status: 500 },\n );\n }\n\n const currentContent = Buffer.from(readmeData.content, \"base64\").toString();\n\n const insertResult = insertResourceIntoReadme(currentContent, submission);\n\n if (insertResult.error) {\n return NextResponse.json({ error: insertResult.error }, { status: 409 });\n }\n\n const updatedContent = insertResult.content;\n const branchName = `add-${submission.name.toLowerCase().replace(/[^a-z0-9]/g, \"-\")}-${Date.now()}`;\n\n const { data: ref } = await octokit.git.getRef({\n owner: GITHUB_CONFIG.REPO_OWNER,\n repo: GITHUB_CONFIG.REPO_NAME,\n ref: \"heads/main\",\n });\n\n await octokit.git.createRef({\n owner: GITHUB_CONFIG.REPO_OWNER,\n repo: GITHUB_CONFIG.REPO_NAME,\n ref: `refs/heads/${branchName}`,\n sha: ref.object.sha,\n });\n\n await octokit.repos.createOrUpdateFileContents({\n owner: GITHUB_CONFIG.REPO_OWNER,\n repo: GITHUB_CONFIG.REPO_NAME,\n path: \"README.md\",\n message: `feat: Add ${submission.name}`,\n content: Buffer.from(updatedContent).toString(\"base64\"),\n sha: readmeData.sha,\n branch: branchName,\n });\n\n const prBody = generatePRBody(submission);\n\n const { data: pr } = await octokit.pulls.create({\n owner: GITHUB_CONFIG.REPO_OWNER,\n repo: GITHUB_CONFIG.REPO_NAME,\n title: `feat: Add ${submission.name}`,\n head: branchName,\n base: \"main\",\n body: prBody,\n });\n\n return NextResponse.json({\n success: true,\n prNumber: pr.number,\n prUrl: pr.html_url,\n });\n } catch (error: any) {\n console.error(\"Error creating PR:\", error);\n return NextResponse.json(\n { error: error.message || \"Failed to create pull request\" },\n { status: 500 },\n );\n }\n}\n" }, { "path": "src/app/bookmarks/error.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { AlertTriangle, ArrowLeft, Home, RefreshCw } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { useEffect } from \"react\";\n\nexport default function BookmarksError({\n error,\n reset,\n}: {\n error: Error & { digest?: string };\n reset: () => void;\n}) {\n useEffect(() => {\n console.error(\"Bookmarks error:\", error);\n }, [error]);\n\n return (\n
\n
\n
\n \n
\n\n
\n

\n Failed to load bookmarks\n

\n

\n We couldn't load this bookmarks page. The bookmarks might not exist\n or there's a temporary issue.\n

\n
\n\n
\n \n \n \n
\n\n {process.env.NODE_ENV === \"development\" && (\n
\n \n Error Details (Development)\n \n 
\n              {error.message}\n              {error.stack && `\\n\\n${error.stack}`}\n
\n
\n )}\n
\n
\n );\n}\n" }, { "path": "src/app/bookmarks/page.tsx", "content": "\"use client\";\n\nimport { ItemGrid } from \"@/components/item-grid\";\nimport { PageHeader } from \"@/components/layout/page-header\";\nimport { PaginationControls } from \"@/components/pagination-controls\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { useBookmarks } from \"@/hooks/use-bookmark\";\nimport { useDebounce } from \"@/hooks/use-debounce\";\nimport { fetchAndParseReadme, Resource } from \"@/hooks/use-readme\";\nimport { Bookmark, Search } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport Link from \"next/link\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nconst ITEMS_PER_PAGE_OPTIONS = [20, 40, 60, 80];\n\nexport default function BookmarksPage() {\n const [items, setItems] = useState([]);\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [filteredItems, setFilteredItems] = useState([]);\n const [currentPage, setCurrentPage] = useState(1);\n const [itemsPerPage, setItemsPerPage] = useState(ITEMS_PER_PAGE_OPTIONS[0]);\n const [isLoading, setIsLoading] = useState(true);\n const [showClearDialog, setShowClearDialog] = useState(false);\n const {\n bookmarkedItems,\n toggleBookmark,\n clearBookmarks,\n isLoading: isBookmarkLoading,\n } = useBookmarks();\n\n const debouncedSearchQuery = useDebounce(searchQuery, 300);\n\n useEffect(() => {\n async function fetchData() {\n try {\n setIsLoading(true);\n const fetchedResources = await fetchAndParseReadme();\n\n const bookmarkedResources = fetchedResources.filter((item) =>\n bookmarkedItems.includes(item.id),\n );\n\n setItems(bookmarkedResources);\n setFilteredItems(bookmarkedResources);\n } catch (error) {\n console.error(\"Error fetching bookmarked items:\", error);\n } finally {\n setIsLoading(false);\n }\n }\n\n if (!isBookmarkLoading) {\n fetchData();\n }\n }, [bookmarkedItems, isBookmarkLoading]);\n\n useEffect(() => {\n if (debouncedSearchQuery) {\n const filtered = items.filter(\n (item) =>\n item.name\n ?.toLowerCase()\n .includes(debouncedSearchQuery.toLowerCase()) ||\n item.description\n ?.toLowerCase()\n .includes(debouncedSearchQuery.toLowerCase()),\n );\n setFilteredItems(filtered);\n } else {\n setFilteredItems(items);\n }\n setCurrentPage(1);\n }, [debouncedSearchQuery, items]);\n const totalPages = Math.ceil(filteredItems.length / itemsPerPage);\n const indexOfLastItem = currentPage * itemsPerPage;\n const indexOfFirstItem = indexOfLastItem - itemsPerPage;\n const currentItems = filteredItems.slice(indexOfFirstItem, indexOfLastItem);\n\n const handlePageChange = useCallback((pageNumber: number) => {\n setCurrentPage(pageNumber);\n }, []);\n\n const handleItemsPerPageChange = useCallback((value: string) => {\n setItemsPerPage(Number(value));\n setCurrentPage(1);\n }, []);\n\n const handleClearBookmarks = useCallback(() => {\n clearBookmarks();\n setShowClearDialog(false);\n setSearchQuery(\"\");\n }, [clearBookmarks]);\n\n if (isLoading || isBookmarkLoading) {\n return (\n
\n
\n
\n \n \n
\n \n \n \n
\n \n
\n\n
\n {[...Array(6)].map((_, i) => (\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n ))}\n
\n\n
\n
\n \n \n
\n
\n \n \n \n \n \n
\n
\n
\n
\n );\n }\n\n return (\n \n \n
\n \n {items.length} {items.length === 1 ? \"bookmark\" : \"bookmarks\"}\n \n
\n
\n
\n setSearchQuery(e.target.value)}\n className=\"h-10\"\n />\n
\n {items.length > 0 && (\n
\n setShowClearDialog(true)}\n className=\"w-full sm:w-auto text-sm sm:text-base\"\n >\n Clear All\n \n
\n )}\n
\n \n }\n />\n\n
\n {items.length === 0 ? (\n
\n
\n \n
\n

No bookmarks yet

\n

\n Start saving your favorite shadcn/ui resources by clicking the\n bookmark icon on any item.\n

\n \n
\n ) : filteredItems.length === 0 && debouncedSearchQuery ? (\n
\n
\n \n
\n

No results found

\n

\n No bookmarks match your search for \"{debouncedSearchQuery}\"\n

\n \n
\n ) : (\n \n )}\n
\n\n {filteredItems.length > 0 && items.length > 0 && (\n
\n \n
\n )}\n\n {items.length > 0 && (\n
\n Showing {indexOfFirstItem + 1} -{\" \"}\n {Math.min(indexOfLastItem, filteredItems.length)} of{\" \"}\n {filteredItems.length}{\" \"}\n {filteredItems.length === 1 ? \"bookmark\" : \"bookmarks\"}\n
\n )}\n\n \n \n \n Clear All Bookmarks?\n \n This will remove all your bookmarked items. This action cannot be\n undone.\n \n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "src/app/categories/[category]/[id]/error.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { AlertTriangle, ArrowLeft, Home, RefreshCw } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { useEffect } from \"react\";\n\nexport default function ItemError({\n error,\n reset,\n}: {\n error: Error & { digest?: string };\n reset: () => void;\n}) {\n useEffect(() => {\n console.error(\"Item error:\", error);\n }, [error]);\n\n return (\n
\n
\n
\n \n
\n\n
\n

\n Failed to load item\n

\n

\n We couldn't load this item page. The item might not exist or there's\n a temporary issue.\n

\n
\n\n
\n \n \n \n
\n\n {process.env.NODE_ENV === \"development\" && (\n
\n \n Error Details (Development)\n \n 
\n              {error.message}\n              {error.stack && `\\n\\n${error.stack}`}\n
\n
\n )}\n
\n
\n );\n}\n" }, { "path": "src/app/categories/[category]/[id]/page.tsx", "content": "\"use client\";\n\nimport { PageHeader } from \"@/components/layout/page-header\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { fetchAndParseReadme, Resource } from \"@/hooks/use-readme\";\nimport { useWebsitePreview } from \"@/hooks/use-website-preview\";\nimport { categoryNameToSlug, slugToCategoryName } from \"@/lib/slugs\";\nimport { format, isValid, parseISO } from \"date-fns\";\nimport {\n Calendar,\n ExternalLink,\n Github,\n Globe,\n Tag,\n Image,\n} from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport Link from \"next/link\";\nimport { use, useEffect, useState } from \"react\";\n\ninterface ItemPageProps {\n params: Promise<{\n category: string;\n id: string;\n }>;\n}\n\nconst CATEGORY_DESCRIPTIONS: Record = {\n \"Libs and Components\":\n \"Essential libraries and reusable components built with shadcn/ui\",\n Registries: \"Component registries and collections for shadcn/ui\",\n \"Plugins and Extensions\":\n \"Tools and extensions that enhance your shadcn/ui workflow\",\n \"Colors and Customizations\":\n \"Themes, color palettes, and customization utilities\",\n Animations: \"Animation libraries and motion components for shadcn/ui\",\n Tools: \"Development tools, generators, and utilities for shadcn/ui projects\",\n \"Websites and Portfolios Inspirations\":\n \"Real-world examples and inspiration for your projects\",\n Platforms: \"Platforms and services that integrate with shadcn/ui\",\n Ports: \"Ports of shadcn/ui to other frameworks and technologies\",\n \"Design System\": \"Complete design systems and component libraries\",\n \"Boilerplates / Templates\":\n \"Starter templates and boilerplates for quick project setup\",\n};\n\nexport default function ItemPage({ params }: ItemPageProps) {\n const resolvedParams = use(params);\n const [item, setItem] = useState(null);\n const [relatedItems, setRelatedItems] = useState([]);\n const [faviconUrl, setFaviconUrl] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n\n const categorySlug = resolvedParams.category;\n const categoryName = slugToCategoryName(categorySlug);\n const itemId = resolvedParams.id;\n\n useEffect(() => {\n async function fetchData() {\n try {\n setIsLoading(true);\n const fetchedResources = await fetchAndParseReadme();\n const foundItem = fetchedResources.find(\n (resource) => resource.id === itemId,\n );\n\n if (foundItem) {\n setItem(foundItem);\n\n const related = fetchedResources\n .filter(\n (resource) =>\n resource.category === foundItem.category &&\n resource.id !== foundItem.id,\n )\n .slice(0, 6);\n\n setRelatedItems(related);\n\n const domain = new URL(foundItem.url).hostname;\n setFaviconUrl(`https://icons.duckduckgo.com/ip3/${domain}.ico`);\n }\n } catch (error) {\n console.error(\"Error fetching item data:\", error);\n } finally {\n setIsLoading(false);\n }\n }\n\n fetchData();\n }, [itemId, categoryName]);\n\n const formatDate = (dateString: string) => {\n if (dateString === \"Unknown\") return \"Unknown\";\n const date = parseISO(dateString);\n return isValid(date) ? format(date, \"MMMM d, yyyy\") : \"Unknown\";\n };\n\n const isGitHubUrl = (url: string) => {\n return url.includes(\"github.com\");\n };\n\n if (isLoading) {\n return (\n
\n
\n
\n \n \n
\n
\n \n \n
\n \n
\n \n \n
\n
\n
\n\n
\n
\n \n \n
\n \n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n\n
\n \n \n \n \n \n \n
\n \n \n
\n
\n \n \n
\n \n \n\n \n \n \n \n \n {[...Array(6)].map((_, i) => (\n
\n \n \n
\n ))}\n \n \n
\n
\n
\n
\n );\n }\n\n if (!item) {\n return null;\n }\n\n // Component to render preview based on state\n const WebsitePreview = () => {\n const { previewState, screenshotUrl } = useWebsitePreview({\n url: item.url,\n name: item.name,\n });\n\n if (previewState === \"loading\") {\n return (\n
\n
\n
\n

Loading preview...

\n
\n
\n );\n }\n\n if (previewState === \"iframe\") {\n return (\n <>\n \n \n Visit {item.name} website\n \n
\n \n

Visit website

\n

Click to open

\n
\n \n );\n }\n\n if (previewState === \"screenshot\" && screenshotUrl) {\n return (\n <>\n \n
\n \n

Visit website

\n

Screenshot preview

\n
\n \n Visit {item.name} website\n \n \n );\n }\n\n // Fallback state\n return (\n
\n \n

\n Preview not available\n

\n

\n This website blocks embedding. Click below to visit directly.\n

\n \n
\n );\n };\n\n return (\n \n setFaviconUrl(null)}\n />\n ) : (\n
\n \n
\n )\n }\n breadcrumbs={[\n { label: \"Categories\", href: \"/categories\" },\n { label: categoryName, href: `/categories/${categorySlug}` },\n {\n label: item.name || \"Loading...\",\n href: `/categories/${categorySlug}/${itemId}`,\n },\n ]}\n actions={\n
\n
\n \n Added {formatDate(item.date)}\n
\n •\n
\n \n {item.category}\n
\n
\n }\n />\n\n
\n \n \n \n \n \n Preview\n \n \n \n
\n \n
\n \n \n \n\n \n \n \n Category\n \n \n \n {item.category}\n \n

\n {CATEGORY_DESCRIPTIONS[item.category] ||\n \"A collection of shadcn/ui related resources\"}\n

\n
\n \n \n View all in {item.category}\n \n \n \n
\n \n \n\n {relatedItems.length > 0 && (\n \n \n \n Related Items\n \n \n \n {relatedItems.map((relatedItem) => (\n \n
\n
\n
\n
\n
\n
\n

\n {relatedItem.name}\n

\n

\n {relatedItem.description}\n

\n
\n
\n \n \n
\n
\n
\n \n ))}\n \n \n )}\n \n
\n \n );\n}\n" }, { "path": "src/app/categories/[category]/error.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { AlertTriangle, ArrowLeft, Home, RefreshCw } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { useEffect } from \"react\";\n\nexport default function CategoryError({\n error,\n reset,\n}: {\n error: Error & { digest?: string };\n reset: () => void;\n}) {\n useEffect(() => {\n console.error(\"Category error:\", error);\n }, [error]);\n\n return (\n
\n
\n
\n \n
\n\n
\n

\n Failed to load category\n

\n

\n We couldn't load this category page. The category might not exist or\n there's a temporary issue.\n

\n
\n\n
\n \n \n \n
\n\n {process.env.NODE_ENV === \"development\" && (\n
\n \n Error Details (Development)\n \n 
\n              {error.message}\n              {error.stack && `\\n\\n${error.stack}`}\n
\n
\n )}\n
\n
\n );\n}\n" }, { "path": "src/app/categories/[category]/page.tsx", "content": "\"use client\";\n\nimport { ItemGrid } from \"@/components/item-grid\";\nimport { PageHeader } from \"@/components/layout/page-header\";\nimport { PaginationControls } from \"@/components/pagination-controls\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { useBookmarks } from \"@/hooks/use-bookmark\";\nimport { useDebounce } from \"@/hooks/use-debounce\";\nimport { fetchAndParseReadme, Resource } from \"@/hooks/use-readme\";\nimport { slugToCategoryName } from \"@/lib/slugs\";\nimport { motion } from \"motion/react\";\nimport { use, useCallback, useEffect, useState } from \"react\";\n\ninterface CategoryPageProps {\n params: Promise<{\n category: string;\n }>;\n}\n\nconst CATEGORY_DESCRIPTIONS: Record = {\n \"Libs and Components\":\n \"Essential libraries and reusable components built with shadcn/ui\",\n Registries: \"Component registries and collections for shadcn/ui\",\n \"Plugins and Extensions\":\n \"Tools and extensions that enhance your shadcn/ui workflow\",\n \"Colors and Customizations\":\n \"Themes, color palettes, and customization utilities\",\n Animations: \"Animation libraries and motion components for shadcn/ui\",\n Tools: \"Development tools, generators, and utilities for shadcn/ui projects\",\n \"Websites and Portfolios Inspirations\":\n \"Real-world examples and inspiration for your projects\",\n Platforms: \"Platforms and services that integrate with shadcn/ui\",\n Ports: \"Ports of shadcn/ui to other frameworks and technologies\",\n \"Design System\": \"Complete design systems and component libraries\",\n \"Boilerplates / Templates\":\n \"Starter templates and boilerplates for quick project setup\",\n};\n\nconst ITEMS_PER_PAGE_OPTIONS = [20, 40, 60, 80];\n\nexport default function CategoryPage({ params }: CategoryPageProps) {\n const resolvedParams = use(params);\n const [items, setItems] = useState([]);\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [filteredItems, setFilteredItems] = useState([]);\n const [currentPage, setCurrentPage] = useState(1);\n const [itemsPerPage, setItemsPerPage] = useState(ITEMS_PER_PAGE_OPTIONS[1]);\n const [isLoading, setIsLoading] = useState(true);\n const {\n bookmarkedItems,\n toggleBookmark,\n isLoading: isBookmarkLoading,\n } = useBookmarks();\n\n const debouncedSearchQuery = useDebounce(searchQuery, 300);\n\n const categorySlug = resolvedParams.category;\n const categoryName = slugToCategoryName(categorySlug);\n\n useEffect(() => {\n async function fetchData() {\n try {\n setIsLoading(true);\n const fetchedResources = await fetchAndParseReadme();\n\n const categoryItems = fetchedResources.filter(\n (item) => item.category === categoryName,\n );\n\n setItems(categoryItems);\n setFilteredItems(categoryItems);\n } catch (error) {\n console.error(\"Error fetching category items:\", error);\n } finally {\n setIsLoading(false);\n }\n }\n\n fetchData();\n }, [categoryName]);\n\n useEffect(() => {\n if (debouncedSearchQuery) {\n const filtered = items.filter(\n (item) =>\n item.name\n ?.toLowerCase()\n .includes(debouncedSearchQuery.toLowerCase()) ||\n item.description\n ?.toLowerCase()\n .includes(debouncedSearchQuery.toLowerCase()),\n );\n setFilteredItems(filtered);\n } else {\n setFilteredItems(items);\n }\n setCurrentPage(1);\n }, [debouncedSearchQuery, items]);\n const totalPages = Math.ceil(filteredItems.length / itemsPerPage);\n const indexOfLastItem = currentPage * itemsPerPage;\n const indexOfFirstItem = indexOfLastItem - itemsPerPage;\n const currentItems = filteredItems.slice(indexOfFirstItem, indexOfLastItem);\n\n const handlePageChange = useCallback((pageNumber: number) => {\n setCurrentPage(pageNumber);\n }, []);\n\n const handleItemsPerPageChange = useCallback((value: string) => {\n setItemsPerPage(Number(value));\n setCurrentPage(1);\n }, []);\n\n if (isLoading) {\n return (\n
\n
\n
\n \n \n
\n \n \n \n
\n \n
\n\n
\n {[...Array(6)].map((_, i) => (\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n ))}\n
\n\n
\n
\n \n \n
\n
\n \n \n \n \n \n
\n
\n
\n
\n );\n }\n\n return (\n \n \n
\n \n {items.length} {items.length === 1 ? \"item\" : \"items\"}\n \n •\n Category\n
\n
\n setSearchQuery(e.target.value)}\n className=\"h-10\"\n />\n
\n
\n }\n />\n\n
\n \n
\n\n {filteredItems.length > 0 && (\n
\n \n
\n )}\n\n
\n Showing {indexOfFirstItem + 1} -{\" \"}\n {Math.min(indexOfLastItem, filteredItems.length)} of{\" \"}\n {filteredItems.length} items\n
\n\n {filteredItems.length === 0 && debouncedSearchQuery && (\n
\n

\n No items found for \"{debouncedSearchQuery}\"\n

\n setSearchQuery(\"\")}\n className=\"text-sm sm:text-base\"\n >\n Clear search\n \n
\n )}\n \n );\n}\n" }, { "path": "src/app/categories/error.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { AlertTriangle, Home, RefreshCw } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { useEffect } from \"react\";\n\nexport default function CategoriesError({\n error,\n reset,\n}: {\n error: Error & { digest?: string };\n reset: () => void;\n}) {\n useEffect(() => {\n console.error(\"Categories error:\", error);\n }, [error]);\n\n return (\n
\n
\n
\n \n
\n\n
\n

\n Failed to load categories\n

\n

\n We couldn't load the categories page. This might be a temporary\n issue with our data source.\n

\n
\n\n
\n \n \n
\n\n {process.env.NODE_ENV === \"development\" && (\n
\n \n Error Details (Development)\n \n 
\n              {error.message}\n              {error.stack && `\\n\\n${error.stack}`}\n
\n
\n )}\n
\n
\n );\n}\n" }, { "path": "src/app/categories/page.tsx", "content": "\"use client\";\n\nimport { PageHeader } from \"@/components/layout/page-header\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { fetchAndParseReadme, Resource } from \"@/hooks/use-readme\";\nimport { categoryNameToSlug } from \"@/lib/slugs\";\nimport { ArrowRight } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport Link from \"next/link\";\nimport { useEffect, useState } from \"react\";\n\ninterface Category {\n title: string;\n items: Resource[];\n description: string;\n}\n\nconst CATEGORY_DESCRIPTIONS: Record = {\n \"Libs and Components\":\n \"Essential libraries and reusable components built with shadcn/ui\",\n Registries: \"Component registries and collections for shadcn/ui\",\n \"Plugins and Extensions\":\n \"Tools and extensions that enhance your shadcn/ui workflow\",\n \"Colors and Customizations\":\n \"Themes, color palettes, and customization utilities\",\n Animations: \"Animation libraries and motion components for shadcn/ui\",\n Tools: \"Development tools, generators, and utilities for shadcn/ui projects\",\n \"Websites and Portfolios Inspirations\":\n \"Real-world examples and inspiration for your projects\",\n Platforms: \"Platforms and services that integrate with shadcn/ui\",\n Ports: \"Ports of shadcn/ui to other frameworks and technologies\",\n \"Design System\": \"Complete design systems and component libraries\",\n \"Boilerplates / Templates\":\n \"Starter templates and boilerplates for quick project setup\",\n};\n\nexport default function CategoriesPage() {\n const [categories, setCategories] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n async function fetchData() {\n try {\n setIsLoading(true);\n const fetchedResources = await fetchAndParseReadme();\n\n const EXCLUDED_CATEGORIES = [\"Star History\", \"Contributors\"];\n\n const groupedCategories = fetchedResources.reduce(\n (acc, resource) => {\n if (!EXCLUDED_CATEGORIES.includes(resource.category)) {\n if (!acc[resource.category]) {\n acc[resource.category] = [];\n }\n acc[resource.category].push(resource);\n }\n return acc;\n },\n {} as Record,\n );\n\n const formattedCategories = Object.entries(groupedCategories).map(\n ([title, items]) => ({\n title,\n items,\n description:\n CATEGORY_DESCRIPTIONS[title] ||\n \"A collection of shadcn/ui related resources\",\n }),\n );\n\n setCategories(formattedCategories);\n } catch (error) {\n console.error(\"Error fetching categories:\", error);\n } finally {\n setIsLoading(false);\n }\n }\n\n fetchData();\n }, []);\n\n if (isLoading) {\n return (\n
\n
\n
\n \n \n
\n\n
\n {[...Array(9)].map((_, i) => (\n \n \n
\n \n \n
\n \n \n \n \n
\n \n
\n \n \n
\n
\n \n \n ))}\n
\n
\n
\n );\n }\n\n return (\n \n \n\n
\n {categories.map((category) => (\n
\n \n \n \n
\n \n [{category.title}]\n \n \n
\n \n {category.title}\n \n \n\n
\n\n \n

\n {category.description}\n

\n \n\n
\n\n \n \n {category.items.length}{\" \"}\n {category.items.length === 1 ? \"item\" : \"items\"}\n \n \n \n \n
\n ))}\n
\n \n );\n}\n" }, { "path": "src/app/error.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { AlertTriangle, RefreshCw } from \"lucide-react\";\nimport { useEffect } from \"react\";\n\nexport default function Error({\n error,\n reset,\n}: {\n error: Error & { digest?: string };\n reset: () => void;\n}) {\n useEffect(() => {\n console.error(\"Homepage error:\", error);\n }, [error]);\n\n return (\n
\n
\n
\n \n
\n\n
\n

\n Something went wrong\n

\n

\n We encountered an error while loading the homepage. This might be a\n temporary issue.\n

\n
\n\n
\n \n (window.location.href = \"/\")}\n >\n Go to homepage\n \n
\n\n {process.env.NODE_ENV === \"development\" && (\n
\n \n Error Details (Development)\n \n 
\n              {error.message}\n              {error.stack && `\\n\\n${error.stack}`}\n
\n
\n )}\n
\n
\n );\n}\n" }, { "path": "src/app/global-error.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { AlertOctagon } from \"lucide-react\";\nimport { useEffect } from \"react\";\n\nexport default function GlobalError({\n error,\n reset,\n}: {\n error: Error & { digest?: string };\n reset: () => void;\n}) {\n useEffect(() => {\n // Log error\n }, [error]);\n\n return (\n \n \n
\n
\n
\n \n
\n

\n Critical Error\n

\n

\n We've encountered a critical application error.\n
\n Our team has been automatically notified and is working to resolve\n the issue.\n

\n
\n \n \n
\n {error.digest && (\n

\n Error ID: {error.digest}\n

\n )}\n
\n
\n \n \n );\n}\n" }, { "path": "src/app/globals.css", "content": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n@import \"shadcn/tailwind.css\";\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.141 0.005 285.823);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.141 0.005 285.823);\n --primary: oklch(0.21 0.006 285.885);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.967 0.001 286.375);\n --secondary-foreground: oklch(0.21 0.006 285.885);\n --muted: oklch(0.967 0.001 286.375);\n --muted-foreground: oklch(0.552 0.016 285.938);\n --accent: oklch(0.967 0.001 286.375);\n --accent-foreground: oklch(0.21 0.006 285.885);\n --destructive: oklch(0.577 0.245 27.325);\n --destructive-foreground: oklch(1 0 0);\n --border: oklch(0.92 0.004 286.32);\n --input: oklch(0.92 0.004 286.32);\n --ring: oklch(0.705 0.015 286.067);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.141 0.005 285.823);\n --sidebar-primary: oklch(0.21 0.006 285.885);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.967 0.001 286.375);\n --sidebar-accent-foreground: oklch(0.21 0.006 285.885);\n --sidebar-border: oklch(0.92 0.004 286.32);\n --sidebar-ring: oklch(0.705 0.015 286.067);\n\n /* Custom colors for donation button */\n --donation-bg: oklch(0.95 0.15 95);\n --donation-bg-hover: oklch(0.92 0.18 95);\n --donation-text: oklch(0.15 0 0);\n\n --font-sans: Geist, sans-serif;\n --font-serif: Georgia, serif;\n --font-mono: Geist Mono, monospace;\n --radius: 0.625rem;\n --shadow-x: 0px;\n --shadow-y: 1px;\n --shadow-blur: 2px;\n --shadow-spread: 0px;\n --shadow-opacity: 0.18;\n --shadow-color: hsl(0 0% 0%);\n --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);\n --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);\n --shadow-sm:\n 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);\n --shadow:\n 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);\n --shadow-md:\n 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);\n --shadow-lg:\n 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);\n --shadow-xl:\n 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);\n --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);\n --tracking-normal: 0em;\n --spacing: 0.25rem;\n --background: oklch(1 0 0);\n --foreground: oklch(0.141 0.005 285.823);\n}\n\n.dark {\n --background: oklch(0.141 0.005 285.823);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.21 0.006 285.885);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.21 0.006 285.885);\n --popover-foreground: oklch(0.985 0 0);\n --primary: oklch(0.92 0.004 286.32);\n --primary-foreground: oklch(0.21 0.006 285.885);\n --secondary: oklch(0.274 0.006 286.033);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.274 0.006 286.033);\n --muted-foreground: oklch(0.705 0.015 286.067);\n --accent: oklch(0.274 0.006 286.033);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --destructive-foreground: oklch(0 0 0);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n --ring: oklch(0.552 0.016 285.938);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n --sidebar: oklch(0.21 0.006 285.885);\n --sidebar-foreground: oklch(0.985 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.274 0.006 286.033);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(1 0 0 / 10%);\n --sidebar-ring: oklch(0.552 0.016 285.938);\n\n /* Custom colors for donation button */\n --donation-bg: oklch(0.95 0.15 95);\n --donation-bg-hover: oklch(0.92 0.18 95);\n --donation-text: oklch(0.15 0 0);\n\n --font-sans: Geist, sans-serif;\n --font-serif: Georgia, serif;\n --font-mono: Geist Mono, monospace;\n --radius: 0.5rem;\n --shadow-x: 0px;\n --shadow-y: 1px;\n --shadow-blur: 2px;\n --shadow-spread: 0px;\n --shadow-opacity: 0.18;\n --shadow-color: hsl(0 0% 0%);\n --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);\n --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);\n --shadow-sm:\n 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);\n --shadow:\n 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);\n --shadow-md:\n 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);\n --shadow-lg:\n 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);\n --shadow-xl:\n 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);\n --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);\n}\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n --color-destructive: var(--destructive);\n --color-destructive-foreground: var(--destructive-foreground);\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n --color-chart-1: var(--chart-1);\n --color-chart-2: var(--chart-2);\n --color-chart-3: var(--chart-3);\n --color-chart-4: var(--chart-4);\n --color-chart-5: var(--chart-5);\n --color-sidebar: var(--sidebar);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-ring: var(--sidebar-ring);\n\n --color-donation-bg: var(--donation-bg);\n --color-donation-bg-hover: var(--donation-bg-hover);\n --color-donation-text: var(--donation-text);\n\n --font-sans: var(--font-sans);\n --font-mono: var(--font-mono);\n --font-serif: var(--font-serif);\n\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n\n --shadow-2xs: var(--shadow-2xs);\n --shadow-xs: var(--shadow-xs);\n --shadow-sm: var(--shadow-sm);\n --shadow: var(--shadow);\n --shadow-md: var(--shadow-md);\n --shadow-lg: var(--shadow-lg);\n --shadow-xl: var(--shadow-xl);\n --shadow-2xl: var(--shadow-2xl);\n\n --tracking-tighter: calc(var(--tracking-normal) - 0.05em);\n --tracking-tight: calc(var(--tracking-normal) - 0.025em);\n --tracking-normal: var(--tracking-normal);\n --tracking-wide: calc(var(--tracking-normal) + 0.025em);\n --tracking-wider: calc(var(--tracking-normal) + 0.05em);\n --tracking-widest: calc(var(--tracking-normal) + 0.1em);\n --radius-2xl: calc(var(--radius) + 8px);\n --radius-3xl: calc(var(--radius) + 12px);\n --radius-4xl: calc(var(--radius) + 16px);\n --animate-marquee-left: marquee-left var(--marquee-duration) linear var(--marquee-loop-count);\n --animate-marquee-right: marquee-right var(--marquee-duration) linear var(--marquee-loop-count);\n --animate-marquee-left-rtl: marquee-left-rtl var(--marquee-duration) linear var(--marquee-loop-count);\n --animate-marquee-right-rtl: marquee-right-rtl var(--marquee-duration) linear var(--marquee-loop-count);\n --animate-marquee-up: marquee-up var(--marquee-duration) linear var(--marquee-loop-count);\n --animate-marquee-down: marquee-down var(--marquee-duration) linear var(--marquee-loop-count);\n @keyframes marquee-left {\n 0% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(calc(-100% - var(--marquee-gap)));\n }\n }\n @keyframes marquee-right {\n 0% {\n transform: translateX(calc(-100% - var(--marquee-gap)));\n }\n 100% {\n transform: translateX(0%);\n }\n }\n @keyframes marquee-up {\n 0% {\n transform: translateY(0%);\n }\n 100% {\n transform: translateY(calc(-100% - var(--marquee-gap)));\n }\n }\n @keyframes marquee-down {\n 0% {\n transform: translateY(calc(-100% - var(--marquee-gap)));\n }\n 100% {\n transform: translateY(0%);\n }\n }\n @keyframes marquee-left-rtl {\n 0% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(calc(100% + var(--marquee-gap)));\n }\n }\n @keyframes marquee-right-rtl {\n 0% {\n transform: translateX(calc(100% + var(--marquee-gap)));\n }\n 100% {\n transform: translateX(0%);\n }\n }\n}\n\nbody {\n letter-spacing: var(--tracking-normal);\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n html {\n scroll-behavior: smooth;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n\n@layer utilities {\n .text-balance {\n text-wrap: balance;\n }\n .no-scrollbar::-webkit-scrollbar {\n display: none;\n }\n .no-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n .font-mono {\n font-family: var(--font-mono);\n }\n .text-terminal {\n font-family: var(--font-mono);\n letter-spacing: -0.02em;\n }\n}" }, { "path": "src/app/layout.tsx", "content": "import { Footer } from \"@/components/layout/footer\";\nimport { Header } from \"@/components/layout/header\";\nimport { Providers } from \"@/providers/providers\";\nimport { type Metadata, type Viewport } from \"next\";\nimport { GoogleAnalytics } from \"@next/third-parties/google\";\nimport Script from \"next/script\";\nimport { TooltipProvider } from \"@/components/ui/tooltip\";\n\nimport type React from \"react\";\nimport { Suspense } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"@/app/globals.css\";\nimport { Geist, Geist_Mono } from \"next/font/google\";\n\nexport const metadata: Metadata = {\n metadataBase: new URL(\"https://awesome-shadcn-ui.vercel.app\"),\n title: {\n default: \"awesome-shadcn-ui\",\n template: `%s | awesome-shadcn-ui`,\n },\n description: \"A curated list of awesome things related to shadcn/ui\",\n keywords: [\n \"shadcn\",\n \"ui library\",\n \"awesome\",\n \"github\",\n \"readme\",\n \"shad\",\n \"awesome list\",\n \"awesome shad\",\n \"shadcn ui\",\n ],\n alternates: {\n canonical: \"https://awesome-shadcn-ui.vercel.app/\",\n },\n openGraph: {\n type: \"website\",\n locale: \"en_US\",\n url: \"https://awesome-shadcn-ui.vercel.app/\",\n siteName: \"awesome-shadcn-ui\",\n title: \"awesome-shadcn-ui\",\n description: \"A curated list of awesome things related to shadcn/ui\",\n images: [\n {\n url: \"/seo.png\",\n width: 1200,\n height: 630,\n alt: \"awesome-shadcn-ui\",\n },\n ],\n },\n twitter: {\n creator: \"@birobirobiro\",\n site: \"@birobirobiro\",\n card: \"summary_large_image\",\n title: \"awesome-shadcn-ui\",\n description: \"A curated list of awesome things related to shadcn/ui\",\n images: [\"/seo.png\"],\n },\n icons: {\n icon: \"/favicon.ico\",\n },\n};\n\nexport const viewport: Viewport = {\n width: \"device-width\",\n initialScale: 1,\n maximumScale: 1,\n userScalable: false,\n};\nconst geistSans = Geist({\n variable: \"--font-sans\",\n subsets: [\"latin\"],\n});\n\nconst geistMono = Geist_Mono({\n variable: \"--font-mono\",\n subsets: [\"latin\"],\n});\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n \n {process.env.HIMETRICA_API_KEY && (\n \n )}\n \n \n \n
\n
\n
{children}
\n
\n
\n \n \n \n \n \n );\n}\n" }, { "path": "src/app/not-found.tsx", "content": "import { Button } from \"@/components/ui/button\";\nimport Link from \"next/link\";\n\nexport default function NotFound() {\n return (\n
\n \n \n \n\n
\n

\n Page Not Found\n

\n

\n Sorry, we couldn't find the page you're looking for.\n
\n It might have been moved, deleted, or the URL might be incorrect.\n

\n \n
\n
\n );\n}\n" }, { "path": "src/app/page.tsx", "content": "\"use client\";\n\nimport { SubmitCTA } from \"@/components/sections/cta-submit\";\nimport Hero from \"@/components/sections/hero\";\nimport ItemList from \"@/components/sections/items-list\";\nimport { Resource, fetchAndParseReadme } from \"@/hooks/use-readme\";\nimport { isValid, parseISO } from \"date-fns\";\nimport { motion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\ninterface Category {\n title: string;\n items: Resource[];\n}\n\nconst EXCLUDED_CATEGORIES = [\"Star History\", \"Contributors\"];\n\nexport default function Home() {\n const [categories, setCategories] = useState([]);\n const [filteredItems, setFilteredItems] = useState([]);\n\n useEffect(() => {\n async function fetchData() {\n const fetchedResources = await fetchAndParseReadme();\n\n const groupedCategories = fetchedResources.reduce(\n (acc, resource) => {\n if (!EXCLUDED_CATEGORIES.includes(resource.category)) {\n if (!acc[resource.category]) {\n acc[resource.category] = [];\n }\n acc[resource.category].push(resource);\n }\n return acc;\n },\n {} as Record,\n );\n\n const formattedCategories = Object.entries(groupedCategories).map(\n ([title, items]) => ({\n title,\n items,\n }),\n );\n\n const eligibleItems = fetchedResources.filter(\n (item) => !EXCLUDED_CATEGORIES.includes(item.category),\n );\n\n const sortedItems = eligibleItems.sort((a, b) => {\n const dateA =\n a.date && a.date !== \"Unknown\" ? parseISO(a.date) : new Date(0);\n const dateB =\n b.date && b.date !== \"Unknown\" ? parseISO(b.date) : new Date(0);\n\n if (!isValid(dateA)) return 1;\n if (!isValid(dateB)) return -1;\n\n return dateB.getTime() - dateA.getTime();\n });\n\n setCategories(formattedCategories);\n setFilteredItems(sortedItems);\n }\n\n fetchData();\n }, []);\n\n return (\n \n \n\n \n \n \n\n \n \n );\n}\n" }, { "path": "src/components/github-stars.tsx", "content": "\"use client\";\n\nimport { Octokit } from \"@octokit/rest\";\nimport { useEffect, useState } from \"react\";\n\nasync function getStars() {\n const octokit = new Octokit();\n const { data } = await octokit.repos.get({\n owner: \"birobirobiro\",\n repo: \"awesome-shadcn-ui\",\n });\n return data.stargazers_count;\n}\n\nexport function GithubStars() {\n const [stars, setStars] = useState(null);\n\n useEffect(() => {\n getStars().then(setStars);\n }, []);\n\n if (stars === null) return null;\n\n const formattedStars =\n stars >= 1000 ? `${(stars / 1000).toFixed(1)}k` : stars;\n\n return {formattedStars};\n}\n" }, { "path": "src/components/item-card.tsx", "content": "import {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { ArrowRight, Bookmark, ExternalLink } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { categoryNameToSlug } from \"@/lib/slugs\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"motion/react\";\nimport React from \"react\";\n\ninterface ItemCardProps {\n id: string;\n title: string;\n description: string;\n url: string;\n category: string;\n date?: string;\n isBookmarked: boolean;\n onBookmark: (id: string) => void;\n isBookmarkLoading?: boolean;\n}\n\nconst standardAnimations = {\n initial: { opacity: 0, y: 20 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: -20 },\n transition: { duration: 0.2, ease: \"easeOut\" },\n};\n\nconst ItemCard: React.FC = ({\n id,\n title,\n description,\n url,\n category,\n date,\n isBookmarked,\n onBookmark,\n isBookmarkLoading = false,\n}) => {\n const handleCardClick = () => {\n window.location.href = `/categories/${categoryNameToSlug(category)}/${id}`;\n };\n\n return (\n \n \n \n
\n \n [{category}]\n \n \n
\n \n {title}\n \n \n\n
\n\n \n

\n {description}\n

\n\n {date && (\n
\n Added: {date}\n
\n )}\n \n\n
\n\n \n {/* Bookmark Button */}\n {\n e.preventDefault();\n e.stopPropagation();\n if (!isBookmarkLoading) onBookmark(id);\n }}\n className={cn(\n \"h-8 w-8 transition-all duration-200\",\n isBookmarked\n ? \"bg-primary hover:bg-primary/90 text-primary-foreground\"\n : \"text-muted-foreground hover:text-foreground hover:bg-muted\",\n isBookmarkLoading && \"opacity-50 cursor-not-allowed\",\n )}\n >\n \n \n\n {/* External Link Button */}\n \n e.stopPropagation()}\n >\n \n \n \n \n \n \n );\n};\n\nexport default ItemCard;\n" }, { "path": "src/components/item-grid.tsx", "content": "import React from \"react\";\nimport { Resource } from \"@/hooks/use-readme\";\nimport { AnimatePresence, LayoutGroup, motion } from \"motion/react\";\nimport ItemCard from \"./item-card\";\nimport SponsorCard from \"./sponsor-card\";\nimport { sponsors } from \"@/components/sponsors/sponsors\";\n\nconst SPONSOR_INTERVAL = 8;\n\ninterface ItemGridProps {\n items: Resource[];\n bookmarkedItems: string[];\n onBookmark: (id: string) => void;\n isBookmarkLoading?: boolean;\n}\n\nexport function ItemGrid({\n items,\n bookmarkedItems,\n onBookmark,\n isBookmarkLoading = false,\n}: ItemGridProps) {\n if (items.length === 0) {\n return (\n \n \n \n \n \n \n

\n No items found matching your criteria.\n

\n

\n Try adjusting your search or filter settings.\n

\n \n );\n }\n\n const gridItems: React.ReactNode[] = [];\n\n items.forEach((item, index) => {\n gridItems.push(\n \n );\n\n if (index % SPONSOR_INTERVAL === 0 && sponsors.length > 0) {\n const sponsor = sponsors[Math.floor(index / SPONSOR_INTERVAL) % sponsors.length];\n gridItems.push(\n \n );\n }\n });\n\n return (\n \n \n \n {gridItems}\n \n \n \n );\n}\n" }, { "path": "src/components/kibo-ui/theme-switcher/index.tsx", "content": "\"use client\";\n\nimport { useTheme } from \"next-themes\";\nimport { Monitor, Moon, Sun } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst themes = [\n {\n key: \"system\",\n icon: Monitor,\n label: \"System theme\",\n },\n {\n key: \"light\",\n icon: Sun,\n label: \"Light theme\",\n },\n {\n key: \"dark\",\n icon: Moon,\n label: \"Dark theme\",\n },\n];\n\nexport type ThemeSwitcherProps = {\n value?: \"light\" | \"dark\" | \"system\";\n onChange?: (theme: \"light\" | \"dark\" | \"system\") => void;\n defaultValue?: \"light\" | \"dark\" | \"system\";\n className?: string;\n};\n\nexport const ThemeSwitcher = ({\n value,\n onChange,\n defaultValue = \"system\",\n className,\n}: ThemeSwitcherProps) => {\n const { theme, setTheme, resolvedTheme } = useTheme();\n const [mounted, setMounted] = useState(false);\n\n const handleThemeClick = useCallback(\n (themeKey: \"light\" | \"dark\" | \"system\") => {\n setTheme(themeKey);\n onChange?.(themeKey);\n },\n [setTheme, onChange],\n );\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n if (!mounted) {\n return null;\n }\n\n const currentTheme = value || theme || defaultValue;\n\n return (\n \n {themes.map(({ key, icon: Icon, label }) => {\n const isActive = currentTheme === key;\n\n return (\n handleThemeClick(key as \"light\" | \"dark\" | \"system\")}\n type=\"button\"\n >\n {isActive && (\n \n )}\n \n \n );\n })}\n
\n );\n};\n" }, { "path": "src/components/layout/footer.tsx", "content": "\"use client\";\n\nimport { Separator } from \"@/components/ui/separator\";\nimport { ThemeSwitcher } from \"@/components/kibo-ui/theme-switcher\";\nimport { useCategories } from \"@/hooks/use-categories\";\nimport { ArrowRight, ExternalLink, Github } from \"lucide-react\";\nimport { motion, useInView } from \"motion/react\";\nimport Link from \"next/link\";\nimport { useRef } from \"react\";\nimport { Button } from \"../ui/button\";\nimport { GithubStars } from \"@/components/github-stars\";\n\nexport function Footer() {\n const { categories } = useCategories();\n const ref = useRef(null);\n const isInView = useInView(ref, { once: true, amount: 0.3 });\n\n const containerVariants = {\n hidden: { opacity: 0 },\n visible: {\n opacity: 1,\n transition: {\n staggerChildren: 0.1,\n delayChildren: 0.2,\n },\n },\n };\n\n const itemVariants = {\n hidden: { opacity: 0, y: 20 },\n visible: { opacity: 1, y: 0 },\n };\n\n const quickLinks = [\n { name: \"Home\", href: \"/\" },\n { name: \"Categories\", href: \"/categories\" },\n {\n name: \"GitHub\",\n href: \"https://github.com/birobirobiro/awesome-shadcn-ui\",\n external: true,\n },\n ];\n\n const socialLinks = [\n {\n name: \"GitHub\",\n href: \"https://github.com/birobirobiro/awesome-shadcn-ui\",\n icon: Github,\n },\n ];\n\n return (\n
\n \n {/* Main Footer Content */}\n
\n {/* Brand Section */}\n \n \n \n awesome-shadcn/ui\n \n

\n A curated list of awesome things related to shadcn/ui. Discover,\n contribute, and grow the community.\n

\n \n\n {/* Quick Links */}\n \n

Quick Links

\n
    \n {quickLinks.map((link) => (\n
  • \n \n {link.name}\n {link.external && (\n \n )}\n \n
    • \n ))}\n
\n \n\n {/* Categories Preview */}\n \n

Categories

\n
    \n {categories.slice(0, 6).map((category) => (\n
  • \n \n {category.title}\n \n \n
    • \n ))}\n
\n \n\n {/* Categories Preview */}\n \n

Categories

\n
    \n {categories.slice(6, 12).map((category) => (\n
  • \n \n {category.title}\n \n \n
    • \n ))}\n
\n \n\n {/* Social & Actions */}\n \n

Connect

\n
\n
\n {socialLinks.map((social) => (\n
\n \n \n
\n ))}\n
\n\n
\n \n
\n
\n \n
\n\n \n\n {/* Bottom Section */}\n \n
\n

\n © {new Date().getFullYear()} awesome-shadcn/ui. All rights\n reserved.\n

\n
\n\n
\n Built with Next.js & shadcn/ui\n
\n \n \n
\n );\n}\n" }, { "path": "src/components/layout/header.tsx", "content": "\"use client\";\n\nimport { PRSubmissionDialog } from \"@/components/pr-submission-dialog\";\nimport { ThemeSwitcher } from \"@/components/kibo-ui/theme-switcher\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Sheet,\n SheetContent,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/components/ui/sheet\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { Github, Menu } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport { useState } from \"react\";\nimport { sponsors } from \"@/components/sponsors/sponsors\";\nimport { GithubStars } from \"@/components/github-stars\";\nimport { Logo } from \"@/components/logo\";\nimport { ModeToggle } from \"@/components/theme-toggle\";\n\nexport function Header() {\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const pathname = usePathname();\n\n return (\n
\n
\n
\n {/* Left: Logo + Navigation */}\n
\n \n \n \n\n {/* Navigation - Desktop */}\n \n
\n\n {/* Right: Actions */}\n
\n {/* Sponsorship - Desktop */}\n {sponsors.map((sponsor) => (\n \n \n \n {sponsor.LogoComponent}\n \n \n \n

{sponsor.name}

\n

{sponsor.description}

\n \n \n ))}\n\n {/* Submit Button - Desktop - REMOVED, now in search filters */}\n\n \n\n \n\n {/* Mobile Menu */}\n \n \n \n \n \n
\n {/* Header */}\n \n \n setMobileMenuOpen(false)}\n className=\"flex items-center gap-3\"\n >\n \n \n \n \n\n {/* Navigation */}\n
\n \n\n
\n \n \n Submit Resource\n \n }\n />\n
\n
\n\n {/* Sponsored Section */}\n
\n \n Sponsored by\n \n
\n {sponsors.map((sponsor) => (\n \n {sponsor.LogoComponent}\n
\n \n {sponsor.name}\n \n \n {sponsor.description}\n \n
\n \n ))}\n
\n
\n
\n \n \n
\n
\n
\n
\n );\n}\n" }, { "path": "src/components/layout/page-header.tsx", "content": "\"use client\";\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport { motion } from \"motion/react\";\nimport Link from \"next/link\";\nimport React, { ReactNode } from \"react\";\n\ninterface PageHeaderProps {\n title: string;\n description: string;\n icon?: ReactNode;\n breadcrumbs?: Array<{\n label: string;\n href: string;\n }>;\n actions?: ReactNode;\n className?: string;\n}\n\nexport function PageHeader({\n title,\n description,\n icon,\n breadcrumbs = [],\n actions,\n className = \"\",\n}: PageHeaderProps) {\n return (\n \n {breadcrumbs.length > 0 && (\n \n \n \n \n \n Home\n \n \n \n {breadcrumbs.map((breadcrumb, index) => (\n \n \n \n {index === breadcrumbs.length - 1 ? (\n \n {breadcrumb.label}\n \n ) : (\n \n \n {breadcrumb.label}\n \n \n )}\n \n \n ))}\n \n \n )}\n\n
\n
\n {icon}\n

\n {title}\n

\n
\n

\n {description}\n

\n {actions &&
{actions}
}\n
\n \n );\n}\n" }, { "path": "src/components/logo.tsx", "content": "import Image from \"next/image\";\n\ninterface LogoProps {\n className?: string;\n}\n\nexport function Logo({ className = \"h-5 w-auto\" }: LogoProps) {\n return (\n \n );\n}\n\nexport function HeroLogo({ className = \"h-40 w-auto\" }: LogoProps) {\n return (\n \n );\n}\n" }, { "path": "src/components/pagination-controls.tsx", "content": "import {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport {\n ChevronLeft,\n ChevronRight,\n ChevronsLeft,\n ChevronsRight,\n} from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { motion } from \"motion/react\";\n\ninterface PaginationControlsProps {\n currentPage: number;\n totalPages: number;\n itemsPerPage: number;\n handlePageChange: (pageNumber: number) => void;\n handleItemsPerPageChange: (value: string) => void;\n itemsPerPageOptions: number[];\n}\n\nexport function PaginationControls({\n currentPage,\n totalPages,\n itemsPerPage,\n handlePageChange,\n handleItemsPerPageChange,\n itemsPerPageOptions,\n}: PaginationControlsProps) {\n return (\n \n
\n Items per page:\n \n \n \n \n \n {itemsPerPageOptions.map((number) => (\n \n {number}\n \n ))}\n \n \n
\n
\n handlePageChange(1)}\n disabled={currentPage === 1}\n >\n \n \n handlePageChange(currentPage - 1)}\n disabled={currentPage === 1}\n >\n \n \n \n Page {currentPage} of {totalPages}\n \n handlePageChange(currentPage + 1)}\n disabled={currentPage === totalPages}\n >\n \n \n handlePageChange(totalPages)}\n disabled={currentPage === totalPages}\n >\n \n \n
\n \n );\n}\n" }, { "path": "src/components/pr-submission-dialog.tsx", "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { SubmissionData, usePRSubmission } from \"@/hooks/use-pr-submission\";\nimport {\n AlertCircle,\n ArrowRight,\n CheckCircle2,\n Loader2,\n Plus,\n} from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\nimport { toast } from \"sonner\";\n\nconst CATEGORIES = [\n \"Libs and Components\",\n \"Registries\",\n \"Plugins and Extensions\",\n \"Colors and Customizations\",\n \"Animations\",\n \"Tools\",\n \"Websites and Portfolios Inspirations\",\n \"Platforms\",\n \"Ports\",\n \"Design System\",\n \"Boilerplates / Templates\",\n];\n\ninterface PRSubmissionDialogProps {\n trigger?: React.ReactNode;\n}\n\nexport function PRSubmissionDialog({ trigger }: PRSubmissionDialogProps) {\n const [open, setOpen] = useState(false);\n const [step, setStep] = useState<\"form\" | \"success\">(\"form\");\n const [formData, setFormData] = useState({\n name: \"\",\n description: \"\",\n url: \"\",\n category: \"\",\n });\n const [submissionResult, setSubmissionResult] = useState<{\n prNumber?: number;\n prUrl?: string;\n } | null>(null);\n\n const {\n isSubmitting,\n error: submissionError,\n submissionStatus,\n submitPR,\n } = usePRSubmission();\n\n const handleSubmit = useCallback(async () => {\n if (\n !formData.name ||\n !formData.description ||\n !formData.url ||\n !formData.category\n ) {\n toast.error(\"Please fill in all fields\");\n return;\n }\n\n const result = await submitPR(null, formData, { login: \"\" });\n\n if (result.success) {\n setSubmissionResult({\n prNumber: result.prNumber,\n prUrl: result.prUrl,\n });\n setStep(\"success\");\n toast.success(\"Pull request submitted successfully!\");\n } else {\n toast.error(result.error || \"Failed to submit pull request\");\n }\n }, [formData, submitPR]);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n setTimeout(() => {\n setStep(\"form\");\n setFormData({ name: \"\", description: \"\", url: \"\", category: \"\" });\n setSubmissionResult(null);\n }, 300);\n }, []);\n\n const handleOpenChange = useCallback(\n (isOpen: boolean) => {\n if (!isOpen) {\n handleClose();\n } else {\n setOpen(true);\n }\n },\n [handleClose],\n );\n\n const renderFormStep = () => (\n
\n
\n

Submit a New Resource

\n

\n Add a new entry to the awesome shadcn/ui list\n

\n
\n\n
\n
\n \n \n setFormData((prev) => ({ ...prev, category: value }))\n }\n disabled={isSubmitting}\n >\n \n \n \n \n {CATEGORIES.map((category) => (\n \n {category}\n \n ))}\n \n \n
\n\n
\n \n \n setFormData((prev) => ({ ...prev, name: e.target.value }))\n }\n className=\"mt-1.5 h-9\"\n disabled={isSubmitting}\n />\n
\n\n
\n \n \n setFormData((prev) => ({ ...prev, description: e.target.value }))\n }\n className=\"mt-1.5 h-9\"\n disabled={isSubmitting}\n />\n
\n\n
\n \n \n setFormData((prev) => ({ ...prev, url: e.target.value }))\n }\n className=\"mt-1.5 h-9\"\n disabled={isSubmitting}\n />\n
\n\n {submissionError && (\n
\n \n {submissionError}\n
\n )}\n
\n\n
\n \n {isSubmitting ? (\n
\n \n {submissionStatus || \"Submitting...\"}\n
\n ) : (\n <>\n Submit PR\n \n \n )}\n \n
\n
\n );\n\n const renderSuccessStep = () => (\n
\n \n
\n

PR Created Successfully!

\n

\n Your pull request has been created automatically\n

\n
\n\n {submissionResult && (\n
\n \n PR #{submissionResult.prNumber}\n \n
\n \n
\n
\n

PR will be reviewed by maintainers

\n
\n
\n )}\n\n \n
\n );\n\n return (\n \n \n {trigger || (\n \n )}\n \n \n \n \n {step === \"form\" && \"Submit Resource\"}\n {step === \"success\" && \"Success!\"}\n \n \n {step === \"form\" &&\n \"Fill in your resource details. This will create a fork and PR automatically.\"}\n {step === \"success\" &&\n \"Your PR has been created and will be reviewed by maintainers.\"}\n \n \n\n {step === \"form\" && renderFormStep()}\n {step === \"success\" && renderSuccessStep()}\n \n \n );\n}\n" }, { "path": "src/components/search-filter-controls.tsx", "content": "import Sort, { SortOption } from \"@/components/sort\";\nimport { Input } from \"@/components/ui/input\";\nimport { MultiSelect } from \"@/components/ui/multi-select\";\nimport { Button } from \"@/components/ui/button\";\nimport { PRSubmissionDialog } from \"@/components/pr-submission-dialog\";\nimport { motion } from \"motion/react\";\nimport type React from \"react\";\nimport { useCallback } from \"react\";\nimport { Github } from \"lucide-react\";\n\ninterface SearchFilterControlsProps {\n searchQuery: string;\n setSearchQuery: (query: string) => void;\n categoryOptions: { label: string; value: string }[];\n selectedCategories: string[];\n setSelectedCategories: (categories: string[]) => void;\n sortOption: SortOption;\n onSortChange: (option: SortOption) => void;\n}\n\nexport function SearchFilterControls({\n searchQuery,\n setSearchQuery,\n categoryOptions,\n selectedCategories,\n setSelectedCategories,\n sortOption,\n onSortChange,\n}: SearchFilterControlsProps) {\n const handleSearchChange = useCallback(\n (e: React.ChangeEvent) => {\n setSearchQuery(e.target.value);\n },\n [setSearchQuery],\n );\n\n return (\n \n
\n \n
\n \n \n
\n
\n \n \n Submit new resource\n \n }\n />\n \n );\n}\n" }, { "path": "src/components/sections/cta-submit.tsx", "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { motion, useInView } from \"motion/react\";\nimport { ArrowRight, Github } from \"lucide-react\";\n\nimport { PRSubmissionDialog } from \"@/components/pr-submission-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { useRef } from \"react\";\n\nexport function SubmitCTA() {\n const ref = useRef(null);\n const isInView = useInView(ref, { once: true, amount: 0.5 });\n\n const containerVariants = {\n hidden: { opacity: 0, y: 10 },\n visible: {\n opacity: 1,\n y: 0,\n transition: {\n duration: 0.3,\n staggerChildren: 0.1,\n },\n },\n };\n\n const itemVariants = {\n hidden: { opacity: 0, y: 10 },\n visible: { opacity: 1, y: 0 },\n };\n\n return (\n \n \n \n \n \n Contribute to awesome-shadcn/ui\n \n \n Have an awesome shadcn/ui related project or resource? Share it\n with the community! Open a PR and help grow this curated list.\n \n \n \n
\n \n \n Submit Resource\n \n \n }\n />\n \n \n \n Manual PR\n \n \n \n
\n \n \n \n \n );\n}\n" }, { "path": "src/components/sections/hero.tsx", "content": "\"use client\";\n\nimport { HeroLogo } from \"@/components/logo\";\nimport { Sponsorship } from \"./sponsorship\";\nimport { motion } from \"motion/react\";\n\nconst fadeIn = {\n hidden: { opacity: 0, y: 8 },\n visible: {\n opacity: 1,\n y: 0,\n transition: {\n duration: 0.4,\n ease: [0.22, 1, 0.36, 1],\n },\n },\n};\n\nconst containerVariants = {\n hidden: { opacity: 0 },\n visible: {\n opacity: 1,\n transition: {\n staggerChildren: 0.06,\n delayChildren: 0.1,\n },\n },\n};\n\nexport default function Hero() {\n return (\n \n {/* Logo */}\n \n \n \n\n {/* Title */}\n \n awesome-shadcn/ui\n \n\n {/* Description */}\n \n A curated list of awesome things related to{\" \"}\n \n shadcn/ui\n \n \n\n {/* Credits */}\n \n \n Created by{\" \"}\n \n birobirobiro.dev\n \n \n ·\n \n Site by{\" \"}\n \n bankkroll.xyz\n \n \n \n\n {/* Sponsorship */}\n \n \n \n \n );\n}\n" }, { "path": "src/components/sections/items-list.tsx", "content": "\"use client\";\n\nimport { isValid, parseISO } from \"date-fns\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { Card, CardContent, CardFooter, CardHeader } from \"../ui/card\";\n\nimport { SortOption } from \"@/components/sort\";\nimport { useBookmarks } from \"@/hooks/use-bookmark\";\nimport { useDebounce } from \"@/hooks/use-debounce\";\nimport { Resource } from \"@/hooks/use-readme\";\nimport { ItemGrid } from \"../item-grid\";\nimport { PaginationControls } from \"../pagination-controls\";\nimport { SearchFilterControls } from \"../search-filter-controls\";\nimport { Skeleton } from \"../ui/skeleton\";\n\nconst ITEMS_PER_PAGE_OPTIONS = [20, 40, 60, 80];\n\ninterface Category {\n title: string;\n items: Resource[];\n}\n\ninterface ItemListProps {\n items: Resource[];\n categories: Category[];\n}\n\nexport default function ItemList({\n items: initialItems,\n categories,\n}: ItemListProps) {\n const [filteredItems, setFilteredItems] = useState(initialItems);\n const [currentPage, setCurrentPage] = useState(1);\n const [itemsPerPage, setItemsPerPage] = useState(ITEMS_PER_PAGE_OPTIONS[1]);\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [selectedCategories, setSelectedCategories] = useState([]);\n const [sortOption, setSortOption] = useState(\"date-desc\");\n const [isLoading, setIsLoading] = useState(true);\n\n const debouncedSearchQuery = useDebounce(searchQuery, 300);\n const {\n bookmarkedItems,\n toggleBookmark,\n isLoading: isBookmarkLoading,\n } = useBookmarks();\n\n const categoryOptions = useMemo(\n () =>\n categories.map((category) => ({\n label: category.title,\n value: category.title,\n })),\n [categories],\n );\n\n const sortItems = useCallback(\n (items: Resource[]): Resource[] => {\n return [...items].sort((a, b) => {\n const aBookmarked = bookmarkedItems.includes(a.id);\n const bBookmarked = bookmarkedItems.includes(b.id);\n if (aBookmarked !== bBookmarked) return aBookmarked ? -1 : 1;\n\n const [field, direction] = sortOption.split(\"-\") as [\n \"date\" | \"name\",\n \"asc\" | \"desc\",\n ];\n\n if (field === \"name\") {\n const nameA = a.name?.toLowerCase() || \"\";\n const nameB = b.name?.toLowerCase() || \"\";\n const result = nameA.localeCompare(nameB);\n return direction === \"asc\" ? result : -result;\n } else {\n const dateA =\n a.date && a.date !== \"Unknown\" ? parseISO(a.date) : new Date(0);\n const dateB =\n b.date && b.date !== \"Unknown\" ? parseISO(b.date) : new Date(0);\n\n if (!isValid(dateA) && !isValid(dateB)) return 0;\n if (!isValid(dateA)) return direction === \"asc\" ? -1 : 1;\n if (!isValid(dateB)) return direction === \"asc\" ? 1 : -1;\n\n return direction === \"asc\"\n ? dateA.getTime() - dateB.getTime()\n : dateB.getTime() - dateA.getTime();\n }\n });\n },\n [bookmarkedItems, sortOption],\n );\n\n const filterAndSortItems = useCallback(() => {\n let filtered = [...initialItems];\n\n if (debouncedSearchQuery) {\n const lowercaseQuery = debouncedSearchQuery.toLowerCase();\n filtered = filtered.filter(\n (item) =>\n (item.name?.toLowerCase() || \"\").includes(lowercaseQuery) ||\n (item.description?.toLowerCase() || \"\").includes(lowercaseQuery),\n );\n }\n\n if (selectedCategories.length > 0) {\n filtered = filtered.filter((item) =>\n selectedCategories.includes(item.category),\n );\n }\n\n const sortedItems = sortItems(filtered);\n\n setFilteredItems(sortedItems);\n setCurrentPage(1);\n }, [initialItems, debouncedSearchQuery, selectedCategories, sortItems]);\n\n // Update filteredItems when initialItems change\n useEffect(() => {\n setFilteredItems(initialItems);\n setCurrentPage(1);\n }, [initialItems]);\n\n useEffect(() => {\n filterAndSortItems();\n }, [filterAndSortItems]);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setIsLoading(false);\n filterAndSortItems();\n }, 100);\n return () => clearTimeout(timer);\n }, []);\n\n // Set loading to false when initialItems are available\n useEffect(() => {\n if (initialItems.length > 0) {\n setIsLoading(false);\n }\n }, [initialItems]);\n\n const totalPages = Math.ceil(filteredItems.length / itemsPerPage);\n const indexOfLastItem = currentPage * itemsPerPage;\n const indexOfFirstItem = indexOfLastItem - itemsPerPage;\n const currentItems = filteredItems.slice(indexOfFirstItem, indexOfLastItem);\n\n const handlePageChange = useCallback((pageNumber: number) => {\n setCurrentPage(pageNumber);\n }, []);\n\n const handleItemsPerPageChange = useCallback((value: string) => {\n setItemsPerPage(Number(value));\n setCurrentPage(1);\n }, []);\n\n const handleSortChange = useCallback(\n (option: SortOption) => {\n setSortOption(option);\n\n const sorted = sortItems(\n filteredItems.filter((item) => {\n if (\n selectedCategories.length > 0 &&\n !selectedCategories.includes(item.category)\n ) {\n return false;\n }\n\n if (debouncedSearchQuery) {\n const lowercaseQuery = debouncedSearchQuery.toLowerCase();\n return (\n (item.name?.toLowerCase() || \"\").includes(lowercaseQuery) ||\n (item.description?.toLowerCase() || \"\").includes(lowercaseQuery)\n );\n }\n\n return true;\n }),\n );\n\n setFilteredItems(sorted);\n },\n [filteredItems, sortItems, selectedCategories, debouncedSearchQuery],\n );\n\n // Get grid column classes\n const getGridClasses = useCallback(() => {\n return \"sm:grid-cols-2 lg:grid-cols-3\";\n }, []);\n\n // Get item card height\n const getCardHeightClass = useCallback(() => {\n return \"min-h-[250px]\";\n }, []);\n\n const containerVariants = {\n hidden: { opacity: 0 },\n visible: {\n opacity: 1,\n transition: {\n staggerChildren: 0.2,\n },\n },\n };\n\n const itemVariants = {\n hidden: { opacity: 0, y: 20 },\n visible: { opacity: 1, y: 0 },\n };\n\n return (\n \n \n \n \n\n \n \n \n {isLoading ? (\n
\n {[...Array(itemsPerPage)].map((_, index) => (\n \n \n
\n \n \n
\n \n \n \n \n \n \n \n \n \n ))}\n
\n ) : (\n \n )}\n \n \n \n\n {filteredItems.length > 0 && (\n \n \n \n )}\n\n \n Showing {indexOfFirstItem + 1} -{\" \"}\n {Math.min(indexOfLastItem, filteredItems.length)} of{\" \"}\n {filteredItems.length} items\n \n \n );\n}\n" }, { "path": "src/components/sections/sponsorship.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Marquee,\n MarqueeContent,\n MarqueeEdge,\n MarqueeItem,\n} from \"@/components/ui/marquee\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { motion } from \"motion/react\";\nimport { Plus } from \"lucide-react\";\nimport { sponsors } from \"@/components/sponsors/sponsors\";\n\nexport function Sponsorship() {\n return (\n \n \n Sponsored by\n \n
\n \n \n {sponsors.map((sponsor) => (\n \n \n {sponsor.LogoComponent}\n
\n \n {sponsor.name}\n \n \n {sponsor.description}\n \n
\n \n \n ))}\n \n \n \n \n\n \n \n \n \n \n

Become a sponsor

\n \n \n
\n \n );\n}\n" }, { "path": "src/components/sort.tsx", "content": "import {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { cn } from \"@/lib/utils\";\nimport { Calendar, SortAsc, SortDesc, Text } from \"lucide-react\";\n\nexport type SortOption = \"date-desc\" | \"date-asc\" | \"name-asc\" | \"name-desc\";\n\ninterface SortProps {\n sortOption: SortOption;\n onSortChange: (option: SortOption) => void;\n className?: string;\n}\n\nexport default function Sort({ sortOption, onSortChange, className }: SortProps) {\n const sortOptions = [\n {\n value: \"date-desc\",\n label: \"Date (Newest first)\",\n icon: ,\n directionIcon: ,\n },\n {\n value: \"date-asc\",\n label: \"Date (Oldest first)\",\n icon: ,\n directionIcon: ,\n },\n {\n value: \"name-asc\",\n label: \"Name (A-Z)\",\n icon: ,\n directionIcon: ,\n },\n {\n value: \"name-desc\",\n label: \"Name (Z-A)\",\n icon: ,\n directionIcon: ,\n },\n ] as const;\n\n const selectedOption =\n sortOptions.find((option) => option.value === sortOption) || sortOptions[0];\n\n const handleSortChange = (value: string) => {\n onSortChange(value as SortOption);\n };\n\n return (\n \n \n \n \n {selectedOption.icon}\n {selectedOption.label}\n {selectedOption.directionIcon}\n \n \n \n \n {sortOptions.map((option) => (\n \n \n {option.icon}\n {option.label}\n {option.directionIcon}\n \n \n ))}\n \n \n );\n}\n" }, { "path": "src/components/sponsor-card.tsx", "content": "import {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { ArrowRight, ExternalLink } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Sponsor } from \"@/components/sponsors/sponsors\";\nimport { motion } from \"motion/react\";\nimport React from \"react\";\n\nconst standardAnimations = {\n initial: { opacity: 0, y: 20 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: -20 },\n transition: { duration: 0.2, ease: \"easeOut\" },\n};\n\ninterface SponsorCardProps {\n sponsor: Sponsor;\n}\n\nconst SponsorCard: React.FC = ({ sponsor }) => {\n const handleCardClick = () => {\n window.open(sponsor.url, \"_blank\", \"noopener,noreferrer\");\n };\n\n return (\n \n \n \n
\n \n [sponsored]\n \n \n
\n \n {sponsor.name}\n \n \n\n
\n\n \n

\n {sponsor.description}\n

\n \n\n
\n\n \n \n e.stopPropagation()}\n >\n \n \n \n \n \n \n );\n};\n\nexport default SponsorCard;\n" }, { "path": "src/components/sponsors/shadcn-blocks-logo.tsx", "content": "import * as React from \"react\";\n\ninterface ShadcnBlocksLogoProps {\n className?: string;\n}\n\nfunction ShadcnBlocksLogo({ className = \"w-5 h-5\" }: ShadcnBlocksLogoProps) {\n return (\n \n \n \n \n );\n}\n\nexport default ShadcnBlocksLogo;\n" }, { "path": "src/components/sponsors/shadcn-studio-logo.tsx", "content": "import * as React from \"react\";\n\ninterface ShadcnStudioLogoProps {\n className?: string;\n}\n\nfunction ShadcnStudioLogo({ className = \"w-5 h-5\" }: ShadcnStudioLogoProps) {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n\nexport default ShadcnStudioLogo;\n" }, { "path": "src/components/sponsors/shadcn-ui-kit-logo.tsx", "content": "import * as React from \"react\";\nimport Image from \"next/image\";\n\ninterface ShadcnUiKitLogoProps {\n className?: string;\n}\n\nfunction ShadcnUiKitLogo({ className = \"w-5 h-5\" }: ShadcnUiKitLogoProps) {\n return (\n \n );\n}\n\nexport default ShadcnUiKitLogo;\n" }, { "path": "src/components/sponsors/sponsors.tsx", "content": "import { ReactNode } from \"react\";\nimport ShadcnStudioLogo from \"./shadcn-studio-logo\";\nimport ShadcnBlocksLogo from \"./shadcn-blocks-logo\";\nimport ShadcnUiKitLogo from \"./shadcn-ui-kit-logo\";\n\nexport interface Sponsor {\n name: string;\n description: string;\n url: string;\n LogoComponent: ReactNode;\n}\n\nexport const sponsors: Sponsor[] = [\n {\n name: \"shadcnstudio.com\",\n description: \"shadcn blocks & templates\",\n url: \"https://shadcnstudio.com/?utm_source=awesome-shadcn-ui&utm_medium=banner&utm_campaign=github\",\n LogoComponent: ,\n },\n {\n name: \"shadcnblocks.com\",\n description: \"UI blocks for your next project\",\n url: \"https://www.shadcnblocks.com/?utm_source=awesome-shadcn-ui&utm_medium=banner&utm_campaign=github\",\n LogoComponent: ,\n },\n {\n name: \"shadcnuikit.com\",\n description: \"Build faster with pre-built assets\",\n url: \"https://shadcnuikit.com/?utm_source=awesome-shadcn-ui&utm_medium=banner&utm_campaign=github\",\n LogoComponent: ,\n },\n];\n" }, { "path": "src/components/theme-toggle.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Moon, Sun } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport function ModeToggle() {\n const { setTheme } = useTheme();\n\n return (\n \n \n \n \n \n setTheme(\"light\")}>\n Light\n \n setTheme(\"dark\")}>\n Dark\n \n setTheme(\"system\")}>\n System\n \n \n \n );\n}\n" }, { "path": "src/components/ui/accordion.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Accordion({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AccordionItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n \n \n )\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n
\n \n )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n" }, { "path": "src/components/ui/alert-dialog.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nfunction AlertDialog({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction AlertDialogTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogPortal({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps & {\n size?: \"default\" | \"sm\"\n}) {\n return (\n \n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogMedia({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogAction({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: React.ComponentProps &\n Pick, \"variant\" | \"size\">) {\n return (\n \n )\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: React.ComponentProps &\n Pick, \"variant\" | \"size\">) {\n return (\n \n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n" }, { "path": "src/components/ui/alert.tsx", "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"grid gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n {\n variants: {\n variant: {\n default: \"bg-card text-card-foreground\",\n destructive:\n \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AlertDescription({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n" }, { "path": "src/components/ui/aspect-ratio.tsx", "content": "\"use client\"\n\nimport { AspectRatio as AspectRatioPrimitive } from \"radix-ui\"\n\nfunction AspectRatio({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nexport { AspectRatio }\n" }, { "path": "src/components/ui/avatar.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Avatar({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps & {\n size?: \"default\" | \"sm\" | \"lg\"\n}) {\n return (\n \n )\n}\n\nfunction AvatarImage({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n svg]:hidden\",\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AvatarGroupCount({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarBadge,\n}\n" }, { "path": "src/components/ui/badge.tsx", "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n secondary:\n \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n destructive:\n \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n outline:\n \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n ghost:\n \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"span\"> &\n VariantProps & { asChild?: boolean }) {\n const Comp = asChild ? Slot.Root : \"span\"\n\n return (\n \n )\n}\n\nexport { Badge, badgeVariants }\n" }, { "path": "src/components/ui/breadcrumb.tsx", "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbLink({\n asChild,\n className,\n ...props\n}: React.ComponentProps<\"a\"> & {\n asChild?: boolean\n}) {\n const Comp = asChild ? Slot.Root : \"a\"\n\n return (\n \n )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"li\">) {\n return (\n svg]:size-3.5\", className)}\n {...props}\n >\n {children ?? (\n \n )}\n \n )\n}\n\nfunction BreadcrumbEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n svg]:size-4\",\n className\n )}\n {...props}\n >\n \n More\n \n )\n}\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n}\n" }, { "path": "src/components/ui/button-group.tsx", "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst buttonGroupVariants = cva(\n \"rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n {\n variants: {\n orientation: {\n horizontal:\n \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n vertical:\n \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n }\n)\n\nfunction ButtonGroup({\n className,\n orientation,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction ButtonGroupText({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<\"div\"> & {\n asChild?: boolean\n}) {\n const Comp = asChild ? Slot.Root : \"div\"\n\n return (\n \n )\n}\n\nfunction ButtonGroupSeparator({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n ButtonGroup,\n ButtonGroupSeparator,\n ButtonGroupText,\n buttonGroupVariants,\n}\n" }, { "path": "src/components/ui/button.tsx", "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n outline:\n \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n destructive:\n \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-8\",\n \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-7 rounded-none\",\n \"icon-lg\": \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot.Root : \"button\"\n\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n" }, { "path": "src/components/ui/calendar.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n DayPicker,\n getDefaultClassNames,\n type DayButton,\n type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from \"lucide-react\"\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n captionLayout = \"label\",\n buttonVariant = \"ghost\",\n locale,\n formatters,\n components,\n ...props\n}: React.ComponentProps & {\n buttonVariant?: React.ComponentProps[\"variant\"]\n}) {\n const defaultClassNames = getDefaultClassNames()\n\n return (\n svg]:rotate-180`,\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n className\n )}\n captionLayout={captionLayout}\n locale={locale}\n formatters={{\n formatMonthDropdown: (date) =>\n date.toLocaleString(locale?.code, { month: \"short\" }),\n ...formatters,\n }}\n classNames={{\n root: cn(\"w-fit\", defaultClassNames.root),\n months: cn(\n \"flex gap-4 flex-col md:flex-row relative\",\n defaultClassNames.months\n ),\n month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n nav: cn(\n \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n defaultClassNames.nav\n ),\n button_previous: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n defaultClassNames.button_previous\n ),\n button_next: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n defaultClassNames.button_next\n ),\n month_caption: cn(\n \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n defaultClassNames.month_caption\n ),\n dropdowns: cn(\n \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n defaultClassNames.dropdowns\n ),\n dropdown_root: cn(\n \"relative rounded-(--cell-radius)\",\n defaultClassNames.dropdown_root\n ),\n dropdown: cn(\n \"absolute bg-popover inset-0 opacity-0\",\n defaultClassNames.dropdown\n ),\n caption_label: cn(\n \"select-none font-medium\",\n captionLayout === \"label\"\n ? \"text-sm\"\n : \"rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n defaultClassNames.caption_label\n ),\n table: \"w-full border-collapse\",\n weekdays: cn(\"flex\", defaultClassNames.weekdays),\n weekday: cn(\n \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n defaultClassNames.weekday\n ),\n week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n week_number_header: cn(\n \"select-none w-(--cell-size)\",\n defaultClassNames.week_number_header\n ),\n week_number: cn(\n \"text-[0.8rem] select-none text-muted-foreground\",\n defaultClassNames.week_number\n ),\n day: cn(\n \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n props.showWeekNumber\n ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n defaultClassNames.day\n ),\n range_start: cn(\n \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n defaultClassNames.range_start\n ),\n range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n range_end: cn(\n \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n defaultClassNames.range_end\n ),\n today: cn(\n \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n defaultClassNames.today\n ),\n outside: cn(\n \"text-muted-foreground aria-selected:text-muted-foreground\",\n defaultClassNames.outside\n ),\n disabled: cn(\n \"text-muted-foreground opacity-50\",\n defaultClassNames.disabled\n ),\n hidden: cn(\"invisible\", defaultClassNames.hidden),\n ...classNames,\n }}\n components={{\n Root: ({ className, rootRef, ...props }) => {\n return (\n \n )\n },\n Chevron: ({ className, orientation, ...props }) => {\n if (orientation === \"left\") {\n return (\n \n )\n }\n\n if (orientation === \"right\") {\n return (\n \n )\n }\n\n return (\n \n )\n },\n DayButton: ({ ...props }) => (\n \n ),\n WeekNumber: ({ children, ...props }) => {\n return (\n \n
\n {children}\n
\n \n )\n },\n ...components,\n }}\n {...props}\n />\n )\n}\n\nfunction CalendarDayButton({\n className,\n day,\n modifiers,\n locale,\n ...props\n}: React.ComponentProps & { locale?: Partial }) {\n const defaultClassNames = getDefaultClassNames()\n\n const ref = React.useRef(null)\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus()\n }, [modifiers.focused])\n\n return (\n span]:text-xs [&>span]:opacity-70\",\n defaultClassNames.day,\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Calendar, CalendarDayButton }\n" }, { "path": "src/components/ui/card.tsx", "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n return (\n img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n" }, { "path": "src/components/ui/carousel.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: \"horizontal\" | \"vertical\"\n setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n carouselRef: ReturnType[0]\n api: ReturnType[1]\n scrollPrev: () => void\n scrollNext: () => void\n canScrollPrev: boolean\n canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext(null)\n\nfunction useCarousel() {\n const context = React.useContext(CarouselContext)\n\n if (!context) {\n throw new Error(\"useCarousel must be used within a \")\n }\n\n return context\n}\n\nfunction Carousel({\n orientation = \"horizontal\",\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n const [carouselRef, api] = useEmblaCarousel(\n {\n ...opts,\n axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n },\n plugins\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const onSelect = React.useCallback((api: CarouselApi) => {\n if (!api) return\n setCanScrollPrev(api.canScrollPrev())\n setCanScrollNext(api.canScrollNext())\n }, [])\n\n const scrollPrev = React.useCallback(() => {\n api?.scrollPrev()\n }, [api])\n\n const scrollNext = React.useCallback(() => {\n api?.scrollNext()\n }, [api])\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault()\n scrollPrev()\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault()\n scrollNext()\n }\n },\n [scrollPrev, scrollNext]\n )\n\n React.useEffect(() => {\n if (!api || !setApi) return\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) return\n onSelect(api)\n api.on(\"reInit\", onSelect)\n api.on(\"select\", onSelect)\n\n return () => {\n api?.off(\"select\", onSelect)\n }\n }, [api, onSelect])\n\n return (\n \n \n {children}\n
\n \n )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n const { carouselRef, orientation } = useCarousel()\n\n return (\n \n \n
\n )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n const { orientation } = useCarousel()\n\n return (\n \n )\n}\n\nfunction CarouselPrevious({\n className,\n variant = \"outline\",\n size = \"icon-sm\",\n ...props\n}: React.ComponentProps) {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n return (\n \n \n Previous slide\n \n )\n}\n\nfunction CarouselNext({\n className,\n variant = \"outline\",\n size = \"icon-sm\",\n ...props\n}: React.ComponentProps) {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n return (\n \n \n Next slide\n \n )\n}\n\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n useCarousel,\n}\n" }, { "path": "src/components/ui/chart.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n
\n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme || config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n }) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label || item.name}\n \n
\n {item.value && (\n \n {item.value.toLocaleString()}\n \n )}\n
\n \n )}\n
\n )\n })}\n
\n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> &\n Pick & {\n hideIcon?: boolean\n nameKey?: string\n }) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n" }, { "path": "src/components/ui/checkbox.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { CheckIcon } from \"lucide-react\"\n\nfunction Checkbox({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n svg]:size-3.5\"\n >\n \n \n \n )\n}\n\nexport { Checkbox }\n" }, { "path": "src/components/ui/collapsible.tsx", "content": "\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\n\nfunction Collapsible({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction CollapsibleTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CollapsibleContent({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n" }, { "path": "src/components/ui/combobox.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/components/ui/input-group\"\nimport { ChevronDownIcon, XIcon, CheckIcon } from \"lucide-react\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return \n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n }\n className={cn(className)}\n {...props}\n >\n \n \n )\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxPrimitive.Input.Props & {\n showTrigger?: boolean\n showClear?: boolean\n}) {\n return (\n \n }\n {...props}\n />\n \n {showTrigger && (\n \n \n \n )}\n {showClear && }\n \n {children}\n \n )\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n >) {\n return (\n \n \n \n \n \n )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n \n )\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n \n {children}\n \n }\n >\n \n \n \n )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n \n )\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n \n )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n \n )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n