{"id":29702412,"url":"https://github.com/pureblazor/components","last_synced_at":"2025-07-23T12:10:37.396Z","repository":{"id":200655681,"uuid":"703595495","full_name":"pureblazor/components","owner":"pureblazor","description":"PureBlazor UI Components","archived":false,"fork":false,"pushed_at":"2025-07-09T19:16:59.000Z","size":42973,"stargazers_count":52,"open_issues_count":19,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-18T10:42:32.327Z","etag":null,"topics":["blazor","csharp","dotnet","maui-blazor","tailwindcss","ui-components"],"latest_commit_sha":null,"homepage":"https://pureblazor.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"getspacetime/makani","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pureblazor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"getspacetime","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-10-11T14:33:54.000Z","updated_at":"2025-07-09T19:17:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"291e3497-966c-43c1-8620-15c067380a56","html_url":"https://github.com/pureblazor/components","commit_stats":null,"previous_names":["pureblazor/components"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pureblazor/components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pureblazor%2Fcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pureblazor%2Fcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pureblazor%2Fcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pureblazor%2Fcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pureblazor","download_url":"https://codeload.github.com/pureblazor/components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pureblazor%2Fcomponents/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266673866,"owners_count":23966382,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"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":["blazor","csharp","dotnet","maui-blazor","tailwindcss","ui-components"],"created_at":"2025-07-23T12:10:33.393Z","updated_at":"2025-07-23T12:10:37.388Z","avatar_url":"https://github.com/pureblazor.png","language":"CSS","funding_links":["https://github.com/sponsors/getspacetime"],"categories":[],"sub_categories":[],"readme":"![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/pureblazor/components/build.yml)\n![GitHub last commit](https://img.shields.io/github/last-commit/pureblazor/components)\n![NuGet Version](https://img.shields.io/nuget/vpre/PureBlazor.Components)\n[![Discord](https://img.shields.io/discord/984241021225414787)](https://discord.gg/PeBbYy6WKq)\n[![PureBlazor](https://img.shields.io/badge/pureblazor-rgb(7%2C%2072%2C%20115))](https://pureblazor.com)\n\n# PureBlazor Components\n\n\u003e [!NOTE]\n\u003e This component library is pre-release software.\n\n\nThese components are native Blazor UI components that are free to use for any Blazor project.\n\n# Getting started\n\n## Installation\n\nInstall the `PureBlazor.Components` NuGet package to your Client project.\n\n```sh\ndotnet add package PureBlazor.Components\n```\n\nAdd to your `GlobalUsings.cs` file in the Client project:\n\n```csharp\nglobal using static PureBlazor.Components.Variants;\nglobal using static PureBlazor.Components.Sizes;\nglobal using PureBlazor.Components;\n```\n\nSetup Tailwind in your Blazor project folder by adding a `styles.css` and `package.json` file that looks something like this:\n\n```json\n{\n    \"scripts\": {\n        \"build\": \"npx @tailwindcss/cli -i styles.css -o ./wwwroot/app.css\",\n        \"watch\": \"npx @tailwindcss/cli -i styles.css -o ./wwwroot/app.css --watch\"\n    },\n    \"dependencies\": {\n        \"@tailwindcss/cli\": \"^4.1.11\",\n        \"tailwindcss\": \"^4.1.11\"\n    }\n}\n\n```\n\n## Example usage\n\n```razor\n\u003cButton Variant=\"Secondary\" Size=\"Sm\" @onclick=\"EnterEditMode\"\u003eEdit Observer\u003c/Button\u003e\n\u003cButton Variant=\"Primary\" Size=\"Sm\" @onclick=\"CheckHealthNowAsync\"\u003eCheck now\u003c/Button\u003e\n```\n\n## Theming\nThis library depends on Tailwind. Use CSS variables to easily customize the theme of the components.\n\nIf you are familiar with [ShadCN](https://github.com/shadcn-ui/ui), you will find the theming approach similar, as it is heavily inspired by it, if not outright copied.\n\n1. Set up Tailwind in your Blazor project.\n2. Add the below CSS variables to your tailwind input CSS file (e.g., `site.css` or `app.css`).\n3. Adjust the CSS variables to match your design requirements.\n\n```css\n@import \"tailwindcss\";\n@custom-variant dark (\u0026:where(.dark, .dark *));\n\n:root {\n    --background: hsl(0 0% 100%);\n    --foreground: hsl(240 10% 3.9%);\n    --card: hsl(0 0% 100%);\n    --card-foreground: hsl(240 10% 3.9%);\n    --popover: hsl(0 0% 100%);\n    --popover-foreground: hsl(240 10% 3.9%);\n    --primary: hsl(240 5.9% 10%);\n    --primary-foreground: hsl(0 0% 98%);\n    --secondary: hsl(240 4.8% 95.9%);\n    --secondary-foreground: hsl(240 5.9% 10%);\n    --muted: hsl(240 4.8% 95.9%);\n    --muted-foreground: hsl(240 3.8% 46.1%);\n    --accent: hsl(240 4.8% 95.9%);\n    --accent-foreground: hsl(240 5.9% 10%);\n    --destructive: hsl(2.6 86.9% 41.8%);\n    --destructive-foreground: hsl(0 0% 98%);\n    --border: hsl(240 5.9% 90%);\n    --input: hsl(240 5.9% 90%);\n    --ring: hsl(240 10% 3.9%);\n    --chart-1: hsl(12 76% 61%);\n    --chart-2: hsl(173 58% 39%);\n    --chart-3: hsl(197 37% 24%);\n    --chart-4: hsl(43 74% 66%);\n    --chart-5: hsl(27 87% 67%);\n    --radius: 0.6rem;\n    --sidebar-background: hsl(0 0% 98%);\n    --sidebar-foreground: hsl(240 5.3% 26.1%);\n    --sidebar-primary: hsl(240 5.9% 10%);\n    --sidebar-primary-foreground: hsl(0 0% 98%);\n    --sidebar-accent: hsl(240 4.8% 95.9%);\n    --sidebar-accent-foreground: hsl(240 5.9% 10%);\n    --sidebar-border: hsl(220 13% 91%);\n    --sidebar-ring: hsl(217.2 91.2% 59.8%);\n}\n\n.dark {\n    --background: hsl(240 10% 3.9%);\n    --foreground: hsl(0 0% 98%);\n    --card: hsl(240 10% 3.9%);\n    --card-foreground: hsl(0 0% 98%);\n    --popover: hsl(240 10% 3.9%);\n    --popover-foreground: hsl(0 0% 98%);\n    --primary: hsl(0 0% 98%);\n    --primary-foreground: hsl(240 5.9% 10%);\n    --secondary: hsl(240 3.7% 15.9%);\n    --secondary-foreground: hsl(0 0% 98%);\n    --muted: hsl(240 3.7% 15.9%);\n    --muted-foreground: hsl(240 5% 64.9%);\n    --accent: hsl(240 3.7% 15.9%);\n    --accent-foreground: hsl(0 0% 98%);\n    --destructive: hsl(0 62.8% 30.6%);\n    --destructive-foreground: hsl(0 0% 98%);\n    --border: hsl(240 3.7% 15.9%);\n    --input: hsl(240 3.7% 15.9%);\n    --ring: hsl(240 4.9% 83.9%);\n    --chart-1: hsl(220 70% 50%);\n    --chart-2: hsl(160 60% 45%);\n    --chart-3: hsl(30 80% 55%);\n    --chart-4: hsl(280 65% 60%);\n    --chart-5: hsl(340 75% 55%);\n    --sidebar-background: hsl(240 5.9% 10%);\n    --sidebar-foreground: hsl(240 4.8% 95.9%);\n    --sidebar-primary: hsl(224.3 76.3% 48%);\n    --sidebar-primary-foreground: hsl(0 0% 100%);\n    --sidebar-accent: hsl(240 3.7% 15.9%);\n    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);\n    --sidebar-border: hsl(240 3.7% 15.9%);\n    --sidebar-ring: hsl(217.2 91.2% 59.8%);\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    --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    --color-sidebar-ring: var(--sidebar-ring);\n    --color-sidebar-border: var(--sidebar-border);\n    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n    --color-sidebar-accent: var(--sidebar-accent);\n    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n    --color-sidebar-primary: var(--sidebar-primary);\n    --color-sidebar-foreground: var(--sidebar-foreground);\n    --color-sidebar: var(--sidebar-background);\n    --animate-accordion-down: accordion-down 0.2s ease-out;\n    --animate-accordion-up: accordion-up 0.2s ease-out;\n}\n```\n\n# FAQ\n\n### Why not use another `xx` library?\n\n- This library is built to be lightweight and follow a style convention similar to ShadCN.\n- For more complex components, we recommend using other libraries like [Blazorise](https://blazorise.com/) or [MudBlazor](https://mudblazor.com/).\n\n### Is this library free to use?\n\n- Yes! This library is free to use for any Blazor project.\n\n### Can I use this library with Blazor WebAssembly / Blazor Server / InteractiveAuto / MAUI?\n\n- Yes! This library supports all Blazor hosting models.\n\n### Can you add a specific component or feature?\n- We are always open to suggestions, but we cannot guarantee that we will implement them.\n\n### How do I report a bug?\n\n- Please, open an issue on the [GitHub repository](https://github.com/pureblazor/components/issues/new/choose).\n- Please, include as much information as possible, including what library version and browser you\n  are using, and any steps to reproduce the issue.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpureblazor%2Fcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpureblazor%2Fcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpureblazor%2Fcomponents/lists"}