{"id":47608893,"url":"https://github.com/jimmyps/blazor-shadcn-ui","last_synced_at":"2026-04-01T19:50:07.553Z","repository":{"id":327588840,"uuid":"1107064674","full_name":"jimmyps/blazor-shadcn-ui","owner":"jimmyps","description":"A collection of accessible, headless primitives and beautifully-designed components for Blazor.","archived":false,"fork":false,"pushed_at":"2026-03-24T11:55:51.000Z","size":10336,"stargazers_count":12,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-24T12:22:08.677Z","etag":null,"topics":["accessibility","aspnetcore","blazor","component-library","components","csharp","design-system","dotnet","headless-ui","primitives","radix-ui","shadcn-ui","tailwindcss","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://neoui.io","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"blazorblueprintui/ui","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jimmyps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":"NOTICE","maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-30T14:10:07.000Z","updated_at":"2026-03-24T04:07:04.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/jimmyps/blazor-shadcn-ui","commit_stats":null,"previous_names":["jimmyps/blazor-shadcn-ui"],"tags_count":92,"template":false,"template_full_name":null,"purl":"pkg:github/jimmyps/blazor-shadcn-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmyps%2Fblazor-shadcn-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmyps%2Fblazor-shadcn-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmyps%2Fblazor-shadcn-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmyps%2Fblazor-shadcn-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jimmyps","download_url":"https://codeload.github.com/jimmyps/blazor-shadcn-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmyps%2Fblazor-shadcn-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30925525,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-25T07:55:14.202Z","status":"ssl_error","status_checked_at":"2026-03-25T07:55:10.924Z","response_time":80,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","aspnetcore","blazor","component-library","components","csharp","design-system","dotnet","headless-ui","primitives","radix-ui","shadcn-ui","tailwindcss","ui","ui-components"],"created_at":"2026-04-01T19:50:02.473Z","updated_at":"2026-04-01T19:50:07.543Z","avatar_url":"https://github.com/jimmyps.png","language":"C#","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["Component bundles"],"readme":"# NeoUI\n\n[![Website](https://img.shields.io/badge/Website-neoui.io-blue)](https://neoui.io)\n[![NuGet](https://img.shields.io/nuget/v/NeoUI.Blazor)](https://www.nuget.org/packages/NeoUI.Blazor)\n[![License](https://img.shields.io/badge/License-MIT-blue)](LICENSE)\n\nA comprehensive UI component library for Blazor inspired by [shadcn/ui](https://ui.shadcn.com/).\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://neoui.io\"\u003e\n    \u003cimg src=\".github/assets/hero.png\" alt=\"NeoUI - Beautiful Components for Blazor\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://neoui.io\"\u003e\u003cstrong\u003eWebsite\u003c/strong\u003e\u003c/a\u003e \u0026nbsp;·\u0026nbsp;\n  \u003ca href=\"https://demos.neoui.io\"\u003e\u003cstrong\u003eLive Demo\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ctable align=\"center\"\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003cb\u003e⚡ Zero Config\u003c/b\u003e\u003cbr/\u003ePre-built CSS, no Node.js or build tools required\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cb\u003e🧩 126+ Components\u003c/b\u003e\u003cbr/\u003eModern, composable UI components\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cb\u003e🎨 shadcn/ui Themes\u003c/b\u003e\u003cbr/\u003eDrop in any shadcn/ui or tweakcn theme\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cb\u003e🌙 Dark Mode\u003c/b\u003e\u003cbr/\u003eBuilt-in light \u0026amp; dark with CSS variables\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/p\u003e\n\n## 🌟 Overview\n\nNeoUI for Blazor brings the beautiful design system of shadcn/ui to Blazor applications. This library provides **zero-config, plug-and-play UI components** with full shadcn/ui compatibility, featuring pre-built CSS, styled components, and headless primitives that work across all Blazor hosting models (Server, WebAssembly, and Hybrid).\n\n**No Tailwind CSS setup required** - just install the NuGet package and start building!\n\n## 🚀 Getting Started\n\n### 📦 Installation\n\nInstall NeoUI packages from NuGet:\n\n```bash\n# Styled components with shadcn/ui design\ndotnet add package NeoUI.Blazor\n\n# (Optional) Headless primitives for custom styling\ndotnet add package NeoUI.Blazor.Primitives\n\n# Icon libraries (choose one or more)\ndotnet add package NeoUI.Icons.Lucide      # 1,640 icons - stroke-based, consistent\ndotnet add package NeoUI.Icons.Heroicons   # 1,288 icons - 4 variants (outline, solid, mini, micro)\ndotnet add package NeoUI.Icons.Feather     # 286 icons - minimalist, stroke-based\n```\n\n### Quick Start\n\n1. **Add to your `_Imports.razor`:**\n\n```razor\n@using NeoUI.Blazor\n```\n\n   **Optional icon packages** — add whichever you need:\n\n```razor\n@using NeoUI.Icons.Lucide      @* 1,640+ icons *@\n@using NeoUI.Icons.Heroicons   @* 1,288 icons across 4 variants *@\n@using NeoUI.Icons.Feather     @* 286 minimalist icons *@\n```\n\n2. **Add PortalHost to your layout:**\n\n   For overlay components (Dialog, Sheet, Popover, etc.) to work correctly, add portal hosts to your root layout:\n\n```razor\n@inherits LayoutComponentBase\n\n\u003cdiv class=\"min-h-screen bg-background\"\u003e\n    \u003c!-- Your layout content --\u003e\n    @Body\n\u003c/div\u003e\n\n@* RECOMMENDED: Use separate portal hosts for better performance *@\n\u003cContainerPortalHost /\u003e\n\u003cOverlayPortalHost /\u003e\n\n@* OR: Use legacy single host (backward compatible) *@\n@* \u003cPortalHost /\u003e *@\n```\n\n3. **Add CSS and scripts to your `App.razor`:**\n\n   NeoUI Components come with pre-built CSS and a theme script — no Tailwind setup required!\n\n```razor\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003c!-- Your theme CSS variables --\u003e\n    \u003clink rel=\"stylesheet\" href=\"styles/theme.css\" /\u003e\n    \u003c!-- Pre-built NeoUI styles --\u003e\n    \u003clink href=\"@Assets[\"_content/NeoUI.Blazor/components.css\"]\" rel=\"stylesheet\" /\u003e\n    \u003c!-- Theme script: reads localStorage and applies classes before Blazor loads (prevents FOUC) --\u003e\n    \u003cscript src=\"@Assets[\"_content/NeoUI.Blazor/js/theme.js\"]\"\u003e\u003c/script\u003e\n    \u003cHeadOutlet @rendermode=\"InteractiveAuto\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cRoutes @rendermode=\"InteractiveAuto\" /\u003e\n    \u003cscript src=\"@Assets[\"_framework/blazor.web.js\"]\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n4. **Start using components:**\n\n```razor\n\u003cButton Variant=\"ButtonVariant.Default\"\u003eClick me\u003c/Button\u003e\n\n\u003cDialog\u003e\n    \u003cDialogTrigger AsChild\u003e\n        \u003cButton\u003eOpen Dialog\u003c/Button\u003e\n    \u003c/DialogTrigger\u003e\n    \u003cDialogContent\u003e\n        \u003cDialogHeader\u003e\n            \u003cDialogTitle\u003eWelcome to NeoUI\u003c/DialogTitle\u003e\n            \u003cDialogDescription\u003e\n                Beautiful Blazor components inspired by shadcn/ui\n            \u003c/DialogDescription\u003e\n        \u003c/DialogHeader\u003e\n        \u003cDialogFooter\u003e\n            \u003cDialogClose AsChild\u003e\n                \u003cButton Variant=\"ButtonVariant.Outline\"\u003eClose\u003c/Button\u003e\n            \u003c/DialogClose\u003e\n        \u003c/DialogFooter\u003e\n    \u003c/DialogContent\u003e\n\u003c/Dialog\u003e\n```\n\n**AsChild Pattern:** Use `AsChild` on trigger components to use your own styled elements (like Button) instead of the default button. This is the industry-standard pattern from Radix UI/shadcn/ui.\n\n### Learn More\n\n- **Contributing**: See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup and guidelines\n\n## Localization\n\nNeoUI ships a built-in `ILocalizer` abstraction — a thin interface that decouples your app from any specific i18n framework.\n\n**Default behaviour** — `DefaultLocalizer` is registered automatically by `AddNeoUIComponents()`. It returns the built-in English strings for every UI key (button labels, ARIA attributes, empty-state messages, etc.). No configuration required.\n\n**Customizing strings** — implement `ILocalizer` and register it *before* calling `AddNeoUIComponents()`:\n\n```csharp\n// Option A — custom DefaultLocalizer keys (simplest)\nbuilder.Services.AddSingleton\u003cILocalizer\u003e(sp =\u003e\n    new DefaultLocalizer(keys =\u003e {\n        keys[\"Dialog.Close\"] = \"Schließen\";\n    }));\nbuilder.Services.AddNeoUIComponents();\n\n// Option B — full IStringLocalizer\u003cT\u003e integration\nbuilder.Services.AddScoped\u003cILocalizer, StringLocalizerAdapter\u003cMyResources\u003e\u003e();\nbuilder.Services.AddNeoUIComponents();\n```\n\nBoth options work for Blazor Server, WebAssembly, and Auto mode.\n\n## 🏗️ Architecture\n\nNeoUI uses a **two-layer architecture** with modern .NET 10 features and Auto rendering mode:\n\n### Project Structure\n\n- **NeoUI.Blazor.Primitives** - Headless components (runs on both Server and WebAssembly)\n- **NeoUI.Blazor** - Pre-styled components (runs on both Server and WebAssembly)\n- **NeoUI.Demo.Shared** - Shared pages, components, services, and static assets (.NET 10)\n- **NeoUI.Demo.Server** - Server-only hosting (.NET 10)\n- **NeoUI.Demo.Wasm** - WebAssembly-only hosting (.NET 10)\n- **NeoUI.Demo.Auto** - Auto mode (Server+WASM) hosting (.NET 10)\n- **NeoUI.Demo.Auto.Client** - WASM satellite for Auto mode (.NET 10)\n\n### Rendering Mode\n\nAll components support **.NET 10's Auto rendering mode**, which automatically switches between Server and WebAssembly based on availability:\n\n```razor\n\u003c!-- App.razor --\u003e\n\u003cHeadOutlet @rendermode=\"InteractiveAuto\" /\u003e\n\u003cRoutes @rendermode=\"InteractiveAuto\" /\u003e\n```\n\nThis provides:\n- Fast initial load (Server-side rendering)\n- Rich interactivity (WebAssembly after download)\n- Seamless transition between modes\n- Optimal performance for all scenarios\n\n### Styled Components Layer (`NeoUI.Blazor`)\n- Pre-styled components matching shadcn/ui design system\n- **Pre-built CSS included** - no Tailwind configuration needed\n- Built on top of primitives for consistency\n- Ready to use out of the box\n- Full theme support via CSS variables\n\n### Primitives Layer (`NeoUI.Blazor.Primitives`)\n- Headless, unstyled components\n- Complete accessibility implementation\n- Keyboard navigation and ARIA support\n- Maximum flexibility for custom styling\n\n### Key Principles\n- **Feature-based organization** - Each component in its own folder with all related files\n- **Code-behind pattern** - Clean separation of markup (`.razor`) and logic (`.razor.cs`)\n- **CSS Variables theming** - Runtime theme switching with light/dark mode support\n- **Accessibility first** - WCAG 2.1 AA compliance with comprehensive keyboard navigation\n- **Composition over inheritance** - Components designed to be composed together\n- **Progressive enhancement** - Works without JavaScript where possible\n\n## 🎨 Theming\n\nNeoUI is **100% compatible with shadcn/ui themes**, making it easy to customize your application's appearance.\n\n### Using Themes from shadcn/ui and tweakcn\n\nYou can use any theme from:\n- **[shadcn/ui themes](https://ui.shadcn.com/themes)** - Official shadcn/ui theme gallery\n- **[tweakcn.com](https://tweakcn.com)** - Advanced theme customization tool with live preview\n\nSimply copy the CSS variables from these tools and paste them into your `wwwroot/styles/theme.css` file.\n\n### Customizing Your Theme\n\n1. **Create `wwwroot/styles/theme.css`** in your Blazor project\n\n2. **Add your theme variables** inside the `:root` (light mode) and `.dark` (dark mode) selectors:\n\n```css\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.1450 0 0);\n    --primary: oklch(0.2050 0 0);\n    --primary-foreground: oklch(0.9850 0 0);\n    /* ... other variables */\n  }\n\n  .dark {\n    --background: oklch(0.1450 0 0);\n    --foreground: oklch(0.9850 0 0);\n    --primary: oklch(0.9220 0 0);\n    --primary-foreground: oklch(0.2050 0 0);\n    /* ... other variables */\n  }\n}\n```\n\n3. **Reference it in your `App.razor`** before the NeoUI CSS:\n\n```razor\n\u003clink rel=\"stylesheet\" href=\"styles/theme.css\" /\u003e\n\u003clink href=\"@Assets[\"_content/NeoUI.Blazor/components.css\"]\" rel=\"stylesheet\" /\u003e\n```\n\nThat's it! NeoUI will automatically use your theme variables.\n\n### Available Theme Variables\n\nNeoUI supports all standard shadcn/ui CSS variables:\n- Colors: `--background`, `--foreground`, `--primary`, `--secondary`, `--accent`, `--destructive`, `--muted`, etc.\n- Typography: `--font-sans`, `--font-serif`, `--font-mono`\n- Layout: `--radius` (border radius), `--shadow-*` (shadows)\n- Charts: `--chart-1` through `--chart-5`\n- Sidebar: `--sidebar`, `--sidebar-primary`, `--sidebar-accent`, etc.\n\n### Dark Mode\n\nNeoUI automatically supports dark mode by applying the `.dark` class to the `\u003chtml\u003e` element. All components will automatically switch to dark mode colors when this class is present.\n\n### 🎨 Dynamic Theme Customization (NEW)\n\nNeoUI now includes a **complete theme customization system** that allows users to dynamically switch between different color combinations at runtime:\n\n**Features:**\n- **5 Base Colors** - Zinc, Slate, Gray, Neutral, Stone (foundational UI colors)\n- **17 Primary Colors** - Red, Rose, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink\n- **85 Theme Combinations** (5 base × 17 primary colors)\n- **Live Theme Preview** - Changes apply instantly without page reload\n- **LocalStorage Persistence** - User preferences saved and restored across sessions\n- **Dark/Light Mode Toggle** - Seamless switching between themes\n- **CSP-Compliant** - Uses named JavaScript functions for Content Security Policy compatibility\n- **FOUC-Free** - `theme.js` (included in NuGet package) applies saved classes before Blazor loads\n\nThe theme system includes:\n- **ThemeSwitcher Component** - Visual color picker with preview swatches in a popover panel\n- **DarkModeToggle Component** - Switch with sun/moon icons for theme mode\n- **ThemeService** - C# service for programmatic theme management\n- **Tooltip Support** - Shows current theme selection on hover\n\n\u003e **Setup:** The `theme.js` script is already included in the `App.razor` setup above. No separate initialization call is needed — it auto-applies the saved theme on script load.\n\nExample usage:\n```razor\n@inject ThemeService ThemeService\n\n\u003c!-- Add theme switcher to your layout --\u003e\n\u003cThemeSwitcher /\u003e\n\n\u003c!-- Or control programmatically --\u003e\n\u003cButton @onclick=\"async () =\u003e await ThemeService.SetPrimaryColorAsync(PrimaryColor.Purple)\"\u003e\n    Purple Theme\n\u003c/Button\u003e\n```\n\nSee the [CHANGELOG](CHANGELOG.md) for complete implementation details.\n\n## 💅 Styling\n\n### NeoUI.Blazor (Pre-styled)\n\n**No Tailwind CSS setup required!** NeoUI Components include pre-built, production-ready CSS that ships with the NuGet package.\n\nAdd the following to your `App.razor`:\n\n```razor\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003cbase href=\"/\" /\u003e\n\n    \u003c!-- 1. Your custom theme (defines CSS variables) --\u003e\n    \u003clink rel=\"stylesheet\" href=\"styles/theme.css\" /\u003e\n\n    \u003c!-- 2. Pre-built NeoUI styles --\u003e\n    \u003clink href=\"@Assets[\"_content/NeoUI.Blazor/components.css\"]\" rel=\"stylesheet\" /\u003e\n\n    \u003c!-- 3. Theme script: reads localStorage and applies classes before Blazor loads (prevents FOUC) --\u003e\n    \u003cscript src=\"@Assets[\"_content/NeoUI.Blazor/js/theme.js\"]\"\u003e\u003c/script\u003e\n\n    \u003cHeadOutlet @rendermode=\"InteractiveAuto\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cRoutes @rendermode=\"InteractiveAuto\" /\u003e\n    \u003cscript src=\"@Assets[\"_framework/blazor.web.js\"]\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Important:** Load your theme CSS **before** `components.css` so the CSS variables are defined when NeoUI references them.\n\n**Note:** The pre-built CSS is already minified and optimized. You don't need to install Tailwind CSS, configure build processes, or set up any additional tooling.\n\n### NeoUI.Blazor.Primitives (Headless)\n\nPrimitives are completely **headless** - they provide behavior and accessibility without any styling. You have complete freedom to style them however you want:\n\n**Option 1: Tailwind CSS** (requires your own Tailwind setup)\n```razor\n\u003cNeoUI.Blazor.Primitives.Accordion.Accordion class=\"space-y-4\"\u003e\n    \u003cNeoUI.Blazor.Primitives.Accordion.AccordionItem class=\"border rounded-lg\"\u003e\n        \u003c!-- Your custom Tailwind classes --\u003e\n    \u003c/NeoUI.Blazor.Primitives.Accordion.AccordionItem\u003e\n\u003c/NeoUI.Blazor.Primitives.Accordion.Accordion\u003e\n```\n\n**Option 2: CSS Modules / Vanilla CSS**\n```razor\n\u003cNeoUI.Blazor.Primitives.Accordion.Accordion class=\"my-accordion\"\u003e\n    \u003c!-- Style with your own CSS --\u003e\n\u003c/NeoUI.Blazor.Primitives.Accordion.Accordion\u003e\n```\n\n**Option 3: Inline Styles**\n```razor\n\u003cNeoUI.Blazor.Primitives.Accordion.Accordion style=\"margin: 1rem;\"\u003e\n    \u003c!-- Direct inline styling --\u003e\n\u003c/NeoUI.Blazor.Primitives.Accordion.Accordion\u003e\n```\n\nPrimitives give you complete control over styling while handling all the complex behavior, accessibility, and keyboard navigation for you. Unlike `NeoUI.Blazor`, primitives don't include any CSS - you bring your own styling approach.\n\n## 📚 Components\n\nNeoUI includes **126+ styled components** with full shadcn/ui design compatibility:\n\n### Form Components\n- **Button** - Multiple variants (default, destructive, outline, secondary, ghost, link) with icon support\n- **Button Group** - Visually grouped related buttons with connected styling\n- **Checkbox** - Accessible checkbox with indeterminate state\n- **Color Picker** - Color selection with hex, RGB, and HSL support\n- **Combobox** - Searchable autocomplete dropdown\n- **Currency Input** - Formatted currency input with locale support\n- **Field** - Combine labels, controls, and help text for accessible forms\n- **Input** - Text input with multiple types and validation support\n- **Input Group** - Enhanced inputs with icons, buttons, and addons\n- **Input OTP** - One-time password input with individual character slots\n- **Label** - Accessible form labels\n- **Link Button** - Semantic links styled as buttons for navigation\n- **Masked Input** - Text input with customizable format masks (phone, date, etc.)\n- **Multi Select** - Searchable multi-selection with tags and checkboxes\n- **Native Select** - Styled native HTML select dropdown with chevron icon\n- **Numeric Input** - Number input with increment/decrement buttons and formatting\n- **Radio Group** - Radio button groups with keyboard navigation\n- **Range Slider** - Dual-handle slider for selecting value ranges\n- **Rating** - Star rating input with half-star precision and readonly mode\n- **Select** - Dropdown select with search and keyboard navigation\n- **Slider** - Range input for numeric value selection\n- **Switch** - Toggle switch component\n- **Textarea** - Multi-line text input with automatic content sizing\n\n### Date \u0026 Time\n- **Calendar** - Date selection grid with month navigation\n- **Date Picker** - Date selection with calendar in popover\n- **Date Range Picker** - Date range selection with presets and two-calendar view\n- **Time Picker** - Time selection with 12/24-hour format support\n\n### Layout \u0026 Navigation\n- **Accordion** - Collapsible content sections\n- **Aspect Ratio** - Display content within a desired width/height ratio\n- **Breadcrumb** - Hierarchical navigation with customizable separators\n- **Carousel** - Slideshow component with touch gestures and animations\n- **Card** - Container for grouped content with header and footer\n- **Collapsible** - Expandable/collapsible panels\n- **Navigation Menu** - Horizontal navigation with dropdown panels\n- **Pagination** - Page navigation with Previous/Next/Ellipsis support\n- **Resizable** - Split layouts with draggable handles\n- **Scroll Area** - Custom scrollbars for styled scroll regions\n- **Selection Indicator** - Spring-animated indicator that slides between the active item in any selection container (Tabs, ToggleGroup, DropdownMenuRadioGroup, Pagination, custom markup). Zero wiring — place it as the last child and point it at the active-state attribute. Supports hover preview (`Hover=\"true\"`) and CSS custom properties for animation and underline variants.\n- **Sortable** - Drag-and-drop reordering with pointer, touch, and keyboard support. Composes with `DataTable`, `DataView`, and any list component without modifying them — place a `SortableItemHandle` in any column template and it works. Supports **cross-list transfer** between multiple lists sharing a `Group` name, with consumer-controlled transfer events (`OnItemTransferredIn`, `OnItemTransferredOut`, `OnCanDrop`). Use `Context=\"s\"` to get a `SortableScope\u003cTItem\u003e` for passing `data-sortable-id` to any table or grid via `s.RowAttributes`.\n- **Item** - Flexible list items with media, content, and actions\n- **Separator** - Visual dividers\n- **Sidebar** - Responsive sidebar with collapsible icon mode, variants (default, floating, inset), and mobile sheet integration\n- **Tabs** - Tabbed interfaces with controlled/uncontrolled modes\n\n### Overlay Components\n- **Alert Dialog** - Modal for critical confirmations\n- **Context Menu** - Right-click menus with actions and shortcuts\n- **Command** - Command palette with keyboard navigation\n- **Dialog** - Modal dialogs\n- **Dialog Service** - Programmatic dialogs with async/await API for alerts and confirmations\n- **Drawer** - Slide-out panel with gesture controls and backdrop\n- **Dropdown Menu** - Context menus with nested submenus\n- **Hover Card** - Rich hover previews\n- **Menubar** - Desktop application-style horizontal menu bar\n- **Popover** - Floating content containers\n- **Sheet** - Slide-out panels (top, right, bottom, left)\n- **Toast** - Temporary notifications with variants and actions\n- **Tooltip** - Contextual hover tooltips\n\n### Data \u0026 Content\n- **DataTable** - Advanced tables with sorting, filtering, pagination, server-side data, column pinning/resizing/reordering, tree/hierarchical rows, row context menu, and virtualization\n- **Filter** - Inline canvas filter builder with 8 field types, operator chips, LINQ extensions, and preset support\n- **MarkdownEditor** - Rich text editor with toolbar formatting and live preview\n- **RichTextEditor** - WYSIWYG editor with formatting toolbar and HTML output\n\n### Display Components\n- **Alert** - Status messages and callouts\n- **Avatar** - User avatars with fallback support\n- **Badge** - Status badges and labels\n- **Card** - Container for grouped content with header and footer\n- **Command** - Command palette with keyboard navigation\n- **Data Table** - Powerful tables with sorting, filtering, pagination, and selection\n- **Empty** - Empty state displays\n- **Item** - Flexible list items with media, content, and actions\n- **Kbd** - Keyboard shortcut badges\n- **Progress** - Progress bars with animations\n- **Skeleton** - Loading placeholders\n- **Spinner** - Loading indicators\n- **Toggle** - Pressable toggle buttons\n- **Toggle Group** - Single/multiple selection toggle groups\n- **Typography** - Semantic text styling\n\n### Data Visualization\n- **Chart** - Beautiful data visualizations with 12 chart types:\n  - **Area Chart** - Stacked and gradient area charts\n  - **Bar Chart** - Vertical and horizontal bar charts (grouped/stacked)\n  - **Candlestick Chart** - OHLC financial candlestick charts\n  - **Composed Chart** - Mix multiple chart types (line + bar + area)\n  - **Funnel Chart** - Funnel/pipeline visualization\n  - **Gauge Chart** - Circular gauge / speedometer charts\n  - **Heatmap Chart** - Grid-based intensity heatmaps\n  - **Line Chart** - Single and multi-series line charts\n  - **Pie Chart** - Pie and donut charts with labels\n  - **Radar Chart** - Multi-axis radar/spider charts\n  - **Radial Bar Chart** - Circular progress and gauge charts\n  - **Scatter Chart** - X/Y coordinate plotting\n\n### Animation\n- **Motion** - Declarative animation system powered by Motion.dev with 20+ presets including fade, scale, slide, shake, bounce, pulse, spring physics, scroll-triggered animations, and staggered list/grid animations\n\n### 🎭 Icons\n\nNeoUI offers **three icon library packages** to suit different design preferences:\n\n- **Lucide Icons** (`NeoUI.Icons.Lucide`) - 1,640 beautiful, consistent stroke-based icons\n  - ISC licensed\n  - 24x24 viewBox, 2px stroke width\n  - Perfect for: Modern, clean interfaces\n\n- **Heroicons** (`NeoUI.Icons.Heroicons`) - 1,288 icons across 4 variants\n  - MIT licensed by Tailwind Labs\n  - Variants: Outline (24x24), Solid (24x24), Mini (20x20), Micro (16x16)\n  - Perfect for: Tailwind-based designs, flexible sizing needs\n\n- **Feather Icons** (`NeoUI.Icons.Feather`) - 286 minimalist stroke-based icons\n  - MIT licensed\n  - 24x24 viewBox, 2px stroke width\n  - Perfect for: Simple, lightweight projects\n\n## 🔧 Primitives\n\nNeoUI also includes **16 headless primitive components** for building custom UI:\n\n- Accordion Primitive\n- Checkbox Primitive\n- Collapsible Primitive\n- Dialog Primitive\n- Dropdown Menu Primitive\n- Hover Card Primitive\n- Label Primitive\n- Popover Primitive\n- Radio Group Primitive\n- Select Primitive\n- Sheet Primitive\n- Sortable Primitive\n- Switch Primitive\n- Table Primitive\n- Tabs Primitive\n- Tooltip Primitive\n\nAll primitives are fully accessible, keyboard-navigable, and provide complete control over styling.\n\n## ✨ Features\n\n- **Full shadcn/ui Compatibility** - Drop-in Blazor equivalents of shadcn/ui components\n- **Zero Configuration** - Pre-built CSS included, no Tailwind setup required\n- **🎯 .NET 10 Ready** - Built for the latest .NET platform with Auto rendering mode\n- **Auto Rendering Mode** - Seamless transition between Server and WebAssembly rendering\n- **🌙 Dark Mode Support** - Built-in light/dark theme switching with CSS variables\n- **📱 Responsive Design** - Mobile-first components that adapt to all screen sizes\n- **♿ Accessibility First** - WCAG 2.1 AA compliant with keyboard navigation and ARIA attributes\n- **⌨️ Keyboard Shortcuts** - Native keyboard navigation support (e.g., Ctrl/Cmd+B for sidebar toggle)\n- **🔄 State Persistence** - Cookie-based state management for user preferences\n- **TypeScript-Inspired API** - Familiar API design for developers coming from React/shadcn/ui\n- **Pure Blazor** - No JavaScript dependencies, no Node.js required\n- **🎨 Icon Library Options** - 3 separate icon packages (Lucide, Heroicons, Feather) with 3,200+ total icons\n- **Form Validation Ready** - Works seamlessly with Blazor's form validation\n\n## 📄 License\n\nNeoUI is open source software licensed under the [MIT License](LICENSE).\n\n## 🙏 Acknowledgments\n\nNeoUI is inspired by [shadcn/ui](https://ui.shadcn.com/) and based on the design principles of [Radix UI](https://www.radix-ui.com/).\n\nWhile NeoUI is a complete reimplementation for Blazor/C# and contains no code from these projects, we are grateful for their excellent work which inspired this library.\n\n- shadcn/ui: MIT License - Copyright (c) 2023 shadcn\n- Radix UI: MIT License - Copyright (c) 2022-present WorkOS\n\nNeoUI is an independent project and is not affiliated with or endorsed by shadcn or Radix UI.\n\n**Additional Acknowledgments:**\n- Initial Blazor components inspiration by [Mathew Taylor](https://github.com/blazorui-net/ui)\n- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework\n- [Lucide Icons](https://lucide.dev/) - Beautiful stroke-based icon library (ISC License)\n- [Heroicons](https://heroicons.com/) - Icon library by Tailwind Labs (MIT License)\n- [Feather Icons](https://feathericons.com/) - Minimalist icon library (MIT License)\n- Built with ❤️ for the Blazor community\n\n## 📊 Version Information\n\n- **Current Version**: 3.8.2\n- **Target Framework**: .NET 10\n- **Package IDs**: \n  - `NeoUI.Blazor`\n  - `NeoUI.Blazor.Primitives`\n  - `NeoUI.Icons.Lucide`\n  - `NeoUI.Icons.Heroicons`\n  - `NeoUI.Icons.Feather`\n\n---\n\n**Note**: These packages were formerly known as `BlazorUI.*`. As of version 1.0.7, the assembly names have been updated to `NeoUI.*` to match the NuGet package IDs, ensuring consistent asset paths when consumed from NuGet.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimmyps%2Fblazor-shadcn-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjimmyps%2Fblazor-shadcn-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimmyps%2Fblazor-shadcn-ui/lists"}