{"id":51878386,"url":"https://github.com/graundtech/fluent2-react-kit","last_synced_at":"2026-07-25T08:30:48.982Z","repository":{"id":370905295,"uuid":"1282537491","full_name":"graundtech/fluent2-react-kit","owner":"graundtech","description":"React components inspired by Microsoft Fluent 2, built for npm and shadcn-style registry distribution.","archived":false,"fork":false,"pushed_at":"2026-07-11T20:26:30.000Z","size":171,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-11T22:10:17.882Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://fluent2-react-kit-demo.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/graundtech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/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":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-27T22:48:05.000Z","updated_at":"2026-07-11T20:26:34.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/graundtech/fluent2-react-kit","commit_stats":null,"previous_names":["graundtech/fluent2-react-kit"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/graundtech/fluent2-react-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graundtech%2Ffluent2-react-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graundtech%2Ffluent2-react-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graundtech%2Ffluent2-react-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graundtech%2Ffluent2-react-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graundtech","download_url":"https://codeload.github.com/graundtech/fluent2-react-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graundtech%2Ffluent2-react-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35873752,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-25T02:00:06.922Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":[],"created_at":"2026-07-25T08:30:48.508Z","updated_at":"2026-07-25T08:30:48.976Z","avatar_url":"https://github.com/graundtech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fluent 2 React Kit\n\nFluent 2-inspired, shadcn-style React components — copy the source via a registry, or install the package. Built on Tailwind CSS v4 and CSS variables.\n\n\u003e **Disclaimer.** This project is **inspired by Microsoft's Fluent 2 design language**. It is an **independent, community-built open-source project** and is **not affiliated with, sponsored by, or endorsed by Microsoft**. \"Fluent\" and \"Segoe UI\" are Microsoft trademarks, referenced here only to describe the visual/behavioral inspiration. **No Fluent UI source code is used** — every token and component in this kit is an original implementation derived from publicly documented Fluent 2 design values (see [`docs/design/tokens-research.md`](docs/design/tokens-research.md) for provenance).\n\n## What this is\n\n`@graundtech/fluent2-react-kit` gives you Fluent 2's visual language with shadcn/ui's developer experience:\n\n- **Fluent 2 aesthetics** — brand blue, flat surfaces, Fluent's radius/elevation/motion scale, Segoe UI-first type stack, all derived from public Fluent 2 design tokens.\n- **shadcn/ui philosophy and APIs** — plain function components, `cva` variants, `data-slot` hooks, `asChild` polymorphism, the same prop names (`variant`, `size`, …) shadcn/ui users already know.\n- **Registry-first distribution** — every component is a [shadcn registry](https://ui.shadcn.com/docs/registry) item. Install via `npx shadcn add` and get the source copied straight into your project — no runtime dependency required. A traditional npm package is also available.\n- **Tailwind v4 + CSS variables** — one token layer (`tokens.css`) drives everything through a Tailwind v4 `@theme inline` bridge. No config-file theming; override CSS custom properties instead.\n- **Light, dark, and high-contrast themes** — `.dark` and `.high-contrast` classes, plus automatic `forced-colors` support for Windows high-contrast mode.\n- **Tested** — every component ships with Vitest + Testing Library unit tests and an `axe-core` accessibility check (494 tests across the kit today).\n\nRead the full product vision in [`docs/vision.md`](docs/vision.md).\n\n## Quick start\n\n### Using the components (consumers)\n\n**Option A — shadcn registry (recommended).** Point the shadcn CLI at this kit's registry to copy component source directly into your project.\n\nIf this is a fresh project, run `init` first (CLI 4.13+ uses presets, not a `--base-color` flag — any preset works, the theme item overrides it):\n\n```bash\nnpx shadcn@latest init\n```\n\n\u003e **Clean up after `init`.** `shadcn init` seeds your global CSS with its own competing theme — delete it before installing `theme`, or it silently wins the cascade over Fluent's tokens. Short version: your global CSS should end up as just `@import \"tailwindcss\";` followed by the Fluent tokens import, nothing else. Full before/after: [`docs/registry.md`](docs/registry.md#cleaning-up-after-shadcn-init).\n\nThen install the token theme, then any components:\n\n```bash\n# 1. Install the token theme first — every component assumes it's present.\nnpx shadcn@latest add \u003cregistry-url\u003e/r/theme.json --yes --overwrite\n\n# 2. Install any component.\nnpx shadcn@latest add \u003cregistry-url\u003e/r/button.json --yes --overwrite\n```\n\n\u003e `--yes --overwrite` — `init` pre-creates files like `button.tsx` and `lib/utils.ts` from its preset, so `add` prompts to overwrite them per file; `--overwrite` accepts, and `--yes` is required for that flag to apply non-interactively (scripted installs and CI should always pass both, or the batch hangs/skips files).\n\n\u003e `\u003cregistry-url\u003e` is the deployed demo's production domain, `https://fluent2-react-kit.graund.io` — see [`docs/registry.md`](docs/registry.md) for how that constant is wired up and how to point at a local registry (`pnpm demo:dev`) instead.\n\n\u003e [!WARNING]\n\u003e **Using Fluent icons in your own components?** Any `@fluentui/react-icons` import must live inside a `\"use client\"` module. The icons package calls a client-only Griffel styling API at module scope, so importing an icon into a Server Component (e.g. dropping one inside your own `\u003cAlert\u003e` on a Next.js App Router page) fails `next build`. Kit components that ship with icons already carry `\"use client\"` — this only bites icons *you* import directly.\n\n**Named registry alias.** Configure a short alias once in `components.json` so you can install with `npx shadcn add @fluent2-react-kit/\u003cname\u003e` instead of the full URL:\n\n```json\n// components.json\n{\n  \"registries\": {\n    \"@fluent2-react-kit\": \"https://fluent2-react-kit.graund.io/r/{name}.json\"\n  }\n}\n```\n\n```bash\nnpx shadcn@latest add @fluent2-react-kit/theme --yes --overwrite\nnpx shadcn@latest add @fluent2-react-kit/button --yes --overwrite\n```\n\n**Option B — npm package.** Install `@graundtech/fluent2-react-kit` and import the token stylesheet:\n\n```bash\nnpm install @graundtech/fluent2-react-kit\n```\n\n```css\n/* globals.css */\n@import \"tailwindcss\";\n@import \"@graundtech/fluent2-react-kit/tokens.css\";\n@source \"../node_modules/@graundtech/fluent2-react-kit/dist\";\n```\n\nThe `@source` line tells Tailwind v4 to scan the package for utility classes (it skips `node_modules` by default — without it the components render unstyled). The path is relative to your CSS file; adjust the `../` depth accordingly.\n\nFull theming details: [`docs/tokens.md`](docs/tokens.md).\n\n### Working on this repo (contributors)\n\n```bash\npnpm install\npnpm build        # builds the package, the registry, then the demo\npnpm test          # runs the component test suite (Vitest + axe)\npnpm test:e2e      # runs the Playwright browser suite (builds + serves the demo)\npnpm demo:dev      # runs the demo/showcase app locally\n```\n\nThe Playwright suite needs a one-time Chromium install (`pnpm exec playwright install chromium`). See [`docs/contributing.md`](docs/contributing.md) for the full contributor workflow, including how to add a new component and how the e2e tests run.\n\n## Component status\n\nAll items below are at **v0.6.0**.\n\n| Item | Type | Notes |\n| --- | --- | --- |\n| `theme` | tokens | Light, dark, and high-contrast CSS variable layer + Tailwind v4 bridge |\n| `utils` | lib | The `cn()` class-merging helper (`clsx` + `tailwind-merge`) |\n| `accordion` | component | Single/multiple disclosure with animated panel height, built on `@base-ui/react/accordion` |\n| `alert` | component | 5 variants (default, destructive, success, warning, info), MessageBar-style icon + title accent |\n| `avatar` | component | Image-with-fallback, built on `@base-ui/react/avatar` |\n| `badge` | component | 6 variants: default, secondary, destructive, outline, success, warning |\n| `breadcrumb` | component | 7-part trail navigation, Server Component-safe (inline SVG glyphs) |\n| `button` | component | 6 variants × 6 sizes, brand state ramp, `asChild` |\n| `card` | component | 7-part composable card (`Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`) |\n| `checkbox` | component | Checked/unchecked/indeterminate, built on `@base-ui/react/checkbox` |\n| `combobox` | component | Filterable select — real 10-part family (no Popover+Command recipe), built on `@base-ui/react/combobox` |\n| `command` | component | cmdk-style palette without the cmdk dep, built on `@base-ui/react/autocomplete` (inline mode) |\n| `dialog` | component | 10-part modal dialog (smoke backdrop, built-in ✕, header/footer), built on `@base-ui/react/dialog` |\n| `dropdown-menu` | component | 14-part menu (checkbox/radio items, submenus, shortcuts), built on `@base-ui/react/menu` |\n| `input` | component | Text field with the Fluent bottom-accent focus treatment |\n| `label` | component | Native `\u003clabel\u003e`, optional `required` asterisk |\n| `link` | component | 2 variants (default, inline), `asChild` |\n| `multi-select` | component | Tags-picker combobox with a chips field, reuses the `combobox` popup parts |\n| `overflow` | primitive (headless) | Priority-overflow system (ResizeObserver + exact space accounting) — the single-line Ribbon's core, reusable standalone |\n| `pagination` | component | Page navigation styled via `buttonVariants`, Server Component-safe |\n| `popover` | component | Anchored non-modal surface (`w-72`, `shadow-16`), built on `@base-ui/react/popover` |\n| `progress` | component | Fluent-thin (2px) determinate/indeterminate bar, built on `@base-ui/react/progress` |\n| `radio-group` | component | Roving-tabindex radio group (`RadioGroup`, `RadioGroupItem`), built on `@base-ui/react/radio-group` |\n| `ribbon` | component | Office-style Ribbon — single-line (priority overflow) **and** classic (group collapse → flyout → scroll) layouts on one tree, `RibbonLayoutSwitcher`; composes Tabs + Toolbar + Overflow |\n| `ribbon-collapse` | primitive (headless) | Group-collapse manager (per-group expand/collapse + scroll escalation) — the classic Ribbon's core |\n| `select` | component | 9-part composable select (trigger, popup, groups, scroll buttons), built on `@base-ui/react/select` |\n| `separator` | component | Horizontal/vertical divider |\n| `skeleton` | component | Loading placeholder, `animate-pulse` fill |\n| `spinner` | component | Fluent arc-style loading indicator, 4 sizes |\n| `split-button` | component | Primary action joined to a chevron menu trigger (Fluent SplitButton), composes `DropdownMenu` |\n| `switch` | component | Fluent Toggle Switch look (outlined unchecked track), built on `@base-ui/react/switch` |\n| `tabs` | component | Fluent underline TabList with sliding brand indicator, built on `@base-ui/react/tabs` |\n| `textarea` | component | Multi-line text field, matches `input`'s focus treatment |\n| `toast` | component | Manager-driven notifications, 5 status variants, built on `@base-ui/react/toast` |\n| `toggle` | component | Pressed/unpressed toggle button (Fluent ToggleButton), built on `@base-ui/react/toggle` |\n| `toolbar` | component | APG toolbar with roving tabindex (`Toolbar`, `ToolbarButton`, `ToolbarGroup`, …), built on `@base-ui/react/toolbar` |\n| `tooltip` | component | Neutral elevated surface (Fluent style, not an inverted bubble), built on `@base-ui/react/tooltip` |\n\nThat's **33 components + 2 headless primitives (`overflow`, `ribbon-collapse`) + `utils` + `theme`** (37 registry items), all documented in the live demo (`pnpm demo:dev` → `/preview/\u003cname\u003e`). Naming and API conventions are normative in [`docs/component-conventions.md`](docs/component-conventions.md).\n\nFor what's planned next — more components, known TODOs, and open backlog — see [`docs/status-and-backlog.md`](docs/status-and-backlog.md).\n\n## Monorepo structure\n\n```\n.\n├── apps/\n│   └── demo/                        # Next.js showcase app, deployed to Vercel\n│       ├── app/\n│       │   ├── page.tsx             # Landing page (hero, sample composition, registry install snippet)\n│       │   └── preview/\u003cname\u003e/      # One route per registry item, renders every variant/size\n│       └── public/r/                # Generated registry output (gitignored, built by pnpm build:registry)\n├── packages/\n│   └── react/                       # @graundtech/fluent2-react-kit (the published package)\n│       └── src/\n│           ├── components/ui/       # \u003cname\u003e.tsx + \u003cname\u003e.test.tsx per component\n│           ├── lib/utils.ts         # cn() helper\n│           ├── styles/tokens.css    # the Fluent 2 → shadcn token layer\n│           ├── test/                # Vitest setup + shared a11y test\n│           └── index.ts             # package barrel (exports + `version`)\n├── registry/\n│   └── items/                       # One fragment per registry item (\u003cname\u003e.json)\n├── scripts/\n│   └── build-registry.mjs           # Fragments -\u003e apps/demo/public/r/*.json\n├── docs/                            # This documentation set\n├── package.json                     # Root workspace scripts + packageManager (pnpm)\n├── pnpm-workspace.yaml               # Declares packages/* and apps/*\n└── vercel.json                      # Release pipeline config (root-directory build)\n```\n\nThe Vercel release pipeline (Root Directory `apps/demo`, pnpm workspace install, `vercel.json`) depends on this exact layout — restructuring these folders will break the deploy.\n\n## Documentation\n\n| Doc | What it covers |\n| --- | --- |\n| [`docs/vision.md`](docs/vision.md) | Product vision, target use cases, source-precedence hierarchy, rendering philosophy |\n| [`docs/registry.md`](docs/registry.md) | How the registry build works end-to-end, and how to install from it |\n| [`docs/tokens.md`](docs/tokens.md) | The design token system: layers, theming, customization |\n| [`docs/status-and-backlog.md`](docs/status-and-backlog.md) | Current status and the full component/infra backlog |\n| [`docs/contributing.md`](docs/contributing.md) | Contributor setup, scripts, PR expectations |\n| [`docs/component-conventions.md`](docs/component-conventions.md) | The normative authoring contract every component follows |\n| [`docs/design/tokens-research.md`](docs/design/tokens-research.md) | Token research and provenance (Fluent 2 → shadcn mapping decisions) |\n| [`registry/items/README.md`](registry/items/README.md) | Registry fragment schema reference |\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraundtech%2Ffluent2-react-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraundtech%2Ffluent2-react-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraundtech%2Ffluent2-react-kit/lists"}