diff --git a/.agents/skills/add-component/SKILL.md b/.agents/skills/add-component/SKILL.md
index 5eebde7c..0b4b5168 100644
--- a/.agents/skills/add-component/SKILL.md
+++ b/.agents/skills/add-component/SKILL.md
@@ -57,8 +57,9 @@ states, and story coverage.
      Variants, Sizes, states, …) so the two Storybooks read identically. Mirror the button
      stories: `packages/react/src/components/ui/button/button.stories.tsx` and
      `packages/angular/src/lib/ui/button/src/lib/hlm-button.stories.ts`.
-   - **Tokens:** both packages share the same oklch token names. If you add a new token,
-     add it to **both** `react/src/index.css` and `angular/src/styles.css`.
+   - **Tokens:** semantic values live in `@surfnet/curve-tokens` DTCG JSON (rebuild tokens,
+     don't hand-edit `:root`). React maps them in `packages/react/src/index.css` (`@theme
+     inline`); Angular in `packages/angular/src/styles.css`. Keep names aligned across both.
 
 6. **Verify both:**
 
@@ -69,6 +70,7 @@ states, and story coverage.
    # parity check — both should list the same story ids:
    node -e "console.log(Object.keys(require('./packages/react/storybook-static/index.json').entries))"
    node -e "console.log(Object.keys(require('./packages/angular/storybook-static/index.json').entries))"
+   pnpm test:visual   # React snapshots + React/Angular screenshot comparison
    ```
 
 ## Contract step
@@ -149,22 +151,29 @@ Then:
   ```
 
 The per-framework playbooks (`react.md`, `angular.md`) each have a matching step that ties
-the component to the contract **for every axis it has**: a `cva` map carries
-`satisfies Record<CardVariantName, string>`; an inline-union prop (no `cva`) is typed as
-`size?: CardSizeName`. Either way a name mismatch fails `pnpm lint` at compile time. A
-description-only contract has nothing to enforce — wiring it into the story's docs is
-enough.
+the component to the contract **for every axis it has**:
+
+- **React:** a CSS Module class map (or `data-*` attribute + CSS) carries
+  `satisfies Record<CardVariantName, string>` on the TS side; inline-union props are typed as
+  `size?: CardSizeName`.
+- **Angular:** Spartan `cva` / `hlm` maps carry the same `satisfies Record<…>` pattern.
+
+Either way a name mismatch fails `pnpm lint` at compile time. A description-only contract
+has nothing to enforce — wiring it into the story's docs is enough.
 
 ## Definition of done
 
 - Component vendored via the framework CLI(s) — never hand-write primitives.
 - A `<name>Contract` `as const` entry exists in `@surfnet/curve-contracts` for **every** component
   (description-only when it has no axis) and is exported from its `index.ts`.
-- For each axis the component exposes, both frameworks are tied to the contract: `cva` maps
-  carry `satisfies Record<...>`, inline-union props are typed as the contract's `*Name`
-  (see per-framework playbooks). Description-only contracts have nothing to enforce.
+- For each axis the component exposes, both frameworks are tied to the contract (React:
+  CSS Module class maps + `satisfies Record<...>`; Angular: `cva`/`hlm` + `satisfies`).
+  Inline-union props are typed as the contract's `*Name` (see per-framework playbooks).
+  Description-only contracts have nothing to enforce.
 - Exported from each package's entry (`src/index.ts` / `src/public-api.ts`).
 - A Storybook story per package covering the component's full surface; when added to both,
   the story sets match.
 - `pnpm build`, `pnpm lint`, `pnpm format`, and the relevant `build-storybook` runs pass.
+- Visual tests pass (`pnpm test:visual`). React snapshot baselines are refreshed with
+  `pnpm test:visual:update`.
 - Any unavoidable React/Angular difference is documented, not hidden.
diff --git a/.agents/skills/add-component/angular.md b/.agents/skills/add-component/angular.md
index 83fb035d..18627bde 100644
--- a/.agents/skills/add-component/angular.md
+++ b/.agents/skills/add-component/angular.md
@@ -103,6 +103,7 @@ pnpm --filter @surfnet/curve-contracts lint       # contract types still compile
 pnpm --filter @surfnet/curve-angular build        # ng-packagr (FESM + d.ts); satisfies check runs here
 pnpm --filter @surfnet/curve-angular build-storybook
 pnpm format
+pnpm test:visual   # after both Storybooks are built
 ```
 
 ## Definition of done
@@ -116,6 +117,9 @@ pnpm format
 - Story covers full variant/size/state surface, sourcing its description and axis lists from
   the contract object.
 - `pnpm build`, `pnpm format`, and `build-storybook` all pass.
+- Visual tests pass (`pnpm test:visual`). Parity screenshots compare this story to its React
+  counterpart by story id — keep the story names in sync. Tag stories `skip-visual` if they
+  cannot be snapshotted stably.
 
 ## Notes
 
diff --git a/.agents/skills/add-component/react.md b/.agents/skills/add-component/react.md
index c46327a0..9a09d3fe 100644
--- a/.agents/skills/add-component/react.md
+++ b/.agents/skills/add-component/react.md
@@ -4,9 +4,15 @@ Part of the **add-component** skill — see [`SKILL.md`](SKILL.md) for scope/par
 
 Components are **vendored** with the shadcn CLI — copied into the package so we own and
 edit them. The package is pre-configured (`packages/react/components.json`) for **Base
-UI** primitives (`"style": "base-nova"`) and **Phosphor** icons (`"iconLibrary": "phosphor"`).
+UI** primitives (`"style": "base-vega"`) and **Phosphor** icons (`"iconLibrary": "phosphor"`).
 Never hand-write a primitive or switch `style` to a Radix value.
 
+**Styling:** library components use **co-located CSS Modules** (`*.module.css`) and Curve
+tokens (`var(--primary)`, `var(--border)`, …). The shadcn CLI may still emit Tailwind
+utility strings — **migrate them to a module** before considering the component done. See
+[`packages/react/docs/css-modules-pilot.md`](../../packages/react/docs/css-modules-pilot.md)
+for the pattern, migration table, and gaps (e.g. overlay motion not ported).
+
 > **Available tooling:** the **`shadcn` skill** (`.agents/skills/shadcn/`) is the deep
 > reference for component APIs, registries, and presets, and the repo exposes a **shadcn
 > MCP server** (`.mcp.json` / `.vscode/mcp.json`, scoped to this package) for
@@ -34,47 +40,76 @@ Never hand-write a primitive or switch `style` to a Radix value.
    `components.json`. (A `--dry-run` preview _displays_ a flat path — ignore that; the
    real write nests correctly.)
 
-3. **Tie the component to the contract — for every axis it has.** Import the `*Name` unions
-   from `@surfnet/curve-contracts` and wire them in. There are two wiring styles depending on how
-   the vendored component models the axis:
+3. **Add `card.module.css` and wire styles.** Prefer semantic tokens, not Tailwind
+   utilities or shadcn/css `--color-*` scales.
+
+   - Put layout, states, and variant rules in the module; use `data-variant`, `data-size`,
+     `data-orientation`, etc. on the element when selectors need them.
+   - Import the module in `card.tsx` and merge with `cn(styles.root, className)` from
+     `@/lib/utils` (lets consumers pass extra classes, including app-level Tailwind).
+   - TypeScript: `packages/react/src/vite-env.d.ts` already declares `*.module.css`. With
+     `noUncheckedIndexedAccess`, assert the import when you need dotted access:
+
+     ```ts
+     type CardModuleClasses = { root: string; variantOutline: string };
+     const styles = cardStyles as CardModuleClasses;
+     ```
+
+   - **Do not** add new `class-variance-authority` / Tailwind `cva` maps in React — use
+     module classes + optional exported `cardVariants()` helpers (see `button.tsx`).
 
-   **a. `cva` map → `satisfies Record<…>`** (e.g. `button`, `field`):
+4. **Tie the component to the contract — for every axis it has.** Import the `*Name` unions
+   from `@surfnet/curve-contracts` and wire them in:
+
+   **a. Variant / size class map → `satisfies Record<…>`** (e.g. `button`, `badge`,
+   `toggle`):
 
    ```ts
    import type { CardVariantName, CardSizeName } from '@surfnet/curve-contracts';
 
-   const cardVariants = cva('...', {
-     variants: {
-       variant: {
-         default: '...',
-         outline: '...',
-       } satisfies Record<CardVariantName, string>,
-       size: {
-         default: '...',
-         sm: '...',
-         lg: '...',
-       } satisfies Record<CardSizeName, string>,
-     },
-   });
+   const variantClass: Record<CardVariantName, string> = {
+     default: styles.variantDefault,
+     outline: styles.variantOutline,
+   } satisfies Record<CardVariantName, string>;
+
+   export function cardVariants({
+     variant = 'default',
+     size = 'default',
+     className,
+   }: {
+     variant?: CardVariantName;
+     size?: CardSizeName;
+     className?: string;
+   } = {}) {
+     return cn(styles.card, variantClass[variant], sizeClass[size], className);
+   }
    ```
 
-   **b. inline-union prop (no `cva`) → type the prop** (e.g. `avatar` size,
-   `select` trigger size, `dropdown-menu` item variant). Replace the hand-written union with
-   the contract type:
+   Export `cardVariants` when another component composes your styles (Calendar →
+   `buttonVariants`, Toggle group → `toggleVariants`).
+
+   **b. Inline-union prop → type the prop** (e.g. `select` trigger size, `dropdown-menu`
+   item variant):
 
    ```ts
    import type { AvatarSizeName } from '@surfnet/curve-contracts';
 
    function Avatar({ size = 'default', ...props }: AvatarPrimitive.Root.Props & {
-     size?: AvatarSizeName;   // was: 'default' | 'sm' | 'lg'
-   }) { /* … */ }
+     size?: AvatarSizeName;
+   }) {
+     return (
+       <AvatarPrimitive.Root data-size={size} className={cn(styles.root, className)} />
+     );
+   }
    ```
 
-   A **description-only** contract has no axis, so there's nothing to wire here — skip to the
-   barrel. Confirm `pnpm lint` passes — a name mismatch between the component and the
-   contract type is a compile error.
+   A **description-only** contract has no axis to enforce — skip wiring, but still add a
+   module and pull `docs.description` from the contract in Storybook.
 
-4. **Add a barrel** `src/components/ui/card/index.ts`:
+   Confirm `pnpm lint` passes — a name mismatch between the component and the contract
+   type is a compile error.
+
+5. **Add a barrel** `src/components/ui/card/index.ts`:
 
    ```ts
    export * from './card';
@@ -82,34 +117,34 @@ Never hand-write a primitive or switch `style` to a Radix value.
 
    This keeps `@/components/ui/card` imports resolving for other shadcn components.
 
-5. **Re-export from the package entry** `src/index.ts`:
+6. **Re-export from the package entry** `src/index.ts`:
 
    ```ts
    export * from '@/components/ui/card';
    ```
 
-6. **Add a story** `src/components/ui/card/card.stories.tsx`. Mirror
+7. **Add a story** `src/components/ui/card/card.stories.tsx`. Mirror
    `src/components/ui/button/button.stories.tsx`: a `Playground` with `argTypes`/`args`,
    plus stories covering every variant/size/state the component offers. Source the docs
    description **and** any axis lists from the contract object (`cardContract.description`,
    `cardContract.variants`, `cardContract.variantDocs`, etc.) instead of duplicating
-   literals — a description-only component still pulls its `docs.description.component` from
-   the contract. Use `@storybook/react-vite` types (`Meta`, `StoryObj`).
+   literals.
+
+   **Story layout:** Tailwind utilities in `*.stories.tsx` are fine for demo chrome
+   (`flex gap-3`, `w-80`) — they are not shipped as the component API. Keep component
+   `className` overrides in stories minimal so visuals reflect the module.
 
    **Every control you declare must be live.** A control in `argTypes`/`args` only does
    something if a story actually consumes those args — an args-driven Playground (`export
    const Default: Story = {}`, or `render: (args) => <Card {...args} />`). If _every_ story
-   hardcodes its props in `render`, the control is dead: it shows in the panel but moving it
-   changes nothing. So keep one args-driven Playground per declared control, reserve
-   hardcoded `render` for static showcase stories (Variants, Sizes, …), and don't declare a
-   control no story consumes. (Storybook here only surfaces controls you declare explicitly —
-   it does not infer them from props — so an unused `argTypes` entry is always dead weight.)
+   hardcodes its props in `render`, the control is dead. See existing button stories.
 
 ## Target layout
 
 ```
 src/components/ui/card/
-├── card.tsx           # vendored component (yours to edit)
+├── card.tsx           # vendored component (Base UI + module classes)
+├── card.module.css    # component styles (Curve tokens)
 ├── card.stories.tsx   # Storybook story
 └── index.ts           # export * from './card'
 ```
@@ -119,33 +154,42 @@ src/components/ui/card/
 ```bash
 pnpm --filter @surfnet/curve-contracts lint       # contract types still compile
 pnpm --filter @surfnet/curve-react lint           # tsc --noEmit (satisfies check runs here)
-pnpm --filter @surfnet/curve-react build          # vite lib build + d.ts
+pnpm --filter @surfnet/curve-react build          # vite lib build + d.ts; CSS → dist/styles.css
 pnpm --filter @surfnet/curve-react build-storybook
 pnpm format
+pnpm test:visual   # after both Storybooks are built
 ```
 
 ## Definition of done
 
 - Component vendored via the shadcn CLI — never hand-written.
-- A `<name>Contract` entry exists in `@surfnet/curve-contracts` (description-only if the component
-  has no axis). For every axis, the component is tied to the contract — `cva` maps carry
-  `satisfies Record<...>`, inline-union props are typed as the contract's `*Name`; `pnpm
-  lint` fails if either side adds or removes a name.
+- Co-located `*.module.css`; no Tailwind utility strings left in the component `.tsx`.
+- A `<name>Contract` entry exists in `@surfnet/curve-contracts` (description-only if the
+  component has no axis). For every axis, the component is tied to the contract via
+  `satisfies Record<...>` and/or `*Name` prop types; `pnpm lint` fails on name drift.
 - Barrel `index.ts` in place; component exported from `src/index.ts`.
 - Story covers full variant/size/state surface, sourcing its description and axis lists from
   the contract object.
 - `pnpm build`, `pnpm lint`, `pnpm format`, and `build-storybook` all pass.
+- Visual tests pass (`pnpm test:visual`). Refresh baselines with `pnpm test:visual:update`
+  when appearance changed. Tag stories `skip-visual` if they cannot be snapshotted stably.
 
 ## Notes
 
-- Icons: import from `@phosphor-icons/react` (components are suffixed `Icon`, e.g.
-  `PlusIcon`). The package is an **optional peer dependency** (kept as a devDependency so
-  stories build); never move it back to `dependencies`. Render icons directly (`<PlusIcon
-  className="size-5" />`) or inside a button — the button auto-sizes the SVG per size, and
-  `data-icon="inline-start"` / `data-icon="inline-end"` tightens the padding next to text.
-  See `button.stories.tsx` (`IconSizes`, `WithIcon`) for the established pattern.
-- If the component pulls in sibling shadcn components, they're vendored flat by default;
-  apply the same per-directory + barrel treatment to each if you want them nested.
-- The `@surfnet/curve-contracts` import is a `devDependency` only — it must not appear in the
-  published `dist`. The `satisfies` annotation is erased by TypeScript at compile time, so
-  no import survives into the built output.
+- **Published CSS:** consumers import `@surfnet/curve-react/styles.css` for tokens, base
+  styles, **semantic color utilities** (`text-*` / `bg-*` / `border-*` on theme names),
+  and compiled CSS Modules. Full Tailwind (layout, spacing, opacity modifiers) is **not**
+  shipped — apps add their own Tailwind or plain CSS. Storybook uses `.storybook/story-chrome.css`.
+- **Icons:** import from `@phosphor-icons/react` (suffix `Icon`, e.g. `PlusIcon`). Optional
+  peer for consumers; devDependency for Storybook. Size/color icons in the module or via
+  parent `svg` rules — see `button.stories.tsx` (`IconSizes`, `WithIcon`).
+- **Native alternatives:** for simple form controls, consider a `Native*` sibling +
+  description-only contract (see `css-modules-pilot.md` table). Do not replace Base UI
+  overlays without an explicit product decision.
+- If the component pulls in sibling shadcn components, apply the same per-directory +
+  barrel + module treatment to each.
+- The `@surfnet/curve-contracts` import is a `devDependency` only — it must not appear in
+  published `dist`. Types and `satisfies` erase at compile time.
+- **No Tailwind in `@surfnet/curve-react`** — not in the lib build or Storybook. New story
+  layout classes go in `.storybook/story-chrome.css` if needed. See
+  [`css-modules-pilot.md`](../../packages/react/docs/css-modules-pilot.md).
diff --git a/.changeset/alert-badge-semantic-variants.md b/.changeset/alert-badge-semantic-variants.md
new file mode 100644
index 00000000..d5333c68
--- /dev/null
+++ b/.changeset/alert-badge-semantic-variants.md
@@ -0,0 +1,5 @@
+---
+'@surfnet/curve-react': patch
+---
+
+Map Alert and Badge CSS Module variants to the contract names (`info`, `success`, `warning`, `danger`) instead of the leftover `destructive` keys.
diff --git a/.changeset/css-modules-button-pilot.md b/.changeset/css-modules-button-pilot.md
new file mode 100644
index 00000000..2bedecf6
--- /dev/null
+++ b/.changeset/css-modules-button-pilot.md
@@ -0,0 +1,5 @@
+---
+'@surfnet/curve-react': minor
+---
+
+Expand CSS Modules migration to overlays and menus: Dialog, Sheet, Select, Sidebar, Calendar, Accordion, Alert dialog, Carousel, Data table, Dropdown/Context menu, Command, Input group, Combobox, Navigation menu, plus earlier components. Base UI primitives unchanged; motion/enter animations largely not ported.
diff --git a/.changeset/react-drop-tailwind-bundle.md b/.changeset/react-drop-tailwind-bundle.md
new file mode 100644
index 00000000..d59212fa
--- /dev/null
+++ b/.changeset/react-drop-tailwind-bundle.md
@@ -0,0 +1,5 @@
+---
+'@surfnet/curve-react': minor
+---
+
+Stop shipping Tailwind in `styles.css`. Published CSS now includes tokens, minimal base styles, semantic color utility classes (`text-primary`, `bg-muted`, etc.), and CSS Modules. Storybook uses plain `.storybook/story-chrome.css` for demo layout. Removed `class-variance-authority` and Tailwind devDependencies from the React package.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 54b34126..ca89caed 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -18,6 +18,7 @@
 
 - [ ] `pnpm build`, `pnpm lint`, and `pnpm format` pass
 - [ ] Storybook story added/updated to cover the change (variants, sizes, states)
+- [ ] Visual snapshots updated (`pnpm test:visual:update` after `pnpm build-storybook`) if appearance changed
 - [ ] Changeset added (`pnpm changeset`) — required for any change to `@surfnet/curve-react` or `@surfnet/curve-angular`; N/A for docs/CI-only changes
 - [ ] React and Angular kept in parity, if applicable (contract updated in `@surfnet/curve-contracts`)
 
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e8916b24..3c1fd247 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -42,3 +42,47 @@ jobs:
       - run: pnpm lint
 
       - run: pnpm build
+
+  visual:
+    runs-on: ubuntu-latest
+    timeout-minutes: 45
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: pnpm
+
+      - uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ github.sha }}
+          restore-keys: |
+            turbo-${{ runner.os }}-
+
+      - uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+
+      - run: pnpm install --frozen-lockfile
+
+      - run: pnpm build-storybook
+
+      - name: Install Playwright Chromium
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Visual regression (React + Angular story snapshots)
+        run: pnpm test:visual
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: |
+            playwright-report/
+            test-results/
+          retention-days: 14
diff --git a/.gitignore b/.gitignore
index 7b3d4fd9..a54d3cb0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,12 @@ storybook-static
 # angular
 .angular
 
+# playwright
+test-results
+playwright-report
+blob-report
+playwright/.cache
+
 # logs
 *.log
 npm-debug.log*
diff --git a/.prettierignore b/.prettierignore
index 33f8f222..c74a7887 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -4,6 +4,9 @@ storybook-static
 .turbo
 .next
 pnpm-lock.yaml
+test-results
+playwright-report
+blob-report
 
 # vendored upstream skills — keep them byte-for-byte as fetched
 .agents/skills
diff --git a/AGENTS.md b/AGENTS.md
index 22063288..da35ff06 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -53,10 +53,13 @@ pnpm format                                    # prettier --write across the rep
 pnpm storybook                                       # both Storybooks (React :6006, Angular :6007)
 pnpm storybook:react                                 # React Storybook (port 6006)
 pnpm storybook:angular                               # Angular Storybook (port 6007)
+pnpm build-storybook && pnpm test:visual             # story screenshots vs baselines (React + Angular)
 ```
 
 Always run `pnpm lint` and `pnpm format` before considering a change done, and rebuild
-the package you touched.
+the package you touched. Refresh snapshot baselines with `pnpm test:visual:update`
+(after `pnpm build-storybook`). Compare React to Angular when you want with
+`pnpm test:visual:parity`.
 
 ## MCP servers
 
@@ -120,6 +123,16 @@ OpenCode): `npx shadcn@latest mcp init --client <name>` for shadcn, and add the
   `storybook` script's `-p 6006` in `packages/react/package.json`), **Angular → 6007**
   (the `storybook` target's `"port": 6007` in `packages/angular/angular.json`).
 
+### Visual tests (Playwright)
+
+- Screenshots come from the **built** Storybooks (`pnpm build-storybook`), not the
+  Vite/webpack dev servers. Serve them on 6008/6009 so they don't collide with
+  `pnpm storybook` on 6006/6007.
+- React and Angular each have a `*.spec.ts` that `toHaveScreenshot`s every story (light + dark).
+  Baselines live in separate folders: `tests/visual/__screenshots__/react/` and
+  `.../angular/` (same story ids, different PNGs — never share one flat directory).
+- Refresh baselines with `pnpm test:visual:update`. Optional parity: `pnpm test:visual:parity`.
+
 ### Shared packages (`@surfnet/curve-tokens` + `@surfnet/curve-contracts`)
 
 - **Token source of truth is DTCG JSON only.** All color and other semantic token values
@@ -185,7 +198,7 @@ Gotchas:
 1. Component vendored via the framework's CLI (don't hand-write primitives).
 2. Exported from the package entry (`src/index.ts` / `src/public-api.ts`).
 3. A Storybook story covering the component's full surface (variants, sizes, states).
-4. `pnpm build`, `pnpm lint`, and `pnpm format` all pass.
+4. `pnpm build`, `pnpm lint`, `pnpm format`, and `pnpm test:visual` all pass.
 5. A changeset added (`pnpm changeset`) if a publishable package changed.
 
 ## Skills
diff --git a/README.md b/README.md
index ce1241fc..184640a1 100644
--- a/README.md
+++ b/README.md
@@ -67,6 +67,10 @@ pnpm format           # format everything with Prettier
 pnpm storybook              # both (React :6006, Angular :6007)
 pnpm storybook:react        # http://localhost:6006
 pnpm storybook:angular      # http://localhost:6007
+
+# Visual regression (Playwright screenshots of the built Storybooks)
+pnpm build-storybook
+pnpm test:visual
 ```
 
 Each component ships a Storybook story covering its full surface (variants, sizes,
@@ -76,6 +80,34 @@ to GitHub Pages on every push to `main`:
 - **React** — https://surfnet.github.io/DesignSystem/react/
 - **Angular** — https://surfnet.github.io/DesignSystem/angular/
 
+## Visual regression
+
+Playwright screenshots each **Components** and **Foundations** story in the built
+Storybooks (React and Angular separately). CI compares those PNGs to baselines in
+`tests/visual/__screenshots__/react/` and `tests/visual/__screenshots__/angular/`.
+
+```bash
+pnpm test:visual:install      # once per machine / after @playwright/test upgrades
+pnpm build-storybook
+pnpm test:visual              # compare snapshots to committed baselines
+pnpm test:visual:parity       # optional: React vs Angular pixel diff (run when you want)
+pnpm test:visual:ui           # Playwright UI mode
+```
+
+Baselines live in `tests/visual/__screenshots__/` and are committed. Refresh after
+`pnpm build-storybook`:
+
+```bash
+pnpm test:visual:update
+```
+
+CI runs on `ubuntu-latest` (Linux Chromium). If snapshots from your machine do not
+match CI, update baselines on Linux or from the failing CI run’s diff, then commit.
+
+React↔Angular alignment is a separate step (`pnpm test:visual:parity`), not part of
+the default `test:visual`. Tag a story `skip-visual` to exclude it (Spinner does).
+Use `visual-fullpage` when the UI portals outside `#storybook-root`.
+
 ## Documentation
 
 The written Curve docs — overview, designer and developer guides, accessibility,
diff --git a/apps/react-app/src/app/globals.css b/apps/react-app/src/app/globals.css
index ff37c0f7..f26f74e2 100644
--- a/apps/react-app/src/app/globals.css
+++ b/apps/react-app/src/app/globals.css
@@ -1,12 +1,12 @@
 /*
  * App-level Tailwind v4 entry.
  *
- * The compiled @surfnet/curve-react/styles.css (imported first in layout.tsx) already
- * ships Tailwind's preflight, the design-token CSS variables (:root / .dark /
- * .theme-*), and the component utilities. So here we pull in Tailwind WITHOUT
- * preflight (granular imports, no `tailwindcss/preflight.css`) to avoid a second
- * base reset, and re-declare the token -> color mapping so app-authored utilities
- * like `bg-primary` / `text-foreground` resolve to the same theme variables.
+ * The compiled @surfnet/curve-react/styles.css (imported first in layout.tsx) ships
+ * design tokens, minimal base styles, semantic color utilities (`text-primary`,
+ * `bg-muted`, …), and hashed CSS Module rules for components — not full Tailwind.
+ * Here we pull in Tailwind WITHOUT preflight (granular imports) for app layout
+ * utilities (`flex`, `gap-*`, …) and re-declare the token → `--color-*` mapping so
+ * those utilities resolve to the same theme variables.
  */
 @layer theme, base, components, utilities;
 
diff --git a/package.json b/package.json
index fd61c374..22b17188 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,11 @@
     "storybook:react": "pnpm --filter @surfnet/curve-react storybook",
     "storybook:angular": "pnpm --filter @surfnet/curve-angular storybook",
     "build-storybook": "turbo run build-storybook",
+    "test:visual": "playwright test",
+    "test:visual:install": "playwright install chromium",
+    "test:visual:parity": "playwright test tests/visual/parity.spec.ts",
+    "test:visual:update": "playwright test tests/visual/react.spec.ts --update-snapshots=all && playwright test tests/visual/angular.spec.ts --update-snapshots=all",
+    "test:visual:ui": "playwright test --ui",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,js,mjs,cjs,json,md,css,html}\"",
     "format:check": "prettier --check \"**/*.{ts,tsx,js,mjs,cjs,json,md,css,html}\"",
@@ -26,11 +31,15 @@
   "devDependencies": {
     "@changesets/cli": "3.0.2",
     "@figma/rest-api-spec": "0.40.0",
+    "@playwright/test": "1.62.1",
     "@types/node": "^22.19.21",
+    "@types/pngjs": "6.0.5",
     "dotenv": "17.4.2",
     "husky": "9.1.7",
     "jiti": "2.7.0",
     "lint-staged": "17.0.7",
+    "pixelmatch": "7.2.0",
+    "pngjs": "7.0.0",
     "prettier": "3.8.4",
     "turbo": "2.9.18"
   },
diff --git a/packages/angular/.storybook/storybook-docs.css b/packages/angular/.storybook/storybook-docs.css
index f0c77ab2..ed987548 100644
--- a/packages/angular/.storybook/storybook-docs.css
+++ b/packages/angular/.storybook/storybook-docs.css
@@ -1,28 +1,28 @@
 /* Restore list markers inside docs prose; Tailwind preflight strips them globally. */
 
-.sbdocs-content ul,
-.sbdocs-content ol {
+.sbdocs-content > ul,
+.sbdocs-content > ol {
   list-style: revert;
   font-size: inherit;
   padding-inline-start: 1.5rem;
 }
-.sbdocs-content ul {
+.sbdocs-content > ul {
   list-style-type: disc;
 }
-.sbdocs-content ol {
+.sbdocs-content > ol {
   list-style-type: decimal;
 }
-.sbdocs-content ul ul {
+.sbdocs-content > ul ul {
   list-style-type: circle;
 }
-.sbdocs-content ul ul ul {
+.sbdocs-content > ul ul ul {
   list-style-type: square;
 }
-.sbdocs-content ol li,
-.sbdocs-content ul li {
+.sbdocs-content > ol li,
+.sbdocs-content > ul li {
   font-size: inherit;
 }
-.sbdocs-content.sbdocs-content dl {
+.sbdocs-content.sbdocs-content > dl {
   margin-block: 1em;
 }
 .sbdocs-content.sbdocs-content dt {
@@ -46,18 +46,18 @@
   vertical-align: top;
   text-align: left;
 }
-.sbdocs-content.sbdocs-content h2 {
+.sbdocs-content.sbdocs-content > h2 {
   margin-block-start: 2rem;
 }
-.sbdocs-content.sbdocs-content h3 {
+.sbdocs-content.sbdocs-content > h3 {
   margin-block-start: 1.5rem;
 }
-.sbdocs-content.sbdocs-content h4 {
+.sbdocs-content.sbdocs-content > h4 {
   margin-block-start: 1rem;
 }
-.sbdocs-content.sbdocs-content h5 {
+.sbdocs-content.sbdocs-content > h5 {
   margin-block-start: 0.5rem;
 }
-.sbdocs-a.sbdocs-a {
+.sbdocs-content.sbdocs-content > p > .sbdocs-a.sbdocs-a {
   color: rgb(0 85 182);
 }
diff --git a/packages/angular/src/lib/ui/spinner/src/lib/hlm-spinner.stories.ts b/packages/angular/src/lib/ui/spinner/src/lib/hlm-spinner.stories.ts
index 496acbbd..de212542 100644
--- a/packages/angular/src/lib/ui/spinner/src/lib/hlm-spinner.stories.ts
+++ b/packages/angular/src/lib/ui/spinner/src/lib/hlm-spinner.stories.ts
@@ -9,6 +9,7 @@ import { HlmSpinner, HlmSpinnerImports } from '..';
 const meta: Meta<HlmSpinner> = {
   title: 'Components/Spinner',
   component: HlmSpinner,
+  tags: ['skip-visual'],
   decorators: [
     moduleMetadata({
       imports: [HlmSpinnerImports, HlmButton, HlmCardImports, HlmEmptyImports],
diff --git a/packages/contracts/src/index.ts b/packages/contracts/src/index.ts
index 50364c94..b12d8b20 100644
--- a/packages/contracts/src/index.ts
+++ b/packages/contracts/src/index.ts
@@ -33,7 +33,17 @@ export {
 } from './item.js';
 export { kbdContract } from './kbd.js';
 export { labelContract } from './label.js';
+export { nativeCheckboxContract } from './native-checkbox.js';
+export { nativeDetailsContract } from './native-details.js';
+export { nativeDialogContract } from './native-dialog.js';
+export { nativeFieldsetContract } from './native-fieldset.js';
+export { nativeInputContract, type NativeInputSizeName } from './native-input.js';
+export { nativePopoverContract } from './native-popover.js';
+export { nativeProgressContract } from './native-progress.js';
+export { nativeRadioContract } from './native-radio.js';
+export { nativeRangeContract } from './native-range.js';
 export { nativeSelectContract, type NativeSelectSizeName } from './native-select.js';
+export { nativeTextareaContract } from './native-textarea.js';
 export { navigationMenuContract } from './navigation-menu.js';
 export { paginationContract } from './pagination.js';
 export { popoverContract } from './popover.js';
diff --git a/packages/contracts/src/native-checkbox.ts b/packages/contracts/src/native-checkbox.ts
new file mode 100644
index 00000000..13316172
--- /dev/null
+++ b/packages/contracts/src/native-checkbox.ts
@@ -0,0 +1,8 @@
+import { defineContract } from './define-contract.js';
+
+export const nativeCheckboxContract = defineContract({
+  docs: {
+    description:
+      'A styled native <input type="checkbox">. Prefer the Base UI Checkbox for indicator icons and form-field integration.',
+  },
+});
diff --git a/packages/contracts/src/native-details.ts b/packages/contracts/src/native-details.ts
new file mode 100644
index 00000000..049c1bda
--- /dev/null
+++ b/packages/contracts/src/native-details.ts
@@ -0,0 +1,8 @@
+import { defineContract } from './define-contract.js';
+
+export const nativeDetailsContract = defineContract({
+  docs: {
+    description:
+      'Expandable sections built with native <details> and <summary>. Prefer the Base UI Accordion when you need single-expand groups or full keyboard roving focus.',
+  },
+});
diff --git a/packages/contracts/src/native-dialog.ts b/packages/contracts/src/native-dialog.ts
new file mode 100644
index 00000000..1f163582
--- /dev/null
+++ b/packages/contracts/src/native-dialog.ts
@@ -0,0 +1,8 @@
+import { defineContract } from './define-contract.js';
+
+export const nativeDialogContract = defineContract({
+  docs: {
+    description:
+      'A styled native <dialog> element with showModal/close support. Prefer the Base UI Dialog when you need focus trapping, nested overlays, or composable header/footer primitives.',
+  },
+});
diff --git a/packages/contracts/src/native-fieldset.ts b/packages/contracts/src/native-fieldset.ts
new file mode 100644
index 00000000..611de161
--- /dev/null
+++ b/packages/contracts/src/native-fieldset.ts
@@ -0,0 +1,8 @@
+import { defineContract } from './define-contract.js';
+
+export const nativeFieldsetContract = defineContract({
+  docs: {
+    description:
+      'Groups related form controls with a native <fieldset> and <legend>. Prefer Field when you need label/description/error layout without semantic grouping.',
+  },
+});
diff --git a/packages/contracts/src/native-input.ts b/packages/contracts/src/native-input.ts
new file mode 100644
index 00000000..5b2e45fb
--- /dev/null
+++ b/packages/contracts/src/native-input.ts
@@ -0,0 +1,20 @@
+import { defineContract } from './define-contract.js';
+
+export const nativeInputContract = defineContract({
+  props: {
+    sizes: ['default', 'sm'],
+  },
+  defaults: {
+    sizes: 'default',
+  },
+  docs: {
+    description:
+      'A styled native <input> for text-like types (text, email, password, number, search, url, tel, date, time, etc.). Prefer the Base UI Input when you need consistent behavior with other form primitives.',
+    sizes: {
+      default: 'Standard height for most UI contexts.',
+      sm: 'Small — compact forms and toolbars.',
+    },
+  },
+});
+
+export type NativeInputSizeName = (typeof nativeInputContract.props.sizes)[number];
diff --git a/packages/contracts/src/native-popover.ts b/packages/contracts/src/native-popover.ts
new file mode 100644
index 00000000..fb67ccc8
--- /dev/null
+++ b/packages/contracts/src/native-popover.ts
@@ -0,0 +1,8 @@
+import { defineContract } from './define-contract.js';
+
+export const nativePopoverContract = defineContract({
+  docs: {
+    description:
+      'Floating content using the native Popover API (`popover` + `popovertarget`). Prefer Base UI Popover when you need positioning props, portals, or animation parity with other overlays.',
+  },
+});
diff --git a/packages/contracts/src/native-progress.ts b/packages/contracts/src/native-progress.ts
new file mode 100644
index 00000000..1bc53788
--- /dev/null
+++ b/packages/contracts/src/native-progress.ts
@@ -0,0 +1,8 @@
+import { defineContract } from './define-contract.js';
+
+export const nativeProgressContract = defineContract({
+  docs: {
+    description:
+      'A styled native <progress> element. Prefer this over the Base UI Progress when you only need a simple determinate bar without custom labels.',
+  },
+});
diff --git a/packages/contracts/src/native-radio.ts b/packages/contracts/src/native-radio.ts
new file mode 100644
index 00000000..db386232
--- /dev/null
+++ b/packages/contracts/src/native-radio.ts
@@ -0,0 +1,8 @@
+import { defineContract } from './define-contract.js';
+
+export const nativeRadioContract = defineContract({
+  docs: {
+    description:
+      'A styled native <input type="radio">. Use inside NativeFieldset or with a shared name; prefer Radio Group for roving focus and keyboard UX.',
+  },
+});
diff --git a/packages/contracts/src/native-range.ts b/packages/contracts/src/native-range.ts
new file mode 100644
index 00000000..a210e7db
--- /dev/null
+++ b/packages/contracts/src/native-range.ts
@@ -0,0 +1,8 @@
+import { defineContract } from './define-contract.js';
+
+export const nativeRangeContract = defineContract({
+  docs: {
+    description:
+      'A styled native <input type="range">. Prefer Slider for custom thumbs, multiple values, or vertical orientation.',
+  },
+});
diff --git a/packages/contracts/src/native-textarea.ts b/packages/contracts/src/native-textarea.ts
new file mode 100644
index 00000000..e2457133
--- /dev/null
+++ b/packages/contracts/src/native-textarea.ts
@@ -0,0 +1,8 @@
+import { defineContract } from './define-contract.js';
+
+export const nativeTextareaContract = defineContract({
+  docs: {
+    description:
+      'A styled native <textarea> for multi-line text. Prefer the Base UI Textarea when composing with Input Group or Field primitives.',
+  },
+});
diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts
index 73be6aa7..6d3b6e97 100644
--- a/packages/react/.storybook/main.ts
+++ b/packages/react/.storybook/main.ts
@@ -33,6 +33,17 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+  async viteFinal(config) {
+    // One CSS bundle for the preview (like Angular's global `styles` entry) so Playwright
+    // does not screenshot stories before async CSS chunks from code-split stories arrive.
+    return {
+      ...config,
+      build: {
+        ...config.build,
+        cssCodeSplit: false,
+      },
+    };
+  },
 };
 
 export default config;
diff --git a/packages/react/.storybook/preview.ts b/packages/react/.storybook/preview.ts
index 84ef7d12..4da6b091 100644
--- a/packages/react/.storybook/preview.ts
+++ b/packages/react/.storybook/preview.ts
@@ -5,11 +5,12 @@ import {
   themeGlobalTypes,
   themeInitialGlobals,
   themeSwitcher,
+  visualReadyMarker,
 } from '@surfnet/curve-storybook-config';
 
-// Pull in Tailwind + the design tokens so stories render with the real styles.
 import '../src/index.css';
 import './storybook-docs.css';
+import './story-chrome.css';
 
 // Keep this a literal object so Storybook's static analyzer can read `tags`
 // (project-level autodocs) — a factory call can't be parsed statically.
@@ -17,7 +18,7 @@ export default {
   tags: ['autodocs'],
   initialGlobals: { framework: 'react', ...themeInitialGlobals },
   globalTypes: { ...frameworkGlobalTypes, ...themeGlobalTypes },
-  decorators: [frameworkSwitcher('react'), themeSwitcher()],
+  decorators: [frameworkSwitcher('react'), themeSwitcher(), visualReadyMarker()],
   parameters: {
     ...sharedParameters,
     // Force the React jsxDecorator to always serialize the rendered JSX for the
diff --git a/packages/react/.storybook/story-chrome.css b/packages/react/.storybook/story-chrome.css
new file mode 100644
index 00000000..a1d4507e
--- /dev/null
+++ b/packages/react/.storybook/story-chrome.css
@@ -0,0 +1,545 @@
+/*
+ * Storybook-only layout and demo utilities (not Tailwind).
+ * Keeps story markup readable without shipping a utility framework in the library.
+ */
+
+/* -- display / flex / grid -- */
+.flex {
+  display: flex;
+}
+.inline-flex {
+  display: inline-flex;
+}
+.grid {
+  display: grid;
+}
+.flex-row {
+  flex-direction: row;
+}
+.flex-col {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.items-center {
+  align-items: center;
+}
+.items-start {
+  align-items: flex-start;
+}
+.items-baseline {
+  align-items: baseline;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.justify-end {
+  justify-content: flex-end;
+}
+.justify-start {
+  justify-content: flex-start;
+}
+.shrink-0 {
+  flex-shrink: 0;
+}
+.min-w-0 {
+  min-width: 0;
+}
+
+/* -- gap -- */
+.gap-1 {
+  gap: calc(var(--spacing, 0.25rem) * 1);
+}
+.gap-1\.5 {
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+}
+.gap-2 {
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
+.gap-3 {
+  gap: calc(var(--spacing, 0.25rem) * 3);
+}
+.gap-4 {
+  gap: calc(var(--spacing, 0.25rem) * 4);
+}
+.gap-6 {
+  gap: calc(var(--spacing, 0.25rem) * 6);
+}
+.gap-8 {
+  gap: calc(var(--spacing, 0.25rem) * 8);
+}
+.gap-10 {
+  gap: calc(var(--spacing, 0.25rem) * 10);
+}
+
+/* -- width / max-width -- */
+.w-full {
+  width: 100%;
+}
+.w-fit {
+  width: fit-content;
+}
+.w-auto {
+  width: auto;
+}
+.w-max {
+  width: max-content;
+}
+.w-40 {
+  width: 10rem;
+}
+.w-44 {
+  width: 11rem;
+}
+.w-48 {
+  width: 12rem;
+}
+.w-56 {
+  width: 14rem;
+}
+.w-64 {
+  width: 16rem;
+}
+.w-72 {
+  width: 18rem;
+}
+.w-80 {
+  width: 20rem;
+}
+.w-96 {
+  width: 24rem;
+}
+.w-\[28rem\] {
+  width: 28rem;
+}
+.w-\[200px\] {
+  width: 200px;
+}
+.w-\[220px\] {
+  width: 220px;
+}
+.w-\[300px\] {
+  width: 300px;
+}
+.w-\[320px\] {
+  width: 320px;
+}
+.max-w-xs {
+  max-width: 20rem;
+}
+.max-w-sm {
+  max-width: 24rem;
+}
+.max-w-md {
+  max-width: 28rem;
+}
+.max-w-3xl {
+  max-width: 48rem;
+}
+.max-w-5xl {
+  max-width: 64rem;
+}
+.max-w-prose {
+  max-width: 65ch;
+}
+
+@media (min-width: 768px) {
+  .md\:w-\[400px\] {
+    width: 400px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:w-\[500px\] {
+    width: 500px;
+  }
+}
+
+/* -- height -- */
+.h-5 {
+  height: calc(var(--spacing, 0.25rem) * 5);
+}
+.h-8 {
+  height: calc(var(--spacing, 0.25rem) * 8);
+}
+.h-12 {
+  height: calc(var(--spacing, 0.25rem) * 12);
+}
+.h-32 {
+  height: calc(var(--spacing, 0.25rem) * 32);
+}
+.h-40 {
+  height: calc(var(--spacing, 0.25rem) * 40);
+}
+.h-64 {
+  height: 16rem;
+}
+.h-72 {
+  height: 18rem;
+}
+.h-80 {
+  height: 20rem;
+}
+.h-full {
+  height: 100%;
+}
+.min-w-5 {
+  min-width: calc(var(--spacing, 0.25rem) * 5);
+}
+
+/* -- spacing (padding / margin) -- */
+.p-0 {
+  padding: 0;
+}
+.p-1 {
+  padding: calc(var(--spacing, 0.25rem) * 1);
+}
+.p-4 {
+  padding: calc(var(--spacing, 0.25rem) * 4);
+}
+.p-6 {
+  padding: calc(var(--spacing, 0.25rem) * 6);
+}
+.p-12 {
+  padding: calc(var(--spacing, 0.25rem) * 12);
+}
+.px-0 {
+  padding-inline: 0;
+}
+.px-1 {
+  padding-inline: calc(var(--spacing, 0.25rem) * 1);
+}
+.px-2 {
+  padding-inline: calc(var(--spacing, 0.25rem) * 2);
+}
+.px-3 {
+  padding-inline: calc(var(--spacing, 0.25rem) * 3);
+}
+.px-4 {
+  padding-inline: calc(var(--spacing, 0.25rem) * 4);
+}
+.pl-1 {
+  padding-left: calc(var(--spacing, 0.25rem) * 1);
+}
+.pr-2 {
+  padding-right: calc(var(--spacing, 0.25rem) * 2);
+}
+.py-1\.5 {
+  padding-block: calc(var(--spacing, 0.25rem) * 1.5);
+}
+.py-2 {
+  padding-block: calc(var(--spacing, 0.25rem) * 2);
+}
+.py-3 {
+  padding-block: calc(var(--spacing, 0.25rem) * 3);
+}
+.py-10 {
+  padding-block: calc(var(--spacing, 0.25rem) * 10);
+}
+.pt-1 {
+  padding-top: calc(var(--spacing, 0.25rem) * 1);
+}
+.pt-2 {
+  padding-top: calc(var(--spacing, 0.25rem) * 2);
+}
+.my-2 {
+  margin-block: calc(var(--spacing, 0.25rem) * 2);
+}
+.my-3 {
+  margin-block: calc(var(--spacing, 0.25rem) * 3);
+}
+.mt-1 {
+  margin-top: calc(var(--spacing, 0.25rem) * 1);
+}
+.mb-2 {
+  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
+}
+.mb-4 {
+  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
+}
+.mb-5 {
+  margin-bottom: calc(var(--spacing, 0.25rem) * 5);
+}
+.mb-12 {
+  margin-bottom: calc(var(--spacing, 0.25rem) * 12);
+}
+.ml-auto {
+  margin-left: auto;
+}
+
+/* -- typography -- */
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+.font-normal {
+  font-weight: 400;
+}
+.font-medium {
+  font-weight: 500;
+}
+.font-semibold {
+  font-weight: 600;
+}
+.font-mono {
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.capitalize {
+  text-transform: capitalize;
+}
+.lowercase {
+  text-transform: lowercase;
+}
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+.leading-none {
+  line-height: 1;
+}
+.leading-snug {
+  line-height: 1.375;
+}
+.leading-tight {
+  line-height: 1.25;
+}
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+.underline {
+  text-decoration: underline;
+}
+.underline-offset-4 {
+  text-underline-offset: 4px;
+}
+.no-underline {
+  text-decoration: none;
+}
+.line-clamp-2 {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+/* -- borders / rings / radius / shadow -- */
+.border {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--border);
+}
+.border-2 {
+  border-width: 2px;
+  border-style: solid;
+}
+.border-b {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: var(--border);
+}
+.border-r {
+  border-right-width: 1px;
+  border-right-style: solid;
+  border-color: var(--border);
+}
+.border-dashed {
+  border-style: dashed;
+}
+.border-border {
+  border-color: var(--border);
+}
+.border-input {
+  border-color: var(--input);
+}
+.border-primary {
+  border-color: var(--primary);
+}
+.last\:border-b-0:last-child {
+  border-bottom-width: 0;
+}
+.rounded-md {
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+.rounded-lg {
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+}
+.rounded-xl {
+  border-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.4));
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.shadow-xs {
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+}
+.shadow-md {
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+}
+.ring-1 {
+  box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+.ring-foreground\/10 {
+  box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+/* -- size (square icons) -- */
+.size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+.size-6 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.size-8 {
+  width: 2rem;
+  height: 2rem;
+}
+.size-10 {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.size-12 {
+  width: 3rem;
+  height: 3rem;
+}
+.size-16 {
+  width: 4rem;
+  height: 4rem;
+}
+.size-full {
+  width: 100%;
+  height: 100%;
+}
+
+/* -- grid -- */
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+.row-span-3 {
+  grid-row: span 3 / span 3;
+}
+
+@media (min-width: 640px) {
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .lg\:grid-cols-\[\.75fr_1fr\] {
+    grid-template-columns: 0.75fr 1fr;
+  }
+}
+
+/* -- misc layout -- */
+.overflow-hidden {
+  overflow: hidden;
+}
+.object-cover {
+  object-fit: cover;
+}
+.aspect-square {
+  aspect-ratio: 1;
+}
+.aspect-\[3\/4\] {
+  aspect-ratio: 3 / 4;
+}
+.select-none {
+  user-select: none;
+}
+.pointer-events-none {
+  pointer-events: none;
+}
+.opacity-50 {
+  opacity: 0.5;
+}
+
+/* -- semantic backgrounds (story-only modifiers) -- */
+.bg-muted {
+  background-color: var(--muted);
+}
+.bg-destructive\/90 {
+  background-color: color-mix(in oklch, var(--destructive) 90%, transparent);
+}
+.bg-linear-to-b {
+  background-image: linear-gradient(
+    to bottom,
+    var(--gradient-from, transparent),
+    var(--gradient-to, transparent)
+  );
+}
+.from-muted\/50 {
+  --gradient-from: color-mix(in oklch, var(--muted) 50%, transparent);
+}
+.to-muted {
+  --gradient-to: var(--muted);
+}
+
+.story-nav-featured {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  justify-content: flex-end;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background: linear-gradient(
+    to bottom,
+    color-mix(in oklch, var(--muted) 50%, transparent),
+    var(--muted)
+  );
+  padding: calc(var(--spacing, 0.25rem) * 4);
+  text-decoration: none;
+  user-select: none;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/packages/react/.storybook/storybook-docs.css b/packages/react/.storybook/storybook-docs.css
index f0c77ab2..ed987548 100644
--- a/packages/react/.storybook/storybook-docs.css
+++ b/packages/react/.storybook/storybook-docs.css
@@ -1,28 +1,28 @@
 /* Restore list markers inside docs prose; Tailwind preflight strips them globally. */
 
-.sbdocs-content ul,
-.sbdocs-content ol {
+.sbdocs-content > ul,
+.sbdocs-content > ol {
   list-style: revert;
   font-size: inherit;
   padding-inline-start: 1.5rem;
 }
-.sbdocs-content ul {
+.sbdocs-content > ul {
   list-style-type: disc;
 }
-.sbdocs-content ol {
+.sbdocs-content > ol {
   list-style-type: decimal;
 }
-.sbdocs-content ul ul {
+.sbdocs-content > ul ul {
   list-style-type: circle;
 }
-.sbdocs-content ul ul ul {
+.sbdocs-content > ul ul ul {
   list-style-type: square;
 }
-.sbdocs-content ol li,
-.sbdocs-content ul li {
+.sbdocs-content > ol li,
+.sbdocs-content > ul li {
   font-size: inherit;
 }
-.sbdocs-content.sbdocs-content dl {
+.sbdocs-content.sbdocs-content > dl {
   margin-block: 1em;
 }
 .sbdocs-content.sbdocs-content dt {
@@ -46,18 +46,18 @@
   vertical-align: top;
   text-align: left;
 }
-.sbdocs-content.sbdocs-content h2 {
+.sbdocs-content.sbdocs-content > h2 {
   margin-block-start: 2rem;
 }
-.sbdocs-content.sbdocs-content h3 {
+.sbdocs-content.sbdocs-content > h3 {
   margin-block-start: 1.5rem;
 }
-.sbdocs-content.sbdocs-content h4 {
+.sbdocs-content.sbdocs-content > h4 {
   margin-block-start: 1rem;
 }
-.sbdocs-content.sbdocs-content h5 {
+.sbdocs-content.sbdocs-content > h5 {
   margin-block-start: 0.5rem;
 }
-.sbdocs-a.sbdocs-a {
+.sbdocs-content.sbdocs-content > p > .sbdocs-a.sbdocs-a {
   color: rgb(0 85 182);
 }
diff --git a/packages/react/docs/css-modules-pilot.md b/packages/react/docs/css-modules-pilot.md
new file mode 100644
index 00000000..b74133e2
--- /dev/null
+++ b/packages/react/docs/css-modules-pilot.md
@@ -0,0 +1,136 @@
+# CSS Modules pilot (shadcn/css pattern)
+
+This pilot moves **Button** styling from Tailwind `cva` class strings to a co-located CSS Module, inspired by [shadcn/css](https://shadcn-css.com/docs/introduction). We are **not** installing the `shadcn-css` CLI or Radix-based components.
+
+## Gap matrix: shadcn/css vs Curve React
+
+| Area               | Curve (`@surfnet/curve-react`)                           | [shadcn/css](https://shadcn-css.com/docs/introduction) | Pilot choice                              |
+| ------------------ | -------------------------------------------------------- | ------------------------------------------------------ | ----------------------------------------- |
+| Primitives         | [Base UI](https://base-ui.com) (`@base-ui/react`)        | Radix UI (`@radix-ui/react-slot`, …)                   | Keep Base UI                              |
+| Vendoring          | Official `shadcn` CLI (`base-vega`, Phosphor)            | `shadcn-css` CLI                                       | Keep official shadcn for new primitives   |
+| Variant names      | `@surfnet/curve-contracts` (`default`, not `primary`)    | Often `primary`                                        | Contract names + `data-variant`           |
+| Tokens             | `@surfnet/curve-tokens` (`--primary`, `--background`, …) | Bundled `--color-*` scale                              | Curve `tokens.css` via `var(--primary)`   |
+| Styling            | Tailwind utilities in `cva`                              | CSS Modules + `data-*` attributes                      | CSS Module + `data-variant` / `data-size` |
+| `buttonVariants()` | Used by Calendar nav buttons                             | N/A                                                    | Kept via composable module classes        |
+| Angular            | Spartan + Tailwind parity                                | React only                                             | Unchanged in this pilot                   |
+
+## Decision gate (after Button pilot)
+
+**Recommendation:** Continue a **gradual, pattern-based** migration for React only—co-located `.module.css` files and semantic token variables—not a wholesale switch to the shadcn/css registry.
+
+| Option                                                   | Pros                                                                              | Cons                                                                                |
+| -------------------------------------------------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| **A. Per-component CSS Modules** (recommended next step) | Easier visual edits; aligns with shadcn/css ergonomics; keeps Base UI + contracts | Two styling systems until most components migrate; each primitive needs selector QA |
+| **B. Hybrid**                                            | Lower risk for complex overlays                                                   | Split brain: some components Tailwind, some CSS                                     |
+| **C. Stay on Tailwind**                                  | Single toolchain; official shadcn updates stay drop-in                            | Variant maps stay dense; harder for CSS-first contributors                          |
+| **D. Adopt shadcn/css CLI**                              | Upstream CSS files to copy                                                        | Radix-only, different APIs, duplicate token system, no Angular path                 |
+
+**Suggested order if A:** Badge, Separator, Skeleton → Input, Checkbox, Switch → Dialog, Popover, Select (validate overlay selectors).
+
+### Migrated to CSS Modules (React)
+
+| Component           | Module                           |
+| ------------------- | -------------------------------- |
+| Button              | `button.module.css`              |
+| Badge               | `badge.module.css`               |
+| Separator           | `separator.module.css`           |
+| Skeleton            | `skeleton.module.css`            |
+| Input               | `input.module.css`               |
+| Textarea            | `textarea.module.css`            |
+| Checkbox            | `checkbox.module.css`            |
+| Switch              | `switch.module.css`              |
+| Label               | `label.module.css`               |
+| Spinner             | `spinner.module.css`             |
+| Progress            | `progress.module.css`            |
+| Kbd                 | `kbd.module.css`                 |
+| Alert               | `alert.module.css`               |
+| Toggle              | `toggle.module.css`              |
+| Toggle group        | `toggle-group.module.css`        |
+| Radio group         | `radio-group.module.css`         |
+| Slider              | `slider.module.css`              |
+| Avatar              | `avatar.module.css`              |
+| Aspect ratio        | `aspect-ratio.module.css`        |
+| Native select       | `native-select.module.css`       |
+| Empty               | `empty.module.css`               |
+| Breadcrumb          | `breadcrumb.module.css`          |
+| Card                | `card.module.css`                |
+| Table               | `table.module.css`               |
+| Pagination          | `pagination.module.css`          |
+| Button group        | `button-group.module.css`        |
+| Tabs                | `tabs.module.css`                |
+| Scroll area         | `scroll-area.module.css`         |
+| Resizable           | `resizable.module.css`           |
+| Popover             | `popover.module.css`             |
+| Hover card          | `hover-card.module.css`          |
+| Tooltip             | `tooltip.module.css`             |
+| Input OTP           | `input-otp.module.css`           |
+| Sonner              | `sonner.module.css`              |
+| Date picker         | `date-picker.module.css`         |
+| Numbered pagination | `numbered-pagination.module.css` |
+| Field               | `field.module.css`               |
+| Item                | `item.module.css`                |
+| Dialog              | `dialog.module.css`              |
+| Sheet               | `sheet.module.css`               |
+| Select              | `select.module.css`              |
+| Sidebar             | `sidebar.module.css`             |
+| Calendar            | `calendar.module.css`            |
+| Accordion           | `accordion.module.css`           |
+| Alert dialog        | `alert-dialog.module.css`        |
+| Carousel            | `carousel.module.css`            |
+| Data table          | `data-table.module.css`          |
+| Dropdown menu       | `dropdown-menu.module.css`       |
+| Context menu        | `context-menu.module.css`        |
+| Command             | `command.module.css`             |
+| Input group         | `input-group.module.css`         |
+| Combobox            | `combobox.module.css`            |
+| Navigation menu     | `navigation-menu.module.css`     |
+
+### Native HTML alternatives
+
+Lightweight siblings of Base UI components — same tokens and CSS Modules, no extra primitives:
+
+| Component        | Element                   | When to use                                             |
+| ---------------- | ------------------------- | ------------------------------------------------------- |
+| `NativeSelect`   | `<select>`                | Simple option lists                                     |
+| `NativeInput`    | `<input>`                 | Text-like and file types; `size` default \| sm          |
+| `NativeTextarea` | `<textarea>`              | Multi-line text                                         |
+| `NativeCheckbox` | checkbox input            | Boolean choice                                          |
+| `NativeRadio`    | radio input               | One-of-many (use with fieldset / shared `name`)         |
+| `NativeRange`    | range input               | Simple slider                                           |
+| `NativeFieldset` | `<fieldset>` / `<legend>` | Semantic form groups                                    |
+| `NativeProgress` | `<progress>`              | Determinate bar without custom labels                   |
+| `NativeDialog`   | `<dialog>`                | Simple modal; use `Dialog` for focus trap / composition |
+| `NativePopover`  | `popover` API             | Lightweight floating panel                              |
+| `NativeDetails`  | `<details>` / `<summary>` | Single expandable blocks; use `Accordion` for groups    |
+
+Shared field styles: [`native-control/control.module.css`](../src/components/ui/native-control/control.module.css).
+
+**Contracts:** Keep variant/size **names** in `@surfnet/curve-contracts`. Native components each have a description-only contract in that package.
+
+**Publishing:** Consumers still import `@surfnet/curve-react/styles.css`; CSS Modules compile into that bundle.
+
+**Follow-ups:** optional shared focus/disabled partials under `src/styles/`; extend `semantic-colors.css` when new semantic tokens ship.
+
+### Tailwind vs semantic color utilities (React package)
+
+**Published `styles.css` does not bundle Tailwind.** It includes tokens, minimal base (`src/styles/base.css`), **semantic color utilities** (`src/styles/semantic-colors.css` — e.g. `text-muted-foreground`, `bg-primary`), and CSS Modules.
+
+| Area        | Path                                 | Role                                                         |
+| ----------- | ------------------------------------ | ------------------------------------------------------------ |
+| Library CSS | `src/index.css`                      | Tokens + base + semantic colors only                         |
+| Storybook   | `.storybook/story-chrome.css`        | Plain CSS demo utilities for stories — not Tailwind          |
+| shadcn CLI  | `components.json` → `tailwind.css`   | CLI metadata; migrate vendored Tailwind to modules after add |
+| `cn()`      | `src/lib/utils.ts`                   | `tailwind-merge` for consumer `className`s                   |
+| Demo app    | `apps/react-app/src/app/globals.css` | App Tailwind (theme + utilities)                             |
+| Angular     | `packages/angular`                   | Unchanged — Spartan + Tailwind                               |
+
+Component `src/components/ui/**/*.tsx` files use CSS Modules only.
+
+**Add-component skill:** [`.claude/skills/add-component/react.md`](../../../.claude/skills/add-component/react.md) documents the CSS Module workflow for new components.
+
+## Pilot verification (Button)
+
+- **Build:** `pnpm --filter @surfnet/curve-react build` — CSS Module compiles into `dist/styles.css` (single bundle; module class names are hashed). `button.module.js` is a small re-export of hashed class strings for `buttonVariants()`.
+- **Lint:** `pnpm --filter @surfnet/curve-react lint` — TypeScript includes `*.module.css` via [`src/vite-env.d.ts`](../src/vite-env.d.ts).
+- **Storybook:** existing stories under `Components/Button` cover variants, sizes, icons, destructive, disabled, and `render` prop — run `pnpm --filter @surfnet/curve-react storybook` for visual and a11y checks.
+- **Calendar:** `buttonVariants()` in [`calendar.tsx`](../src/components/ui/calendar/calendar.tsx) unchanged at the call site; styling now comes from module classes instead of Tailwind utilities.
diff --git a/packages/react/package.json b/packages/react/package.json
index 8a2e2fbb..08ae838f 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -38,7 +38,6 @@
   "dependencies": {
     "@base-ui/react": "1.5.0",
     "@tanstack/react-table": "^8.21.3",
-    "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.4.0",
@@ -61,7 +60,6 @@
     "@surfnet/curve-storybook-config": "workspace:*",
     "@surfnet/curve-tokens": "workspace:*",
     "@surfnet/curve-typescript-config": "workspace:*",
-    "@tailwindcss/vite": "4.3.1",
     "@types/node": "24.13.2",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
@@ -72,8 +70,6 @@
     "rollup-plugin-preserve-directives": "^0.4.0",
     "shadcn": "4.11.0",
     "storybook": "10.4.5",
-    "tailwindcss": "4.3.1",
-    "tw-animate-css": "1.4.0",
     "typescript": "6.0.3",
     "vite": "8.0.16",
     "vite-plugin-dts": "5.0.2"
diff --git a/packages/react/src/components/ui/accordion/accordion.module.css b/packages/react/src/components/ui/accordion/accordion.module.css
new file mode 100644
index 00000000..a62f92b1
--- /dev/null
+++ b/packages/react/src/components/ui/accordion/accordion.module.css
@@ -0,0 +1,91 @@
+.root {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+.item:not(:last-child) {
+  border-bottom: 1px solid var(--border);
+}
+
+.header {
+  display: flex;
+}
+
+.trigger {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: flex-start;
+  justify-content: space-between;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  padding-block: calc(var(--spacing, 0.25rem) * 4);
+  text-align: left;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 150ms ease;
+  outline: none;
+}
+
+.trigger:hover {
+  text-decoration: underline;
+}
+
+.trigger:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.trigger[aria-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.triggerIcon {
+  margin-left: auto;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  pointer-events: none;
+  color: var(--muted-foreground);
+}
+
+.iconCollapsed {
+  display: inline;
+}
+
+.iconExpanded {
+  display: none;
+}
+
+.trigger[aria-expanded='true'] .iconCollapsed {
+  display: none;
+}
+
+.trigger[aria-expanded='true'] .iconExpanded {
+  display: inline;
+}
+
+.panel {
+  overflow: hidden;
+  font-size: 0.875rem;
+}
+
+.panelInner {
+  padding-top: 0;
+  padding-bottom: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.panelInner a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.panelInner a:hover {
+  color: var(--foreground);
+}
+
+.panelInner p:not(:last-child) {
+  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
+}
diff --git a/packages/react/src/components/ui/accordion/accordion.tsx b/packages/react/src/components/ui/accordion/accordion.tsx
index 3af371f3..0167c994 100644
--- a/packages/react/src/components/ui/accordion/accordion.tsx
+++ b/packages/react/src/components/ui/accordion/accordion.tsx
@@ -5,11 +5,13 @@ import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
 import { cn } from '@/lib/utils';
 import { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react';
 
+import styles from './accordion.module.css';
+
 function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
   return (
     <AccordionPrimitive.Root
       data-slot="accordion"
-      className={cn('flex w-full flex-col', className)}
+      className={cn(styles.root, className)}
       {...props}
     />
   );
@@ -19,7 +21,7 @@ function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn('not-last:border-b', className)}
+      className={cn(styles.item, className)}
       {...props}
     />
   );
@@ -27,23 +29,20 @@ function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
 
 function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
   return (
-    <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Header className={styles.header}>
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
-        className={cn(
-          'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
-          className,
-        )}
+        className={cn(styles.trigger, className)}
         {...props}
       >
         {children}
         <CaretDownIcon
           data-slot="accordion-trigger-icon"
-          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+          className={cn(styles.triggerIcon, styles.iconCollapsed)}
         />
         <CaretUpIcon
           data-slot="accordion-trigger-icon"
-          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+          className={cn(styles.triggerIcon, styles.iconExpanded)}
         />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
@@ -52,19 +51,8 @@ function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.
 
 function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
   return (
-    <AccordionPrimitive.Panel
-      data-slot="accordion-content"
-      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
-      {...props}
-    >
-      <div
-        className={cn(
-          'h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
-          className,
-        )}
-      >
-        {children}
-      </div>
+    <AccordionPrimitive.Panel data-slot="accordion-content" className={styles.panel} {...props}>
+      <div className={cn(styles.panelInner, className)}>{children}</div>
     </AccordionPrimitive.Panel>
   );
 }
diff --git a/packages/react/src/components/ui/alert-dialog/alert-dialog.module.css b/packages/react/src/components/ui/alert-dialog/alert-dialog.module.css
new file mode 100644
index 00000000..2fe5011c
--- /dev/null
+++ b/packages/react/src/components/ui/alert-dialog/alert-dialog.module.css
@@ -0,0 +1,151 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  isolation: isolate;
+  z-index: 50;
+  background-color: rgb(0 0 0 / 10%);
+}
+
+@supports (backdrop-filter: blur(1px)) {
+  .overlay {
+    backdrop-filter: blur(2px);
+  }
+}
+
+.content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 50;
+  display: grid;
+  width: 100%;
+  transform: translate(-50%, -50%);
+  gap: calc(var(--spacing, 0.25rem) * 6);
+  border-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.2));
+  background-color: var(--popover);
+  padding: calc(var(--spacing, 0.25rem) * 6);
+  color: var(--popover-foreground);
+  outline: none;
+  box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+.content[data-size='default'],
+.content[data-size='sm'] {
+  max-width: 20rem;
+}
+
+@media (min-width: 640px) {
+  .content[data-size='default'] {
+    max-width: 32rem;
+  }
+}
+
+.header {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  place-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+  text-align: center;
+}
+
+.header:has([data-slot='alert-dialog-media']) {
+  grid-template-rows: auto auto 1fr;
+  column-gap: calc(var(--spacing, 0.25rem) * 6);
+}
+
+@media (min-width: 640px) {
+  .content[data-size='default'] .header {
+    place-items: start;
+    text-align: left;
+  }
+
+  .content[data-size='default'] .header:has([data-slot='alert-dialog-media']) {
+    grid-template-rows: auto 1fr;
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.content[data-size='sm'] .footer {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@media (min-width: 640px) {
+  .footer {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+.media {
+  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
+  display: inline-flex;
+  width: 4rem;
+  height: 4rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: var(--muted);
+}
+
+@media (min-width: 640px) {
+  .content[data-size='default'] .media {
+    grid-row: span 2 / span 2;
+  }
+}
+
+.media svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.title {
+  font-family: var(--font-heading, inherit);
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+
+@media (min-width: 640px) {
+  .content[data-size='default'] .header:has([data-slot='alert-dialog-media']) .title {
+    grid-column-start: 2;
+  }
+}
+
+.description {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-wrap: balance;
+  color: var(--muted-foreground);
+}
+
+@media (min-width: 768px) {
+  .description {
+    text-wrap: pretty;
+  }
+}
+
+.description a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.description a:hover {
+  color: var(--foreground);
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/packages/react/src/components/ui/alert-dialog/alert-dialog.tsx b/packages/react/src/components/ui/alert-dialog/alert-dialog.tsx
index 91b070a2..cc619c7a 100644
--- a/packages/react/src/components/ui/alert-dialog/alert-dialog.tsx
+++ b/packages/react/src/components/ui/alert-dialog/alert-dialog.tsx
@@ -7,6 +7,8 @@ import type { AlertDialogSizeName } from '@surfnet/curve-contracts';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 
+import styles from './alert-dialog.module.css';
+
 function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
@@ -23,10 +25,7 @@ function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdr
   return (
     <AlertDialogPrimitive.Backdrop
       data-slot="alert-dialog-overlay"
-      className={cn(
-        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
-        className,
-      )}
+      className={cn(styles.overlay, className)}
       {...props}
     />
   );
@@ -45,10 +44,7 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Popup
         data-slot="alert-dialog-content"
         data-size={size}
-        className={cn(
-          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-          className,
-        )}
+        className={cn(styles.content, className)}
         {...props}
       />
     </AlertDialogPortal>
@@ -57,41 +53,18 @@ function AlertDialogContent({
 
 function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn(
-        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
-        className,
-      )}
-      {...props}
-    />
+    <div data-slot="alert-dialog-header" className={cn(styles.header, className)} {...props} />
   );
 }
 
 function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
-        className,
-      )}
-      {...props}
-    />
+    <div data-slot="alert-dialog-footer" className={cn(styles.footer, className)} {...props} />
   );
 }
 
 function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-media"
-      className={cn(
-        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="alert-dialog-media" className={cn(styles.media, className)} {...props} />;
 }
 
 function AlertDialogTitle({
@@ -101,10 +74,7 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn(
-        'font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
-        className,
-      )}
+      className={cn(styles.title, className)}
       {...props}
     />
   );
@@ -117,10 +87,7 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn(
-        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
-        className,
-      )}
+      className={cn(styles.description, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/alert/alert.module.css b/packages/react/src/components/ui/alert/alert.module.css
new file mode 100644
index 00000000..29430cb1
--- /dev/null
+++ b/packages/react/src/components/ui/alert/alert.module.css
@@ -0,0 +1,119 @@
+.alert {
+  position: relative;
+  display: grid;
+  width: 100%;
+  gap: 0.125rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.alert:has([data-slot='alert-action']) {
+  padding-inline-end: 4.5rem;
+}
+
+.alert:has(> svg) {
+  grid-template-columns: auto 1fr;
+  column-gap: 0.625rem;
+}
+
+.alert > svg {
+  grid-row: span 2;
+  transform: translateY(2px);
+  color: currentcolor;
+  width: 1rem;
+  height: 1rem;
+}
+
+.alert[data-variant='default'],
+.variantDefault {
+  background-color: var(--card);
+  color: var(--card-foreground);
+}
+
+.alert[data-variant='info'],
+.variantInfo {
+  background-color: var(--info-subtle);
+  color: var(--info-subtle-foreground);
+}
+
+.alert[data-variant='success'],
+.variantSuccess {
+  background-color: var(--success-subtle);
+  color: var(--success-subtle-foreground);
+}
+
+.alert[data-variant='warning'],
+.variantWarning {
+  background-color: var(--warning-subtle);
+  color: var(--warning-subtle-foreground);
+}
+
+.alert[data-variant='danger'],
+.variantDanger {
+  background-color: var(--danger-subtle);
+  color: var(--danger-subtle-foreground);
+}
+
+.alert[data-variant='info'] [data-slot='alert-title'],
+.variantInfo [data-slot='alert-title'],
+.alert[data-variant='success'] [data-slot='alert-title'],
+.variantSuccess [data-slot='alert-title'],
+.alert[data-variant='warning'] [data-slot='alert-title'],
+.variantWarning [data-slot='alert-title'],
+.alert[data-variant='danger'] [data-slot='alert-title'],
+.variantDanger [data-slot='alert-title'] {
+  color: var(--foreground);
+}
+
+.title {
+  font-weight: 500;
+}
+
+.alert:has(> svg) .title {
+  grid-column-start: 2;
+}
+
+.title a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.title a:hover {
+  color: var(--foreground);
+}
+
+.description {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  text-wrap: balance;
+  color: var(--muted-foreground);
+}
+
+@media (min-width: 768px) {
+  .description {
+    text-wrap: pretty;
+  }
+}
+
+.description a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.description a:hover {
+  color: var(--foreground);
+}
+
+.description p:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.action {
+  position: absolute;
+  top: 0.625rem;
+  right: 0.75rem;
+}
diff --git a/packages/react/src/components/ui/alert/alert.tsx b/packages/react/src/components/ui/alert/alert.tsx
index 9f9bfabd..f850a7db 100644
--- a/packages/react/src/components/ui/alert/alert.tsx
+++ b/packages/react/src/components/ui/alert/alert.tsx
@@ -1,81 +1,62 @@
 'use client';
 
 import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
 import type { AlertVariantName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 
-const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: 'bg-card text-card-foreground',
-        info: 'bg-info-subtle text-info-subtle-foreground *:data-[slot=alert-title]:text-foreground *:[svg]:text-current',
-        success:
-          'bg-success-subtle text-success-subtle-foreground *:data-[slot=alert-title]:text-foreground *:[svg]:text-current',
-        warning:
-          'bg-warning-subtle text-warning-subtle-foreground *:data-[slot=alert-title]:text-foreground *:[svg]:text-current',
-        danger:
-          'bg-danger-subtle text-danger-subtle-foreground *:data-[slot=alert-title]:text-foreground *:[svg]:text-current',
-      } satisfies Record<AlertVariantName, string>,
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+import alertStyles from './alert.module.css';
+
+type AlertModuleClasses = {
+  alert: string;
+  variantDefault: string;
+  variantInfo: string;
+  variantSuccess: string;
+  variantWarning: string;
+  variantDanger: string;
+  title: string;
+  description: string;
+  action: string;
+};
+
+const styles = alertStyles as AlertModuleClasses;
+
+const variantClass: Record<AlertVariantName, string> = {
+  default: styles.variantDefault,
+  info: styles.variantInfo,
+  success: styles.variantSuccess,
+  warning: styles.variantWarning,
+  danger: styles.variantDanger,
+};
+
+type AlertProps = React.ComponentProps<'div'> & {
+  variant?: AlertVariantName;
+};
+
+function Alert({ className, variant = 'default', ...props }: AlertProps) {
   return (
     <div
       data-slot="alert"
       role="alert"
-      className={cn(alertVariants({ variant }), className)}
+      data-variant={variant}
+      className={cn(styles.alert, variantClass[variant], className)}
       {...props}
     />
   );
 }
 
 function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="alert-title" className={cn(styles.title, className)} {...props} />;
 }
 
 function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
-        className,
-      )}
-      {...props}
-    />
+    <div data-slot="alert-description" className={cn(styles.description, className)} {...props} />
   );
 }
 
 function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-action"
-      className={cn('absolute top-2.5 right-3', className)}
-      {...props}
-    />
-  );
+  return <div data-slot="alert-action" className={cn(styles.action, className)} {...props} />;
 }
 
 export { Alert, AlertTitle, AlertDescription, AlertAction };
diff --git a/packages/react/src/components/ui/aspect-ratio/aspect-ratio.module.css b/packages/react/src/components/ui/aspect-ratio/aspect-ratio.module.css
new file mode 100644
index 00000000..daa7f425
--- /dev/null
+++ b/packages/react/src/components/ui/aspect-ratio/aspect-ratio.module.css
@@ -0,0 +1,4 @@
+.root {
+  position: relative;
+  aspect-ratio: var(--ratio);
+}
diff --git a/packages/react/src/components/ui/aspect-ratio/aspect-ratio.tsx b/packages/react/src/components/ui/aspect-ratio/aspect-ratio.tsx
index 313cf2d3..b502dd9d 100644
--- a/packages/react/src/components/ui/aspect-ratio/aspect-ratio.tsx
+++ b/packages/react/src/components/ui/aspect-ratio/aspect-ratio.tsx
@@ -2,6 +2,8 @@
 
 import { cn } from '@/lib/utils';
 
+import styles from './aspect-ratio.module.css';
+
 function AspectRatio({
   ratio,
   className,
@@ -10,12 +12,8 @@ function AspectRatio({
   return (
     <div
       data-slot="aspect-ratio"
-      style={
-        {
-          '--ratio': ratio,
-        } as React.CSSProperties
-      }
-      className={cn('relative aspect-(--ratio)', className)}
+      style={{ '--ratio': ratio } as React.CSSProperties}
+      className={cn(styles.root, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/avatar/avatar.module.css b/packages/react/src/components/ui/avatar/avatar.module.css
new file mode 100644
index 00000000..e8de3f98
--- /dev/null
+++ b/packages/react/src/components/ui/avatar/avatar.module.css
@@ -0,0 +1,155 @@
+.root {
+  position: relative;
+  display: flex;
+  width: calc(var(--spacing, 0.25rem) * 8);
+  height: calc(var(--spacing, 0.25rem) * 8);
+  flex-shrink: 0;
+  border-radius: 9999px;
+  user-select: none;
+}
+
+.root::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  border: 1px solid var(--border);
+  mix-blend-mode: darken;
+  pointer-events: none;
+}
+
+:global(.dark) .root::after {
+  mix-blend-mode: lighten;
+}
+
+.root[data-size='sm'] {
+  width: calc(var(--spacing, 0.25rem) * 6);
+  height: calc(var(--spacing, 0.25rem) * 6);
+}
+
+.root[data-size='lg'] {
+  width: calc(var(--spacing, 0.25rem) * 10);
+  height: calc(var(--spacing, 0.25rem) * 10);
+}
+
+.image {
+  aspect-ratio: 1;
+  width: 100%;
+  height: 100%;
+  border-radius: 9999px;
+  object-fit: cover;
+}
+
+.fallback {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: var(--muted);
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+.root[data-size='sm'] .fallback {
+  font-size: 0.75rem;
+}
+
+.badge {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  background-blend-mode: color;
+  box-shadow: 0 0 0 2px var(--background);
+  user-select: none;
+}
+
+.root[data-size='sm'] .badge {
+  width: calc(var(--spacing, 0.25rem) * 2);
+  height: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.root[data-size='sm'] .badge svg {
+  display: none;
+}
+
+.root[data-size='default'] .badge {
+  width: calc(var(--spacing, 0.25rem) * 2.5);
+  height: calc(var(--spacing, 0.25rem) * 2.5);
+}
+
+.root[data-size='default'] .badge svg {
+  width: calc(var(--spacing, 0.25rem) * 2);
+  height: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.root[data-size='lg'] .badge {
+  width: calc(var(--spacing, 0.25rem) * 3);
+  height: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.root[data-size='lg'] .badge svg {
+  width: calc(var(--spacing, 0.25rem) * 2);
+  height: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.group {
+  display: flex;
+}
+
+.group > :global([data-slot='avatar']) {
+  margin-inline-start: calc(var(--spacing, 0.25rem) * -2);
+  box-shadow: 0 0 0 2px var(--background);
+}
+
+.group > :global([data-slot='avatar']:first-child) {
+  margin-inline-start: 0;
+}
+
+.groupCount {
+  position: relative;
+  display: flex;
+  width: calc(var(--spacing, 0.25rem) * 8);
+  height: calc(var(--spacing, 0.25rem) * 8);
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: var(--muted);
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+  box-shadow: 0 0 0 2px var(--background);
+}
+
+.groupCount svg {
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+}
+
+:global([data-slot='avatar-group']:has([data-size='lg'])) .groupCount {
+  width: calc(var(--spacing, 0.25rem) * 10);
+  height: calc(var(--spacing, 0.25rem) * 10);
+}
+
+:global([data-slot='avatar-group']:has([data-size='lg'])) .groupCount svg {
+  width: calc(var(--spacing, 0.25rem) * 5);
+  height: calc(var(--spacing, 0.25rem) * 5);
+}
+
+:global([data-slot='avatar-group']:has([data-size='sm'])) .groupCount {
+  width: calc(var(--spacing, 0.25rem) * 6);
+  height: calc(var(--spacing, 0.25rem) * 6);
+}
+
+:global([data-slot='avatar-group']:has([data-size='sm'])) .groupCount svg {
+  width: calc(var(--spacing, 0.25rem) * 3);
+  height: calc(var(--spacing, 0.25rem) * 3);
+}
diff --git a/packages/react/src/components/ui/avatar/avatar.tsx b/packages/react/src/components/ui/avatar/avatar.tsx
index 5f59ca26..27c953a9 100644
--- a/packages/react/src/components/ui/avatar/avatar.tsx
+++ b/packages/react/src/components/ui/avatar/avatar.tsx
@@ -6,6 +6,8 @@ import type { AvatarSizeName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 
+import styles from './avatar.module.css';
+
 function Avatar({
   className,
   size = 'default',
@@ -17,10 +19,7 @@ function Avatar({
     <AvatarPrimitive.Root
       data-slot="avatar"
       data-size={size}
-      className={cn(
-        'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
-        className,
-      )}
+      className={cn(styles.root, className)}
       {...props}
     />
   );
@@ -30,7 +29,7 @@ function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
-      className={cn('aspect-square size-full rounded-full object-cover', className)}
+      className={cn(styles.image, className)}
       {...props}
     />
   );
@@ -40,54 +39,23 @@ function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props)
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
-      className={cn(
-        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
-        className,
-      )}
+      className={cn(styles.fallback, className)}
       {...props}
     />
   );
 }
 
 function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="avatar-badge"
-      className={cn(
-        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
-        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
-        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
-        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <span data-slot="avatar-badge" className={cn(styles.badge, className)} {...props} />;
 }
 
 function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="avatar-group"
-      className={cn(
-        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="avatar-group" className={cn(styles.group, className)} {...props} />;
 }
 
 function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
-      data-slot="avatar-group-count"
-      className={cn(
-        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
-        className,
-      )}
-      {...props}
-    />
+    <div data-slot="avatar-group-count" className={cn(styles.groupCount, className)} {...props} />
   );
 }
 
diff --git a/packages/react/src/components/ui/badge/badge.module.css b/packages/react/src/components/ui/badge/badge.module.css
new file mode 100644
index 00000000..5cc60e9b
--- /dev/null
+++ b/packages/react/src/components/ui/badge/badge.module.css
@@ -0,0 +1,193 @@
+.badge {
+  display: inline-flex;
+  height: calc(var(--spacing, 0.25rem) * 5);
+  width: fit-content;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: var(--radius-4xl, calc(var(--radius, 0.625rem) * 2.6));
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  white-space: nowrap;
+  transition: all 150ms ease;
+}
+
+.badge:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.badge[aria-invalid='true'] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .badge[aria-invalid='true'] {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.badge:has([data-icon='inline-end']) {
+  padding-inline-end: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.badge:has([data-icon='inline-start']) {
+  padding-inline-start: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.badge svg {
+  pointer-events: none;
+  width: calc(var(--spacing, 0.25rem) * 3);
+  height: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.badge[data-variant='default'],
+.variantDefault {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.badge[data-variant='default'] a:hover,
+.variantDefault a:hover {
+  background-color: color-mix(in oklch, var(--primary) 80%, transparent);
+}
+
+.badge[data-variant='secondary'],
+.variantSecondary {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.badge[data-variant='secondary'] a:hover,
+.variantSecondary a:hover {
+  background-color: color-mix(in oklch, var(--secondary) 80%, transparent);
+}
+
+.badge[data-variant='info'],
+.variantInfo {
+  background-color: var(--info-subtle);
+  color: var(--info-subtle-foreground);
+}
+
+.badge[data-variant='info']:focus-visible,
+.variantInfo:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--info) 20%, transparent);
+}
+
+:global(.dark) .badge[data-variant='info']:focus-visible,
+:global(.dark) .variantInfo:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--info) 40%, transparent);
+}
+
+.badge[data-variant='info'] a:hover,
+.variantInfo a:hover {
+  background-color: var(--info-subtle-hover);
+}
+
+.badge[data-variant='success'],
+.variantSuccess {
+  background-color: var(--success-subtle);
+  color: var(--success-subtle-foreground);
+}
+
+.badge[data-variant='success']:focus-visible,
+.variantSuccess:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 20%, transparent);
+}
+
+:global(.dark) .badge[data-variant='success']:focus-visible,
+:global(.dark) .variantSuccess:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 40%, transparent);
+}
+
+.badge[data-variant='success'] a:hover,
+.variantSuccess a:hover {
+  background-color: var(--success-subtle-hover);
+}
+
+.badge[data-variant='warning'],
+.variantWarning {
+  background-color: var(--warning-subtle);
+  color: var(--warning-subtle-foreground);
+}
+
+.badge[data-variant='warning']:focus-visible,
+.variantWarning:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--warning) 20%, transparent);
+}
+
+:global(.dark) .badge[data-variant='warning']:focus-visible,
+:global(.dark) .variantWarning:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--warning) 40%, transparent);
+}
+
+.badge[data-variant='warning'] a:hover,
+.variantWarning a:hover {
+  background-color: var(--warning-subtle-hover);
+}
+
+.badge[data-variant='danger'],
+.variantDanger {
+  background-color: var(--danger-subtle);
+  color: var(--danger-subtle-foreground);
+}
+
+.badge[data-variant='danger']:focus-visible,
+.variantDanger:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 20%, transparent);
+}
+
+:global(.dark) .badge[data-variant='danger']:focus-visible,
+:global(.dark) .variantDanger:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 40%, transparent);
+}
+
+.badge[data-variant='danger'] a:hover,
+.variantDanger a:hover {
+  background-color: var(--danger-subtle-hover);
+}
+
+.badge[data-variant='outline'],
+.variantOutline {
+  border-color: var(--border);
+  color: var(--foreground);
+}
+
+.badge[data-variant='outline'] a:hover,
+.variantOutline a:hover {
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+}
+
+.badge[data-variant='ghost'],
+.variantGhost {
+  background-color: transparent;
+  color: var(--foreground);
+}
+
+.badge[data-variant='ghost']:hover,
+.variantGhost:hover {
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+}
+
+:global(.dark) .badge[data-variant='ghost']:hover,
+:global(.dark) .variantGhost:hover {
+  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
+}
+
+.badge[data-variant='link'],
+.variantLink {
+  background-color: transparent;
+  color: var(--primary);
+  text-underline-offset: 4px;
+}
+
+.badge[data-variant='link']:hover,
+.variantLink:hover {
+  text-decoration: underline;
+}
diff --git a/packages/react/src/components/ui/badge/badge.tsx b/packages/react/src/components/ui/badge/badge.tsx
index b9c52b65..a9f9fce1 100644
--- a/packages/react/src/components/ui/badge/badge.tsx
+++ b/packages/react/src/components/ui/badge/badge.tsx
@@ -2,49 +2,59 @@
 
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
-import { cva, type VariantProps } from 'class-variance-authority';
 import type { BadgeVariantName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 
-const badgeVariantClasses = {
-  default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-  secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
-  info: 'bg-info-subtle text-info-subtle-foreground focus-visible:ring-info/20 dark:focus-visible:ring-info/40 [a]:hover:bg-info-subtle-hover',
-  success:
-    'bg-success-subtle text-success-subtle-foreground focus-visible:ring-success/20 dark:focus-visible:ring-success/40 [a]:hover:bg-success-subtle-hover',
-  warning:
-    'bg-warning-subtle text-warning-subtle-foreground focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 [a]:hover:bg-warning-subtle-hover',
-  danger:
-    'bg-danger-subtle text-danger-subtle-foreground focus-visible:ring-danger/20 dark:focus-visible:ring-danger/40 [a]:hover:bg-danger-subtle-hover',
-  outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
-  ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
-  link: 'text-primary underline-offset-4 hover:underline',
-} satisfies Record<BadgeVariantName, string>;
-
-const badgeVariants = cva(
-  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
-  {
-    variants: {
-      variant: badgeVariantClasses,
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
+import badgeStyles from './badge.module.css';
+
+type BadgeModuleClasses = {
+  badge: string;
+  variantDefault: string;
+  variantSecondary: string;
+  variantInfo: string;
+  variantSuccess: string;
+  variantWarning: string;
+  variantDanger: string;
+  variantOutline: string;
+  variantGhost: string;
+  variantLink: string;
+};
+
+const styles = badgeStyles as BadgeModuleClasses;
+
+const variantClass: Record<BadgeVariantName, string> = {
+  default: styles.variantDefault,
+  secondary: styles.variantSecondary,
+  info: styles.variantInfo,
+  success: styles.variantSuccess,
+  warning: styles.variantWarning,
+  danger: styles.variantDanger,
+  outline: styles.variantOutline,
+  ghost: styles.variantGhost,
+  link: styles.variantLink,
+};
+
+type BadgeVariantsOptions = {
+  variant?: BadgeVariantName;
+  className?: string;
+};
+
+function badgeVariants({ variant = 'default', className }: BadgeVariantsOptions = {}) {
+  return cn(styles.badge, variantClass[variant], className);
+}
 
 function Badge({
   className,
   variant = 'default',
   render,
   ...props
-}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
+}: useRender.ComponentProps<'span'> & BadgeVariantsOptions) {
   return useRender({
     defaultTagName: 'span',
     props: mergeProps<'span'>(
       {
-        className: cn(badgeVariants({ variant }), className),
+        className: badgeVariants({ variant, className }),
       },
       props,
     ),
diff --git a/packages/react/src/components/ui/breadcrumb/breadcrumb.module.css b/packages/react/src/components/ui/breadcrumb/breadcrumb.module.css
new file mode 100644
index 00000000..314942af
--- /dev/null
+++ b/packages/react/src/components/ui/breadcrumb/breadcrumb.module.css
@@ -0,0 +1,65 @@
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  overflow-wrap: break-word;
+  color: var(--muted-foreground);
+}
+
+@media (min-width: 640px) {
+  .list {
+    gap: calc(var(--spacing, 0.25rem) * 2.5);
+  }
+}
+
+.item {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.link {
+  transition: color 150ms ease;
+}
+
+.link:hover {
+  color: var(--foreground);
+}
+
+.page {
+  font-weight: 400;
+  color: var(--foreground);
+}
+
+.separator svg {
+  width: calc(var(--spacing, 0.25rem) * 3.5);
+  height: calc(var(--spacing, 0.25rem) * 3.5);
+}
+
+.ellipsis {
+  display: flex;
+  width: calc(var(--spacing, 0.25rem) * 5);
+  height: calc(var(--spacing, 0.25rem) * 5);
+  align-items: center;
+  justify-content: center;
+}
+
+.ellipsis svg {
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/packages/react/src/components/ui/breadcrumb/breadcrumb.tsx b/packages/react/src/components/ui/breadcrumb/breadcrumb.tsx
index 6698d4ee..c3966803 100644
--- a/packages/react/src/components/ui/breadcrumb/breadcrumb.tsx
+++ b/packages/react/src/components/ui/breadcrumb/breadcrumb.tsx
@@ -3,9 +3,11 @@
 import * as React from 'react';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
+import { CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react';
 
 import { cn } from '@/lib/utils';
-import { CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react';
+
+import styles from './breadcrumb.module.css';
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
@@ -14,26 +16,11 @@ function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
 }
 
 function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
-  return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn(
-        'flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <ol data-slot="breadcrumb-list" className={cn(styles.list, className)} {...props} />;
 }
 
 function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
-  return (
-    <li
-      data-slot="breadcrumb-item"
-      className={cn('inline-flex items-center gap-1.5', className)}
-      {...props}
-    />
-  );
+  return <li data-slot="breadcrumb-item" className={cn(styles.item, className)} {...props} />;
 }
 
 function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>) {
@@ -41,7 +28,7 @@ function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProp
     defaultTagName: 'a',
     props: mergeProps<'a'>(
       {
-        className: cn('transition-colors hover:text-foreground', className),
+        className: cn(styles.link, className),
       },
       props,
     ),
@@ -59,7 +46,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn('font-normal text-foreground', className)}
+      className={cn(styles.page, className)}
       {...props}
     />
   );
@@ -71,7 +58,7 @@ function BreadcrumbSeparator({ children, className, ...props }: React.ComponentP
       data-slot="breadcrumb-separator"
       role="presentation"
       aria-hidden="true"
-      className={cn('[&>svg]:size-3.5', className)}
+      className={cn(styles.separator, className)}
       {...props}
     >
       {children ?? <CaretRightIcon />}
@@ -85,11 +72,11 @@ function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'
       data-slot="breadcrumb-ellipsis"
       role="presentation"
       aria-hidden="true"
-      className={cn('flex size-5 items-center justify-center [&>svg]:size-4', className)}
+      className={cn(styles.ellipsis, className)}
       {...props}
     >
       <DotsThreeIcon />
-      <span className="sr-only">More</span>
+      <span className={styles.srOnly}>More</span>
     </span>
   );
 }
diff --git a/packages/react/src/components/ui/button-group/button-group.module.css b/packages/react/src/components/ui/button-group/button-group.module.css
new file mode 100644
index 00000000..ac15261b
--- /dev/null
+++ b/packages/react/src/components/ui/button-group/button-group.module.css
@@ -0,0 +1,99 @@
+.group {
+  display: flex;
+  width: fit-content;
+  align-items: stretch;
+}
+
+.group > :global([data-slot]:focus-visible) {
+  position: relative;
+  z-index: 10;
+}
+
+.group:has(> [data-slot='button-group']) {
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.group[data-orientation='horizontal'] {
+  flex-direction: row;
+}
+
+.group[data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+.group[data-orientation='horizontal'] > :global([data-slot]) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.group[data-orientation='horizontal'] > :global([data-slot]:first-child) {
+  border-top-left-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  border-bottom-left-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+.group[data-orientation='horizontal'] > :global([data-slot]:last-child) {
+  border-top-right-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  border-bottom-right-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+.group[data-orientation='horizontal'] > :global([data-slot] ~ [data-slot]) {
+  border-left-width: 0;
+}
+
+.group[data-orientation='vertical'] > :global([data-slot]) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.group[data-orientation='vertical'] > :global([data-slot]:first-child) {
+  border-top-left-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  border-top-right-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+.group[data-orientation='vertical'] > :global([data-slot]:last-child) {
+  border-bottom-right-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  border-bottom-left-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+.group[data-orientation='vertical'] > :global([data-slot] ~ [data-slot]) {
+  border-top-width: 0;
+}
+
+.text {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  border: 1px solid var(--border);
+  background-color: var(--muted);
+  padding-inline: calc(var(--spacing, 0.25rem) * 2.5);
+  font-size: 0.875rem;
+  font-weight: 500;
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+}
+
+.text svg {
+  pointer-events: none;
+  width: 1rem;
+  height: 1rem;
+}
+
+.separator {
+  position: relative;
+  align-self: stretch;
+  background-color: var(--input);
+}
+
+.separator[data-orientation='horizontal'] {
+  margin-inline: 1px;
+  width: auto;
+}
+
+.separator[data-orientation='vertical'] {
+  margin-block: 1px;
+  height: auto;
+}
diff --git a/packages/react/src/components/ui/button-group/button-group.tsx b/packages/react/src/components/ui/button-group/button-group.tsx
index 95680638..c65ec60a 100644
--- a/packages/react/src/components/ui/button-group/button-group.tsx
+++ b/packages/react/src/components/ui/button-group/button-group.tsx
@@ -2,34 +2,27 @@
 
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
-import { cva, type VariantProps } from 'class-variance-authority';
 import type { ButtonGroupOrientationName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 import { Separator } from '@/components/ui/separator';
 
-const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          '*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',
-        vertical:
-          'flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0',
-      } satisfies Record<ButtonGroupOrientationName, string>,
-    },
-    defaultVariants: {
-      orientation: 'horizontal',
-    },
-  },
-);
+import styles from './button-group.module.css';
+
+export type ButtonGroupVariantsOptions = {
+  orientation?: ButtonGroupOrientationName;
+  className?: string;
+};
+
+function buttonGroupVariants({ className }: ButtonGroupVariantsOptions = {}) {
+  return cn(styles.group, className);
+}
 
 function ButtonGroup({
   className,
-  orientation,
+  orientation = 'horizontal',
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
+}: React.ComponentProps<'div'> & ButtonGroupVariantsOptions) {
   return (
     <div
       role="group"
@@ -46,10 +39,7 @@ function ButtonGroupText({ className, render, ...props }: useRender.ComponentPro
     defaultTagName: 'div',
     props: mergeProps<'div'>(
       {
-        className: cn(
-          "flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-          className,
-        ),
+        className: cn(styles.text, className),
       },
       props,
     ),
@@ -69,10 +59,7 @@ function ButtonGroupSeparator({
     <Separator
       data-slot="button-group-separator"
       orientation={orientation}
-      className={cn(
-        'relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto',
-        className,
-      )}
+      className={cn(styles.separator, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/button/button.module.css b/packages/react/src/components/ui/button/button.module.css
new file mode 100644
index 00000000..ab349387
--- /dev/null
+++ b/packages/react/src/components/ui/button/button.module.css
@@ -0,0 +1,241 @@
+/* Base button — shared with `buttonVariants()` via `.button` + variant/size classes */
+.button {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+  height: calc(var(--spacing, 0.25rem) * 9);
+  padding-inline: calc(var(--spacing, 0.25rem) * 2.5);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-clip: padding-box;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  white-space: nowrap;
+  transition: all 150ms ease;
+  outline: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.button:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.button:active:not([aria-haspopup]) {
+  transform: translateY(1px);
+}
+
+.button:disabled,
+.button[aria-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.button[aria-invalid='true'] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .button[aria-invalid='true'] {
+  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.button svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.button:has([data-icon='inline-end']) {
+  padding-inline-end: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.button:has([data-icon='inline-start']) {
+  padding-inline-start: calc(var(--spacing, 0.25rem) * 2);
+}
+
+[data-slot='button-group'] .button {
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+/* Variants — dual selectors support `data-variant` on Button and classes from `buttonVariants()` */
+.button[data-variant='default'],
+.variantDefault {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.button[data-variant='default']:hover,
+.variantDefault:hover {
+  border-color: transparent;
+  background-color: color-mix(in oklch, var(--primary) 80%, transparent);
+}
+
+.button[data-variant='outline'],
+.variantOutline {
+  border-color: var(--border);
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+.button[data-variant='outline']:hover,
+.button[data-variant='outline'][aria-expanded='true'],
+.variantOutline:hover,
+.variantOutline[aria-expanded='true'] {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+:global(.dark) .button[data-variant='outline'],
+:global(.dark) .variantOutline {
+  border-color: var(--input);
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+}
+
+:global(.dark) .button[data-variant='outline']:hover,
+:global(.dark) .variantOutline:hover {
+  background-color: color-mix(in oklch, var(--input) 50%, transparent);
+}
+
+.button[data-variant='secondary'],
+.variantSecondary {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.button[data-variant='secondary']:hover,
+.button[data-variant='secondary'][aria-expanded='true'],
+.variantSecondary:hover,
+.variantSecondary[aria-expanded='true'] {
+  background-color: color-mix(in oklch, var(--secondary), var(--foreground) 5%);
+}
+
+.button[data-variant='ghost'],
+.variantGhost {
+  background-color: transparent;
+  color: var(--foreground);
+}
+
+.button[data-variant='ghost']:hover,
+.button[data-variant='ghost'][aria-expanded='true'],
+.variantGhost:hover,
+.variantGhost[aria-expanded='true'] {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+:global(.dark) .button[data-variant='ghost']:hover,
+:global(.dark) .variantGhost:hover {
+  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
+}
+
+.button[data-variant='destructive'],
+.variantDestructive {
+  background-color: var(--destructive);
+  color: var(--destructive-foreground);
+}
+
+.button[data-variant='destructive']:hover,
+.variantDestructive:hover {
+  border-color: transparent;
+  background-color: color-mix(in oklch, var(--destructive) 90%, transparent);
+}
+
+.button[data-variant='destructive']:focus-visible,
+.variantDestructive:focus-visible {
+  border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .button[data-variant='destructive']:focus-visible,
+:global(.dark) .variantDestructive:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.button[data-variant='link'],
+.variantLink {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--primary-strong);
+  text-underline-offset: 4px;
+}
+
+.button[data-variant='link']:hover,
+.variantLink:hover {
+  text-decoration: underline;
+}
+
+/* Sizes */
+.button[data-size='default'],
+.sizeDefault {
+  height: calc(var(--spacing, 0.25rem) * 9);
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+  padding-inline: calc(var(--spacing, 0.25rem) * 2.5);
+}
+
+.button[data-size='sm'],
+.sizeSm {
+  height: calc(var(--spacing, 0.25rem) * 8);
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  padding-inline: calc(var(--spacing, 0.25rem) * 2.5);
+  border-radius: min(var(--radius-md, calc(var(--radius, 0.625rem) * 0.8)), 10px);
+}
+
+.button[data-size='lg'],
+.sizeLg {
+  height: calc(var(--spacing, 0.25rem) * 10);
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+  padding-inline: calc(var(--spacing, 0.25rem) * 2.5);
+}
+
+.button[data-size='icon'],
+.sizeIcon {
+  width: calc(var(--spacing, 0.25rem) * 9);
+  height: calc(var(--spacing, 0.25rem) * 9);
+  padding-inline: 0;
+}
+
+.button[data-size='icon-xs'],
+.sizeIconXs {
+  width: calc(var(--spacing, 0.25rem) * 6);
+  height: calc(var(--spacing, 0.25rem) * 6);
+  padding-inline: 0;
+  border-radius: min(var(--radius-md, calc(var(--radius, 0.625rem) * 0.8)), 8px);
+}
+
+.button[data-size='icon-xs'] svg,
+.sizeIconXs svg {
+  width: calc(var(--spacing, 0.25rem) * 3);
+  height: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.button[data-size='icon-sm'],
+.sizeIconSm {
+  width: calc(var(--spacing, 0.25rem) * 8);
+  height: calc(var(--spacing, 0.25rem) * 8);
+  padding-inline: 0;
+  border-radius: min(var(--radius-md, calc(var(--radius, 0.625rem) * 0.8)), 10px);
+}
+
+.button[data-size='icon-lg'],
+.sizeIconLg {
+  width: calc(var(--spacing, 0.25rem) * 10);
+  height: calc(var(--spacing, 0.25rem) * 10);
+  padding-inline: 0;
+}
+
+.button[data-size='sm']:has([data-icon='inline-end']),
+.sizeSm:has([data-icon='inline-end']) {
+  padding-inline-end: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.button[data-size='sm']:has([data-icon='inline-start']),
+.sizeSm:has([data-icon='inline-start']) {
+  padding-inline-start: calc(var(--spacing, 0.25rem) * 1.5);
+}
diff --git a/packages/react/src/components/ui/button/button.tsx b/packages/react/src/components/ui/button/button.tsx
index 16fa0c68..83337b85 100644
--- a/packages/react/src/components/ui/button/button.tsx
+++ b/packages/react/src/components/ui/button/button.tsx
@@ -1,60 +1,77 @@
 'use client';
 
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
-import { cva, type VariantProps } from 'class-variance-authority';
 import type { ButtonSizeName, ButtonVariantName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 
-const buttonVariantClasses = {
-  default: 'bg-primary text-primary-foreground hover:border-transparent hover:bg-primary/80',
-  outline:
-    'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
-  secondary:
-    'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
-  ghost:
-    'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
-  destructive:
-    'bg-destructive text-destructive-foreground hover:border-transparent hover:bg-destructive/90 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
-  link: 'text-primary-strong underline-offset-4 hover:underline',
-} satisfies Record<ButtonVariantName, string>;
-
-const buttonSizeClasses = {
-  default:
-    'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-  sm: 'h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
-  lg: 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-  icon: 'size-9',
-  'icon-xs':
-    "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
-  'icon-sm': 'size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md',
-  'icon-lg': 'size-10',
-} satisfies Record<ButtonSizeName, string>;
-
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: buttonVariantClasses,
-      size: buttonSizeClasses,
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-function Button({
-  className,
+import buttonStyles from './button.module.css';
+
+type ButtonModuleClasses = {
+  button: string;
+  variantDefault: string;
+  variantOutline: string;
+  variantSecondary: string;
+  variantGhost: string;
+  variantDestructive: string;
+  variantLink: string;
+  sizeDefault: string;
+  sizeSm: string;
+  sizeLg: string;
+  sizeIcon: string;
+  sizeIconXs: string;
+  sizeIconSm: string;
+  sizeIconLg: string;
+};
+
+const styles = buttonStyles as ButtonModuleClasses;
+
+const variantClass: Record<ButtonVariantName, string> = {
+  default: styles.variantDefault,
+  outline: styles.variantOutline,
+  secondary: styles.variantSecondary,
+  ghost: styles.variantGhost,
+  destructive: styles.variantDestructive,
+  link: styles.variantLink,
+};
+
+const sizeClass: Record<ButtonSizeName, string> = {
+  default: styles.sizeDefault,
+  sm: styles.sizeSm,
+  lg: styles.sizeLg,
+  icon: styles.sizeIcon,
+  'icon-xs': styles.sizeIconXs,
+  'icon-sm': styles.sizeIconSm,
+  'icon-lg': styles.sizeIconLg,
+};
+
+type ButtonVariantsOptions = {
+  variant?: ButtonVariantName;
+  size?: ButtonSizeName;
+  className?: string;
+};
+
+function buttonVariants({
   variant = 'default',
   size = 'default',
-  ...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  className,
+}: ButtonVariantsOptions = {}) {
+  return cn(styles['button'], variantClass[variant], sizeClass[size], className);
+}
+
+type ButtonProps = ButtonPrimitive.Props &
+  ButtonVariantsOptions & {
+    variant?: ButtonVariantName;
+    size?: ButtonSizeName;
+  };
+
+function Button({ className, variant = 'default', size = 'default', ...props }: ButtonProps) {
   return (
     <ButtonPrimitive
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      data-variant={variant}
+      data-size={size}
+      className={buttonVariants({ variant, size, className })}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/calendar/calendar.module.css b/packages/react/src/components/ui/calendar/calendar.module.css
new file mode 100644
index 00000000..b36290ee
--- /dev/null
+++ b/packages/react/src/components/ui/calendar/calendar.module.css
@@ -0,0 +1,314 @@
+.calendar {
+  --cell-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  --cell-size: calc(var(--spacing, 0.25rem) * 8);
+  background-color: var(--background);
+  padding: calc(var(--spacing, 0.25rem) * 3);
+}
+
+:global([data-slot='card-content']) .calendar,
+:global([data-slot='popover-content']) .calendar {
+  background-color: transparent;
+}
+
+.root {
+  width: fit-content;
+}
+
+.months {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 4);
+}
+
+@media (min-width: 768px) {
+  .months {
+    flex-direction: row;
+  }
+}
+
+.month {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.nav {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+}
+
+.navButton {
+  width: var(--cell-size);
+  height: var(--cell-size);
+  padding: 0;
+  user-select: none;
+}
+
+.navButton[aria-disabled='true'] {
+  opacity: 0.5;
+}
+
+.monthCaption {
+  display: flex;
+  height: var(--cell-size);
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--cell-size);
+}
+
+.dropdowns {
+  display: flex;
+  height: var(--cell-size);
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.dropdownRoot {
+  position: relative;
+  border-radius: var(--cell-radius);
+}
+
+.dropdown {
+  position: absolute;
+  inset: 0;
+  background-color: var(--popover);
+  opacity: 0;
+}
+
+.captionLabel {
+  font-weight: 500;
+  user-select: none;
+}
+
+.captionLabelSizeSm {
+  font-size: 0.875rem;
+}
+
+.captionLabelDropdown {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  border-radius: var(--cell-radius);
+  font-size: 0.875rem;
+}
+
+.captionLabelDropdown svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+.monthGrid {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.weekdays {
+  display: flex;
+}
+
+.weekday {
+  flex: 1;
+  border-radius: var(--cell-radius);
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--muted-foreground);
+  user-select: none;
+}
+
+.week {
+  margin-top: calc(var(--spacing, 0.25rem) * 2);
+  display: flex;
+  width: 100%;
+}
+
+.weekNumberHeader {
+  width: var(--cell-size);
+  user-select: none;
+}
+
+.weekNumber {
+  font-size: 0.8rem;
+  color: var(--muted-foreground);
+  user-select: none;
+}
+
+.day {
+  position: relative;
+  aspect-ratio: 1;
+  height: 100%;
+  width: 100%;
+  border-radius: var(--cell-radius);
+  padding: 0;
+  text-align: center;
+  user-select: none;
+}
+
+.day:last-child[data-selected='true'] :global(button) {
+  border-top-right-radius: var(--cell-radius);
+  border-bottom-right-radius: var(--cell-radius);
+}
+
+.dayFirstSelected :global(button) {
+  border-top-left-radius: var(--cell-radius);
+  border-bottom-left-radius: var(--cell-radius);
+}
+
+.rangeStart {
+  position: relative;
+  isolation: isolate;
+  z-index: 0;
+  border-top-left-radius: var(--cell-radius);
+  border-bottom-left-radius: var(--cell-radius);
+  background-color: var(--muted);
+}
+
+.rangeStart::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  right: 0;
+  width: 1rem;
+  background-color: var(--muted);
+}
+
+.rangeMiddle {
+  border-radius: 0;
+}
+
+.rangeEnd {
+  position: relative;
+  isolation: isolate;
+  z-index: 0;
+  border-top-right-radius: var(--cell-radius);
+  border-bottom-right-radius: var(--cell-radius);
+  background-color: var(--muted);
+}
+
+.rangeEnd::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: 1rem;
+  background-color: var(--muted);
+}
+
+.today {
+  border-radius: var(--cell-radius);
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.today[data-selected='true'] {
+  border-radius: 0;
+}
+
+.outside {
+  color: var(--muted-foreground);
+}
+
+.outside[aria-selected='true'] {
+  color: var(--muted-foreground);
+}
+
+.disabled {
+  color: var(--muted-foreground);
+  opacity: 0.5;
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.weekNumberCell {
+  display: flex;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.chevron {
+  width: 1rem;
+  height: 1rem;
+}
+
+.dayButton {
+  position: relative;
+  isolation: isolate;
+  z-index: 10;
+  display: flex;
+  aspect-ratio: 1;
+  width: 100%;
+  min-width: var(--cell-size);
+  height: auto;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  border: 0;
+  line-height: 1;
+  font-weight: 400;
+}
+
+.dayButton span {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  opacity: 0.7;
+}
+
+.day:global([data-focused='true']) .dayButton {
+  position: relative;
+  z-index: 10;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.dayButton[data-range-end='true'] {
+  border-radius: var(--cell-radius);
+  border-top-right-radius: var(--cell-radius);
+  border-bottom-right-radius: var(--cell-radius);
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.dayButton[data-range-middle='true'] {
+  border-radius: 0;
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.dayButton[data-range-start='true'] {
+  border-radius: var(--cell-radius);
+  border-top-left-radius: var(--cell-radius);
+  border-bottom-left-radius: var(--cell-radius);
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.dayButton[data-selected-single='true'] {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+:global(.dark) .dayButton:hover {
+  color: var(--foreground);
+}
+
+:global([dir='rtl']) .calendar :global(.rdp-button_next > svg),
+:global([dir='rtl']) .calendar :global(.rdp-button_previous > svg) {
+  transform: rotate(180deg);
+}
diff --git a/packages/react/src/components/ui/calendar/calendar.tsx b/packages/react/src/components/ui/calendar/calendar.tsx
index 7c3b430c..bd140e5e 100644
--- a/packages/react/src/components/ui/calendar/calendar.tsx
+++ b/packages/react/src/components/ui/calendar/calendar.tsx
@@ -7,6 +7,8 @@ import { cn } from '@/lib/utils';
 import { Button, buttonVariants } from '@/components/ui/button';
 import { CaretLeftIcon, CaretRightIcon, CaretDownIcon } from '@phosphor-icons/react';
 
+import styles from './calendar.module.css';
+
 function Calendar({
   className,
   classNames,
@@ -25,12 +27,7 @@ function Calendar({
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn(
-        'group/calendar bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className,
-      )}
+      className={cn(styles.calendar, className)}
       captionLayout={captionLayout}
       locale={locale}
       formatters={{
@@ -38,78 +35,47 @@ function Calendar({
         ...formatters,
       }}
       classNames={{
-        root: cn('w-fit', defaultClassNames.root),
-        months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
-        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
-        nav: cn(
-          'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
-          defaultClassNames.nav,
-        ),
+        root: cn(styles.root, defaultClassNames.root),
+        months: cn(styles.months, defaultClassNames.months),
+        month: cn(styles.month, defaultClassNames.month),
+        nav: cn(styles.nav, defaultClassNames.nav),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
+          styles.navButton,
           defaultClassNames.button_previous,
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
+          styles.navButton,
           defaultClassNames.button_next,
         ),
-        month_caption: cn(
-          'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
-          defaultClassNames.month_caption,
-        ),
-        dropdowns: cn(
-          'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
-          defaultClassNames.dropdowns,
-        ),
-        dropdown_root: cn('relative rounded-(--cell-radius)', defaultClassNames.dropdown_root),
-        dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),
+        month_caption: cn(styles.monthCaption, defaultClassNames.month_caption),
+        dropdowns: cn(styles.dropdowns, defaultClassNames.dropdowns),
+        dropdown_root: cn(styles.dropdownRoot, defaultClassNames.dropdown_root),
+        dropdown: cn(styles.dropdown, defaultClassNames.dropdown),
         caption_label: cn(
-          'font-medium select-none',
-          captionLayout === 'label'
-            ? 'text-sm'
-            : 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
+          styles.captionLabel,
+          captionLayout === 'label' ? styles.captionLabelSizeSm : styles.captionLabelDropdown,
           defaultClassNames.caption_label,
         ),
-        month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),
-        weekdays: cn('flex', defaultClassNames.weekdays),
-        weekday: cn(
-          'flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none',
-          defaultClassNames.weekday,
-        ),
-        week: cn('mt-2 flex w-full', defaultClassNames.week),
-        week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
-        week_number: cn(
-          'text-[0.8rem] text-muted-foreground select-none',
-          defaultClassNames.week_number,
-        ),
+        month_grid: cn(styles.monthGrid, defaultClassNames.month_grid),
+        weekdays: cn(styles.weekdays, defaultClassNames.weekdays),
+        weekday: cn(styles.weekday, defaultClassNames.weekday),
+        week: cn(styles.week, defaultClassNames.week),
+        week_number_header: cn(styles.weekNumberHeader, defaultClassNames.week_number_header),
+        week_number: cn(styles.weekNumber, defaultClassNames.week_number),
         day: cn(
-          'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
-          props.showWeekNumber
-            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
-            : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
+          styles.day,
+          props.showWeekNumber ? undefined : styles.dayFirstSelected,
           defaultClassNames.day,
         ),
-        range_start: cn(
-          'relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',
-          defaultClassNames.range_start,
-        ),
-        range_middle: cn('rounded-none', defaultClassNames.range_middle),
-        range_end: cn(
-          'relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',
-          defaultClassNames.range_end,
-        ),
-        today: cn(
-          'rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none',
-          defaultClassNames.today,
-        ),
-        outside: cn(
-          'text-muted-foreground aria-selected:text-muted-foreground',
-          defaultClassNames.outside,
-        ),
-        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
-        hidden: cn('invisible', defaultClassNames.hidden),
+        range_start: cn(styles.rangeStart, defaultClassNames.range_start),
+        range_middle: cn(styles.rangeMiddle, defaultClassNames.range_middle),
+        range_end: cn(styles.rangeEnd, defaultClassNames.range_end),
+        today: cn(styles.today, defaultClassNames.today),
+        outside: cn(styles.outside, defaultClassNames.outside),
+        disabled: cn(styles.disabled, defaultClassNames.disabled),
+        hidden: cn(styles.hidden, defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
@@ -118,22 +84,20 @@ function Calendar({
         },
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === 'left') {
-            return <CaretLeftIcon className={cn('size-4', className)} {...props} />;
+            return <CaretLeftIcon className={cn(styles.chevron, className)} {...props} />;
           }
 
           if (orientation === 'right') {
-            return <CaretRightIcon className={cn('size-4', className)} {...props} />;
+            return <CaretRightIcon className={cn(styles.chevron, className)} {...props} />;
           }
 
-          return <CaretDownIcon className={cn('size-4', className)} {...props} />;
+          return <CaretDownIcon className={cn(styles.chevron, className)} {...props} />;
         },
         DayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,
         WeekNumber: ({ children, ...props }) => {
           return (
             <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
+              <div className={styles.weekNumberCell}>{children}</div>
             </td>
           );
         },
@@ -172,11 +136,7 @@ function CalendarDayButton({
       data-range-start={modifiers.range_start}
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
-      className={cn(
-        'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70',
-        defaultClassNames.day,
-        className,
-      )}
+      className={cn(styles.dayButton, defaultClassNames.day, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/card/card.module.css b/packages/react/src/components/ui/card/card.module.css
new file mode 100644
index 00000000..048178e2
--- /dev/null
+++ b/packages/react/src/components/ui/card/card.module.css
@@ -0,0 +1,95 @@
+.card {
+  --card-spacing: calc(var(--spacing, 0.25rem) * 6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-spacing);
+  overflow: hidden;
+  border-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.4));
+  background-color: var(--card);
+  padding-block: var(--card-spacing);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--card-foreground);
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  outline: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+.card[data-size='sm'] {
+  --card-spacing: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.card:has(> img:first-child) {
+  padding-top: 0;
+}
+
+.card > img:first-child {
+  border-top-left-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.4));
+  border-top-right-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.4));
+}
+
+.card > img:last-child {
+  border-bottom-left-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.4));
+  border-bottom-right-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.4));
+}
+
+.header {
+  display: grid;
+  grid-auto-rows: min-content;
+  align-items: start;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  border-top-left-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.4));
+  border-top-right-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.4));
+  padding-inline: var(--card-spacing);
+}
+
+.header:has([data-slot='card-action']) {
+  grid-template-columns: 1fr auto;
+}
+
+.header:has([data-slot='card-description']) {
+  grid-template-rows: auto auto;
+}
+
+.header:global(.border-b) {
+  padding-bottom: var(--card-spacing);
+}
+
+.title {
+  font-family: var(--font-heading, var(--font-sans, sans-serif));
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+.card[data-size='sm'] .title {
+  font-size: 0.875rem;
+}
+
+.description {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+.action {
+  grid-column-start: 2;
+  grid-row: span 2;
+  grid-row-start: 1;
+  align-self: start;
+  justify-self: end;
+}
+
+.content {
+  padding-inline: var(--card-spacing);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  border-bottom-left-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.4));
+  border-bottom-right-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.4));
+  padding-inline: var(--card-spacing);
+}
+
+.footer:global(.border-t) {
+  padding-top: var(--card-spacing);
+}
diff --git a/packages/react/src/components/ui/card/card.tsx b/packages/react/src/components/ui/card/card.tsx
index 17a9a5cb..f00d50e3 100644
--- a/packages/react/src/components/ui/card/card.tsx
+++ b/packages/react/src/components/ui/card/card.tsx
@@ -2,87 +2,42 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
+import styles from './card.module.css';
+
 function Card({
   className,
   size = 'default',
   ...props
 }: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
   return (
-    <div
-      data-slot="card"
-      data-size={size}
-      className={cn(
-        'group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
-        className,
-      )}
-      {...props}
-    />
+    <div data-slot="card" data-size={size} className={cn(styles.card, className)} {...props} />
   );
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="card-header" className={cn(styles.header, className)} {...props} />;
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn(
-        'font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="card-title" className={cn(styles.title, className)} {...props} />;
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
-      data-slot="card-description"
-      className={cn('text-sm text-muted-foreground', className)}
-      {...props}
-    />
+    <div data-slot="card-description" className={cn(styles.description, className)} {...props} />
   );
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
-      {...props}
-    />
-  );
+  return <div data-slot="card-action" className={cn(styles.action, className)} {...props} />;
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div data-slot="card-content" className={cn('px-(--card-spacing)', className)} {...props} />
-  );
+  return <div data-slot="card-content" className={cn(styles.content, className)} {...props} />;
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn(
-        'flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="card-footer" className={cn(styles.footer, className)} {...props} />;
 }
 
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
diff --git a/packages/react/src/components/ui/carousel/carousel.module.css b/packages/react/src/components/ui/carousel/carousel.module.css
new file mode 100644
index 00000000..40b7d5b0
--- /dev/null
+++ b/packages/react/src/components/ui/carousel/carousel.module.css
@@ -0,0 +1,77 @@
+.root {
+  position: relative;
+}
+
+.viewport {
+  overflow: hidden;
+}
+
+.track {
+  display: flex;
+}
+
+.trackVertical {
+  margin-top: calc(var(--spacing, 0.25rem) * -4);
+  flex-direction: column;
+}
+
+.trackHorizontal {
+  margin-left: calc(var(--spacing, 0.25rem) * -4);
+}
+
+.item {
+  min-width: 0;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: 100%;
+}
+
+.itemHorizontal {
+  padding-left: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.itemVertical {
+  padding-top: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.navButton {
+  position: absolute;
+  touch-action: manipulation;
+  border-radius: 9999px;
+}
+
+.navPreviousHorizontal {
+  inset-block: 0;
+  left: -3rem;
+  margin-block: auto;
+}
+
+.navNextHorizontal {
+  inset-block: 0;
+  right: -3rem;
+  margin-block: auto;
+}
+
+.navPreviousVertical {
+  top: -3rem;
+  left: 50%;
+  transform: translateX(-50%) rotate(90deg);
+}
+
+.navNextVertical {
+  bottom: -3rem;
+  left: 50%;
+  transform: translateX(-50%) rotate(90deg);
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/packages/react/src/components/ui/carousel/carousel.tsx b/packages/react/src/components/ui/carousel/carousel.tsx
index 5bb9e19d..b5a4cf8c 100644
--- a/packages/react/src/components/ui/carousel/carousel.tsx
+++ b/packages/react/src/components/ui/carousel/carousel.tsx
@@ -8,6 +8,8 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react';
 
+import styles from './carousel.module.css';
+
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
@@ -118,7 +120,7 @@ function Carousel({
     >
       <div
         onKeyDownCapture={handleKeyDown}
-        className={cn('relative', className)}
+        className={cn(styles.root, className)}
         role="region"
         aria-roledescription="carousel"
         data-slot="carousel"
@@ -134,9 +136,13 @@ function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
   const { carouselRef, orientation } = useCarousel();
 
   return (
-    <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
+    <div ref={carouselRef} className={styles.viewport} data-slot="carousel-content">
       <div
-        className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
+        className={cn(
+          styles.track,
+          orientation === 'horizontal' ? styles.trackHorizontal : styles.trackVertical,
+          className,
+        )}
         {...props}
       />
     </div>
@@ -152,8 +158,8 @@ function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
       aria-roledescription="slide"
       data-slot="carousel-item"
       className={cn(
-        'min-w-0 shrink-0 grow-0 basis-full',
-        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        styles.item,
+        orientation === 'horizontal' ? styles.itemHorizontal : styles.itemVertical,
         className,
       )}
       {...props}
@@ -175,10 +181,8 @@ function CarouselPrevious({
       variant={variant}
       size={size}
       className={cn(
-        'absolute touch-manipulation rounded-full',
-        orientation === 'horizontal'
-          ? 'inset-y-0 -left-12 my-auto'
-          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        styles.navButton,
+        orientation === 'horizontal' ? styles.navPreviousHorizontal : styles.navPreviousVertical,
         className,
       )}
       disabled={!canScrollPrev}
@@ -186,7 +190,7 @@ function CarouselPrevious({
       {...props}
     >
       <CaretLeftIcon />
-      <span className="sr-only">Previous slide</span>
+      <span className={styles.srOnly}>Previous slide</span>
     </Button>
   );
 }
@@ -205,10 +209,8 @@ function CarouselNext({
       variant={variant}
       size={size}
       className={cn(
-        'absolute touch-manipulation rounded-full',
-        orientation === 'horizontal'
-          ? 'inset-y-0 -right-12 my-auto'
-          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        styles.navButton,
+        orientation === 'horizontal' ? styles.navNextHorizontal : styles.navNextVertical,
         className,
       )}
       disabled={!canScrollNext}
@@ -216,7 +218,7 @@ function CarouselNext({
       {...props}
     >
       <CaretRightIcon />
-      <span className="sr-only">Next slide</span>
+      <span className={styles.srOnly}>Next slide</span>
     </Button>
   );
 }
diff --git a/packages/react/src/components/ui/checkbox/checkbox.module.css b/packages/react/src/components/ui/checkbox/checkbox.module.css
new file mode 100644
index 00000000..6d768897
--- /dev/null
+++ b/packages/react/src/components/ui/checkbox/checkbox.module.css
@@ -0,0 +1,77 @@
+.checkbox {
+  position: relative;
+  display: flex;
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--input);
+  border-radius: 4px;
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  transition: box-shadow 150ms ease;
+  outline: none;
+}
+
+.checkbox::after {
+  content: '';
+  position: absolute;
+  inset: -0.5rem -0.75rem;
+}
+
+:global([class*='group/field']:has(:disabled)) .checkbox {
+  opacity: 0.5;
+}
+
+.checkbox:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.checkbox[aria-invalid='true'] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .checkbox {
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+}
+
+:global(.dark) .checkbox[aria-invalid='true'] {
+  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.checkbox[data-checked],
+.checkbox[aria-checked='true'] {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+:global(.dark) .checkbox[data-checked],
+:global(.dark) .checkbox[aria-checked='true'] {
+  background-color: var(--primary);
+}
+
+.checkbox[aria-invalid='true'][data-checked],
+.checkbox[aria-invalid='true'][aria-checked='true'] {
+  border-color: var(--primary);
+}
+
+.indicator {
+  display: grid;
+  place-content: center;
+  color: currentcolor;
+  transition: none;
+}
+
+.indicator svg {
+  width: calc(var(--spacing, 0.25rem) * 3.5);
+  height: calc(var(--spacing, 0.25rem) * 3.5);
+}
diff --git a/packages/react/src/components/ui/checkbox/checkbox.tsx b/packages/react/src/components/ui/checkbox/checkbox.tsx
index b5fed517..61ea54a0 100644
--- a/packages/react/src/components/ui/checkbox/checkbox.tsx
+++ b/packages/react/src/components/ui/checkbox/checkbox.tsx
@@ -1,24 +1,20 @@
 'use client';
 
 import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { CheckIcon } from '@phosphor-icons/react';
 
 import { cn } from '@/lib/utils';
-import { CheckIcon } from '@phosphor-icons/react';
+
+import styles from './checkbox.module.css';
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
-      className={cn(
-        'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
-        className,
-      )}
+      className={cn(styles.checkbox, className)}
       {...props}
     >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
-      >
+      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className={styles.indicator}>
         <CheckIcon />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
diff --git a/packages/react/src/components/ui/combobox/combobox.module.css b/packages/react/src/components/ui/combobox/combobox.module.css
new file mode 100644
index 00000000..88cc681c
--- /dev/null
+++ b/packages/react/src/components/ui/combobox/combobox.module.css
@@ -0,0 +1,216 @@
+.trigger svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.triggerIcon {
+  pointer-events: none;
+  width: 1rem;
+  height: 1rem;
+  color: var(--muted-foreground);
+}
+
+.inputGroupWide {
+  width: auto;
+}
+
+.comboboxTriggerButton[data-pressed] {
+  background-color: transparent;
+}
+
+.positioner {
+  isolation: isolate;
+  z-index: 50;
+}
+
+.content {
+  position: relative;
+  max-height: var(--available-height, 24rem);
+  width: var(--anchor-width, auto);
+  max-width: var(--available-width, 100%);
+  min-width: calc(var(--anchor-width, 12rem) + calc(var(--spacing, 0.25rem) * 7));
+  overflow: hidden;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  outline: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+.content[data-chips='true'] {
+  min-width: var(--anchor-width, auto);
+}
+
+.content :global([data-slot='input-group']) {
+  margin: calc(var(--spacing, 0.25rem) * 1);
+  margin-bottom: 0;
+  height: calc(var(--spacing, 0.25rem) * 8);
+  border-color: color-mix(in oklch, var(--input) 30%, transparent);
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+  box-shadow: none;
+}
+
+.list {
+  max-height: min(
+    calc(calc(var(--spacing, 0.25rem) * 72) - calc(var(--spacing, 0.25rem) * 9)),
+    calc(var(--available-height, 24rem) - calc(var(--spacing, 0.25rem) * 9))
+  );
+  scroll-padding-block: calc(var(--spacing, 0.25rem) * 1);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: calc(var(--spacing, 0.25rem) * 1);
+  scrollbar-width: none;
+}
+
+.list::-webkit-scrollbar {
+  display: none;
+}
+
+.list[data-empty] {
+  padding: 0;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  cursor: default;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 8)
+    calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  outline: none;
+  user-select: none;
+}
+
+.item[data-highlighted] {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.item[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.item svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.itemIndicator {
+  pointer-events: none;
+  position: absolute;
+  right: calc(var(--spacing, 0.25rem) * 2);
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.label {
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+
+.empty {
+  display: none;
+  width: 100%;
+  justify-content: center;
+  padding-block: calc(var(--spacing, 0.25rem) * 2);
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+.content[data-empty] .empty {
+  display: flex;
+}
+
+.separator {
+  margin-block: calc(var(--spacing, 0.25rem) * 1);
+  margin-inline: calc(var(--spacing, 0.25rem) * -1);
+  height: 1px;
+  background-color: var(--border);
+}
+
+.chips {
+  display: flex;
+  min-height: calc(var(--spacing, 0.25rem) * 9);
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+  border: 1px solid var(--input);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: transparent;
+  background-clip: padding-box;
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2.5);
+  font-size: 0.875rem;
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  transition:
+    color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.chips:focus-within {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.chips:has([aria-invalid='true']) {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .chips {
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+}
+
+.chips:has([data-slot='combobox-chip']) {
+  padding-inline: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.chip {
+  display: flex;
+  width: fit-content;
+  height: calc(var(--spacing, 0.25rem) * 5.5);
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+  background-color: var(--muted);
+  padding-inline: calc(var(--spacing, 0.25rem) * 1.5);
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--foreground);
+}
+
+.chip:has([data-slot='combobox-chip-remove']) {
+  padding-right: 0;
+}
+
+.chipRemove {
+  margin-left: calc(var(--spacing, 0.25rem) * -1);
+  opacity: 0.5;
+}
+
+.chipRemove:hover {
+  opacity: 1;
+}
+
+.chipsInput {
+  min-width: 4rem;
+  flex: 1;
+  outline: none;
+}
+
+.group:has([data-slot='combobox-clear']) .comboboxTriggerButton {
+  display: none;
+}
diff --git a/packages/react/src/components/ui/combobox/combobox.tsx b/packages/react/src/components/ui/combobox/combobox.tsx
index c6afe3b6..98058a77 100644
--- a/packages/react/src/components/ui/combobox/combobox.tsx
+++ b/packages/react/src/components/ui/combobox/combobox.tsx
@@ -13,6 +13,8 @@ import {
 } from '@/components/ui/input-group';
 import { CaretDownIcon, XIcon, CheckIcon } from '@phosphor-icons/react';
 
+import styles from './combobox.module.css';
+
 const Combobox = ComboboxPrimitive.Root;
 
 function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
@@ -23,11 +25,11 @@ function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Tr
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
-      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      className={cn(styles.trigger, className)}
       {...props}
     >
       {children}
-      <CaretDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      <CaretDownIcon className={styles.triggerIcon} />
     </ComboboxPrimitive.Trigger>
   );
 }
@@ -57,7 +59,7 @@ function ComboboxInput({
   showClear?: boolean;
 }) {
   return (
-    <InputGroup className={cn('w-auto', className)}>
+    <InputGroup className={cn(styles.inputGroupWide, className)}>
       <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
       <InputGroupAddon align="inline-end">
         {showTrigger && (
@@ -66,7 +68,7 @@ function ComboboxInput({
             variant="ghost"
             render={<ComboboxTrigger />}
             data-slot="input-group-button"
-            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            className={styles.comboboxTriggerButton}
             disabled={disabled}
           />
         )}
@@ -98,15 +100,12 @@ function ComboboxContent({
         align={align}
         alignOffset={alignOffset}
         anchor={anchor}
-        className="isolate z-50"
+        className={styles.positioner}
       >
         <ComboboxPrimitive.Popup
           data-slot="combobox-content"
           data-chips={!!anchor}
-          className={cn(
-            'group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-            className,
-          )}
+          className={cn(styles.content, className)}
           {...props}
         />
       </ComboboxPrimitive.Positioner>
@@ -118,10 +117,7 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
   return (
     <ComboboxPrimitive.List
       data-slot="combobox-list"
-      className={cn(
-        'no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0',
-        className,
-      )}
+      className={cn(styles.list, className)}
       {...props}
     />
   );
@@ -131,18 +127,11 @@ function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.
   return (
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
-      className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-muted data-highlighted:text-foreground not-data-[variant=destructive]:data-highlighted:**:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.item, className)}
       {...props}
     >
       {children}
-      <ComboboxPrimitive.ItemIndicator
-        render={
-          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
-        }
-      >
+      <ComboboxPrimitive.ItemIndicator render={<span className={styles.itemIndicator} />}>
         <CheckIcon className="pointer-events-none" />
       </ComboboxPrimitive.ItemIndicator>
     </ComboboxPrimitive.Item>
@@ -159,7 +148,7 @@ function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Pro
   return (
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-label"
-      className={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
+      className={cn(styles.label, className)}
       {...props}
     />
   );
@@ -173,10 +162,7 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
   return (
     <ComboboxPrimitive.Empty
       data-slot="combobox-empty"
-      className={cn(
-        'hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex',
-        className,
-      )}
+      className={cn(styles.empty, className)}
       {...props}
     />
   );
@@ -186,7 +172,7 @@ function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.
   return (
     <ComboboxPrimitive.Separator
       data-slot="combobox-separator"
-      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      className={cn(styles.separator, className)}
       {...props}
     />
   );
@@ -199,10 +185,7 @@ function ComboboxChips({
   return (
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
-      className={cn(
-        'flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40',
-        className,
-      )}
+      className={cn(styles.chips, className)}
       {...props}
     />
   );
@@ -219,17 +202,14 @@ function ComboboxChip({
   return (
     <ComboboxPrimitive.Chip
       data-slot="combobox-chip"
-      className={cn(
-        'flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
-        className,
-      )}
+      className={cn(styles.chip, className)}
       {...props}
     >
       {children}
       {showRemove && (
         <ComboboxPrimitive.ChipRemove
           render={<Button variant="ghost" size="icon-xs" />}
-          className="-ml-1 opacity-50 hover:opacity-100"
+          className={styles.chipRemove}
           data-slot="combobox-chip-remove"
         >
           <XIcon className="pointer-events-none" />
@@ -243,7 +223,7 @@ function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Pro
   return (
     <ComboboxPrimitive.Input
       data-slot="combobox-chip-input"
-      className={cn('min-w-16 flex-1 outline-none', className)}
+      className={cn(styles.chipsInput, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/command/command.module.css b/packages/react/src/components/ui/command/command.module.css
new file mode 100644
index 00000000..fe20cb9c
--- /dev/null
+++ b/packages/react/src/components/ui/command/command.module.css
@@ -0,0 +1,163 @@
+.root {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.2));
+  background-color: var(--popover);
+  padding: calc(var(--spacing, 0.25rem) * 1);
+  color: var(--popover-foreground);
+}
+
+.dialogContent {
+  top: 33.333333%;
+  transform: translate(-50%, 0);
+  overflow: hidden;
+  padding: 0;
+  border-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.2));
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.inputWrapper {
+  padding: calc(var(--spacing, 0.25rem) * 1);
+  padding-bottom: 0;
+}
+
+.inputGroup {
+  height: calc(var(--spacing, 0.25rem) * 8);
+  border-radius: var(--radius-lg, calc(var(--radius, 0.625rem) * 1));
+  border-color: color-mix(in oklch, var(--input) 30%, transparent);
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+  box-shadow: none;
+}
+
+.inputGroup :global([data-slot='input-group-addon']) {
+  padding-left: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.input {
+  width: 100%;
+  font-size: 0.875rem;
+  outline: none;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.searchIcon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.list {
+  max-height: 18rem;
+  scroll-padding-block: calc(var(--spacing, 0.25rem) * 1);
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: none;
+  scrollbar-width: none;
+}
+
+.list::-webkit-scrollbar {
+  display: none;
+}
+
+.empty {
+  padding-block: calc(var(--spacing, 0.25rem) * 6);
+  text-align: center;
+  font-size: 0.875rem;
+}
+
+.group {
+  overflow: hidden;
+  padding: calc(var(--spacing, 0.25rem) * 1);
+  color: var(--foreground);
+}
+
+.group :global([cmdk-group-heading]) {
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+
+.separator {
+  margin-inline: calc(var(--spacing, 0.25rem) * -1);
+  height: 1px;
+  width: auto;
+  background-color: var(--border);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  cursor: default;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  outline: none;
+  user-select: none;
+}
+
+.item[data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.item[data-selected='true'] {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.item svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.item[data-selected='true'] svg {
+  color: var(--foreground);
+}
+
+.itemCheck {
+  margin-left: auto;
+  opacity: 0;
+}
+
+.item[data-checked='true'] .itemCheck {
+  opacity: 1;
+}
+
+.item:has([data-slot='command-shortcut']) .itemCheck {
+  display: none;
+}
+
+.shortcut {
+  margin-left: auto;
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+  color: var(--muted-foreground);
+}
+
+.item[data-selected='true'] .shortcut {
+  color: var(--foreground);
+}
diff --git a/packages/react/src/components/ui/command/command.tsx b/packages/react/src/components/ui/command/command.tsx
index f60839ea..9b73e0fa 100644
--- a/packages/react/src/components/ui/command/command.tsx
+++ b/packages/react/src/components/ui/command/command.tsx
@@ -14,17 +14,10 @@ import {
 import { InputGroup, InputGroupAddon } from '@/components/ui/input-group';
 import { MagnifyingGlassIcon, CheckIcon } from '@phosphor-icons/react';
 
+import styles from './command.module.css';
+
 function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        'flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <CommandPrimitive data-slot="command" className={cn(styles.root, className)} {...props} />;
 }
 
 function CommandDialog({
@@ -43,12 +36,12 @@ function CommandDialog({
 }) {
   return (
     <Dialog {...props}>
-      <DialogHeader className="sr-only">
+      <DialogHeader className={styles.srOnly}>
         <DialogTitle>{title}</DialogTitle>
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
       <DialogContent
-        className={cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className)}
+        className={cn(styles.dialogContent, className)}
         showCloseButton={showCloseButton}
       >
         {children}
@@ -62,18 +55,15 @@ function CommandInput({
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
-    <div data-slot="command-input-wrapper" className="p-1 pb-0">
-      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+    <div data-slot="command-input-wrapper" className={styles.inputWrapper}>
+      <InputGroup className={styles.inputGroup}>
         <CommandPrimitive.Input
           data-slot="command-input"
-          className={cn(
-            'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-            className,
-          )}
+          className={cn(styles.input, className)}
           {...props}
         />
         <InputGroupAddon>
-          <MagnifyingGlassIcon className="size-4 shrink-0 opacity-50" />
+          <MagnifyingGlassIcon className={styles.searchIcon} />
         </InputGroupAddon>
       </InputGroup>
     </div>
@@ -84,10 +74,7 @@ function CommandList({ className, ...props }: React.ComponentProps<typeof Comman
   return (
     <CommandPrimitive.List
       data-slot="command-list"
-      className={cn(
-        'no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none',
-        className,
-      )}
+      className={cn(styles.list, className)}
       {...props}
     />
   );
@@ -100,7 +87,7 @@ function CommandEmpty({
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
-      className={cn('py-6 text-center text-sm', className)}
+      className={cn(styles.empty, className)}
       {...props}
     />
   );
@@ -113,10 +100,7 @@ function CommandGroup({
   return (
     <CommandPrimitive.Group
       data-slot="command-group"
-      className={cn(
-        'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',
-        className,
-      )}
+      className={cn(styles.group, className)}
       {...props}
     />
   );
@@ -129,7 +113,7 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn('-mx-1 h-px w-auto bg-border', className)}
+      className={cn(styles.separator, className)}
       {...props}
     />
   );
@@ -143,28 +127,18 @@ function CommandItem({
   return (
     <CommandPrimitive.Item
       data-slot="command-item"
-      className={cn(
-        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:**:[svg]:text-foreground",
-        className,
-      )}
+      className={cn(styles.item, className)}
       {...props}
     >
       {children}
-      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+      <CheckIcon className={styles.itemCheck} />
     </CommandPrimitive.Item>
   );
 }
 
 function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
   return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        'ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground',
-        className,
-      )}
-      {...props}
-    />
+    <span data-slot="command-shortcut" className={cn(styles.shortcut, className)} {...props} />
   );
 }
 
diff --git a/packages/react/src/components/ui/context-menu/context-menu.module.css b/packages/react/src/components/ui/context-menu/context-menu.module.css
new file mode 100644
index 00000000..5f6f04fc
--- /dev/null
+++ b/packages/react/src/components/ui/context-menu/context-menu.module.css
@@ -0,0 +1,194 @@
+.trigger {
+  user-select: none;
+}
+
+.positioner {
+  isolation: isolate;
+  z-index: 50;
+  outline: none;
+}
+
+.content {
+  z-index: 50;
+  max-height: var(--available-height, 24rem);
+  min-width: 9rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: var(--popover);
+  padding: calc(var(--spacing, 0.25rem) * 1);
+  font-size: 0.875rem;
+  color: var(--popover-foreground);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  outline: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+.subContent {
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+}
+
+.label {
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+
+.label[data-inset] {
+  padding-left: calc(var(--spacing, 0.25rem) * 8);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  cursor: default;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  outline: none;
+  user-select: none;
+}
+
+.item:focus {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.item:focus svg {
+  color: var(--foreground);
+}
+
+.item[data-inset] {
+  padding-left: calc(var(--spacing, 0.25rem) * 8);
+}
+
+.item[data-variant='destructive'] {
+  color: var(--destructive);
+}
+
+.item[data-variant='destructive']:focus {
+  background-color: color-mix(in oklch, var(--destructive) 10%, transparent);
+  color: var(--destructive);
+}
+
+:global(.dark) .item[data-variant='destructive']:focus {
+  background-color: color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+.item[data-variant='destructive'] svg {
+  color: var(--destructive);
+}
+
+.item[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.item svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.subTrigger {
+  display: flex;
+  cursor: default;
+  align-items: center;
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  outline: none;
+  user-select: none;
+}
+
+.subTrigger:focus {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.subTrigger[data-inset] {
+  padding-left: calc(var(--spacing, 0.25rem) * 8);
+}
+
+.subTrigger[data-open] {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.subTrigger svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.subTriggerCaret {
+  margin-left: auto;
+}
+
+.checkItem {
+  position: relative;
+  display: flex;
+  cursor: default;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 8)
+    calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  outline: none;
+  user-select: none;
+}
+
+.checkItem:focus {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.checkItem[data-checked] {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.checkItem[data-inset] {
+  padding-left: calc(var(--spacing, 0.25rem) * 8);
+}
+
+.checkItem[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.checkItem svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.itemIndicator {
+  pointer-events: none;
+  position: absolute;
+  right: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.separator {
+  margin-block: calc(var(--spacing, 0.25rem) * 1);
+  margin-inline: calc(var(--spacing, 0.25rem) * -1);
+  height: 1px;
+  background-color: var(--border);
+}
+
+.shortcut {
+  margin-left: auto;
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+  color: var(--muted-foreground);
+}
+
+.item:focus .shortcut {
+  color: var(--foreground);
+}
diff --git a/packages/react/src/components/ui/context-menu/context-menu.tsx b/packages/react/src/components/ui/context-menu/context-menu.tsx
index 99181be6..f2ea4b7b 100644
--- a/packages/react/src/components/ui/context-menu/context-menu.tsx
+++ b/packages/react/src/components/ui/context-menu/context-menu.tsx
@@ -7,6 +7,8 @@ import type { ContextMenuItemVariantName } from '@surfnet/curve-contracts';
 import { cn } from '@/lib/utils';
 import { CaretRightIcon, CheckIcon } from '@phosphor-icons/react';
 
+import styles from './context-menu.module.css';
+
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
@@ -19,7 +21,7 @@ function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigge
   return (
     <ContextMenuPrimitive.Trigger
       data-slot="context-menu-trigger"
-      className={cn('select-none', className)}
+      className={cn(styles.trigger, className)}
       {...props}
     />
   );
@@ -37,7 +39,7 @@ function ContextMenuContent({
   return (
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.Positioner
-        className="isolate z-50 outline-none"
+        className={styles.positioner}
         align={align}
         alignOffset={alignOffset}
         side={side}
@@ -45,10 +47,7 @@ function ContextMenuContent({
       >
         <ContextMenuPrimitive.Popup
           data-slot="context-menu-content"
-          className={cn(
-            'z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-            className,
-          )}
+          className={cn(styles.content, className)}
           {...props}
         />
       </ContextMenuPrimitive.Positioner>
@@ -71,10 +70,7 @@ function ContextMenuLabel({
     <ContextMenuPrimitive.GroupLabel
       data-slot="context-menu-label"
       data-inset={inset}
-      className={cn(
-        'px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8',
-        className,
-      )}
+      className={cn(styles.label, className)}
       {...props}
     />
   );
@@ -94,10 +90,7 @@ function ContextMenuItem({
       data-slot="context-menu-item"
       data-inset={inset}
       data-variant={variant}
-      className={cn(
-        "group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-muted focus:text-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-foreground data-[variant=destructive]:*:[svg]:text-destructive",
-        className,
-      )}
+      className={cn(styles.item, className)}
       {...props}
     />
   );
@@ -119,14 +112,11 @@ function ContextMenuSubTrigger({
     <ContextMenuPrimitive.SubmenuTrigger
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
-      className={cn(
-        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-muted focus:text-foreground data-inset:pl-8 data-open:bg-secondary data-open:text-secondary-foreground data-open:hover:bg-secondary data-open:focus:bg-secondary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.subTrigger, className)}
       {...props}
     >
       {children}
-      <CaretRightIcon className="ml-auto" />
+      <CaretRightIcon className={styles.subTriggerCaret} />
     </ContextMenuPrimitive.SubmenuTrigger>
   );
 }
@@ -135,7 +125,7 @@ function ContextMenuSubContent({ ...props }: React.ComponentProps<typeof Context
   return (
     <ContextMenuContent
       data-slot="context-menu-sub-content"
-      className="shadow-lg"
+      className={styles.subContent}
       side="right"
       {...props}
     />
@@ -155,14 +145,11 @@ function ContextMenuCheckboxItem({
     <ContextMenuPrimitive.CheckboxItem
       data-slot="context-menu-checkbox-item"
       data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-muted focus:text-foreground data-checked:bg-secondary data-checked:text-secondary-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.checkItem, className)}
       checked={checked}
       {...props}
     >
-      <span className="pointer-events-none absolute right-2">
+      <span className={styles.itemIndicator}>
         <ContextMenuPrimitive.CheckboxItemIndicator>
           <CheckIcon />
         </ContextMenuPrimitive.CheckboxItemIndicator>
@@ -188,13 +175,10 @@ function ContextMenuRadioItem({
     <ContextMenuPrimitive.RadioItem
       data-slot="context-menu-radio-item"
       data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-muted focus:text-foreground data-checked:bg-secondary data-checked:text-secondary-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.checkItem, className)}
       {...props}
     >
-      <span className="pointer-events-none absolute right-2">
+      <span className={styles.itemIndicator}>
         <ContextMenuPrimitive.RadioItemIndicator>
           <CheckIcon />
         </ContextMenuPrimitive.RadioItemIndicator>
@@ -208,7 +192,7 @@ function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Sepa
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      className={cn(styles.separator, className)}
       {...props}
     />
   );
@@ -216,14 +200,7 @@ function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Sepa
 
 function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
   return (
-    <span
-      data-slot="context-menu-shortcut"
-      className={cn(
-        'ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-foreground',
-        className,
-      )}
-      {...props}
-    />
+    <span data-slot="context-menu-shortcut" className={cn(styles.shortcut, className)} {...props} />
   );
 }
 
diff --git a/packages/react/src/components/ui/data-table/data-table.module.css b/packages/react/src/components/ui/data-table/data-table.module.css
new file mode 100644
index 00000000..962acc8b
--- /dev/null
+++ b/packages/react/src/components/ui/data-table/data-table.module.css
@@ -0,0 +1,37 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  padding-block: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.content {
+  overflow: hidden;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  border: 1px solid var(--border);
+}
+
+.emptyCell {
+  height: 6rem;
+  text-align: center;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  padding-block: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.selectionSummary {
+  flex: 1;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--muted-foreground);
+}
+
+.paginationActions {
+  display: flex;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
diff --git a/packages/react/src/components/ui/data-table/data-table.tsx b/packages/react/src/components/ui/data-table/data-table.tsx
index b053d02c..10ce932a 100644
--- a/packages/react/src/components/ui/data-table/data-table.tsx
+++ b/packages/react/src/components/ui/data-table/data-table.tsx
@@ -14,15 +14,13 @@ import {
   TableRow,
 } from '@/components/ui/table';
 
+import styles from './data-table.module.css';
+
 interface DataTableToolbarProps extends React.ComponentProps<'div'> {}
 
 function DataTableToolbar({ className, ...props }: DataTableToolbarProps) {
   return (
-    <div
-      data-slot="data-table-toolbar"
-      className={cn('flex items-center gap-2 py-4', className)}
-      {...props}
-    />
+    <div data-slot="data-table-toolbar" className={cn(styles.toolbar, className)} {...props} />
   );
 }
 
@@ -41,11 +39,7 @@ function DataTableContent<TData>({
   ...props
 }: DataTableContentProps<TData>) {
   return (
-    <div
-      data-slot="data-table-content"
-      className={cn('overflow-hidden rounded-md border', className)}
-      {...props}
-    >
+    <div data-slot="data-table-content" className={cn(styles.content, className)} {...props}>
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -73,7 +67,7 @@ function DataTableContent<TData>({
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
+              <TableCell colSpan={columns.length} className={styles.emptyCell}>
                 {noResultsLabel}
               </TableCell>
             </TableRow>
@@ -104,18 +98,14 @@ function DataTablePagination<TData>({
   ...props
 }: DataTablePaginationProps<TData>) {
   return (
-    <div
-      data-slot="data-table-pagination"
-      className={cn('flex items-center justify-end gap-2 py-4', className)}
-      {...props}
-    >
-      <div className="flex-1 text-sm text-muted-foreground">
+    <div data-slot="data-table-pagination" className={cn(styles.pagination, className)} {...props}>
+      <div className={styles.selectionSummary}>
         {selectionLabel(
           table.getFilteredSelectedRowModel().rows.length,
           table.getFilteredRowModel().rows.length,
         )}
       </div>
-      <div className="flex gap-2">
+      <div className={styles.paginationActions}>
         <Button
           variant="outline"
           size="sm"
diff --git a/packages/react/src/components/ui/date-picker/date-picker.module.css b/packages/react/src/components/ui/date-picker/date-picker.module.css
new file mode 100644
index 00000000..1cc67ae2
--- /dev/null
+++ b/packages/react/src/components/ui/date-picker/date-picker.module.css
@@ -0,0 +1,20 @@
+.trigger {
+  width: 14rem;
+  justify-content: flex-start;
+  text-align: left;
+  font-weight: 400;
+}
+
+.triggerRange {
+  width: 18rem;
+}
+
+.placeholder {
+  color: var(--muted-foreground);
+}
+
+.popoverContent {
+  width: auto;
+  padding: 0;
+  gap: 0;
+}
diff --git a/packages/react/src/components/ui/date-picker/date-picker.tsx b/packages/react/src/components/ui/date-picker/date-picker.tsx
index 464a8220..73b315e6 100644
--- a/packages/react/src/components/ui/date-picker/date-picker.tsx
+++ b/packages/react/src/components/ui/date-picker/date-picker.tsx
@@ -10,6 +10,8 @@ import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 
+import styles from './date-picker.module.css';
+
 function DatePicker({
   date,
   onDateChange,
@@ -29,14 +31,14 @@ function DatePicker({
           <Button
             variant="outline"
             data-slot="date-picker-trigger"
-            className={cn('w-56 justify-start text-left font-normal', triggerClassName)}
+            className={cn(styles.trigger, triggerClassName)}
           />
         }
       >
         <CalendarIcon data-icon="inline-start" />
-        {date ? format(date, 'PPP') : <span className="text-muted-foreground">{placeholder}</span>}
+        {date ? format(date, 'PPP') : <span className={styles.placeholder}>{placeholder}</span>}
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
+      <PopoverContent className={styles.popoverContent} align="start">
         <Calendar mode="single" selected={date} onSelect={onDateChange} {...props} />
       </PopoverContent>
     </Popover>
@@ -62,7 +64,7 @@ function DateRangePicker({
           <Button
             variant="outline"
             data-slot="date-range-picker-trigger"
-            className={cn('w-72 justify-start text-left font-normal', triggerClassName)}
+            className={cn(styles.trigger, styles.triggerRange, triggerClassName)}
           />
         }
       >
@@ -76,10 +78,10 @@ function DateRangePicker({
             format(dateRange.from, 'LLL d, y')
           )
         ) : (
-          <span className="text-muted-foreground">{placeholder}</span>
+          <span className={styles.placeholder}>{placeholder}</span>
         )}
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
+      <PopoverContent className={styles.popoverContent} align="start">
         <Calendar
           mode="range"
           selected={dateRange}
diff --git a/packages/react/src/components/ui/dialog/dialog.module.css b/packages/react/src/components/ui/dialog/dialog.module.css
new file mode 100644
index 00000000..337b2dc5
--- /dev/null
+++ b/packages/react/src/components/ui/dialog/dialog.module.css
@@ -0,0 +1,97 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  isolation: isolate;
+  z-index: 50;
+  background-color: rgb(0 0 0 / 10%);
+}
+
+@supports (backdrop-filter: blur(1px)) {
+  .overlay {
+    backdrop-filter: blur(2px);
+  }
+}
+
+.content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 50;
+  display: grid;
+  width: 100%;
+  max-width: calc(100% - 2rem);
+  transform: translate(-50%, -50%);
+  gap: calc(var(--spacing, 0.25rem) * 6);
+  border-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.2));
+  background-color: var(--popover);
+  padding: calc(var(--spacing, 0.25rem) * 6);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--popover-foreground);
+  outline: none;
+  box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+@media (min-width: 640px) {
+  .content {
+    max-width: 28rem;
+  }
+}
+
+.closeButton {
+  position: absolute;
+  top: calc(var(--spacing, 0.25rem) * 4);
+  right: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.footer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
+
+@media (min-width: 640px) {
+  .footer {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+.title {
+  font-family: var(--font-heading, inherit);
+  font-weight: 500;
+  line-height: 1;
+}
+
+.description {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--muted-foreground);
+}
+
+.description a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.description a:hover {
+  color: var(--foreground);
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/packages/react/src/components/ui/dialog/dialog.tsx b/packages/react/src/components/ui/dialog/dialog.tsx
index 0502a7b3..71b26661 100644
--- a/packages/react/src/components/ui/dialog/dialog.tsx
+++ b/packages/react/src/components/ui/dialog/dialog.tsx
@@ -7,6 +7,8 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { XIcon } from '@phosphor-icons/react';
 
+import styles from './dialog.module.css';
+
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
@@ -27,10 +29,7 @@ function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props)
   return (
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
-      className={cn(
-        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
-        className,
-      )}
+      className={cn(styles.overlay, className)}
       {...props}
     />
   );
@@ -49,20 +48,17 @@ function DialogContent({
       <DialogOverlay />
       <DialogPrimitive.Popup
         data-slot="dialog-content"
-        className={cn(
-          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-          className,
-        )}
+        className={cn(styles.content, className)}
         {...props}
       >
         {children}
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            render={<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm" />}
+            render={<Button variant="ghost" className={styles.closeButton} size="icon-sm" />}
           >
             <XIcon />
-            <span className="sr-only">Close</span>
+            <span className={styles.srOnly}>Close</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Popup>
@@ -71,9 +67,7 @@ function DialogContent({
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div data-slot="dialog-header" className={cn('flex flex-col gap-2', className)} {...props} />
-  );
+  return <div data-slot="dialog-header" className={cn(styles.header, className)} {...props} />;
 }
 
 function DialogFooter({
@@ -85,11 +79,7 @@ function DialogFooter({
   showCloseButton?: boolean;
 }) {
   return (
-    <div
-      data-slot="dialog-footer"
-      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
-      {...props}
-    >
+    <div data-slot="dialog-footer" className={cn(styles.footer, className)} {...props}>
       {children}
       {showCloseButton && (
         <DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>
@@ -102,7 +92,7 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('font-heading leading-none font-medium', className)}
+      className={cn(styles.title, className)}
       {...props}
     />
   );
@@ -112,10 +102,7 @@ function DialogDescription({ className, ...props }: DialogPrimitive.Description.
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn(
-        'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
-        className,
-      )}
+      className={cn(styles.description, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/dropdown-menu/dropdown-menu.module.css b/packages/react/src/components/ui/dropdown-menu/dropdown-menu.module.css
new file mode 100644
index 00000000..edb4a5d8
--- /dev/null
+++ b/packages/react/src/components/ui/dropdown-menu/dropdown-menu.module.css
@@ -0,0 +1,194 @@
+.positioner {
+  isolation: isolate;
+  z-index: 50;
+  outline: none;
+}
+
+.content {
+  z-index: 50;
+  max-height: var(--available-height, 24rem);
+  width: var(--anchor-width, auto);
+  min-width: 8rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: var(--popover);
+  padding: calc(var(--spacing, 0.25rem) * 1);
+  font-size: 0.875rem;
+  color: var(--popover-foreground);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  outline: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+.subContent {
+  width: auto;
+  min-width: 6rem;
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+}
+
+.label {
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+
+.label[data-inset] {
+  padding-left: calc(var(--spacing, 0.25rem) * 8);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  cursor: default;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  outline: none;
+  user-select: none;
+}
+
+.item:focus {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.item[data-inset] {
+  padding-left: calc(var(--spacing, 0.25rem) * 8);
+}
+
+.item[data-variant='destructive'] {
+  color: var(--destructive);
+}
+
+.item[data-variant='destructive']:focus {
+  background-color: color-mix(in oklch, var(--destructive) 10%, transparent);
+  color: var(--destructive);
+}
+
+:global(.dark) .item[data-variant='destructive']:focus {
+  background-color: color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+.item[data-variant='destructive'] svg {
+  color: var(--destructive);
+}
+
+.item[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.item svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.subTrigger {
+  display: flex;
+  cursor: default;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  outline: none;
+  user-select: none;
+}
+
+.subTrigger:focus {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.subTrigger[data-inset] {
+  padding-left: calc(var(--spacing, 0.25rem) * 8);
+}
+
+.subTrigger[data-open],
+.subTrigger[data-popup-open] {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.subTrigger svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.subTriggerCaret {
+  margin-left: auto;
+}
+
+.checkItem {
+  position: relative;
+  display: flex;
+  cursor: default;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 8)
+    calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  outline: none;
+  user-select: none;
+}
+
+.checkItem:focus {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.checkItem[data-checked] {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.checkItem[data-inset] {
+  padding-left: calc(var(--spacing, 0.25rem) * 8);
+}
+
+.checkItem[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.checkItem svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.itemIndicator {
+  pointer-events: none;
+  position: absolute;
+  right: calc(var(--spacing, 0.25rem) * 2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.separator {
+  margin-block: calc(var(--spacing, 0.25rem) * 1);
+  margin-inline: calc(var(--spacing, 0.25rem) * -1);
+  height: 1px;
+  background-color: var(--border);
+}
+
+.shortcut {
+  margin-left: auto;
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+  color: var(--muted-foreground);
+}
+
+.item:focus .shortcut {
+  color: var(--foreground);
+}
diff --git a/packages/react/src/components/ui/dropdown-menu/dropdown-menu.tsx b/packages/react/src/components/ui/dropdown-menu/dropdown-menu.tsx
index 2ceabc92..9a512ebf 100644
--- a/packages/react/src/components/ui/dropdown-menu/dropdown-menu.tsx
+++ b/packages/react/src/components/ui/dropdown-menu/dropdown-menu.tsx
@@ -7,6 +7,8 @@ import type { DropdownMenuItemVariantName } from '@surfnet/curve-contracts';
 import { cn } from '@/lib/utils';
 import { CaretRightIcon, CheckIcon } from '@phosphor-icons/react';
 
+import styles from './dropdown-menu.module.css';
+
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
@@ -31,7 +33,7 @@ function DropdownMenuContent({
   return (
     <MenuPrimitive.Portal>
       <MenuPrimitive.Positioner
-        className="isolate z-50 outline-none"
+        className={styles.positioner}
         align={align}
         alignOffset={alignOffset}
         side={side}
@@ -39,10 +41,7 @@ function DropdownMenuContent({
       >
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
-          className={cn(
-            'z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',
-            className,
-          )}
+          className={cn(styles.content, className)}
           {...props}
         />
       </MenuPrimitive.Positioner>
@@ -65,10 +64,7 @@ function DropdownMenuLabel({
     <MenuPrimitive.GroupLabel
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn(
-        'px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8',
-        className,
-      )}
+      className={cn(styles.label, className)}
       {...props}
     />
   );
@@ -88,10 +84,7 @@ function DropdownMenuItem({
       data-slot="dropdown-menu-item"
       data-inset={inset}
       data-variant={variant}
-      className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-muted focus:text-foreground not-data-[variant=destructive]:focus:**:text-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
-        className,
-      )}
+      className={cn(styles.item, className)}
       {...props}
     />
   );
@@ -113,14 +106,11 @@ function DropdownMenuSubTrigger({
     <MenuPrimitive.SubmenuTrigger
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
-      className={cn(
-        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-muted focus:text-foreground not-data-[variant=destructive]:focus:**:text-foreground data-inset:pl-8 data-popup-open:bg-secondary data-popup-open:text-secondary-foreground data-open:bg-secondary data-open:text-secondary-foreground data-open:hover:bg-secondary data-open:focus:bg-secondary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.subTrigger, className)}
       {...props}
     >
       {children}
-      <CaretRightIcon className="ml-auto" />
+      <CaretRightIcon className={styles.subTriggerCaret} />
     </MenuPrimitive.SubmenuTrigger>
   );
 }
@@ -136,10 +126,7 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
-      className={cn(
-        'w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-        className,
-      )}
+      className={cn(styles.content, styles.subContent, className)}
       align={align}
       alignOffset={alignOffset}
       side={side}
@@ -162,17 +149,11 @@ function DropdownMenuCheckboxItem({
     <MenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-muted focus:text-foreground focus:**:text-foreground data-checked:bg-secondary data-checked:text-secondary-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.checkItem, className)}
       checked={checked}
       {...props}
     >
-      <span
-        className="pointer-events-none absolute right-2 flex items-center justify-center"
-        data-slot="dropdown-menu-checkbox-item-indicator"
-      >
+      <span className={styles.itemIndicator} data-slot="dropdown-menu-checkbox-item-indicator">
         <MenuPrimitive.CheckboxItemIndicator>
           <CheckIcon />
         </MenuPrimitive.CheckboxItemIndicator>
@@ -198,16 +179,10 @@ function DropdownMenuRadioItem({
     <MenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-muted focus:text-foreground focus:**:text-foreground data-checked:bg-secondary data-checked:text-secondary-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.checkItem, className)}
       {...props}
     >
-      <span
-        className="pointer-events-none absolute right-2 flex items-center justify-center"
-        data-slot="dropdown-menu-radio-item-indicator"
-      >
+      <span className={styles.itemIndicator} data-slot="dropdown-menu-radio-item-indicator">
         <MenuPrimitive.RadioItemIndicator>
           <CheckIcon />
         </MenuPrimitive.RadioItemIndicator>
@@ -221,7 +196,7 @@ function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      className={cn(styles.separator, className)}
       {...props}
     />
   );
@@ -231,10 +206,7 @@ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'spa
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn(
-        'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-foreground',
-        className,
-      )}
+      className={cn(styles.shortcut, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/empty/empty.module.css b/packages/react/src/components/ui/empty/empty.module.css
new file mode 100644
index 00000000..8a6a18e1
--- /dev/null
+++ b/packages/react/src/components/ui/empty/empty.module.css
@@ -0,0 +1,90 @@
+.empty {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem) * 4);
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  padding: calc(var(--spacing, 0.25rem) * 12);
+  text-align: center;
+  text-wrap: balance;
+}
+
+.header {
+  display: flex;
+  max-width: 24rem;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.media {
+  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.media svg {
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.media[data-variant='default'] {
+  background-color: transparent;
+}
+
+.media[data-variant='icon'] {
+  width: calc(var(--spacing, 0.25rem) * 10);
+  height: calc(var(--spacing, 0.25rem) * 10);
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.media[data-variant='icon'] svg {
+  width: calc(var(--spacing, 0.25rem) * 6);
+  height: calc(var(--spacing, 0.25rem) * 6);
+}
+
+.title {
+  font-family: var(--font-heading, var(--font-sans, sans-serif));
+  font-size: 1.125rem;
+  font-weight: 500;
+  letter-spacing: -0.025em;
+}
+
+.description {
+  font-size: 0.875rem;
+  line-height: 1.625;
+  color: var(--muted-foreground);
+}
+
+.description a {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.description a:hover {
+  color: var(--primary);
+}
+
+.content {
+  display: flex;
+  width: 100%;
+  max-width: 24rem;
+  min-width: 0;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 4);
+  font-size: 0.875rem;
+  text-wrap: balance;
+}
diff --git a/packages/react/src/components/ui/empty/empty.tsx b/packages/react/src/components/ui/empty/empty.tsx
index b112c686..8e32044d 100644
--- a/packages/react/src/components/ui/empty/empty.tsx
+++ b/packages/react/src/components/ui/empty/empty.tsx
@@ -1,99 +1,46 @@
 'use client';
 
-import { cva, type VariantProps } from 'class-variance-authority';
 import type { EmptyMediaVariantName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 
+import styles from './empty.module.css';
+
 function Empty({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="empty"
-      className={cn(
-        'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="empty" className={cn(styles.empty, className)} {...props} />;
 }
 
 function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="empty-header"
-      className={cn('flex max-w-sm flex-col items-center gap-2', className)}
-      {...props}
-    />
-  );
+  return <div data-slot="empty-header" className={cn(styles.header, className)} {...props} />;
 }
 
-const emptyMediaVariantClasses = {
-  default: 'bg-transparent',
-  icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
-} satisfies Record<EmptyMediaVariantName, string>;
-
-const emptyMediaVariants = cva(
-  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: emptyMediaVariantClasses,
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
 function EmptyMedia({
   className,
   variant = 'default',
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
+}: React.ComponentProps<'div'> & { variant?: EmptyMediaVariantName }) {
   return (
     <div
       data-slot="empty-icon"
       data-variant={variant}
-      className={cn(emptyMediaVariants({ variant, className }))}
+      className={cn(styles.media, className)}
       {...props}
     />
   );
 }
 
 function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="empty-title"
-      className={cn('font-heading text-lg font-medium tracking-tight', className)}
-      {...props}
-    />
-  );
+  return <div data-slot="empty-title" className={cn(styles.title, className)} {...props} />;
 }
 
 function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
   return (
-    <div
-      data-slot="empty-description"
-      className={cn(
-        'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
-        className,
-      )}
-      {...props}
-    />
+    <div data-slot="empty-description" className={cn(styles.description, className)} {...props} />
   );
 }
 
 function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="empty-content"
-      className={cn(
-        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="empty-content" className={cn(styles.content, className)} {...props} />;
 }
 
 export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };
diff --git a/packages/react/src/components/ui/field/field.module.css b/packages/react/src/components/ui/field/field.module.css
new file mode 100644
index 00000000..ed883eaf
--- /dev/null
+++ b/packages/react/src/components/ui/field/field.module.css
@@ -0,0 +1,150 @@
+.set {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 6);
+}
+
+.set:has(> [data-slot='checkbox-group']) {
+  gap: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.set:has(> [data-slot='radio-group']) {
+  gap: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.legend {
+  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
+  font-weight: 500;
+}
+
+.legend[data-variant='label'] {
+  font-size: 0.875rem;
+}
+
+.legend[data-variant='legend'] {
+  font-size: 1rem;
+}
+
+.group {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 7);
+}
+
+.group > [data-slot='field-group'] {
+  gap: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.field {
+  display: flex;
+  width: 100%;
+  gap: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.field[data-invalid='true'] {
+  color: var(--destructive);
+}
+
+.field[data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+.field[data-orientation='vertical'] > * {
+  width: 100%;
+}
+
+.field[data-orientation='horizontal'] {
+  flex-direction: row;
+  align-items: center;
+}
+
+.fieldContent {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  line-height: 1.375;
+}
+
+.fieldLabel {
+  display: flex;
+  width: fit-content;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  line-height: 1.375;
+}
+
+.fieldTitle {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.description {
+  text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--muted-foreground);
+}
+
+.description a {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.description a:hover {
+  color: var(--primary);
+}
+
+.separator {
+  position: relative;
+  height: calc(var(--spacing, 0.25rem) * 5);
+  font-size: 0.875rem;
+}
+
+.separator > :global([data-slot='separator']) {
+  position: absolute;
+  inset: 0;
+  top: 50%;
+}
+
+.separatorContent {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: fit-content;
+  margin-inline: auto;
+  background-color: var(--background);
+  padding-inline: calc(var(--spacing, 0.25rem) * 2);
+  color: var(--muted-foreground);
+}
+
+.error {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: var(--destructive);
+}
+
+.errorList {
+  margin-left: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  list-style: disc;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/packages/react/src/components/ui/field/field.tsx b/packages/react/src/components/ui/field/field.tsx
index 647ffd76..621a0377 100644
--- a/packages/react/src/components/ui/field/field.tsx
+++ b/packages/react/src/components/ui/field/field.tsx
@@ -1,24 +1,16 @@
 'use client';
 
 import { useMemo } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
 import type { FieldOrientationName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 
+import styles from './field.module.css';
+
 function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
-  return (
-    <fieldset
-      data-slot="field-set"
-      className={cn(
-        'flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <fieldset data-slot="field-set" className={cn(styles.set, className)} {...props} />;
 }
 
 function FieldLegend({
@@ -30,54 +22,36 @@ function FieldLegend({
     <legend
       data-slot="field-legend"
       data-variant={variant}
-      className={cn(
-        'mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
-        className,
-      )}
+      className={cn(styles.legend, className)}
       {...props}
     />
   );
 }
 
 function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="field-group"
-      className={cn(
-        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="field-group" className={cn(styles.group, className)} {...props} />;
 }
 
-const fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {
-  variants: {
-    orientation: {
-      vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
-      horizontal:
-        'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
-      responsive:
-        'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
-    } satisfies Record<FieldOrientationName, string>,
-  },
-  defaultVariants: {
-    orientation: 'vertical',
-  },
-});
+export type FieldVariantsOptions = {
+  orientation?: FieldOrientationName;
+  className?: string;
+};
+
+function fieldVariants({ className }: FieldVariantsOptions = {}) {
+  return cn(styles.field, className);
+}
 
 function Field({
   className,
   orientation = 'vertical',
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+}: React.ComponentProps<'div'> & FieldVariantsOptions) {
   return (
     <div
       role="group"
       data-slot="field"
       data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
+      className={fieldVariants({ orientation, className })}
       {...props}
     />
   );
@@ -85,53 +59,21 @@ function Field({
 
 function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
-      data-slot="field-content"
-      className={cn('group/field-content flex flex-1 flex-col gap-1 leading-snug', className)}
-      {...props}
-    />
+    <div data-slot="field-content" className={cn(styles.fieldContent, className)} {...props} />
   );
 }
 
 function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
-  return (
-    <Label
-      data-slot="field-label"
-      className={cn(
-        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10',
-        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <Label data-slot="field-label" className={cn(styles.fieldLabel, className)} {...props} />;
 }
 
 function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="field-label"
-      className={cn(
-        'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="field-label" className={cn(styles.fieldTitle, className)} {...props} />;
 }
 
 function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
   return (
-    <p
-      data-slot="field-description"
-      className={cn(
-        'text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
-        'last:mt-0 nth-last-2:-mt-1',
-        '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
-        className,
-      )}
-      {...props}
-    />
+    <p data-slot="field-description" className={cn(styles.description, className)} {...props} />
   );
 }
 
@@ -146,21 +88,15 @@ function FieldSeparator({
     <div
       data-slot="field-separator"
       data-content={!!children}
-      className={cn(
-        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
-        className,
-      )}
+      className={cn(styles.separator, className)}
       {...props}
     >
       <Separator className="absolute inset-0 top-1/2" />
-      {children && (
-        <span
-          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
-          data-slot="field-separator-content"
-        >
+      {children ? (
+        <span className={styles.separatorContent} data-slot="field-separator-content">
           {children}
         </span>
-      )}
+      ) : null}
     </div>
   );
 }
@@ -189,7 +125,7 @@ function FieldError({
     }
 
     return (
-      <ul className="ml-4 flex list-disc flex-col gap-1">
+      <ul className={styles.errorList}>
         {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
       </ul>
     );
@@ -200,12 +136,7 @@ function FieldError({
   }
 
   return (
-    <div
-      role="alert"
-      data-slot="field-error"
-      className={cn('text-sm font-normal text-destructive', className)}
-      {...props}
-    >
+    <div role="alert" data-slot="field-error" className={cn(styles.error, className)} {...props}>
       {content}
     </div>
   );
@@ -222,4 +153,5 @@ export {
   FieldSet,
   FieldContent,
   FieldTitle,
+  fieldVariants,
 };
diff --git a/packages/react/src/components/ui/hover-card/hover-card.module.css b/packages/react/src/components/ui/hover-card/hover-card.module.css
new file mode 100644
index 00000000..eb081965
--- /dev/null
+++ b/packages/react/src/components/ui/hover-card/hover-card.module.css
@@ -0,0 +1,17 @@
+.positioner {
+  isolation: isolate;
+  z-index: 50;
+}
+
+.content {
+  z-index: 50;
+  width: 16rem;
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  background-color: var(--popover);
+  padding: calc(var(--spacing, 0.25rem) * 4);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--popover-foreground);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  outline: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+}
diff --git a/packages/react/src/components/ui/hover-card/hover-card.tsx b/packages/react/src/components/ui/hover-card/hover-card.tsx
index e629fcd5..48082c3c 100644
--- a/packages/react/src/components/ui/hover-card/hover-card.tsx
+++ b/packages/react/src/components/ui/hover-card/hover-card.tsx
@@ -4,6 +4,8 @@ import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card
 
 import { cn } from '@/lib/utils';
 
+import styles from './hover-card.module.css';
+
 function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
   return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
 }
@@ -28,14 +30,11 @@ function HoverCardContent({
         alignOffset={alignOffset}
         side={side}
         sideOffset={sideOffset}
-        className="isolate z-50"
+        className={styles.positioner}
       >
         <PreviewCardPrimitive.Popup
           data-slot="hover-card-content"
-          className={cn(
-            'z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-            className,
-          )}
+          className={cn(styles.content, className)}
           {...props}
         />
       </PreviewCardPrimitive.Positioner>
diff --git a/packages/react/src/components/ui/input-group/input-group.module.css b/packages/react/src/components/ui/input-group/input-group.module.css
new file mode 100644
index 00000000..2c87a6ec
--- /dev/null
+++ b/packages/react/src/components/ui/input-group/input-group.module.css
@@ -0,0 +1,185 @@
+.group {
+  position: relative;
+  display: flex;
+  height: calc(var(--spacing, 0.25rem) * 9);
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  transition:
+    color 150ms ease,
+    box-shadow 150ms ease;
+  outline: none;
+}
+
+:global(.dark) .group {
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+}
+
+.group:has([data-slot='input-group-control']:focus-visible) {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.group:has([data-slot][aria-invalid='true']) {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .group:has([data-slot][aria-invalid='true']) {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.group:has(> [data-align='block-end']),
+.group:has(> [data-align='block-start']) {
+  height: auto;
+  flex-direction: column;
+}
+
+.group:has(> textarea) {
+  height: auto;
+}
+
+:global([data-slot='combobox-content']) .group:focus-within {
+  border-color: inherit;
+  box-shadow: none;
+}
+
+.addon {
+  display: flex;
+  height: auto;
+  cursor: text;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  padding-block: calc(var(--spacing, 0.25rem) * 1.5);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  user-select: none;
+}
+
+.group[data-disabled='true'] .addon {
+  opacity: 0.5;
+}
+
+.addon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.addonInlineStart {
+  order: -1;
+  padding-left: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.addonInlineEnd {
+  order: 1;
+  padding-right: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.addonBlockStart {
+  order: -1;
+  width: 100%;
+  justify-content: flex-start;
+  padding-inline: calc(var(--spacing, 0.25rem) * 2.5);
+  padding-top: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.addonBlockEnd {
+  order: 1;
+  width: 100%;
+  justify-content: flex-start;
+  padding-inline: calc(var(--spacing, 0.25rem) * 2.5);
+  padding-bottom: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.addonButton {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  box-shadow: none;
+}
+
+.addonButtonSizeXs {
+  height: calc(var(--spacing, 0.25rem) * 6);
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  border-radius: calc(var(--radius, 0.625rem) - 5px);
+  padding-inline: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.addonButtonSizeXs svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.addonButtonIconXs {
+  width: calc(var(--spacing, 0.25rem) * 6);
+  height: calc(var(--spacing, 0.25rem) * 6);
+  border-radius: calc(var(--radius, 0.625rem) - 5px);
+  padding: 0;
+}
+
+.addonButtonIconSm {
+  width: calc(var(--spacing, 0.25rem) * 8);
+  height: calc(var(--spacing, 0.25rem) * 8);
+  padding: 0;
+}
+
+.text {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+.text svg {
+  pointer-events: none;
+  width: 1rem;
+  height: 1rem;
+}
+
+.control {
+  flex: 1;
+  border-radius: 0;
+  border: 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.control:focus-visible {
+  box-shadow: none;
+}
+
+.control[aria-invalid='true'] {
+  box-shadow: none;
+}
+
+:global(.dark) .control {
+  background-color: transparent;
+}
+
+.controlTextarea {
+  resize: none;
+  padding-block: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.group:has(> [data-align='block-end']) .control {
+  padding-top: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.group:has(> [data-align='block-start']) .control {
+  padding-bottom: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.group:has(> [data-align='inline-end']) .control {
+  padding-right: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.group:has(> [data-align='inline-start']) .control {
+  padding-left: calc(var(--spacing, 0.25rem) * 1.5);
+}
diff --git a/packages/react/src/components/ui/input-group/input-group.stories.tsx b/packages/react/src/components/ui/input-group/input-group.stories.tsx
index 145ba740..c7ed97e6 100644
--- a/packages/react/src/components/ui/input-group/input-group.stories.tsx
+++ b/packages/react/src/components/ui/input-group/input-group.stories.tsx
@@ -57,7 +57,7 @@ export const WithTextPrefix: Story = {
         <InputGroupAddon>
           <InputGroupText>https://</InputGroupText>
         </InputGroupAddon>
-        <InputGroupInput placeholder="example.com" className="pl-1!" />
+        <InputGroupInput placeholder="example.com" className="pl-1" />
         <InputGroupAddon align="inline-end">
           <InputGroupButton className="rounded-full" size="icon-xs">
             <InfoIcon />
diff --git a/packages/react/src/components/ui/input-group/input-group.tsx b/packages/react/src/components/ui/input-group/input-group.tsx
index e3dd245e..56aadffc 100644
--- a/packages/react/src/components/ui/input-group/input-group.tsx
+++ b/packages/react/src/components/ui/input-group/input-group.tsx
@@ -1,55 +1,71 @@
 import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 
+import styles from './input-group.module.css';
+
+type InputGroupModuleClasses = {
+  group: string;
+  addon: string;
+  addonInlineStart: string;
+  addonInlineEnd: string;
+  addonBlockStart: string;
+  addonBlockEnd: string;
+  addonButton: string;
+  addonButtonSizeXs: string;
+  addonButtonIconXs: string;
+  addonButtonIconSm: string;
+  text: string;
+  control: string;
+  controlTextarea: string;
+};
+
+const inputGroupStyles = styles as InputGroupModuleClasses;
+
+type InputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+
+const addonAlignClass: Record<InputGroupAddonAlign, string> = {
+  'inline-start': inputGroupStyles.addonInlineStart,
+  'inline-end': inputGroupStyles.addonInlineEnd,
+  'block-start': inputGroupStyles.addonBlockStart,
+  'block-end': inputGroupStyles.addonBlockEnd,
+};
+
+type InputGroupButtonSize = 'xs' | 'sm' | 'icon-xs' | 'icon-sm';
+
+const inputGroupButtonSizeClass: Record<InputGroupButtonSize, string> = {
+  xs: inputGroupStyles.addonButtonSizeXs,
+  sm: '',
+  'icon-xs': inputGroupStyles.addonButtonIconXs,
+  'icon-sm': inputGroupStyles.addonButtonIconSm,
+};
+
 function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="input-group"
       role="group"
-      className={cn(
-        'group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
-        className,
-      )}
+      className={cn(inputGroupStyles.group, className)}
       {...props}
     />
   );
 }
 
-const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      align: {
-        'inline-start': 'order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]',
-        'inline-end': 'order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]',
-        'block-start':
-          'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
-        'block-end':
-          'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
-      },
-    },
-    defaultVariants: {
-      align: 'inline-start',
-    },
-  },
-);
-
 function InputGroupAddon({
   className,
   align = 'inline-start',
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+}: React.ComponentProps<'div'> & {
+  align?: InputGroupAddonAlign;
+}) {
   return (
     <div
       role="group"
       data-slot="input-group-addon"
       data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
+      className={cn(inputGroupStyles.addon, addonAlignClass[align], className)}
       onClick={(e) => {
         if ((e.target as HTMLElement).closest('button')) {
           return;
@@ -61,19 +77,9 @@ function InputGroupAddon({
   );
 }
 
-const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
-  variants: {
-    size: {
-      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-      sm: '',
-      'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
-      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
-    },
-  },
-  defaultVariants: {
-    size: 'xs',
-  },
-});
+function inputGroupButtonVariants({ size = 'xs' }: { size?: InputGroupButtonSize } = {}) {
+  return cn(inputGroupStyles.addonButton, inputGroupButtonSizeClass[size]);
+}
 
 function InputGroupButton({
   className,
@@ -81,10 +87,10 @@ function InputGroupButton({
   variant = 'ghost',
   size = 'xs',
   ...props
-}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &
-  VariantProps<typeof inputGroupButtonVariants> & {
-    type?: 'button' | 'submit' | 'reset';
-  }) {
+}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> & {
+  type?: 'button' | 'submit' | 'reset';
+  size?: InputGroupButtonSize;
+}) {
   return (
     <Button
       type={type}
@@ -97,25 +103,14 @@ function InputGroupButton({
 }
 
 function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      className={cn(
-        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <span className={cn(inputGroupStyles.text, className)} {...props} />;
 }
 
 function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
   return (
     <Input
       data-slot="input-group-control"
-      className={cn(
-        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
-        className,
-      )}
+      className={cn(inputGroupStyles.control, className)}
       {...props}
     />
   );
@@ -125,10 +120,7 @@ function InputGroupTextarea({ className, ...props }: React.ComponentProps<'texta
   return (
     <Textarea
       data-slot="input-group-control"
-      className={cn(
-        'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
-        className,
-      )}
+      className={cn(inputGroupStyles.control, inputGroupStyles.controlTextarea, className)}
       {...props}
     />
   );
@@ -141,4 +133,5 @@ export {
   InputGroupText,
   InputGroupInput,
   InputGroupTextarea,
+  inputGroupButtonVariants,
 };
diff --git a/packages/react/src/components/ui/input-otp/input-otp.module.css b/packages/react/src/components/ui/input-otp/input-otp.module.css
new file mode 100644
index 00000000..0c8bd3e5
--- /dev/null
+++ b/packages/react/src/components/ui/input-otp/input-otp.module.css
@@ -0,0 +1,115 @@
+@keyframes caretBlink {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+
+  20%,
+  50% {
+    opacity: 0;
+  }
+}
+
+.container {
+  display: flex;
+  align-items: center;
+}
+
+.container:has(:disabled) {
+  opacity: 0.5;
+}
+
+.input {
+  cursor: not-allowed;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+}
+
+.group {
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+.group:has([aria-invalid='true']) {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .group:has([aria-invalid='true']) {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.slot {
+  position: relative;
+  display: flex;
+  width: calc(var(--spacing, 0.25rem) * 9);
+  height: calc(var(--spacing, 0.25rem) * 9);
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid var(--input);
+  border-right: 1px solid var(--input);
+  border-bottom: 1px solid var(--input);
+  font-size: 0.875rem;
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  transition: all 150ms ease;
+  outline: none;
+}
+
+.slot:first-child {
+  border-left: 1px solid var(--input);
+  border-top-left-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  border-bottom-left-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+.slot:last-child {
+  border-top-right-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  border-bottom-right-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+.slot[aria-invalid='true'] {
+  border-color: var(--destructive);
+}
+
+:global(.dark) .slot {
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+}
+
+.slot[data-active='true'] {
+  z-index: 10;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.slot[data-active='true'][aria-invalid='true'] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+.caretWrap {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.caret {
+  height: 1rem;
+  width: 1px;
+  background-color: var(--foreground);
+  animation: caretBlink 1s step-end infinite;
+}
+
+.separator {
+  display: flex;
+  align-items: center;
+}
+
+.separator svg {
+  width: 1rem;
+  height: 1rem;
+}
diff --git a/packages/react/src/components/ui/input-otp/input-otp.tsx b/packages/react/src/components/ui/input-otp/input-otp.tsx
index 1cfd590a..0fe20e80 100644
--- a/packages/react/src/components/ui/input-otp/input-otp.tsx
+++ b/packages/react/src/components/ui/input-otp/input-otp.tsx
@@ -2,9 +2,11 @@
 
 import * as React from 'react';
 import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from '@phosphor-icons/react';
 
 import { cn } from '@/lib/utils';
-import { MinusIcon } from '@phosphor-icons/react';
+
+import styles from './input-otp.module.css';
 
 function InputOTP({
   className,
@@ -16,28 +18,16 @@ function InputOTP({
   return (
     <OTPInput
       data-slot="input-otp"
-      containerClassName={cn(
-        'cn-input-otp flex items-center has-disabled:opacity-50',
-        containerClassName,
-      )}
+      containerClassName={cn(styles.container, containerClassName)}
       spellCheck={false}
-      className={cn('disabled:cursor-not-allowed', className)}
+      className={cn(styles.input, className)}
       {...props}
     />
   );
 }
 
 function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="input-otp-group"
-      className={cn(
-        'flex items-center rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="input-otp-group" className={cn(styles.group, className)} {...props} />;
 }
 
 function InputOTPSlot({
@@ -54,30 +44,22 @@ function InputOTPSlot({
     <div
       data-slot="input-otp-slot"
       data-active={isActive}
-      className={cn(
-        'relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40',
-        className,
-      )}
+      className={cn(styles.slot, className)}
       {...props}
     >
       {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+      {hasFakeCaret ? (
+        <div className={styles.caretWrap}>
+          <div className={styles.caret} />
         </div>
-      )}
+      ) : null}
     </div>
   );
 }
 
 function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
-      data-slot="input-otp-separator"
-      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
-      role="separator"
-      {...props}
-    >
+    <div data-slot="input-otp-separator" className={styles.separator} role="separator" {...props}>
       <MinusIcon />
     </div>
   );
diff --git a/packages/react/src/components/ui/input/input.module.css b/packages/react/src/components/ui/input/input.module.css
new file mode 100644
index 00000000..35b4d411
--- /dev/null
+++ b/packages/react/src/components/ui/input/input.module.css
@@ -0,0 +1,62 @@
+.input {
+  height: calc(var(--spacing, 0.25rem) * 9);
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: transparent;
+  padding: 0.25rem calc(var(--spacing, 0.25rem) * 2.5);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  transition:
+    color 150ms ease,
+    box-shadow 150ms ease;
+  outline: none;
+}
+
+.input::placeholder {
+  color: var(--text-muted-foreground);
+}
+
+.input:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.input:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.input[aria-invalid='true'] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .input {
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+}
+
+:global(.dark) .input[aria-invalid='true'] {
+  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+@media (min-width: 768px) {
+  .input {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+.input::file-selector-button {
+  display: inline-flex;
+  height: calc(var(--spacing, 0.25rem) * 7);
+  border: 0;
+  background-color: transparent;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--foreground);
+}
diff --git a/packages/react/src/components/ui/input/input.tsx b/packages/react/src/components/ui/input/input.tsx
index 6c129214..eb1ad9ea 100644
--- a/packages/react/src/components/ui/input/input.tsx
+++ b/packages/react/src/components/ui/input/input.tsx
@@ -5,15 +5,14 @@ import { Input as InputPrimitive } from '@base-ui/react/input';
 
 import { cn } from '@/lib/utils';
 
+import styles from './input.module.css';
+
 function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   return (
     <InputPrimitive
       type={type}
       data-slot="input"
-      className={cn(
-        'h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
-        className,
-      )}
+      className={cn(styles.input, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/item/item.module.css b/packages/react/src/components/ui/item/item.module.css
new file mode 100644
index 00000000..37ed07b6
--- /dev/null
+++ b/packages/react/src/components/ui/item/item.module.css
@@ -0,0 +1,193 @@
+.itemGroup {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.itemGroup:has([data-size='sm']) {
+  gap: calc(var(--spacing, 0.25rem) * 2.5);
+}
+
+.itemGroup:has([data-size='xs']) {
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.itemSeparator {
+  margin-block: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.item {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  font-size: 0.875rem;
+  transition:
+    background-color 100ms ease,
+    color 100ms ease;
+  outline: none;
+}
+
+.item:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.item a {
+  transition: background-color 100ms ease;
+}
+
+.item a:hover {
+  background-color: var(--muted);
+}
+
+.item[data-variant='default'],
+.variantDefault {
+  border-color: transparent;
+}
+
+.item[data-variant='outline'],
+.variantOutline {
+  border-color: var(--border);
+}
+
+.item[data-variant='muted'],
+.variantMuted {
+  border-color: transparent;
+  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
+}
+
+.item[data-size='default'],
+.sizeDefault {
+  gap: calc(var(--spacing, 0.25rem) * 3.5);
+  padding: calc(var(--spacing, 0.25rem) * 3.5) calc(var(--spacing, 0.25rem) * 4);
+}
+
+.item[data-size='sm'],
+.sizeSm {
+  gap: calc(var(--spacing, 0.25rem) * 2.5);
+  padding: calc(var(--spacing, 0.25rem) * 2.5) calc(var(--spacing, 0.25rem) * 3);
+}
+
+.item[data-size='xs'],
+.sizeXs {
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  padding: calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 2.5);
+}
+
+.media {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.item:has([data-slot='item-description']) .media {
+  align-self: flex-start;
+  transform: translateY(2px);
+}
+
+.media svg {
+  pointer-events: none;
+}
+
+.media[data-variant='icon'] svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.media[data-variant='image'] {
+  width: calc(var(--spacing, 0.25rem) * 10);
+  height: calc(var(--spacing, 0.25rem) * 10);
+  overflow: hidden;
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+}
+
+.item[data-size='sm'] .media[data-variant='image'] {
+  width: calc(var(--spacing, 0.25rem) * 8);
+  height: calc(var(--spacing, 0.25rem) * 8);
+}
+
+.item[data-size='xs'] .media[data-variant='image'] {
+  width: calc(var(--spacing, 0.25rem) * 6);
+  height: calc(var(--spacing, 0.25rem) * 6);
+}
+
+.media[data-variant='image'] img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+}
+
+.content + .content {
+  flex: none;
+}
+
+.item[data-size='xs'] .content {
+  gap: 0;
+}
+
+.title {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  overflow: hidden;
+  font-size: 0.875rem;
+  line-height: 1.375;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-underline-offset: 4px;
+}
+
+.description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--muted-foreground);
+}
+
+.item[data-size='xs'] .description {
+  font-size: 0.75rem;
+}
+
+.description a {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.description a:hover {
+  color: var(--primary);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.header,
+.footer {
+  display: flex;
+  flex-basis: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
diff --git a/packages/react/src/components/ui/item/item.tsx b/packages/react/src/components/ui/item/item.tsx
index 9a60a5ac..ef635a80 100644
--- a/packages/react/src/components/ui/item/item.tsx
+++ b/packages/react/src/components/ui/item/item.tsx
@@ -3,21 +3,66 @@
 import * as React from 'react';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
-import { cva, type VariantProps } from 'class-variance-authority';
 import type { ItemMediaVariantName, ItemSizeName, ItemVariantName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 import { Separator } from '@/components/ui/separator';
 
+import itemStyles from './item.module.css';
+
+type ItemModuleClasses = {
+  item: string;
+  variantDefault: string;
+  variantOutline: string;
+  variantMuted: string;
+  sizeDefault: string;
+  sizeSm: string;
+  sizeXs: string;
+  itemGroup: string;
+  itemSeparator: string;
+  media: string;
+  content: string;
+  title: string;
+  description: string;
+  actions: string;
+  header: string;
+  footer: string;
+};
+
+const styles = itemStyles as ItemModuleClasses;
+
+const variantClass: Record<ItemVariantName, string> = {
+  default: styles.variantDefault,
+  outline: styles.variantOutline,
+  muted: styles.variantMuted,
+};
+
+const sizeClass: Record<ItemSizeName, string> = {
+  default: styles.sizeDefault,
+  sm: styles.sizeSm,
+  xs: styles.sizeXs,
+};
+
+export type ItemVariantsOptions = {
+  variant?: ItemVariantName;
+  size?: ItemSizeName;
+  className?: string;
+};
+
+function itemVariants({
+  variant = 'default',
+  size = 'default',
+  className,
+}: ItemVariantsOptions = {}) {
+  return cn(styles.item, variantClass[variant], sizeClass[size], className);
+}
+
 function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       role="list"
       data-slot="item-group"
-      className={cn(
-        'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
-        className,
-      )}
+      className={cn(styles.itemGroup, className)}
       {...props}
     />
   );
@@ -28,50 +73,24 @@ function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Sepa
     <Separator
       data-slot="item-separator"
       orientation="horizontal"
-      className={cn('my-2', className)}
+      className={cn(styles.itemSeparator, className)}
       {...props}
     />
   );
 }
 
-const itemVariantClasses = {
-  default: 'border-transparent',
-  outline: 'border-border',
-  muted: 'border-transparent bg-muted/50',
-} satisfies Record<ItemVariantName, string>;
-
-const itemSizeClasses = {
-  default: 'gap-3.5 px-4 py-3.5',
-  sm: 'gap-2.5 px-3 py-2.5',
-  xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
-} satisfies Record<ItemSizeName, string>;
-
-const itemVariants = cva(
-  'group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',
-  {
-    variants: {
-      variant: itemVariantClasses,
-      size: itemSizeClasses,
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
 function Item({
   className,
   variant = 'default',
   size = 'default',
   render,
   ...props
-}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {
+}: useRender.ComponentProps<'div'> & ItemVariantsOptions) {
   return useRender({
     defaultTagName: 'div',
     props: mergeProps<'div'>(
       {
-        className: cn(itemVariants({ variant, size, className })),
+        className: itemVariants({ variant, size, className }),
       },
       props,
     ),
@@ -84,103 +103,45 @@ function Item({
   });
 }
 
-const itemMediaVariantClasses = {
-  default: 'bg-transparent',
-  icon: "[&_svg:not([class*='size-'])]:size-4",
-  image:
-    'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
-} satisfies Record<ItemMediaVariantName, string>;
-
-const itemMediaVariants = cva(
-  'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',
-  {
-    variants: {
-      variant: itemMediaVariantClasses,
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
 function ItemMedia({
   className,
   variant = 'default',
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+}: React.ComponentProps<'div'> & { variant?: ItemMediaVariantName }) {
   return (
     <div
       data-slot="item-media"
       data-variant={variant}
-      className={cn(itemMediaVariants({ variant, className }))}
+      className={cn(styles.media, className)}
       {...props}
     />
   );
 }
 
 function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="item-content"
-      className={cn(
-        'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="item-content" className={cn(styles.content, className)} {...props} />;
 }
 
 function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="item-title"
-      className={cn(
-        'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <div data-slot="item-title" className={cn(styles.title, className)} {...props} />;
 }
 
 function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
   return (
-    <p
-      data-slot="item-description"
-      className={cn(
-        'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
-        className,
-      )}
-      {...props}
-    />
+    <p data-slot="item-description" className={cn(styles.description, className)} {...props} />
   );
 }
 
 function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />
-  );
+  return <div data-slot="item-actions" className={cn(styles.actions, className)} {...props} />;
 }
 
 function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="item-header"
-      className={cn('flex basis-full items-center justify-between gap-2', className)}
-      {...props}
-    />
-  );
+  return <div data-slot="item-header" className={cn(styles.header, className)} {...props} />;
 }
 
 function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="item-footer"
-      className={cn('flex basis-full items-center justify-between gap-2', className)}
-      {...props}
-    />
-  );
+  return <div data-slot="item-footer" className={cn(styles.footer, className)} {...props} />;
 }
 
 export {
@@ -194,4 +155,5 @@ export {
   ItemDescription,
   ItemHeader,
   ItemFooter,
+  itemVariants,
 };
diff --git a/packages/react/src/components/ui/kbd/kbd.module.css b/packages/react/src/components/ui/kbd/kbd.module.css
new file mode 100644
index 00000000..7f980df1
--- /dev/null
+++ b/packages/react/src/components/ui/kbd/kbd.module.css
@@ -0,0 +1,38 @@
+.kbd {
+  pointer-events: none;
+  display: inline-flex;
+  height: calc(var(--spacing, 0.25rem) * 5);
+  width: fit-content;
+  min-width: calc(var(--spacing, 0.25rem) * 5);
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+  background-color: var(--muted);
+  padding-inline: calc(var(--spacing, 0.25rem) * 1);
+  font-family: var(--font-sans, sans-serif);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  user-select: none;
+}
+
+:global([data-slot='tooltip-content']) .kbd {
+  background-color: color-mix(in oklch, var(--background) 20%, transparent);
+  color: var(--background);
+}
+
+:global(.dark) :global([data-slot='tooltip-content']) .kbd {
+  background-color: color-mix(in oklch, var(--background) 10%, transparent);
+}
+
+.kbd svg {
+  width: calc(var(--spacing, 0.25rem) * 3);
+  height: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.group {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+}
diff --git a/packages/react/src/components/ui/kbd/kbd.tsx b/packages/react/src/components/ui/kbd/kbd.tsx
index da7f0d39..d502927d 100644
--- a/packages/react/src/components/ui/kbd/kbd.tsx
+++ b/packages/react/src/components/ui/kbd/kbd.tsx
@@ -2,27 +2,14 @@
 
 import { cn } from '@/lib/utils';
 
+import styles from './kbd.module.css';
+
 function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn(
-        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <kbd data-slot="kbd" className={cn(styles.kbd, className)} {...props} />;
 }
 
 function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <kbd
-      data-slot="kbd-group"
-      className={cn('inline-flex items-center gap-1', className)}
-      {...props}
-    />
-  );
+  return <div data-slot="kbd-group" className={cn(styles.group, className)} {...props} />;
 }
 
 export { Kbd, KbdGroup };
diff --git a/packages/react/src/components/ui/label/label.module.css b/packages/react/src/components/ui/label/label.module.css
new file mode 100644
index 00000000..9bb550fc
--- /dev/null
+++ b/packages/react/src/components/ui/label/label.module.css
@@ -0,0 +1,19 @@
+.label {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  line-height: 1;
+  font-weight: 500;
+  user-select: none;
+}
+
+:global(.group[data-disabled='true']) .label {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+:global(.peer:disabled) ~ .label {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
diff --git a/packages/react/src/components/ui/label/label.tsx b/packages/react/src/components/ui/label/label.tsx
index 6d13a34c..731786e4 100644
--- a/packages/react/src/components/ui/label/label.tsx
+++ b/packages/react/src/components/ui/label/label.tsx
@@ -4,17 +4,10 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
+import styles from './label.module.css';
+
 function Label({ className, ...props }: React.ComponentProps<'label'>) {
-  return (
-    <label
-      data-slot="label"
-      className={cn(
-        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <label data-slot="label" className={cn(styles.label, className)} {...props} />;
 }
 
 export { Label };
diff --git a/packages/react/src/components/ui/native-checkbox/index.ts b/packages/react/src/components/ui/native-checkbox/index.ts
new file mode 100644
index 00000000..ada9e694
--- /dev/null
+++ b/packages/react/src/components/ui/native-checkbox/index.ts
@@ -0,0 +1 @@
+export * from './native-checkbox';
diff --git a/packages/react/src/components/ui/native-checkbox/native-checkbox.tsx b/packages/react/src/components/ui/native-checkbox/native-checkbox.tsx
new file mode 100644
index 00000000..39bd093b
--- /dev/null
+++ b/packages/react/src/components/ui/native-checkbox/native-checkbox.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+import control from '../native-control/control.module.css';
+
+function NativeCheckbox({ className, ...props }: Omit<React.ComponentProps<'input'>, 'type'>) {
+  return (
+    <input
+      type="checkbox"
+      data-slot="native-checkbox"
+      className={cn(control.checkbox, className)}
+      {...props}
+    />
+  );
+}
+
+export { NativeCheckbox };
diff --git a/packages/react/src/components/ui/native-control/control.module.css b/packages/react/src/components/ui/native-control/control.module.css
new file mode 100644
index 00000000..2917a322
--- /dev/null
+++ b/packages/react/src/components/ui/native-control/control.module.css
@@ -0,0 +1,159 @@
+/* Shared styles for native form controls (imported by native-input, native-textarea, etc.). */
+
+.textField {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: transparent;
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  transition:
+    color 150ms ease,
+    box-shadow 150ms ease;
+  outline: none;
+}
+
+.textField::placeholder {
+  color: var(--muted-foreground);
+}
+
+.textField:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.textField:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.textField[aria-invalid='true'] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .textField {
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+}
+
+:global(.dark) .textField[aria-invalid='true'] {
+  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.input {
+  height: calc(var(--spacing, 0.25rem) * 9);
+  padding: 0.25rem calc(var(--spacing, 0.25rem) * 2.5);
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.input[data-size='sm'] {
+  height: calc(var(--spacing, 0.25rem) * 8);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .input {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+.input::file-selector-button {
+  display: inline-flex;
+  height: calc(var(--spacing, 0.25rem) * 7);
+  border: 0;
+  background-color: transparent;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--foreground);
+}
+
+.textarea {
+  display: flex;
+  field-sizing: content;
+  min-height: calc(var(--spacing, 0.25rem) * 16);
+  padding: calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 2.5);
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .textarea {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+.checkbox,
+.radio {
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+  flex-shrink: 0;
+  border: 1px solid var(--input);
+  background-color: transparent;
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  transition: box-shadow 150ms ease;
+  outline: none;
+  accent-color: var(--primary);
+}
+
+.checkbox {
+  border-radius: 4px;
+}
+
+.radio {
+  border-radius: 9999px;
+}
+
+.checkbox:focus-visible,
+.radio:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.checkbox:disabled,
+.radio:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:global(.dark) .checkbox,
+:global(.dark) .radio {
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+}
+
+.range {
+  width: 100%;
+  height: calc(var(--spacing, 0.25rem) * 1.5);
+  appearance: none;
+  border-radius: 9999px;
+  background-color: var(--muted);
+  accent-color: var(--primary);
+}
+
+.range:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.range::-webkit-slider-thumb {
+  appearance: none;
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+  border: 1px solid var(--primary);
+  border-radius: 9999px;
+  background-color: var(--background);
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+}
+
+.range::-moz-range-thumb {
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+  border: 1px solid var(--primary);
+  border-radius: 9999px;
+  background-color: var(--background);
+}
diff --git a/packages/react/src/components/ui/native-details/index.ts b/packages/react/src/components/ui/native-details/index.ts
new file mode 100644
index 00000000..42a78d45
--- /dev/null
+++ b/packages/react/src/components/ui/native-details/index.ts
@@ -0,0 +1 @@
+export * from './native-details';
diff --git a/packages/react/src/components/ui/native-details/native-details.module.css b/packages/react/src/components/ui/native-details/native-details.module.css
new file mode 100644
index 00000000..62b68b14
--- /dev/null
+++ b/packages/react/src/components/ui/native-details/native-details.module.css
@@ -0,0 +1,43 @@
+.details {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  background-color: var(--card);
+  color: var(--card-foreground);
+}
+
+.details + .details {
+  margin-top: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.summary {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  padding: calc(var(--spacing, 0.25rem) * 4);
+  font-weight: 500;
+  list-style: none;
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary::after {
+  content: '+';
+  font-size: 1.125rem;
+  line-height: 1;
+  color: var(--muted-foreground);
+  transition: transform 150ms ease;
+}
+
+.details[open] .summary::after {
+  content: '−';
+}
+
+.content {
+  padding: 0 calc(var(--spacing, 0.25rem) * 4) calc(var(--spacing, 0.25rem) * 4);
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
diff --git a/packages/react/src/components/ui/native-details/native-details.stories.tsx b/packages/react/src/components/ui/native-details/native-details.stories.tsx
new file mode 100644
index 00000000..709ea7c6
--- /dev/null
+++ b/packages/react/src/components/ui/native-details/native-details.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { nativeDetailsContract } from '@surfnet/curve-contracts';
+
+import { NativeDetails, NativeDetailsContent, NativeSummary } from './native-details';
+
+const meta = {
+  title: 'Components/NativeDetails',
+  component: NativeDetails,
+  parameters: {
+    docs: {
+      description: {
+        component: nativeDetailsContract.docs.description,
+      },
+    },
+  },
+} satisfies Meta<typeof NativeDetails>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <NativeDetails>
+      <NativeSummary>What is a native details element?</NativeSummary>
+      <NativeDetailsContent>
+        Browsers provide built-in expand/collapse behavior without JavaScript. Use Accordion when
+        you need coordinated single-expand groups.
+      </NativeDetailsContent>
+    </NativeDetails>
+  ),
+};
diff --git a/packages/react/src/components/ui/native-details/native-details.tsx b/packages/react/src/components/ui/native-details/native-details.tsx
new file mode 100644
index 00000000..83b8aa2b
--- /dev/null
+++ b/packages/react/src/components/ui/native-details/native-details.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+import styles from './native-details.module.css';
+
+function NativeDetails({ className, ...props }: React.ComponentProps<'details'>) {
+  return (
+    <details data-slot="native-details" className={cn(styles.details, className)} {...props} />
+  );
+}
+
+function NativeSummary({ className, ...props }: React.ComponentProps<'summary'>) {
+  return (
+    <summary data-slot="native-summary" className={cn(styles.summary, className)} {...props} />
+  );
+}
+
+function NativeDetailsContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="native-details-content" className={cn(styles.content, className)} {...props} />
+  );
+}
+
+export { NativeDetails, NativeDetailsContent, NativeSummary };
diff --git a/packages/react/src/components/ui/native-dialog/index.ts b/packages/react/src/components/ui/native-dialog/index.ts
new file mode 100644
index 00000000..95842c2a
--- /dev/null
+++ b/packages/react/src/components/ui/native-dialog/index.ts
@@ -0,0 +1 @@
+export * from './native-dialog';
diff --git a/packages/react/src/components/ui/native-dialog/native-dialog.module.css b/packages/react/src/components/ui/native-dialog/native-dialog.module.css
new file mode 100644
index 00000000..f5d955bc
--- /dev/null
+++ b/packages/react/src/components/ui/native-dialog/native-dialog.module.css
@@ -0,0 +1,49 @@
+.dialog {
+  position: relative;
+  max-width: 32rem;
+  width: calc(100% - 2rem);
+  margin: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  padding: calc(var(--spacing, 0.25rem) * 6);
+  background-color: var(--background);
+  color: var(--foreground);
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+}
+
+.dialog::backdrop {
+  background-color: rgb(0 0 0 / 0.5);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.title {
+  font-family: var(--font-heading, var(--font-sans, sans-serif));
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.description {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  margin-top: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.close {
+  position: absolute;
+  top: calc(var(--spacing, 0.25rem) * 4);
+  right: calc(var(--spacing, 0.25rem) * 4);
+}
diff --git a/packages/react/src/components/ui/native-dialog/native-dialog.stories.tsx b/packages/react/src/components/ui/native-dialog/native-dialog.stories.tsx
new file mode 100644
index 00000000..b9fc36b5
--- /dev/null
+++ b/packages/react/src/components/ui/native-dialog/native-dialog.stories.tsx
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useRef } from 'react';
+import { nativeDialogContract } from '@surfnet/curve-contracts';
+
+import { Button } from '@/components/ui/button';
+
+import {
+  NativeDialog,
+  NativeDialogClose,
+  NativeDialogDescription,
+  NativeDialogFooter,
+  NativeDialogHeader,
+  NativeDialogTitle,
+} from './native-dialog';
+
+const meta = {
+  title: 'Components/NativeDialog',
+  component: NativeDialog,
+  parameters: {
+    docs: {
+      description: {
+        component: nativeDialogContract.docs.description,
+      },
+    },
+  },
+} satisfies Meta<typeof NativeDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const ref = useRef<HTMLDialogElement>(null);
+    return (
+      <>
+        <Button type="button" onClick={() => ref.current?.showModal()}>
+          Open dialog
+        </Button>
+        <NativeDialog ref={ref}>
+          <NativeDialogClose dialogRef={ref} aria-label="Close">
+            ×
+          </NativeDialogClose>
+          <NativeDialogHeader>
+            <NativeDialogTitle>Native dialog</NativeDialogTitle>
+            <NativeDialogDescription>
+              Uses the platform <code>&lt;dialog&gt;</code> element with <code>showModal()</code>.
+            </NativeDialogDescription>
+          </NativeDialogHeader>
+          <NativeDialogFooter>
+            <Button type="button" variant="outline" onClick={() => ref.current?.close()}>
+              Cancel
+            </Button>
+            <Button type="button" onClick={() => ref.current?.close()}>
+              Confirm
+            </Button>
+          </NativeDialogFooter>
+        </NativeDialog>
+      </>
+    );
+  },
+};
diff --git a/packages/react/src/components/ui/native-dialog/native-dialog.tsx b/packages/react/src/components/ui/native-dialog/native-dialog.tsx
new file mode 100644
index 00000000..c47b9307
--- /dev/null
+++ b/packages/react/src/components/ui/native-dialog/native-dialog.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import styles from './native-dialog.module.css';
+
+const NativeDialog = React.forwardRef<HTMLDialogElement, React.ComponentProps<'dialog'>>(
+  function NativeDialog({ className, ...props }, ref) {
+    return (
+      <dialog
+        ref={ref}
+        data-slot="native-dialog"
+        className={cn(styles.dialog, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+function NativeDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="native-dialog-header" className={cn(styles.header, className)} {...props} />
+  );
+}
+
+function NativeDialogTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+  return <h2 data-slot="native-dialog-title" className={cn(styles.title, className)} {...props} />;
+}
+
+function NativeDialogDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="native-dialog-description"
+      className={cn(styles.description, className)}
+      {...props}
+    />
+  );
+}
+
+function NativeDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="native-dialog-footer" className={cn(styles.footer, className)} {...props} />
+  );
+}
+
+type NativeDialogCloseProps = React.ComponentProps<'button'> & {
+  dialogRef?: React.RefObject<HTMLDialogElement | null>;
+};
+
+function NativeDialogClose({ className, dialogRef, onClick, ...props }: NativeDialogCloseProps) {
+  return (
+    <button
+      type="button"
+      data-slot="native-dialog-close"
+      className={cn(styles.close, className)}
+      onClick={(event) => {
+        dialogRef?.current?.close();
+        onClick?.(event);
+      }}
+      {...props}
+    />
+  );
+}
+
+export {
+  NativeDialog,
+  NativeDialogClose,
+  NativeDialogDescription,
+  NativeDialogFooter,
+  NativeDialogHeader,
+  NativeDialogTitle,
+};
diff --git a/packages/react/src/components/ui/native-fieldset/index.ts b/packages/react/src/components/ui/native-fieldset/index.ts
new file mode 100644
index 00000000..89ee217c
--- /dev/null
+++ b/packages/react/src/components/ui/native-fieldset/index.ts
@@ -0,0 +1 @@
+export * from './native-fieldset';
diff --git a/packages/react/src/components/ui/native-fieldset/native-fieldset.module.css b/packages/react/src/components/ui/native-fieldset/native-fieldset.module.css
new file mode 100644
index 00000000..07f541b8
--- /dev/null
+++ b/packages/react/src/components/ui/native-fieldset/native-fieldset.module.css
@@ -0,0 +1,48 @@
+.fieldset {
+  min-width: 0;
+  margin: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  padding: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.fieldset:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.fieldset:disabled :global(*) {
+  pointer-events: none;
+}
+
+.legend {
+  padding-inline: calc(var(--spacing, 0.25rem) * 1);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--foreground);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 3);
+  margin-top: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  cursor: pointer;
+}
+
+.hint {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
diff --git a/packages/react/src/components/ui/native-fieldset/native-fieldset.stories.tsx b/packages/react/src/components/ui/native-fieldset/native-fieldset.stories.tsx
new file mode 100644
index 00000000..071a3a8b
--- /dev/null
+++ b/packages/react/src/components/ui/native-fieldset/native-fieldset.stories.tsx
@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { nativeFieldsetContract } from '@surfnet/curve-contracts';
+
+import { NativeCheckbox } from '@/components/ui/native-checkbox';
+import { NativeInput } from '@/components/ui/native-input';
+import { NativeRadio } from '@/components/ui/native-radio';
+
+import {
+  NativeFieldset,
+  NativeFieldsetContent,
+  NativeFieldsetHint,
+  NativeFieldsetLabel,
+  NativeFieldsetRow,
+  NativeLegend,
+} from './native-fieldset';
+
+const meta = {
+  title: 'Components/NativeFieldset',
+  component: NativeFieldset,
+  parameters: {
+    docs: {
+      description: {
+        component: nativeFieldsetContract.docs.description,
+      },
+    },
+  },
+} satisfies Meta<typeof NativeFieldset>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <NativeFieldset>
+      <NativeLegend>Notification settings</NativeLegend>
+      <NativeFieldsetContent>
+        <NativeFieldsetRow>
+          <NativeCheckbox id="native-email" name="email" defaultChecked />
+          <NativeFieldsetLabel htmlFor="native-email">Email updates</NativeFieldsetLabel>
+        </NativeFieldsetRow>
+        <NativeFieldsetRow>
+          <NativeRadio id="native-daily" name="digest" value="daily" defaultChecked />
+          <NativeFieldsetLabel htmlFor="native-daily">Daily digest</NativeFieldsetLabel>
+        </NativeFieldsetRow>
+        <NativeFieldsetRow>
+          <NativeRadio id="native-weekly" name="digest" value="weekly" />
+          <NativeFieldsetLabel htmlFor="native-weekly">Weekly digest</NativeFieldsetLabel>
+        </NativeFieldsetRow>
+        <NativeInput
+          id="native-reply-to"
+          name="reply-to"
+          type="email"
+          placeholder="Reply-to email"
+        />
+        <NativeFieldsetHint>Changes apply to this workspace only.</NativeFieldsetHint>
+      </NativeFieldsetContent>
+    </NativeFieldset>
+  ),
+};
diff --git a/packages/react/src/components/ui/native-fieldset/native-fieldset.tsx b/packages/react/src/components/ui/native-fieldset/native-fieldset.tsx
new file mode 100644
index 00000000..c82be78d
--- /dev/null
+++ b/packages/react/src/components/ui/native-fieldset/native-fieldset.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+import styles from './native-fieldset.module.css';
+
+function NativeFieldset({ className, ...props }: React.ComponentProps<'fieldset'>) {
+  return (
+    <fieldset data-slot="native-fieldset" className={cn(styles.fieldset, className)} {...props} />
+  );
+}
+
+function NativeLegend({ className, ...props }: React.ComponentProps<'legend'>) {
+  return <legend data-slot="native-legend" className={cn(styles.legend, className)} {...props} />;
+}
+
+function NativeFieldsetContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="native-fieldset-content" className={cn(styles.content, className)} {...props} />
+  );
+}
+
+function NativeFieldsetRow({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="native-fieldset-row" className={cn(styles.row, className)} {...props} />;
+}
+
+function NativeFieldsetLabel({ className, ...props }: React.ComponentProps<'label'>) {
+  return (
+    <label data-slot="native-fieldset-label" className={cn(styles.label, className)} {...props} />
+  );
+}
+
+function NativeFieldsetHint({ className, ...props }: React.ComponentProps<'p'>) {
+  return <p data-slot="native-fieldset-hint" className={cn(styles.hint, className)} {...props} />;
+}
+
+export {
+  NativeFieldset,
+  NativeFieldsetContent,
+  NativeFieldsetHint,
+  NativeFieldsetLabel,
+  NativeFieldsetRow,
+  NativeLegend,
+};
diff --git a/packages/react/src/components/ui/native-input/index.ts b/packages/react/src/components/ui/native-input/index.ts
new file mode 100644
index 00000000..79bc7fe5
--- /dev/null
+++ b/packages/react/src/components/ui/native-input/index.ts
@@ -0,0 +1 @@
+export * from './native-input';
diff --git a/packages/react/src/components/ui/native-input/native-form-controls.stories.tsx b/packages/react/src/components/ui/native-input/native-form-controls.stories.tsx
new file mode 100644
index 00000000..2c4824db
--- /dev/null
+++ b/packages/react/src/components/ui/native-input/native-form-controls.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  nativeCheckboxContract,
+  nativeInputContract,
+  nativeRangeContract,
+  nativeRadioContract,
+  nativeTextareaContract,
+} from '@surfnet/curve-contracts';
+
+import { NativeCheckbox } from '@/components/ui/native-checkbox';
+import { NativeInput } from '@/components/ui/native-input';
+import { NativeRange } from '@/components/ui/native-range';
+import { NativeRadio } from '@/components/ui/native-radio';
+import { NativeTextarea } from '@/components/ui/native-textarea';
+
+const meta = {
+  title: 'Components/NativeFormControls',
+  parameters: {
+    docs: {
+      description: {
+        component: [
+          nativeInputContract.docs.description,
+          nativeTextareaContract.docs.description,
+          nativeCheckboxContract.docs.description,
+          nativeRadioContract.docs.description,
+          nativeRangeContract.docs.description,
+        ].join('\n\n'),
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const TextFields: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 24 * 16 }}>
+      <NativeInput placeholder="Text" />
+      <NativeInput type="email" placeholder="Email" />
+      <NativeInput type="password" placeholder="Password" />
+      <NativeInput type="search" placeholder="Search" />
+      <NativeInput type="date" />
+      <NativeInput type="time" />
+      <NativeInput type="number" placeholder="Number" />
+      <NativeInput type="file" />
+      <NativeInput size="sm" placeholder="Small" />
+      <NativeTextarea placeholder="Message" rows={3} />
+    </div>
+  ),
+};
+
+export const ChoiceControls: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+      <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <NativeCheckbox defaultChecked />
+        Subscribe
+      </label>
+      <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <NativeRadio name="plan" value="free" defaultChecked />
+        Free
+      </label>
+      <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <NativeRadio name="plan" value="pro" />
+        Pro
+      </label>
+      <NativeRange defaultValue={40} />
+    </div>
+  ),
+};
diff --git a/packages/react/src/components/ui/native-input/native-input.tsx b/packages/react/src/components/ui/native-input/native-input.tsx
new file mode 100644
index 00000000..df6738f4
--- /dev/null
+++ b/packages/react/src/components/ui/native-input/native-input.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import type { NativeInputSizeName } from '@surfnet/curve-contracts';
+
+import { cn } from '@/lib/utils';
+
+import control from '../native-control/control.module.css';
+
+type NativeInputProps = Omit<React.ComponentProps<'input'>, 'size'> & {
+  size?: NativeInputSizeName;
+};
+
+function NativeInput({ className, size = 'default', type = 'text', ...props }: NativeInputProps) {
+  return (
+    <input
+      type={type}
+      data-slot="native-input"
+      data-size={size}
+      className={cn(control.textField, control.input, className)}
+      {...props}
+    />
+  );
+}
+
+export { NativeInput };
diff --git a/packages/react/src/components/ui/native-popover/index.ts b/packages/react/src/components/ui/native-popover/index.ts
new file mode 100644
index 00000000..9415cce2
--- /dev/null
+++ b/packages/react/src/components/ui/native-popover/index.ts
@@ -0,0 +1 @@
+export * from './native-popover';
diff --git a/packages/react/src/components/ui/native-popover/native-popover.module.css b/packages/react/src/components/ui/native-popover/native-popover.module.css
new file mode 100644
index 00000000..08558ea0
--- /dev/null
+++ b/packages/react/src/components/ui/native-popover/native-popover.module.css
@@ -0,0 +1,35 @@
+.popover {
+  margin: 0;
+  width: 18rem;
+  max-width: calc(100vw - 2rem);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  padding: calc(var(--spacing, 0.25rem) * 4);
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  outline: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+.popover::backdrop {
+  background-color: transparent;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+}
+
+.title {
+  font-weight: 500;
+}
+
+.description {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+.trigger {
+  /* Unstyled trigger hook — consumers often use Button */
+}
diff --git a/packages/react/src/components/ui/native-popover/native-popover.stories.tsx b/packages/react/src/components/ui/native-popover/native-popover.stories.tsx
new file mode 100644
index 00000000..e20c48c8
--- /dev/null
+++ b/packages/react/src/components/ui/native-popover/native-popover.stories.tsx
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { nativePopoverContract } from '@surfnet/curve-contracts';
+
+import { Button } from '@/components/ui/button';
+
+import {
+  NativePopover,
+  NativePopoverDescription,
+  NativePopoverHeader,
+  NativePopoverTitle,
+} from './native-popover';
+
+const meta = {
+  title: 'Components/NativePopover',
+  component: NativePopover,
+  parameters: {
+    docs: {
+      description: {
+        component: nativePopoverContract.docs.description,
+      },
+    },
+  },
+} satisfies Meta<typeof NativePopover>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <Button type="button" popoverTarget="curve-native-popover-demo">
+        Open popover
+      </Button>
+      <NativePopover id="curve-native-popover-demo">
+        <NativePopoverHeader>
+          <NativePopoverTitle>Native popover</NativePopoverTitle>
+          <NativePopoverDescription>
+            Uses <code>popover</code> and <code>popovertarget</code> — no positioning library.
+          </NativePopoverDescription>
+        </NativePopoverHeader>
+      </NativePopover>
+    </>
+  ),
+};
diff --git a/packages/react/src/components/ui/native-popover/native-popover.tsx b/packages/react/src/components/ui/native-popover/native-popover.tsx
new file mode 100644
index 00000000..96614835
--- /dev/null
+++ b/packages/react/src/components/ui/native-popover/native-popover.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import styles from './native-popover.module.css';
+
+type NativePopoverProps = React.ComponentProps<'div'> & {
+  popover?: 'auto' | 'manual' | '';
+};
+
+function NativePopover({ className, popover = 'auto', ...props }: NativePopoverProps) {
+  return (
+    <div
+      data-slot="native-popover"
+      popover={popover}
+      className={cn(styles.popover, className)}
+      {...props}
+    />
+  );
+}
+
+type NativePopoverTriggerProps = React.ComponentProps<'button'> & {
+  popoverTarget: string;
+};
+
+function NativePopoverTrigger({
+  className,
+  popoverTarget,
+  type = 'button',
+  ...props
+}: NativePopoverTriggerProps) {
+  return (
+    <button
+      type={type}
+      data-slot="native-popover-trigger"
+      popoverTarget={popoverTarget}
+      className={cn(styles.trigger, className)}
+      {...props}
+    />
+  );
+}
+
+function NativePopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="native-popover-header" className={cn(styles.header, className)} {...props} />
+  );
+}
+
+function NativePopoverTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="native-popover-title" className={cn(styles.title, className)} {...props} />
+  );
+}
+
+function NativePopoverDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="native-popover-description"
+      className={cn(styles.description, className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  NativePopover,
+  NativePopoverDescription,
+  NativePopoverHeader,
+  NativePopoverTitle,
+  NativePopoverTrigger,
+};
diff --git a/packages/react/src/components/ui/native-progress/index.ts b/packages/react/src/components/ui/native-progress/index.ts
new file mode 100644
index 00000000..258c1c28
--- /dev/null
+++ b/packages/react/src/components/ui/native-progress/index.ts
@@ -0,0 +1 @@
+export * from './native-progress';
diff --git a/packages/react/src/components/ui/native-progress/native-progress.module.css b/packages/react/src/components/ui/native-progress/native-progress.module.css
new file mode 100644
index 00000000..7abcf997
--- /dev/null
+++ b/packages/react/src/components/ui/native-progress/native-progress.module.css
@@ -0,0 +1,25 @@
+.progress {
+  width: 100%;
+  height: calc(var(--spacing, 0.25rem) * 1.5);
+  appearance: none;
+  overflow: hidden;
+  border: none;
+  border-radius: 9999px;
+  background-color: var(--muted);
+}
+
+.progress::-webkit-progress-bar {
+  background-color: var(--muted);
+  border-radius: 9999px;
+}
+
+.progress::-webkit-progress-value {
+  background-color: var(--primary);
+  border-radius: 9999px;
+  transition: width 150ms ease;
+}
+
+.progress::-moz-progress-bar {
+  background-color: var(--primary);
+  border-radius: 9999px;
+}
diff --git a/packages/react/src/components/ui/native-progress/native-progress.stories.tsx b/packages/react/src/components/ui/native-progress/native-progress.stories.tsx
new file mode 100644
index 00000000..33cb5b8b
--- /dev/null
+++ b/packages/react/src/components/ui/native-progress/native-progress.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { nativeProgressContract } from '@surfnet/curve-contracts';
+
+import { NativeProgress } from './native-progress';
+
+const meta = {
+  title: 'Components/NativeProgress',
+  component: NativeProgress,
+  parameters: {
+    docs: {
+      description: {
+        component: nativeProgressContract.docs.description,
+      },
+    },
+  },
+} satisfies Meta<typeof NativeProgress>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <NativeProgress value={45} max={100} />,
+};
diff --git a/packages/react/src/components/ui/native-progress/native-progress.tsx b/packages/react/src/components/ui/native-progress/native-progress.tsx
new file mode 100644
index 00000000..1179beb0
--- /dev/null
+++ b/packages/react/src/components/ui/native-progress/native-progress.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+import styles from './native-progress.module.css';
+
+function NativeProgress({ className, ...props }: React.ComponentProps<'progress'>) {
+  return (
+    <progress data-slot="native-progress" className={cn(styles.progress, className)} {...props} />
+  );
+}
+
+export { NativeProgress };
diff --git a/packages/react/src/components/ui/native-radio/index.ts b/packages/react/src/components/ui/native-radio/index.ts
new file mode 100644
index 00000000..9cacc4a3
--- /dev/null
+++ b/packages/react/src/components/ui/native-radio/index.ts
@@ -0,0 +1 @@
+export * from './native-radio';
diff --git a/packages/react/src/components/ui/native-radio/native-radio.tsx b/packages/react/src/components/ui/native-radio/native-radio.tsx
new file mode 100644
index 00000000..39d10227
--- /dev/null
+++ b/packages/react/src/components/ui/native-radio/native-radio.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+import control from '../native-control/control.module.css';
+
+function NativeRadio({ className, ...props }: Omit<React.ComponentProps<'input'>, 'type'>) {
+  return (
+    <input
+      type="radio"
+      data-slot="native-radio"
+      className={cn(control.radio, className)}
+      {...props}
+    />
+  );
+}
+
+export { NativeRadio };
diff --git a/packages/react/src/components/ui/native-range/index.ts b/packages/react/src/components/ui/native-range/index.ts
new file mode 100644
index 00000000..ce58fa3e
--- /dev/null
+++ b/packages/react/src/components/ui/native-range/index.ts
@@ -0,0 +1 @@
+export * from './native-range';
diff --git a/packages/react/src/components/ui/native-range/native-range.tsx b/packages/react/src/components/ui/native-range/native-range.tsx
new file mode 100644
index 00000000..af4c7aea
--- /dev/null
+++ b/packages/react/src/components/ui/native-range/native-range.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+import control from '../native-control/control.module.css';
+
+function NativeRange({ className, ...props }: Omit<React.ComponentProps<'input'>, 'type'>) {
+  return (
+    <input
+      type="range"
+      data-slot="native-range"
+      className={cn(control.range, className)}
+      {...props}
+    />
+  );
+}
+
+export { NativeRange };
diff --git a/packages/react/src/components/ui/native-select/native-select.module.css b/packages/react/src/components/ui/native-select/native-select.module.css
new file mode 100644
index 00000000..132c9bfb
--- /dev/null
+++ b/packages/react/src/components/ui/native-select/native-select.module.css
@@ -0,0 +1,85 @@
+.wrapper {
+  position: relative;
+  width: fit-content;
+}
+
+.wrapper:has(select:disabled) {
+  opacity: 0.5;
+}
+
+.select {
+  height: calc(var(--spacing, 0.25rem) * 9);
+  width: 100%;
+  min-width: 0;
+  appearance: none;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: transparent;
+  padding: 0.25rem calc(var(--spacing, 0.25rem) * 8) 0.25rem calc(var(--spacing, 0.25rem) * 2.5);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  transition:
+    color 150ms ease,
+    box-shadow 150ms ease;
+  outline: none;
+  user-select: none;
+}
+
+.select::selection {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.select::placeholder {
+  color: var(--muted-foreground);
+}
+
+.select:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.select:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.select[aria-invalid='true'] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+.select[data-size='sm'] {
+  height: calc(var(--spacing, 0.25rem) * 8);
+}
+
+:global(.dark) .select {
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+}
+
+:global(.dark) .select:hover:not(:disabled) {
+  background-color: color-mix(in oklch, var(--input) 50%, transparent);
+}
+
+:global(.dark) .select[aria-invalid='true'] {
+  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.icon {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  right: calc(var(--spacing, 0.25rem) * 2.5);
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+  color: var(--muted-foreground);
+  transform: translateY(-50%);
+  user-select: none;
+}
+
+.option {
+  background-color: canvas;
+  color: canvastext;
+}
diff --git a/packages/react/src/components/ui/native-select/native-select.tsx b/packages/react/src/components/ui/native-select/native-select.tsx
index 1ea55a80..6b584ecf 100644
--- a/packages/react/src/components/ui/native-select/native-select.tsx
+++ b/packages/react/src/components/ui/native-select/native-select.tsx
@@ -1,11 +1,13 @@
 'use client';
 
 import * as React from 'react';
-
-import { cn } from '@/lib/utils';
 import { CaretDownIcon } from '@phosphor-icons/react';
 import type { NativeSelectSizeName } from '@surfnet/curve-contracts';
 
+import { cn } from '@/lib/utils';
+
+import styles from './native-select.module.css';
+
 type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
   size?: NativeSelectSizeName;
 };
@@ -13,35 +15,19 @@ type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
 function NativeSelect({ className, size = 'default', ...props }: NativeSelectProps) {
   return (
     <div
-      className={cn(
-        'group/native-select relative w-fit has-[select:disabled]:opacity-50',
-        className,
-      )}
+      className={cn(styles.wrapper, className)}
       data-slot="native-select-wrapper"
       data-size={size}
     >
-      <select
-        data-slot="native-select"
-        data-size={size}
-        className="h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
-        {...props}
-      />
-      <CaretDownIcon
-        className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
-        aria-hidden="true"
-        data-slot="native-select-icon"
-      />
+      <select data-slot="native-select" data-size={size} className={styles.select} {...props} />
+      <CaretDownIcon className={styles.icon} aria-hidden="true" data-slot="native-select-icon" />
     </div>
   );
 }
 
 function NativeSelectOption({ className, ...props }: React.ComponentProps<'option'>) {
   return (
-    <option
-      data-slot="native-select-option"
-      className={cn('bg-[Canvas] text-[CanvasText]', className)}
-      {...props}
-    />
+    <option data-slot="native-select-option" className={cn(styles.option, className)} {...props} />
   );
 }
 
@@ -49,7 +35,7 @@ function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<'opt
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn('bg-[Canvas] text-[CanvasText]', className)}
+      className={cn(styles.option, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/native-textarea/index.ts b/packages/react/src/components/ui/native-textarea/index.ts
new file mode 100644
index 00000000..01e0a5f6
--- /dev/null
+++ b/packages/react/src/components/ui/native-textarea/index.ts
@@ -0,0 +1 @@
+export * from './native-textarea';
diff --git a/packages/react/src/components/ui/native-textarea/native-textarea.tsx b/packages/react/src/components/ui/native-textarea/native-textarea.tsx
new file mode 100644
index 00000000..a339ad96
--- /dev/null
+++ b/packages/react/src/components/ui/native-textarea/native-textarea.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+import control from '../native-control/control.module.css';
+
+function NativeTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="native-textarea"
+      className={cn(control.textField, control.textarea, className)}
+      {...props}
+    />
+  );
+}
+
+export { NativeTextarea };
diff --git a/packages/react/src/components/ui/navigation-menu/navigation-menu.module.css b/packages/react/src/components/ui/navigation-menu/navigation-menu.module.css
new file mode 100644
index 00000000..ea9b5fb6
--- /dev/null
+++ b/packages/react/src/components/ui/navigation-menu/navigation-menu.module.css
@@ -0,0 +1,189 @@
+.root {
+  position: relative;
+  display: flex;
+  max-width: max-content;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.list {
+  display: flex;
+  flex: 1;
+  list-style: none;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+}
+
+.root[data-orientation='vertical'] .list {
+  flex-direction: column;
+  align-items: stretch;
+  text-align: center;
+}
+
+.item {
+  position: relative;
+}
+
+.trigger {
+  display: inline-flex;
+  height: calc(var(--spacing, 0.25rem) * 9);
+  width: max-content;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  padding: calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 4);
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 150ms ease;
+  outline: none;
+}
+
+.trigger:hover {
+  background-color: var(--muted);
+}
+
+.trigger:focus {
+  background-color: var(--muted);
+}
+
+.trigger:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+  outline: 1px solid transparent;
+}
+
+.trigger:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.trigger[data-open],
+.trigger[data-popup-open] {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.triggerCaret {
+  position: relative;
+  top: 1px;
+  margin-left: calc(var(--spacing, 0.25rem) * 1);
+  width: 0.75rem;
+  height: 0.75rem;
+  transition: transform 300ms ease;
+}
+
+.trigger[data-open] .triggerCaret,
+.trigger[data-popup-open] .triggerCaret {
+  transform: rotate(180deg);
+}
+
+.content {
+  height: 100%;
+  width: auto;
+  padding: calc(var(--spacing, 0.25rem) * 2);
+  padding-right: 0.625rem;
+}
+
+.root[data-viewport='false'] .content {
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  outline: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+.content :global([data-slot='navigation-menu-link']:focus) {
+  box-shadow: none;
+  outline: none;
+}
+
+.positioner {
+  isolation: isolate;
+  z-index: 50;
+  height: var(--positioner-height, auto);
+  width: var(--positioner-width, auto);
+  max-width: var(--available-width, 100%);
+}
+
+.popup {
+  position: relative;
+  height: var(--popup-height, auto);
+  width: var(--popup-width, auto);
+  border-radius: var(--radius-lg, calc(var(--radius, 0.625rem) * 1));
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  outline: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+.viewport {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.link {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  padding: calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  transition: all 150ms ease;
+  outline: none;
+}
+
+.link:hover {
+  background-color: var(--muted);
+}
+
+.link:focus {
+  background-color: var(--muted);
+}
+
+.link:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+  outline: 1px solid transparent;
+}
+
+.link[data-active='true'] {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.link[data-active='true']:hover,
+.link[data-active='true']:focus {
+  background-color: var(--secondary);
+}
+
+.link svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+:global([data-slot='navigation-menu-content']) .link {
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+}
+
+.indicator {
+  top: 100%;
+  z-index: 1;
+  display: flex;
+  height: 0.375rem;
+  align-items: flex-end;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.indicatorArrow {
+  position: relative;
+  top: 60%;
+  width: 0.5rem;
+  height: 0.5rem;
+  transform: rotate(45deg);
+  border-top-left-radius: 2px;
+  background-color: var(--border);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+}
diff --git a/packages/react/src/components/ui/navigation-menu/navigation-menu.stories.tsx b/packages/react/src/components/ui/navigation-menu/navigation-menu.stories.tsx
index 5257e288..bf70111b 100644
--- a/packages/react/src/components/ui/navigation-menu/navigation-menu.stories.tsx
+++ b/packages/react/src/components/ui/navigation-menu/navigation-menu.stories.tsx
@@ -85,10 +85,7 @@ export const Default: Story = {
           <NavigationMenuContent>
             <ul className="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
               <li className="row-span-3">
-                <NavigationMenuLink
-                  href="#"
-                  className="flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b from-muted/50 to-muted p-4 no-underline select-none"
-                >
+                <NavigationMenuLink href="#" className="story-nav-featured">
                   <div className="mb-2 text-lg font-medium">Curve</div>
                   <p className="text-sm leading-tight text-muted-foreground">
                     SURF's design system, built on shadcn/ui and Base UI.
diff --git a/packages/react/src/components/ui/navigation-menu/navigation-menu.tsx b/packages/react/src/components/ui/navigation-menu/navigation-menu.tsx
index 7d850464..d54c434d 100644
--- a/packages/react/src/components/ui/navigation-menu/navigation-menu.tsx
+++ b/packages/react/src/components/ui/navigation-menu/navigation-menu.tsx
@@ -1,11 +1,12 @@
 'use client';
 
 import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
-import { cva } from 'class-variance-authority';
 
 import { cn } from '@/lib/utils';
 import { CaretDownIcon } from '@phosphor-icons/react';
 
+import styles from './navigation-menu.module.css';
+
 function NavigationMenu({
   align = 'start',
   className,
@@ -18,10 +19,7 @@ function NavigationMenu({
       data-slot="navigation-menu"
       data-orientation={orientation}
       orientation={orientation}
-      className={cn(
-        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
-        className,
-      )}
+      className={cn(styles.root, className)}
       {...props}
     >
       {children}
@@ -40,10 +38,7 @@ function NavigationMenuList({
   return (
     <NavigationMenuPrimitive.List
       data-slot="navigation-menu-list"
-      className={cn(
-        'group flex flex-1 list-none items-center justify-center gap-0 group-data-[orientation=vertical]/navigation-menu:flex-col group-data-[orientation=vertical]/navigation-menu:items-stretch group-data-[orientation=vertical]/navigation-menu:text-center',
-        className,
-      )}
+      className={cn(styles.list, className)}
       {...props}
     />
   );
@@ -56,15 +51,15 @@ function NavigationMenuItem({
   return (
     <NavigationMenuPrimitive.Item
       data-slot="navigation-menu-item"
-      className={cn('relative', className)}
+      className={cn(styles.item, className)}
       {...props}
     />
   );
 }
 
-const navigationMenuTriggerStyle = cva(
-  'group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-secondary data-popup-open:text-secondary-foreground data-popup-open:hover:bg-secondary data-open:bg-secondary data-open:text-secondary-foreground data-open:hover:bg-secondary data-open:focus:bg-secondary',
-);
+function navigationMenuTriggerStyle() {
+  return styles.trigger;
+}
 
 function NavigationMenuTrigger({
   className,
@@ -74,14 +69,10 @@ function NavigationMenuTrigger({
   return (
     <NavigationMenuPrimitive.Trigger
       data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      className={cn(navigationMenuTriggerStyle(), className)}
       {...props}
     >
-      {children}{' '}
-      <CaretDownIcon
-        className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
-        aria-hidden="true"
-      />
+      {children} <CaretDownIcon className={styles.triggerCaret} aria-hidden="true" />
     </NavigationMenuPrimitive.Trigger>
   );
 }
@@ -90,10 +81,7 @@ function NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.
   return (
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
-      className={cn(
-        'data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-2 pr-2.5 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95',
-        className,
-      )}
+      className={cn(styles.content, className)}
       {...props}
     />
   );
@@ -114,14 +102,11 @@ function NavigationMenuPositioner({
         sideOffset={sideOffset}
         align={align}
         alignOffset={alignOffset}
-        className={cn(
-          'isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0',
-          className,
-        )}
+        className={cn(styles.positioner, className)}
         {...props}
       >
-        <NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
-          <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
+        <NavigationMenuPrimitive.Popup className={styles.popup}>
+          <NavigationMenuPrimitive.Viewport className={styles.viewport} />
         </NavigationMenuPrimitive.Popup>
       </NavigationMenuPrimitive.Positioner>
     </NavigationMenuPrimitive.Portal>
@@ -132,10 +117,7 @@ function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Lin
   return (
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
-      className={cn(
-        "flex flex-col gap-1 rounded-md p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-sm data-[active=true]:bg-secondary data-[active=true]:text-secondary-foreground data-[active=true]:hover:bg-secondary data-[active=true]:focus:bg-secondary [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.link, className)}
       {...props}
     />
   );
@@ -148,13 +130,10 @@ function NavigationMenuIndicator({
   return (
     <NavigationMenuPrimitive.Icon
       data-slot="navigation-menu-indicator"
-      className={cn(
-        'top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in',
-        className,
-      )}
+      className={cn(styles.indicator, className)}
       {...props}
     >
-      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+      <div className={styles.indicatorArrow} />
     </NavigationMenuPrimitive.Icon>
   );
 }
diff --git a/packages/react/src/components/ui/pagination/numbered-pagination.module.css b/packages/react/src/components/ui/pagination/numbered-pagination.module.css
new file mode 100644
index 00000000..a37ded67
--- /dev/null
+++ b/packages/react/src/components/ui/pagination/numbered-pagination.module.css
@@ -0,0 +1,26 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  padding: calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 4);
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  font-size: 0.875rem;
+  white-space: nowrap;
+  color: var(--muted-foreground);
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.pageSize {
+  width: 5rem;
+}
diff --git a/packages/react/src/components/ui/pagination/numbered-pagination.tsx b/packages/react/src/components/ui/pagination/numbered-pagination.tsx
index e71b41ea..e5a3d8de 100644
--- a/packages/react/src/components/ui/pagination/numbered-pagination.tsx
+++ b/packages/react/src/components/ui/pagination/numbered-pagination.tsx
@@ -20,6 +20,7 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from './pagination';
+import numberedStyles from './numbered-pagination.module.css';
 
 type Page = number | '...';
 
@@ -76,12 +77,8 @@ function NumberedPagination({
   const isLastPageActive = correctedCurrentPage === lastPageNumber;
 
   return (
-    <div
-      data-slot="numbered-pagination"
-      className={cn('flex items-center justify-between gap-2 px-4 py-2', className)}
-      {...props}
-    >
-      <div className="flex items-center gap-1 text-sm text-nowrap text-muted-foreground">
+    <div data-slot="numbered-pagination" className={cn(numberedStyles.root, className)} {...props}>
+      <div className={numberedStyles.meta}>
         <b>{totalItems}</b>
         total items |<b>{lastPageNumber}</b>
         pages
@@ -142,7 +139,7 @@ function NumberedPagination({
           }
         }}
       >
-        <SelectTrigger className="ml-auto w-fit">
+        <SelectTrigger className={numberedStyles.pageSize}>
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
diff --git a/packages/react/src/components/ui/pagination/pagination.module.css b/packages/react/src/components/ui/pagination/pagination.module.css
new file mode 100644
index 00000000..c3fa1831
--- /dev/null
+++ b/packages/react/src/components/ui/pagination/pagination.module.css
@@ -0,0 +1,67 @@
+.root {
+  margin-inline: auto;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+}
+
+.linkPaddingStart {
+  padding-inline-start: calc(var(--spacing, 0.25rem) * 2) !important;
+}
+
+.linkPaddingEnd {
+  padding-inline-end: calc(var(--spacing, 0.25rem) * 2) !important;
+}
+
+.ellipsis {
+  display: flex;
+  width: calc(var(--spacing, 0.25rem) * 9);
+  height: calc(var(--spacing, 0.25rem) * 9);
+  align-items: center;
+  justify-content: center;
+}
+
+.ellipsis svg {
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.hideSm {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .hideSm {
+    display: block;
+  }
+}
+
+.rtlFlip {
+  transform: scaleX(-1);
+}
+
+:global([dir='rtl']) .rtlFlip {
+  transform: scaleX(1);
+}
+
+:global([dir='rtl']) .rtlFlip:where(:not([dir='rtl'] *)) {
+  transform: scaleX(-1);
+}
diff --git a/packages/react/src/components/ui/pagination/pagination.tsx b/packages/react/src/components/ui/pagination/pagination.tsx
index 61dd4e76..71feef39 100644
--- a/packages/react/src/components/ui/pagination/pagination.tsx
+++ b/packages/react/src/components/ui/pagination/pagination.tsx
@@ -1,10 +1,12 @@
 'use client';
 
 import * as React from 'react';
+import { CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react';
 
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
-import { CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react';
+
+import styles from './pagination.module.css';
 
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
@@ -12,20 +14,14 @@ function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
       role="navigation"
       aria-label="pagination"
       data-slot="pagination"
-      className={cn('mx-auto flex w-full justify-center', className)}
+      className={cn(styles.root, className)}
       {...props}
     />
   );
 }
 
 function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
-  return (
-    <ul
-      data-slot="pagination-content"
-      className={cn('flex items-center gap-1', className)}
-      {...props}
-    />
-  );
+  return <ul data-slot="pagination-content" className={cn(styles.content, className)} {...props} />;
 }
 
 function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
@@ -67,11 +63,11 @@ function PaginationPrevious({
     <PaginationLink
       aria-label={ariaLabel}
       size={iconOnly ? 'icon' : 'default'}
-      className={cn(!iconOnly && 'ps-2!', className)}
+      className={cn(!iconOnly && styles.linkPaddingStart, className)}
       {...props}
     >
-      <CaretLeftIcon data-icon="inline-start" className="rtl:rotate-180" />
-      <span className={iconOnly ? 'sr-only' : 'hidden sm:block'}>{text}</span>
+      <CaretLeftIcon data-icon="inline-start" className={styles.rtlFlip} />
+      <span className={iconOnly ? styles.srOnly : styles.hideSm}>{text}</span>
     </PaginationLink>
   );
 }
@@ -87,11 +83,11 @@ function PaginationNext({
     <PaginationLink
       aria-label={ariaLabel}
       size={iconOnly ? 'icon' : 'default'}
-      className={cn(!iconOnly && 'pe-2!', className)}
+      className={cn(!iconOnly && styles.linkPaddingEnd, className)}
       {...props}
     >
-      <span className={iconOnly ? 'sr-only' : 'hidden sm:block'}>{text}</span>
-      <CaretRightIcon data-icon="inline-end" className="rtl:rotate-180" />
+      <span className={iconOnly ? styles.srOnly : styles.hideSm}>{text}</span>
+      <CaretRightIcon data-icon="inline-end" className={styles.rtlFlip} />
     </PaginationLink>
   );
 }
@@ -102,16 +98,9 @@ function PaginationEllipsis({
   ...props
 }: React.ComponentProps<'span'> & { srOnlyText?: string }) {
   return (
-    <span
-      data-slot="pagination-ellipsis"
-      className={cn(
-        "flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
+    <span data-slot="pagination-ellipsis" className={cn(styles.ellipsis, className)} {...props}>
       <DotsThreeIcon aria-hidden />
-      <span className="sr-only">{srOnlyText}</span>
+      <span className={styles.srOnly}>{srOnlyText}</span>
     </span>
   );
 }
diff --git a/packages/react/src/components/ui/popover/popover.module.css b/packages/react/src/components/ui/popover/popover.module.css
new file mode 100644
index 00000000..ea8d8bdd
--- /dev/null
+++ b/packages/react/src/components/ui/popover/popover.module.css
@@ -0,0 +1,35 @@
+.positioner {
+  isolation: isolate;
+  z-index: 50;
+}
+
+.content {
+  z-index: 50;
+  display: flex;
+  width: 18rem;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 4);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: var(--popover);
+  padding: calc(var(--spacing, 0.25rem) * 4);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--popover-foreground);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  outline: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  font-size: 0.875rem;
+}
+
+.title {
+  font-weight: 500;
+}
+
+.description {
+  color: var(--muted-foreground);
+}
diff --git a/packages/react/src/components/ui/popover/popover.tsx b/packages/react/src/components/ui/popover/popover.tsx
index 19f7e7c9..13d4446d 100644
--- a/packages/react/src/components/ui/popover/popover.tsx
+++ b/packages/react/src/components/ui/popover/popover.tsx
@@ -5,6 +5,8 @@ import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 
 import { cn } from '@/lib/utils';
 
+import styles from './popover.module.css';
+
 function Popover({ ...props }: PopoverPrimitive.Root.Props) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
@@ -29,14 +31,11 @@ function PopoverContent({
         alignOffset={alignOffset}
         side={side}
         sideOffset={sideOffset}
-        className="isolate z-50"
+        className={styles.positioner}
       >
         <PopoverPrimitive.Popup
           data-slot="popover-content"
-          className={cn(
-            'z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-            className,
-          )}
+          className={cn(styles.content, className)}
           {...props}
         />
       </PopoverPrimitive.Positioner>
@@ -45,20 +44,14 @@ function PopoverContent({
 }
 
 function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="popover-header"
-      className={cn('flex flex-col gap-1 text-sm', className)}
-      {...props}
-    />
-  );
+  return <div data-slot="popover-header" className={cn(styles.header, className)} {...props} />;
 }
 
 function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
   return (
     <PopoverPrimitive.Title
       data-slot="popover-title"
-      className={cn('font-medium', className)}
+      className={cn(styles.title, className)}
       {...props}
     />
   );
@@ -68,7 +61,7 @@ function PopoverDescription({ className, ...props }: PopoverPrimitive.Descriptio
   return (
     <PopoverPrimitive.Description
       data-slot="popover-description"
-      className={cn('text-muted-foreground', className)}
+      className={cn(styles.description, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/progress/progress.module.css b/packages/react/src/components/ui/progress/progress.module.css
new file mode 100644
index 00000000..e1456878
--- /dev/null
+++ b/packages/react/src/components/ui/progress/progress.module.css
@@ -0,0 +1,34 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.track {
+  position: relative;
+  display: flex;
+  height: calc(var(--spacing, 0.25rem) * 1.5);
+  width: 100%;
+  align-items: center;
+  overflow-x: hidden;
+  border-radius: 9999px;
+  background-color: var(--muted);
+}
+
+.indicator {
+  height: 100%;
+  background-color: var(--primary);
+  transition: all 150ms ease;
+}
+
+.label {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.value {
+  margin-left: auto;
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+}
diff --git a/packages/react/src/components/ui/progress/progress.tsx b/packages/react/src/components/ui/progress/progress.tsx
index 10db7c8a..d4cad42a 100644
--- a/packages/react/src/components/ui/progress/progress.tsx
+++ b/packages/react/src/components/ui/progress/progress.tsx
@@ -4,12 +4,14 @@ import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
 
 import { cn } from '@/lib/utils';
 
+import styles from './progress.module.css';
+
 function Progress({ className, children, value, ...props }: ProgressPrimitive.Root.Props) {
   return (
     <ProgressPrimitive.Root
       value={value}
       data-slot="progress"
-      className={cn('flex flex-col gap-1.5', className)}
+      className={cn(styles.root, className)}
       {...props}
     >
       {children}
@@ -23,10 +25,7 @@ function Progress({ className, children, value, ...props }: ProgressPrimitive.Ro
 function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
   return (
     <ProgressPrimitive.Track
-      className={cn(
-        'relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-muted',
-        className,
-      )}
+      className={cn(styles.track, className)}
       data-slot="progress-track"
       {...props}
     />
@@ -37,7 +36,7 @@ function ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.
   return (
     <ProgressPrimitive.Indicator
       data-slot="progress-indicator"
-      className={cn('h-full bg-primary transition-all', className)}
+      className={cn(styles.indicator, className)}
       {...props}
     />
   );
@@ -46,7 +45,7 @@ function ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.
 function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
   return (
     <ProgressPrimitive.Label
-      className={cn('text-sm font-medium', className)}
+      className={cn(styles.label, className)}
       data-slot="progress-label"
       {...props}
     />
@@ -56,7 +55,7 @@ function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
 function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
   return (
     <ProgressPrimitive.Value
-      className={cn('ml-auto text-sm text-muted-foreground tabular-nums', className)}
+      className={cn(styles.value, className)}
       data-slot="progress-value"
       {...props}
     />
diff --git a/packages/react/src/components/ui/radio-group/radio-group.module.css b/packages/react/src/components/ui/radio-group/radio-group.module.css
new file mode 100644
index 00000000..0015fa7e
--- /dev/null
+++ b/packages/react/src/components/ui/radio-group/radio-group.module.css
@@ -0,0 +1,83 @@
+.group {
+  display: grid;
+  width: 100%;
+  gap: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  aspect-ratio: 1;
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+  flex-shrink: 0;
+  border: 1px solid var(--input);
+  border-radius: 9999px;
+  outline: none;
+}
+
+.item::after {
+  content: '';
+  position: absolute;
+  inset: -0.5rem -0.75rem;
+}
+
+.item:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.item[aria-invalid='true'] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .item {
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+}
+
+:global(.dark) .item[aria-invalid='true'] {
+  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.item[data-checked],
+.item[aria-checked='true'] {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+:global(.dark) .item[data-checked],
+:global(.dark) .item[aria-checked='true'] {
+  background-color: var(--primary);
+}
+
+.item[aria-invalid='true'][data-checked],
+.item[aria-invalid='true'][aria-checked='true'] {
+  border-color: var(--primary);
+}
+
+.indicator {
+  display: flex;
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+  align-items: center;
+  justify-content: center;
+}
+
+.dot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: calc(var(--spacing, 0.25rem) * 2);
+  height: calc(var(--spacing, 0.25rem) * 2);
+  border-radius: 9999px;
+  background-color: var(--primary-foreground);
+  transform: translate(-50%, -50%);
+}
diff --git a/packages/react/src/components/ui/radio-group/radio-group.tsx b/packages/react/src/components/ui/radio-group/radio-group.tsx
index b5f9465b..639fb6aa 100644
--- a/packages/react/src/components/ui/radio-group/radio-group.tsx
+++ b/packages/react/src/components/ui/radio-group/radio-group.tsx
@@ -5,11 +5,13 @@ import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 
 import { cn } from '@/lib/utils';
 
+import styles from './radio-group.module.css';
+
 function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
   return (
     <RadioGroupPrimitive
       data-slot="radio-group"
-      className={cn('grid w-full gap-3', className)}
+      className={cn(styles.group, className)}
       {...props}
     />
   );
@@ -19,17 +21,11 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
   return (
     <RadioPrimitive.Root
       data-slot="radio-group-item"
-      className={cn(
-        'group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
-        className,
-      )}
+      className={cn(styles.item, className)}
       {...props}
     >
-      <RadioPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="flex size-4 items-center justify-center"
-      >
-        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+      <RadioPrimitive.Indicator data-slot="radio-group-indicator" className={styles.indicator}>
+        <span className={styles.dot} />
       </RadioPrimitive.Indicator>
     </RadioPrimitive.Root>
   );
diff --git a/packages/react/src/components/ui/resizable/resizable.module.css b/packages/react/src/components/ui/resizable/resizable.module.css
new file mode 100644
index 00000000..c24cef5e
--- /dev/null
+++ b/packages/react/src/components/ui/resizable/resizable.module.css
@@ -0,0 +1,66 @@
+.group {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.group[aria-orientation='vertical'] {
+  flex-direction: column;
+}
+
+.handle {
+  position: relative;
+  display: flex;
+  width: 1px;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--border);
+  outline: none;
+}
+
+.handle::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: calc(var(--spacing, 0.25rem) * 4);
+  transform: translateX(-50%);
+}
+
+.handle:focus-visible {
+  box-shadow: 0 0 0 1px var(--ring);
+}
+
+.handle[aria-orientation='horizontal'] {
+  height: 1px;
+  width: 100%;
+}
+
+.handle[aria-orientation='horizontal']::after {
+  top: 50%;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: calc(var(--spacing, 0.25rem) * 4);
+  transform: translateY(-50%);
+}
+
+.handleGrip {
+  z-index: 10;
+  display: flex;
+  height: calc(var(--spacing, 0.25rem) * 6);
+  width: calc(var(--spacing, 0.25rem) * 1);
+  flex-shrink: 0;
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  background-color: var(--border);
+}
+
+.handle[aria-orientation='horizontal'] .handleGrip {
+  transform: rotate(90deg);
+}
+
+.positioner {
+  isolation: isolate;
+  z-index: 50;
+}
diff --git a/packages/react/src/components/ui/resizable/resizable.tsx b/packages/react/src/components/ui/resizable/resizable.tsx
index 8db2b5e1..44f5efd0 100644
--- a/packages/react/src/components/ui/resizable/resizable.tsx
+++ b/packages/react/src/components/ui/resizable/resizable.tsx
@@ -5,6 +5,8 @@ import type { ResizableDirectionName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 
+import styles from './resizable.module.css';
+
 function ResizablePanelGroup({
   className,
   orientation,
@@ -16,7 +18,7 @@ function ResizablePanelGroup({
     <ResizablePrimitive.Group
       data-slot="resizable-panel-group"
       orientation={orientation}
-      className={cn('flex h-full w-full aria-[orientation=vertical]:flex-col', className)}
+      className={cn(styles.group, className)}
       {...props}
     />
   );
@@ -36,13 +38,10 @@ function ResizableHandle({
   return (
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
-      className={cn(
-        'relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90',
-        className,
-      )}
+      className={cn(styles.handle, className)}
       {...props}
     >
-      {withHandle && <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />}
+      {withHandle ? <div className={styles.handleGrip} /> : null}
     </ResizablePrimitive.Separator>
   );
 }
diff --git a/packages/react/src/components/ui/scroll-area/scroll-area.module.css b/packages/react/src/components/ui/scroll-area/scroll-area.module.css
new file mode 100644
index 00000000..66071904
--- /dev/null
+++ b/packages/react/src/components/ui/scroll-area/scroll-area.module.css
@@ -0,0 +1,48 @@
+.root {
+  position: relative;
+}
+
+.viewport {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  transition:
+    color 150ms ease,
+    box-shadow 150ms ease;
+  outline: none;
+}
+
+.viewport:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+  outline: 1px solid var(--ring);
+}
+
+.scrollbar {
+  display: flex;
+  touch-action: none;
+  padding: 1px;
+  transition: background-color 150ms ease;
+  user-select: none;
+}
+
+.scrollbar[data-orientation='vertical'],
+.scrollbar[data-vertical] {
+  height: 100%;
+  width: calc(var(--spacing, 0.25rem) * 2.5);
+  border-left: 1px solid transparent;
+}
+
+.scrollbar[data-orientation='horizontal'],
+.scrollbar[data-horizontal] {
+  height: calc(var(--spacing, 0.25rem) * 2.5);
+  width: 100%;
+  flex-direction: column;
+  border-top: 1px solid transparent;
+}
+
+.thumb {
+  position: relative;
+  flex: 1;
+  border-radius: 9999px;
+  background-color: var(--border);
+}
diff --git a/packages/react/src/components/ui/scroll-area/scroll-area.tsx b/packages/react/src/components/ui/scroll-area/scroll-area.tsx
index 9762e1cc..90afc75a 100644
--- a/packages/react/src/components/ui/scroll-area/scroll-area.tsx
+++ b/packages/react/src/components/ui/scroll-area/scroll-area.tsx
@@ -4,17 +4,16 @@ import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
 
 import { cn } from '@/lib/utils';
 
+import styles from './scroll-area.module.css';
+
 function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
-      className={cn('relative', className)}
+      className={cn(styles.root, className)}
       {...props}
     >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
-      >
+      <ScrollAreaPrimitive.Viewport data-slot="scroll-area-viewport" className={styles.viewport}>
         {children}
       </ScrollAreaPrimitive.Viewport>
       <ScrollBar />
@@ -33,16 +32,10 @@ function ScrollBar({
       data-slot="scroll-area-scrollbar"
       data-orientation={orientation}
       orientation={orientation}
-      className={cn(
-        'flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',
-        className,
-      )}
+      className={cn(styles.scrollbar, className)}
       {...props}
     >
-      <ScrollAreaPrimitive.Thumb
-        data-slot="scroll-area-thumb"
-        className="relative flex-1 rounded-full bg-border"
-      />
+      <ScrollAreaPrimitive.Thumb data-slot="scroll-area-thumb" className={styles.thumb} />
     </ScrollAreaPrimitive.Scrollbar>
   );
 }
diff --git a/packages/react/src/components/ui/select/select.module.css b/packages/react/src/components/ui/select/select.module.css
new file mode 100644
index 00000000..f611e7d3
--- /dev/null
+++ b/packages/react/src/components/ui/select/select.module.css
@@ -0,0 +1,211 @@
+.group {
+  scroll-margin-block: calc(var(--spacing, 0.25rem) * 1);
+  padding: calc(var(--spacing, 0.25rem) * 1);
+}
+
+.value {
+  display: flex;
+  flex: 1;
+  text-align: left;
+}
+
+.trigger {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+  border: 1px solid var(--input);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: transparent;
+  padding: calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 2)
+    calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 2.5);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  white-space: nowrap;
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  transition:
+    color 150ms ease,
+    box-shadow 150ms ease;
+  outline: none;
+}
+
+.trigger[data-size='default'] {
+  height: calc(var(--spacing, 0.25rem) * 9);
+}
+
+.trigger[data-size='sm'] {
+  height: calc(var(--spacing, 0.25rem) * 8);
+}
+
+.trigger:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.trigger[aria-invalid='true'] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .trigger {
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+}
+
+:global(.dark) .trigger:hover:not(:disabled) {
+  background-color: color-mix(in oklch, var(--input) 50%, transparent);
+}
+
+:global(.dark) .trigger[aria-invalid='true'] {
+  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.trigger[data-placeholder] {
+  color: var(--muted-foreground);
+}
+
+.trigger :global([data-slot='select-value']) {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.trigger svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.triggerIcon {
+  pointer-events: none;
+  width: 1rem;
+  height: 1rem;
+  color: var(--muted-foreground);
+}
+
+.positioner {
+  isolation: isolate;
+  z-index: 50;
+}
+
+.content {
+  position: relative;
+  isolation: isolate;
+  z-index: 50;
+  max-height: var(--available-height, 24rem);
+  width: var(--anchor-width, auto);
+  min-width: 9rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  outline: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+.label {
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--muted-foreground);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  cursor: default;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  border-radius: var(--radius-sm, calc(var(--radius, 0.625rem) * 0.6));
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 8)
+    calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline: none;
+  user-select: none;
+}
+
+.item:focus {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.item[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.item svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.itemText {
+  display: flex;
+  flex: 1;
+  flex-shrink: 0;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  white-space: nowrap;
+}
+
+.itemIndicator {
+  pointer-events: none;
+  position: absolute;
+  right: calc(var(--spacing, 0.25rem) * 2);
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.itemIndicatorIcon {
+  pointer-events: none;
+  width: 1rem;
+  height: 1rem;
+}
+
+.separator {
+  pointer-events: none;
+  margin-block: calc(var(--spacing, 0.25rem) * 1);
+  margin-inline: calc(var(--spacing, 0.25rem) * -1);
+  height: 1px;
+  background-color: var(--border);
+}
+
+.scrollButton {
+  z-index: 10;
+  display: flex;
+  width: 100%;
+  cursor: default;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--popover);
+  padding-block: calc(var(--spacing, 0.25rem) * 1);
+}
+
+.scrollButton svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.scrollUp {
+  top: 0;
+}
+
+.scrollDown {
+  bottom: 0;
+}
diff --git a/packages/react/src/components/ui/select/select.tsx b/packages/react/src/components/ui/select/select.tsx
index 64275743..c40b0a13 100644
--- a/packages/react/src/components/ui/select/select.tsx
+++ b/packages/react/src/components/ui/select/select.tsx
@@ -7,13 +7,15 @@ import type { SelectTriggerSizeName } from '@surfnet/curve-contracts';
 import { cn } from '@/lib/utils';
 import { CaretUpDownIcon, CheckIcon, CaretUpIcon, CaretDownIcon } from '@phosphor-icons/react';
 
+import styles from './select.module.css';
+
 const Select = SelectPrimitive.Root;
 
 function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
   return (
     <SelectPrimitive.Group
       data-slot="select-group"
-      className={cn('scroll-my-1 p-1', className)}
+      className={cn(styles.group, className)}
       {...props}
     />
   );
@@ -23,7 +25,7 @@ function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
   return (
     <SelectPrimitive.Value
       data-slot="select-value"
-      className={cn('flex flex-1 text-left', className)}
+      className={cn(styles.value, className)}
       {...props}
     />
   );
@@ -41,16 +43,11 @@ function SelectTrigger({
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
-      className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.trigger, className)}
       {...props}
     >
       {children}
-      <SelectPrimitive.Icon
-        render={<CaretUpDownIcon className="pointer-events-none size-4 text-muted-foreground" />}
-      />
+      <SelectPrimitive.Icon render={<CaretUpDownIcon className={styles.triggerIcon} />} />
     </SelectPrimitive.Trigger>
   );
 }
@@ -77,15 +74,12 @@ function SelectContent({
         align={align}
         alignOffset={alignOffset}
         alignItemWithTrigger={alignItemWithTrigger}
-        className="isolate z-50"
+        className={styles.positioner}
       >
         <SelectPrimitive.Popup
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
-          className={cn(
-            'relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-            className,
-          )}
+          className={cn(styles.content, className)}
           {...props}
         >
           <SelectScrollUpButton />
@@ -101,7 +95,7 @@ function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props)
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
-      className={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
+      className={cn(styles.label, className)}
       {...props}
     />
   );
@@ -109,23 +103,10 @@ function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props)
 
 function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
   return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-muted focus:text-foreground not-data-[variant=destructive]:focus:**:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className,
-      )}
-      {...props}
-    >
-      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
-        {children}
-      </SelectPrimitive.ItemText>
-      <SelectPrimitive.ItemIndicator
-        render={
-          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
-        }
-      >
-        <CheckIcon className="pointer-events-none" />
+    <SelectPrimitive.Item data-slot="select-item" className={cn(styles.item, className)} {...props}>
+      <SelectPrimitive.ItemText className={styles.itemText}>{children}</SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator render={<span className={styles.itemIndicator} />}>
+        <CheckIcon className={styles.itemIndicatorIcon} />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   );
@@ -135,7 +116,7 @@ function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Prop
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
+      className={cn(styles.separator, className)}
       {...props}
     />
   );
@@ -148,10 +129,7 @@ function SelectScrollUpButton({
   return (
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
-      className={cn(
-        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.scrollButton, styles.scrollUp, className)}
       {...props}
     >
       <CaretUpIcon />
@@ -166,10 +144,7 @@ function SelectScrollDownButton({
   return (
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"
-      className={cn(
-        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.scrollButton, styles.scrollDown, className)}
       {...props}
     >
       <CaretDownIcon />
diff --git a/packages/react/src/components/ui/separator/separator.module.css b/packages/react/src/components/ui/separator/separator.module.css
new file mode 100644
index 00000000..5686fe1e
--- /dev/null
+++ b/packages/react/src/components/ui/separator/separator.module.css
@@ -0,0 +1,16 @@
+.separator {
+  flex-shrink: 0;
+  background-color: var(--border);
+}
+
+.separator[data-orientation='horizontal'],
+.separator[data-horizontal] {
+  height: 1px;
+  width: 100%;
+}
+
+.separator[data-orientation='vertical'],
+.separator[data-vertical] {
+  width: 1px;
+  align-self: stretch;
+}
diff --git a/packages/react/src/components/ui/separator/separator.tsx b/packages/react/src/components/ui/separator/separator.tsx
index 34c7ba05..8f6b6b25 100644
--- a/packages/react/src/components/ui/separator/separator.tsx
+++ b/packages/react/src/components/ui/separator/separator.tsx
@@ -4,15 +4,15 @@ import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
 
 import { cn } from '@/lib/utils';
 
+import styles from './separator.module.css';
+
 function Separator({ className, orientation = 'horizontal', ...props }: SeparatorPrimitive.Props) {
   return (
     <SeparatorPrimitive
       data-slot="separator"
+      data-orientation={orientation}
       orientation={orientation}
-      className={cn(
-        'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
-        className,
-      )}
+      className={cn(styles.separator, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/sheet/sheet.module.css b/packages/react/src/components/ui/sheet/sheet.module.css
new file mode 100644
index 00000000..a73adee8
--- /dev/null
+++ b/packages/react/src/components/ui/sheet/sheet.module.css
@@ -0,0 +1,113 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgb(0 0 0 / 10%);
+  transition: opacity 150ms ease;
+}
+
+@supports (backdrop-filter: blur(1px)) {
+  .overlay {
+    backdrop-filter: blur(2px);
+  }
+}
+
+.content {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 4);
+  background-color: var(--popover);
+  background-clip: padding-box;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--popover-foreground);
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  transition:
+    transform 200ms ease-in-out,
+    opacity 200ms ease-in-out;
+}
+
+.content[data-side='top'] {
+  inset-inline: 0;
+  top: 0;
+  height: auto;
+  border-bottom: 1px solid var(--border);
+}
+
+.content[data-side='bottom'] {
+  inset-inline: 0;
+  bottom: 0;
+  height: auto;
+  border-top: 1px solid var(--border);
+}
+
+.content[data-side='left'],
+.content[data-side='right'] {
+  inset-block: 0;
+  height: 100%;
+  width: 75%;
+}
+
+.content[data-side='left'] {
+  left: 0;
+  border-right: 1px solid var(--border);
+}
+
+.content[data-side='right'] {
+  right: 0;
+  border-left: 1px solid var(--border);
+}
+
+@media (min-width: 640px) {
+  .content[data-side='left'],
+  .content[data-side='right'] {
+    max-width: 24rem;
+  }
+}
+
+.closeButton {
+  position: absolute;
+  top: calc(var(--spacing, 0.25rem) * 4);
+  right: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+  padding: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.footer {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  padding: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.title {
+  font-family: var(--font-heading, inherit);
+  font-weight: 500;
+  color: var(--foreground);
+}
+
+.description {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--muted-foreground);
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/packages/react/src/components/ui/sheet/sheet.tsx b/packages/react/src/components/ui/sheet/sheet.tsx
index 74ac852b..487c905b 100644
--- a/packages/react/src/components/ui/sheet/sheet.tsx
+++ b/packages/react/src/components/ui/sheet/sheet.tsx
@@ -8,6 +8,8 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { XIcon } from '@phosphor-icons/react';
 
+import styles from './sheet.module.css';
+
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
@@ -28,10 +30,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
   return (
     <SheetPrimitive.Backdrop
       data-slot="sheet-overlay"
-      className={cn(
-        'fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
-        className,
-      )}
+      className={cn(styles.overlay, className)}
       {...props}
     />
   );
@@ -53,20 +52,17 @@ function SheetContent({
       <SheetPrimitive.Popup
         data-slot="sheet-content"
         data-side={side}
-        className={cn(
-          'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
-          className,
-        )}
+        className={cn(styles.content, className)}
         {...props}
       >
         {children}
         {showCloseButton && (
           <SheetPrimitive.Close
             data-slot="sheet-close"
-            render={<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm" />}
+            render={<Button variant="ghost" className={styles.closeButton} size="icon-sm" />}
           >
             <XIcon />
-            <span className="sr-only">Close</span>
+            <span className={styles.srOnly}>Close</span>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Popup>
@@ -75,30 +71,18 @@ function SheetContent({
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn('flex flex-col gap-1.5 p-4', className)}
-      {...props}
-    />
-  );
+  return <div data-slot="sheet-header" className={cn(styles.header, className)} {...props} />;
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
-      {...props}
-    />
-  );
+  return <div data-slot="sheet-footer" className={cn(styles.footer, className)} {...props} />;
 }
 
 function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn('font-heading font-medium text-foreground', className)}
+      className={cn(styles.title, className)}
       {...props}
     />
   );
@@ -108,7 +92,7 @@ function SheetDescription({ className, ...props }: SheetPrimitive.Description.Pr
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn(styles.description, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/sidebar/sidebar.module.css b/packages/react/src/components/ui/sidebar/sidebar.module.css
new file mode 100644
index 00000000..cb338406
--- /dev/null
+++ b/packages/react/src/components/ui/sidebar/sidebar.module.css
@@ -0,0 +1,640 @@
+.wrapper {
+  display: flex;
+  min-height: 100svh;
+  width: 100%;
+}
+
+.wrapper:has([data-variant='inset']) {
+  background-color: var(--sidebar);
+}
+
+.sidebarStatic {
+  display: flex;
+  height: 100%;
+  width: var(--sidebar-width, 16rem);
+  flex-direction: column;
+  background-color: var(--sidebar);
+  color: var(--sidebar-foreground);
+}
+
+.peer {
+  display: none;
+  color: var(--sidebar-foreground);
+}
+
+@media (min-width: 768px) {
+  .peer {
+    display: block;
+  }
+}
+
+.gap {
+  position: relative;
+  width: var(--sidebar-width, 16rem);
+  background-color: transparent;
+  transition: width 200ms linear;
+}
+
+.peer[data-collapsible='offcanvas'] .gap {
+  width: 0;
+}
+
+.peer[data-side='right'] .gap {
+  transform: rotate(180deg);
+}
+
+.peer[data-collapsible='icon'] .gap {
+  width: var(--sidebar-width-icon, 3rem);
+}
+
+.peer[data-variant='floating'][data-collapsible='icon'] .gap,
+.peer[data-variant='inset'][data-collapsible='icon'] .gap {
+  width: calc(var(--sidebar-width-icon, 3rem) + calc(var(--spacing, 0.25rem) * 4));
+}
+
+.container {
+  position: fixed;
+  inset-block: 0;
+  z-index: 10;
+  display: none;
+  height: 100svh;
+  width: var(--sidebar-width, 16rem);
+  transition:
+    left 200ms linear,
+    right 200ms linear,
+    width 200ms linear;
+}
+
+@media (min-width: 768px) {
+  .container {
+    display: flex;
+  }
+}
+
+.container[data-side='left'] {
+  left: 0;
+}
+
+.container[data-side='right'] {
+  right: 0;
+}
+
+.peer[data-collapsible='offcanvas'] .container[data-side='left'] {
+  left: calc(var(--sidebar-width, 16rem) * -1);
+}
+
+.peer[data-collapsible='offcanvas'] .container[data-side='right'] {
+  right: calc(var(--sidebar-width, 16rem) * -1);
+}
+
+.peer[data-collapsible='icon'] .container {
+  width: var(--sidebar-width-icon, 3rem);
+}
+
+.peer[data-variant='floating'] .container,
+.peer[data-variant='inset'] .container {
+  padding: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.peer[data-variant='floating'][data-collapsible='icon'] .container,
+.peer[data-variant='inset'][data-collapsible='icon'] .container {
+  width: calc(var(--sidebar-width-icon, 3rem) + calc(var(--spacing, 0.25rem) * 4) + 2px);
+}
+
+.peer[data-variant='sidebar'] .container[data-side='left'] {
+  border-right: 1px solid var(--sidebar-border);
+}
+
+.peer[data-variant='sidebar'] .container[data-side='right'] {
+  border-left: 1px solid var(--sidebar-border);
+}
+
+.inner {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background-color: var(--sidebar);
+}
+
+.peer[data-variant='floating'] .inner {
+  border-radius: var(--radius-lg, calc(var(--radius, 0.625rem) * 1));
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  outline: 1px solid var(--sidebar-border);
+}
+
+.mobileSheet {
+  width: var(--sidebar-width, 18rem);
+  background-color: var(--sidebar);
+  padding: 0;
+  color: var(--sidebar-foreground);
+}
+
+.mobileSheet > button {
+  display: none;
+}
+
+.mobileInner {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.rail {
+  position: absolute;
+  inset-block: 0;
+  z-index: 20;
+  display: none;
+  width: 1rem;
+  transition: all 200ms linear;
+}
+
+@media (min-width: 640px) {
+  .rail {
+    display: flex;
+  }
+}
+
+.peer[data-side='left'] .rail {
+  right: -1rem;
+  cursor: w-resize;
+}
+
+.peer[data-side='right'] .rail {
+  left: 0;
+  cursor: e-resize;
+}
+
+.rail::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 50%;
+  width: 2px;
+}
+
+.rail:hover::after {
+  background-color: var(--sidebar-border);
+}
+
+.peer[data-side='left'][data-state='collapsed'] .rail {
+  cursor: e-resize;
+}
+
+.peer[data-side='right'][data-state='collapsed'] .rail {
+  cursor: w-resize;
+}
+
+.peer[data-collapsible='offcanvas'] .rail {
+  transform: translateX(0);
+}
+
+.peer[data-collapsible='offcanvas'] .rail::after {
+  left: 100%;
+}
+
+.peer[data-collapsible='offcanvas'] .rail:hover {
+  background-color: var(--sidebar);
+}
+
+.peer[data-side='left'][data-collapsible='offcanvas'] .rail {
+  right: -0.5rem;
+}
+
+.peer[data-side='right'][data-collapsible='offcanvas'] .rail {
+  left: -0.5rem;
+}
+
+.inset {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex: 1;
+  flex-direction: column;
+  background-color: var(--background);
+}
+
+@media (min-width: 768px) {
+  .peer[data-variant='inset'] ~ .inset {
+    margin: calc(var(--spacing, 0.25rem) * 2);
+    margin-left: 0;
+    border-radius: var(--radius-xl, calc(var(--radius, 0.625rem) * 1.2));
+    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  }
+
+  .peer[data-variant='inset'][data-state='collapsed'] ~ .inset {
+    margin-left: calc(var(--spacing, 0.25rem) * 2);
+  }
+}
+
+.input {
+  height: calc(var(--spacing, 0.25rem) * 8);
+  width: 100%;
+  background-color: var(--background);
+  box-shadow: none;
+}
+
+.header,
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  padding: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.separator {
+  margin-inline: calc(var(--spacing, 0.25rem) * 2);
+  width: auto;
+  background-color: var(--sidebar-border);
+}
+
+.content {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.content::-webkit-scrollbar {
+  display: none;
+}
+
+.peer[data-collapsible='icon'] .content {
+  overflow: hidden;
+}
+
+.group {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-direction: column;
+  padding: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.groupLabel {
+  display: flex;
+  height: calc(var(--spacing, 0.25rem) * 8);
+  flex-shrink: 0;
+  align-items: center;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  padding-inline: calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: color-mix(in oklch, var(--sidebar-foreground) 70%, transparent);
+  outline: none;
+  transition:
+    margin 200ms linear,
+    opacity 200ms linear;
+}
+
+.groupLabel:focus-visible {
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
+.groupLabel svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.peer[data-collapsible='icon'] .groupLabel {
+  margin-top: calc(var(--spacing, 0.25rem) * -8);
+  opacity: 0;
+}
+
+.groupAction {
+  position: absolute;
+  top: 0.875rem;
+  right: 0.75rem;
+  display: flex;
+  aspect-ratio: 1;
+  width: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  padding: 0;
+  color: var(--sidebar-foreground);
+  outline: none;
+  transition: transform 150ms ease;
+}
+
+.groupAction:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.groupAction:focus-visible {
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
+.peer[data-collapsible='icon'] .groupAction {
+  display: none;
+}
+
+.groupAction svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.groupContent {
+  width: 100%;
+  font-size: 0.875rem;
+}
+
+.menu {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+}
+
+.menuItem {
+  position: relative;
+}
+
+.menuButton {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  overflow: hidden;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  padding: calc(var(--spacing, 0.25rem) * 2);
+  text-align: left;
+  font-size: 0.875rem;
+  outline: none;
+  transition:
+    width 200ms linear,
+    height 200ms linear,
+    padding 200ms linear;
+}
+
+.menuItem:has([data-sidebar='menu-action']) .menuButton {
+  padding-right: calc(var(--spacing, 0.25rem) * 8);
+}
+
+.peer[data-collapsible='icon'] .menuButton {
+  width: calc(var(--spacing, 0.25rem) * 8);
+  height: calc(var(--spacing, 0.25rem) * 8);
+  padding: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.menuButton:hover,
+.menuButton[data-open]:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.menuButton:focus-visible {
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
+.menuButton:active {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.menuButton:disabled,
+.menuButton[aria-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.menuButton[data-active='true'],
+.menuButtonActive {
+  background-color: var(--sidebar-accent);
+  font-weight: 500;
+  color: var(--sidebar-accent-foreground);
+}
+
+.menuButton svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.menuButton > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menuButtonVariantOutline {
+  background-color: var(--background);
+  box-shadow: 0 0 0 1px var(--sidebar-border);
+}
+
+.menuButtonVariantOutline:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+  box-shadow: 0 0 0 1px var(--sidebar-accent);
+}
+
+.menuButtonSizeDefault {
+  height: calc(var(--spacing, 0.25rem) * 8);
+  font-size: 0.875rem;
+}
+
+.menuButtonSizeSm {
+  height: calc(var(--spacing, 0.25rem) * 7);
+  font-size: 0.75rem;
+}
+
+.menuButtonSizeLg {
+  height: calc(var(--spacing, 0.25rem) * 12);
+  font-size: 0.875rem;
+}
+
+.peer[data-collapsible='icon'] .menuButtonSizeLg {
+  padding: 0;
+}
+
+.menuAction {
+  position: absolute;
+  top: 0.375rem;
+  right: 0.25rem;
+  display: flex;
+  aspect-ratio: 1;
+  width: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  padding: 0;
+  color: var(--sidebar-foreground);
+  outline: none;
+  transition: transform 150ms ease;
+}
+
+.menuAction:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.menuAction:focus-visible {
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
+.peer[data-collapsible='icon'] .menuAction {
+  display: none;
+}
+
+.menuAction svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.menuActionShowOnHover {
+  opacity: 0;
+}
+
+@media (min-width: 768px) {
+  .menuItem:hover .menuActionShowOnHover,
+  .menuItem:focus-within .menuActionShowOnHover,
+  .menuActionShowOnHover[aria-expanded='true'] {
+    opacity: 1;
+  }
+}
+
+.menuBadge {
+  pointer-events: none;
+  position: absolute;
+  right: 0.25rem;
+  display: flex;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  padding-inline: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--sidebar-foreground);
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+
+.peer[data-collapsible='icon'] .menuBadge {
+  display: none;
+}
+
+.menuSkeleton {
+  display: flex;
+  height: calc(var(--spacing, 0.25rem) * 8);
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  padding-inline: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.skeletonIcon {
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+.skeletonText {
+  height: 1rem;
+  max-width: var(--skeleton-width, 70%);
+  flex: 1;
+}
+
+.menuSub {
+  margin-inline: 0.875rem;
+  display: flex;
+  min-width: 0;
+  transform: translateX(1px);
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  border-left: 1px solid var(--sidebar-border);
+  padding-inline: 0.625rem;
+  padding-block: 0.125rem;
+}
+
+.peer[data-collapsible='icon'] .menuSub {
+  display: none;
+}
+
+.menuSubItem {
+  position: relative;
+}
+
+.menuSubButton {
+  display: flex;
+  height: calc(var(--spacing, 0.25rem) * 7);
+  min-width: 0;
+  transform: translateX(-1px);
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  overflow: hidden;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  padding-inline: calc(var(--spacing, 0.25rem) * 2);
+  color: var(--sidebar-foreground);
+  outline: none;
+}
+
+.menuSubButton:hover,
+.menuSubButton:active {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.menuSubButton:focus-visible {
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
+.menuSubButton:disabled,
+.menuSubButton[aria-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.menuSubButton[data-active='true'],
+.menuSubButtonActive {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.menuSubButtonSizeMd {
+  font-size: 0.875rem;
+}
+
+.menuSubButtonSizeSm {
+  font-size: 0.75rem;
+}
+
+.peer[data-collapsible='icon'] .menuSubButton {
+  display: none;
+}
+
+.menuSubButton > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menuSubButton svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: var(--sidebar-accent-foreground);
+}
diff --git a/packages/react/src/components/ui/sidebar/sidebar.tsx b/packages/react/src/components/ui/sidebar/sidebar.tsx
index bcc039d9..f20c8f45 100644
--- a/packages/react/src/components/ui/sidebar/sidebar.tsx
+++ b/packages/react/src/components/ui/sidebar/sidebar.tsx
@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
-import { cva, type VariantProps } from 'class-variance-authority';
 import type {
   SidebarMenuButtonSizeName,
   SidebarMenuButtonVariantName,
@@ -25,6 +24,8 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { SidebarSimpleIcon } from '@phosphor-icons/react';
 
+import styles from './sidebar.module.css';
+
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = '16rem';
@@ -69,8 +70,6 @@ function SidebarProvider({
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React.useState(false);
 
-  // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
   const [_open, _setOpen] = React.useState(defaultOpen);
   const open = openProp ?? _open;
   const setOpen = React.useCallback(
@@ -82,18 +81,15 @@ function SidebarProvider({
         _setOpen(openState);
       }
 
-      // This sets the cookie to keep the sidebar state.
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
     [setOpenProp, open],
   );
 
-  // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
   }, [isMobile, setOpen, setOpenMobile]);
 
-  // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
@@ -106,8 +102,6 @@ function SidebarProvider({
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [toggleSidebar]);
 
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
   const state = open ? 'expanded' : 'collapsed';
 
   const contextValue = React.useMemo<SidebarContextProps>(
@@ -134,10 +128,7 @@ function SidebarProvider({
             ...style,
           } as React.CSSProperties
         }
-        className={cn(
-          'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
-          className,
-        )}
+        className={cn(styles.wrapper, className)}
         {...props}
       >
         {children}
@@ -163,14 +154,7 @@ function Sidebar({
 
   if (collapsible === 'none') {
     return (
-      <div
-        data-slot="sidebar"
-        className={cn(
-          'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',
-          className,
-        )}
-        {...props}
-      >
+      <div data-slot="sidebar" className={cn(styles.sidebarStatic, className)} {...props}>
         {children}
       </div>
     );
@@ -184,7 +168,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          className={styles.mobileSheet}
           style={
             {
               '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
@@ -192,11 +176,11 @@ function Sidebar({
           }
           side={side}
         >
-          <SheetHeader className="sr-only">
+          <SheetHeader className={styles.srOnly}>
             <SheetTitle>Sidebar</SheetTitle>
             <SheetDescription>Displays the mobile sidebar.</SheetDescription>
           </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
+          <div className={styles.mobileInner}>{children}</div>
         </SheetContent>
       </Sheet>
     );
@@ -204,43 +188,21 @@ function Sidebar({
 
   return (
     <div
-      className="group peer hidden text-sidebar-foreground md:block"
+      className={styles.peer}
       data-state={state}
       data-collapsible={state === 'collapsed' ? collapsible : ''}
       data-variant={variant}
       data-side={side}
       data-slot="sidebar"
     >
-      {/* This is what handles the sidebar gap on desktop */}
-      <div
-        data-slot="sidebar-gap"
-        className={cn(
-          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-          'group-data-[collapsible=offcanvas]:w-0',
-          'group-data-[side=right]:rotate-180',
-          variant === 'floating' || variant === 'inset'
-            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-        )}
-      />
+      <div data-slot="sidebar-gap" className={styles.gap} />
       <div
         data-slot="sidebar-container"
         data-side={side}
-        className={cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',
-          // Adjust the padding for floating and inset variants.
-          variant === 'floating' || variant === 'inset'
-            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-          className,
-        )}
+        className={cn(styles.container, className)}
         {...props}
       >
-        <div
-          data-sidebar="sidebar"
-          data-slot="sidebar-inner"
-          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
-        >
+        <div data-sidebar="sidebar" data-slot="sidebar-inner" className={styles.inner}>
           {children}
         </div>
       </div>
@@ -265,7 +227,7 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
       {...props}
     >
       <SidebarSimpleIcon />
-      <span className="sr-only">Toggle Sidebar</span>
+      <span className={styles.srOnly}>Toggle Sidebar</span>
     </Button>
   );
 }
@@ -281,31 +243,14 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
       tabIndex={-1}
       onClick={toggleSidebar}
       title="Toggle Sidebar"
-      className={cn(
-        'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
-        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
-        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-        className,
-      )}
+      className={cn(styles.rail, className)}
       {...props}
     />
   );
 }
 
 function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
-  return (
-    <main
-      data-slot="sidebar-inset"
-      className={cn(
-        'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <main data-slot="sidebar-inset" className={cn(styles.inset, className)} {...props} />;
 }
 
 function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
@@ -313,7 +258,7 @@ function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn('h-8 w-full bg-background shadow-none', className)}
+      className={cn(styles.input, className)}
       {...props}
     />
   );
@@ -324,7 +269,7 @@ function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn('flex flex-col gap-2 p-2', className)}
+      className={cn(styles.header, className)}
       {...props}
     />
   );
@@ -335,7 +280,7 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="sidebar-footer"
       data-sidebar="footer"
-      className={cn('flex flex-col gap-2 p-2', className)}
+      className={cn(styles.footer, className)}
       {...props}
     />
   );
@@ -346,7 +291,7 @@ function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof S
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn('mx-2 w-auto bg-sidebar-border', className)}
+      className={cn(styles.separator, className)}
       {...props}
     />
   );
@@ -357,10 +302,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="sidebar-content"
       data-sidebar="content"
-      className={cn(
-        'no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
-        className,
-      )}
+      className={cn(styles.content, className)}
       {...props}
     />
   );
@@ -371,7 +313,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      className={cn(styles.group, className)}
       {...props}
     />
   );
@@ -386,10 +328,7 @@ function SidebarGroupLabel({
     defaultTagName: 'div',
     props: mergeProps<'div'>(
       {
-        className: cn(
-          'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-          className,
-        ),
+        className: cn(styles.groupLabel, className),
       },
       props,
     ),
@@ -410,10 +349,7 @@ function SidebarGroupAction({
     defaultTagName: 'button',
     props: mergeProps<'button'>(
       {
-        className: cn(
-          'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
-          className,
-        ),
+        className: cn(styles.groupAction, className),
       },
       props,
     ),
@@ -430,7 +366,7 @@ function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'
     <div
       data-slot="sidebar-group-content"
       data-sidebar="group-content"
-      className={cn('w-full text-sm', className)}
+      className={cn(styles.groupContent, className)}
       {...props}
     />
   );
@@ -441,7 +377,7 @@ function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
-      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      className={cn(styles.menu, className)}
       {...props}
     />
   );
@@ -452,33 +388,46 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn('group/menu-item relative', className)}
+      className={cn(styles.menuItem, className)}
       {...props}
     />
   );
 }
 
-const sidebarMenuButtonVariants = cva(
-  'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
-  {
-    variants: {
-      variant: {
-        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-        outline:
-          'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
-      } satisfies Record<SidebarMenuButtonVariantName, string>,
-      size: {
-        default: 'h-8 text-sm',
-        sm: 'h-7 text-xs',
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
-      } satisfies Record<SidebarMenuButtonSizeName, string>,
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
+type SidebarModuleClasses = {
+  menuButton: string;
+  menuButtonVariantOutline: string;
+  menuButtonSizeDefault: string;
+  menuButtonSizeSm: string;
+  menuButtonSizeLg: string;
+  menuButtonActive: string;
+  menuSubButtonActive: string;
+  menuSubButtonSizeMd: string;
+  menuSubButtonSizeSm: string;
+};
+
+const sidebarStyles = styles as SidebarModuleClasses;
+
+const menuButtonVariantClass: Record<SidebarMenuButtonVariantName, string> = {
+  default: '',
+  outline: sidebarStyles.menuButtonVariantOutline,
+};
+
+const menuButtonSizeClass: Record<SidebarMenuButtonSizeName, string> = {
+  default: sidebarStyles.menuButtonSizeDefault,
+  sm: sidebarStyles.menuButtonSizeSm,
+  lg: sidebarStyles.menuButtonSizeLg,
+};
+
+function sidebarMenuButtonVariants({
+  variant = 'default',
+  size = 'default',
+}: {
+  variant?: SidebarMenuButtonVariantName;
+  size?: SidebarMenuButtonSizeName;
+} = {}) {
+  return cn(sidebarStyles.menuButton, menuButtonVariantClass[variant], menuButtonSizeClass[size]);
+}
 
 function SidebarMenuButton({
   render,
@@ -492,13 +441,20 @@ function SidebarMenuButton({
   React.ComponentProps<'button'> & {
     isActive?: boolean;
     tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-  } & VariantProps<typeof sidebarMenuButtonVariants>) {
+  } & {
+    variant?: SidebarMenuButtonVariantName;
+    size?: SidebarMenuButtonSizeName;
+  }) {
   const { isMobile, state } = useSidebar();
   const comp = useRender({
     defaultTagName: 'button',
     props: mergeProps<'button'>(
       {
-        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+        className: cn(
+          sidebarMenuButtonVariants({ variant, size }),
+          isActive && sidebarStyles.menuButtonActive,
+          className,
+        ),
       },
       props,
     ),
@@ -547,12 +503,7 @@ function SidebarMenuAction({
     defaultTagName: 'button',
     props: mergeProps<'button'>(
       {
-        className: cn(
-          'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
-          showOnHover &&
-            'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',
-          className,
-        ),
+        className: cn(styles.menuAction, showOnHover && styles.menuActionShowOnHover, className),
       },
       props,
     ),
@@ -569,10 +520,7 @@ function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>)
     <div
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
-      className={cn(
-        'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',
-        className,
-      )}
+      className={cn(styles.menuBadge, className)}
       {...props}
     />
   );
@@ -585,7 +533,6 @@ function SidebarMenuSkeleton({
 }: React.ComponentProps<'div'> & {
   showIcon?: boolean;
 }) {
-  // Random width between 50 to 90%.
   const [width] = React.useState(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   });
@@ -594,12 +541,12 @@ function SidebarMenuSkeleton({
     <div
       data-slot="sidebar-menu-skeleton"
       data-sidebar="menu-skeleton"
-      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      className={cn(styles.menuSkeleton, className)}
       {...props}
     >
-      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+      {showIcon && <Skeleton className={styles.skeletonIcon} data-sidebar="menu-skeleton-icon" />}
       <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
+        className={styles.skeletonText}
         data-sidebar="menu-skeleton-text"
         style={
           {
@@ -616,10 +563,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
     <ul
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
-      className={cn(
-        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',
-        className,
-      )}
+      className={cn(styles.menuSub, className)}
       {...props}
     />
   );
@@ -630,7 +574,7 @@ function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>)
     <li
       data-slot="sidebar-menu-sub-item"
       data-sidebar="menu-sub-item"
-      className={cn('group/menu-sub-item relative', className)}
+      className={cn(styles.menuSubItem, className)}
       {...props}
     />
   );
@@ -652,7 +596,9 @@ function SidebarMenuSubButton({
     props: mergeProps<'a'>(
       {
         className: cn(
-          'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+          styles.menuSubButton,
+          size === 'sm' ? sidebarStyles.menuSubButtonSizeSm : sidebarStyles.menuSubButtonSizeMd,
+          isActive && sidebarStyles.menuSubButtonActive,
           className,
         ),
       },
diff --git a/packages/react/src/components/ui/skeleton/skeleton.module.css b/packages/react/src/components/ui/skeleton/skeleton.module.css
new file mode 100644
index 00000000..f8c2514f
--- /dev/null
+++ b/packages/react/src/components/ui/skeleton/skeleton.module.css
@@ -0,0 +1,16 @@
+@keyframes skeletonPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.skeleton {
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: var(--muted);
+  animation: skeletonPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
diff --git a/packages/react/src/components/ui/skeleton/skeleton.tsx b/packages/react/src/components/ui/skeleton/skeleton.tsx
index 71152e1f..be3844b9 100644
--- a/packages/react/src/components/ui/skeleton/skeleton.tsx
+++ b/packages/react/src/components/ui/skeleton/skeleton.tsx
@@ -2,14 +2,10 @@
 
 import { cn } from '@/lib/utils';
 
+import styles from './skeleton.module.css';
+
 function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn('animate-pulse rounded-md bg-muted', className)}
-      {...props}
-    />
-  );
+  return <div data-slot="skeleton" className={cn(styles.skeleton, className)} {...props} />;
 }
 
 export { Skeleton };
diff --git a/packages/react/src/components/ui/slider/slider.module.css b/packages/react/src/components/ui/slider/slider.module.css
new file mode 100644
index 00000000..a1813a82
--- /dev/null
+++ b/packages/react/src/components/ui/slider/slider.module.css
@@ -0,0 +1,95 @@
+.root[data-horizontal],
+.root[data-orientation='horizontal'] {
+  width: 100%;
+}
+
+.root[data-vertical],
+.root[data-orientation='vertical'] {
+  height: 100%;
+}
+
+.control {
+  position: relative;
+  display: flex;
+  width: 100%;
+  touch-action: none;
+  align-items: center;
+  user-select: none;
+}
+
+.control[data-disabled] {
+  opacity: 0.5;
+}
+
+.control[data-vertical],
+.control[data-orientation='vertical'] {
+  height: 100%;
+  min-height: calc(var(--spacing, 0.25rem) * 40);
+  width: auto;
+  flex-direction: column;
+}
+
+.track {
+  position: relative;
+  flex-grow: 1;
+  overflow: hidden;
+  border-radius: 9999px;
+  background-color: var(--muted);
+  user-select: none;
+}
+
+.track[data-horizontal],
+.track[data-orientation='horizontal'] {
+  height: calc(var(--spacing, 0.25rem) * 1.5);
+  width: 100%;
+}
+
+.track[data-vertical],
+.track[data-orientation='vertical'] {
+  height: 100%;
+  width: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.indicator {
+  background-color: var(--primary);
+  user-select: none;
+}
+
+.indicator[data-horizontal],
+.indicator[data-orientation='horizontal'] {
+  height: 100%;
+}
+
+.indicator[data-vertical],
+.indicator[data-orientation='vertical'] {
+  width: 100%;
+}
+
+.thumb {
+  display: block;
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+  flex-shrink: 0;
+  border: 1px solid var(--primary);
+  border-radius: 9999px;
+  background-color: var(--background);
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  transition:
+    color 150ms ease,
+    box-shadow 150ms ease;
+  user-select: none;
+  outline: none;
+}
+
+.thumb:hover {
+  box-shadow: 0 0 0 4px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.thumb:focus-visible {
+  box-shadow: 0 0 0 4px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.thumb:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
diff --git a/packages/react/src/components/ui/slider/slider.tsx b/packages/react/src/components/ui/slider/slider.tsx
index 63aa0507..1aa8c306 100644
--- a/packages/react/src/components/ui/slider/slider.tsx
+++ b/packages/react/src/components/ui/slider/slider.tsx
@@ -5,6 +5,8 @@ import type { SliderOrientationName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 
+import styles from './slider.module.css';
+
 type SliderProps = Omit<SliderPrimitive.Root.Props, 'orientation'> & {
   orientation?: SliderOrientationName;
 };
@@ -18,7 +20,7 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
 
   return (
     <SliderPrimitive.Root
-      className={cn('data-horizontal:w-full data-vertical:h-full', className)}
+      className={cn(styles.root, className)}
       data-slot="slider"
       defaultValue={defaultValue}
       value={value}
@@ -27,22 +29,12 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
       thumbAlignment="edge"
       {...props}
     >
-      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
-        <SliderPrimitive.Track
-          data-slot="slider-track"
-          className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5"
-        >
-          <SliderPrimitive.Indicator
-            data-slot="slider-range"
-            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
-          />
+      <SliderPrimitive.Control className={styles.control}>
+        <SliderPrimitive.Track data-slot="slider-track" className={styles.track}>
+          <SliderPrimitive.Indicator data-slot="slider-range" className={styles.indicator} />
         </SliderPrimitive.Track>
         {Array.from({ length: _values.length }, (_, index) => (
-          <SliderPrimitive.Thumb
-            data-slot="slider-thumb"
-            key={index}
-            className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-          />
+          <SliderPrimitive.Thumb data-slot="slider-thumb" key={index} className={styles.thumb} />
         ))}
       </SliderPrimitive.Control>
     </SliderPrimitive.Root>
diff --git a/packages/react/src/components/ui/sonner/sonner.module.css b/packages/react/src/components/ui/sonner/sonner.module.css
new file mode 100644
index 00000000..53ce0108
--- /dev/null
+++ b/packages/react/src/components/ui/sonner/sonner.module.css
@@ -0,0 +1,20 @@
+.icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.iconSpin {
+  width: 1rem;
+  height: 1rem;
+  animation: sonnerSpin 1s linear infinite;
+}
+
+@keyframes sonnerSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.toaster {
+  /* Sonner root hook — theme vars set inline in component */
+}
diff --git a/packages/react/src/components/ui/sonner/sonner.tsx b/packages/react/src/components/ui/sonner/sonner.tsx
index 049725bb..96ee0fc5 100644
--- a/packages/react/src/components/ui/sonner/sonner.tsx
+++ b/packages/react/src/components/ui/sonner/sonner.tsx
@@ -1,14 +1,16 @@
 'use client';
 
-import { useTheme } from 'next-themes';
-import { Toaster as Sonner, type ToasterProps } from 'sonner';
 import {
   CheckCircleIcon,
   InfoIcon,
+  SpinnerIcon,
   WarningIcon,
   XCircleIcon,
-  SpinnerIcon,
 } from '@phosphor-icons/react';
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, type ToasterProps } from 'sonner';
+
+import styles from './sonner.module.css';
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = 'system' } = useTheme();
@@ -16,13 +18,13 @@ const Toaster = ({ ...props }: ToasterProps) => {
   return (
     <Sonner
       theme={theme as ToasterProps['theme']}
-      className="toaster group"
+      className={styles.toaster}
       icons={{
-        success: <CheckCircleIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <WarningIcon className="size-4" />,
-        error: <XCircleIcon className="size-4" />,
-        loading: <SpinnerIcon className="size-4 animate-spin" />,
+        success: <CheckCircleIcon className={styles.icon} />,
+        info: <InfoIcon className={styles.icon} />,
+        warning: <WarningIcon className={styles.icon} />,
+        error: <XCircleIcon className={styles.icon} />,
+        loading: <SpinnerIcon className={styles.iconSpin} />,
       }}
       style={
         {
@@ -32,11 +34,6 @@ const Toaster = ({ ...props }: ToasterProps) => {
           '--border-radius': 'var(--radius)',
         } as React.CSSProperties
       }
-      toastOptions={{
-        classNames: {
-          toast: 'cn-toast',
-        },
-      }}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/spinner/spinner.module.css b/packages/react/src/components/ui/spinner/spinner.module.css
new file mode 100644
index 00000000..49616446
--- /dev/null
+++ b/packages/react/src/components/ui/spinner/spinner.module.css
@@ -0,0 +1,11 @@
+@keyframes spinnerSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+  animation: spinnerSpin 1s linear infinite;
+}
diff --git a/packages/react/src/components/ui/spinner/spinner.stories.tsx b/packages/react/src/components/ui/spinner/spinner.stories.tsx
index 0edb30bf..b5e445f2 100644
--- a/packages/react/src/components/ui/spinner/spinner.stories.tsx
+++ b/packages/react/src/components/ui/spinner/spinner.stories.tsx
@@ -10,6 +10,7 @@ import { Spinner } from './spinner';
 const meta = {
   title: 'Components/Spinner',
   component: Spinner,
+  tags: ['skip-visual'],
   parameters: {
     docs: {
       description: {
diff --git a/packages/react/src/components/ui/spinner/spinner.tsx b/packages/react/src/components/ui/spinner/spinner.tsx
index ca990ee1..1b8c53a0 100644
--- a/packages/react/src/components/ui/spinner/spinner.tsx
+++ b/packages/react/src/components/ui/spinner/spinner.tsx
@@ -1,15 +1,18 @@
 'use client';
 
-import { cn } from '@/lib/utils';
 import { SpinnerIcon } from '@phosphor-icons/react';
 
+import { cn } from '@/lib/utils';
+
+import styles from './spinner.module.css';
+
 function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
   return (
     <SpinnerIcon
       data-slot="spinner"
       role="status"
       aria-label="Loading"
-      className={cn('size-4 animate-spin', className)}
+      className={cn(styles.spinner, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/switch/switch.module.css b/packages/react/src/components/ui/switch/switch.module.css
new file mode 100644
index 00000000..4c604a5d
--- /dev/null
+++ b/packages/react/src/components/ui/switch/switch.module.css
@@ -0,0 +1,94 @@
+.switch {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  transition: all 150ms ease;
+  outline: none;
+}
+
+.switch::after {
+  content: '';
+  position: absolute;
+  inset: -0.5rem -0.75rem;
+}
+
+.switch[data-size='default'] {
+  height: 18.4px;
+  width: 32px;
+}
+
+.switch[data-size='sm'] {
+  height: 14px;
+  width: 24px;
+}
+
+.switch:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.switch[aria-invalid='true'] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .switch[aria-invalid='true'] {
+  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.switch[data-checked] {
+  background-color: var(--primary);
+}
+
+.switch[data-unchecked] {
+  background-color: var(--input);
+}
+
+:global(.dark) .switch[data-unchecked] {
+  background-color: color-mix(in oklch, var(--input) 80%, transparent);
+}
+
+.switch[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.thumb {
+  pointer-events: none;
+  display: block;
+  border-radius: 9999px;
+  background-color: var(--background);
+  box-shadow: none;
+  transition: transform 150ms ease;
+}
+
+.switch[data-size='default'] .thumb {
+  width: calc(var(--spacing, 0.25rem) * 4);
+  height: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.switch[data-size='sm'] .thumb {
+  width: calc(var(--spacing, 0.25rem) * 3);
+  height: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.switch[data-unchecked] .thumb {
+  transform: translateX(0);
+}
+
+.switch[data-checked] .thumb {
+  transform: translateX(calc(100% - 2px));
+}
+
+:global(.dark) .switch[data-checked] .thumb {
+  background-color: var(--primary-foreground);
+}
+
+:global(.dark) .switch[data-unchecked] .thumb {
+  background-color: var(--foreground);
+}
diff --git a/packages/react/src/components/ui/switch/switch.tsx b/packages/react/src/components/ui/switch/switch.tsx
index fcfd76c7..22fa4bbc 100644
--- a/packages/react/src/components/ui/switch/switch.tsx
+++ b/packages/react/src/components/ui/switch/switch.tsx
@@ -5,6 +5,8 @@ import type { SwitchSizeName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 
+import styles from './switch.module.css';
+
 function Switch({
   className,
   size = 'default',
@@ -16,16 +18,10 @@ function Switch({
     <SwitchPrimitive.Root
       data-slot="switch"
       data-size={size}
-      className={cn(
-        'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50',
-        className,
-      )}
+      className={cn(styles.switch, className)}
       {...props}
     >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
-      />
+      <SwitchPrimitive.Thumb data-slot="switch-thumb" className={styles.thumb} />
     </SwitchPrimitive.Root>
   );
 }
diff --git a/packages/react/src/components/ui/table/table.module.css b/packages/react/src/components/ui/table/table.module.css
new file mode 100644
index 00000000..cfd0fab6
--- /dev/null
+++ b/packages/react/src/components/ui/table/table.module.css
@@ -0,0 +1,80 @@
+.container {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  caption-side: bottom;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.header :global(tr) {
+  border-bottom: 1px solid var(--border);
+}
+
+.body :global(tr:last-child) {
+  border-bottom-width: 0;
+}
+
+.footer {
+  border-top: 1px solid var(--border);
+  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
+  font-weight: 500;
+}
+
+.footer :global(tr:last-child) {
+  border-bottom-width: 0;
+}
+
+.row {
+  border-bottom: 1px solid var(--border);
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+.row:hover {
+  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
+}
+
+.row:has([aria-expanded='true']) {
+  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
+}
+
+.row[data-state='selected'] {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.head {
+  height: calc(var(--spacing, 0.25rem) * 10);
+  padding-inline: calc(var(--spacing, 0.25rem) * 2);
+  text-align: left;
+  vertical-align: middle;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--foreground);
+}
+
+.head:has([role='checkbox']) {
+  padding-right: 0;
+}
+
+.cell {
+  padding: calc(var(--spacing, 0.25rem) * 2);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.cell:has([role='checkbox']) {
+  padding-right: 0;
+}
+
+.caption {
+  margin-top: calc(var(--spacing, 0.25rem) * 4);
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
diff --git a/packages/react/src/components/ui/table/table.tsx b/packages/react/src/components/ui/table/table.tsx
index b5ee8f73..1d7f25f5 100644
--- a/packages/react/src/components/ui/table/table.tsx
+++ b/packages/react/src/components/ui/table/table.tsx
@@ -4,86 +4,42 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
+import styles from './table.module.css';
+
 function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (
-    <div data-slot="table-container" className="relative w-full overflow-x-auto">
-      <table
-        data-slot="table"
-        className={cn('w-full caption-bottom text-sm', className)}
-        {...props}
-      />
+    <div data-slot="table-container" className={styles.container}>
+      <table data-slot="table" className={cn(styles.table, className)} {...props} />
     </div>
   );
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
-  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />;
+  return <thead data-slot="table-header" className={cn(styles.header, className)} {...props} />;
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn('[&_tr:last-child]:border-0', className)}
-      {...props}
-    />
-  );
+  return <tbody data-slot="table-body" className={cn(styles.body, className)} {...props} />;
 }
 
 function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
-      {...props}
-    />
-  );
+  return <tfoot data-slot="table-footer" className={cn(styles.footer, className)} {...props} />;
 }
 
 function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-secondary data-[state=selected]:text-secondary-foreground',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <tr data-slot="table-row" className={cn(styles.row, className)} {...props} />;
 }
 
 function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <th data-slot="table-head" className={cn(styles.head, className)} {...props} />;
 }
 
 function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
-      {...props}
-    />
-  );
+  return <td data-slot="table-cell" className={cn(styles.cell, className)} {...props} />;
 }
 
 function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn('mt-4 text-sm text-muted-foreground', className)}
-      {...props}
-    />
-  );
+  return <caption data-slot="table-caption" className={cn(styles.caption, className)} {...props} />;
 }
 
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/packages/react/src/components/ui/tabs/tabs.module.css b/packages/react/src/components/ui/tabs/tabs.module.css
new file mode 100644
index 00000000..5b80fef5
--- /dev/null
+++ b/packages/react/src/components/ui/tabs/tabs.module.css
@@ -0,0 +1,164 @@
+.root {
+  display: flex;
+  gap: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.root[data-orientation='horizontal'],
+.root[data-horizontal] {
+  flex-direction: column;
+}
+
+.list {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  padding: 3px;
+  color: var(--muted-foreground);
+}
+
+.root[data-orientation='horizontal'] .list,
+.root[data-horizontal] .list {
+  height: calc(var(--spacing, 0.25rem) * 9);
+}
+
+.root[data-orientation='vertical'] .list,
+.root[data-vertical] .list {
+  height: fit-content;
+  flex-direction: column;
+}
+
+.list[data-variant='default'],
+.listDefault {
+  background-color: var(--muted);
+}
+
+.list[data-variant='line'],
+.listLine {
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.trigger {
+  position: relative;
+  display: inline-flex;
+  height: calc(100% - 1px);
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  padding: calc(var(--spacing, 0.25rem) * 1) calc(var(--spacing, 0.25rem) * 2);
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  color: color-mix(in oklch, var(--foreground) 60%, transparent);
+  transition: all 150ms ease;
+  outline: none;
+}
+
+.root[data-orientation='vertical'] .trigger,
+.root[data-vertical] .trigger {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.trigger:hover {
+  color: var(--foreground);
+}
+
+:global(.dark) .trigger {
+  color: var(--muted-foreground);
+}
+
+:global(.dark) .trigger:hover {
+  color: var(--foreground);
+}
+
+.trigger:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+  outline: 1px solid var(--ring);
+}
+
+.trigger:disabled,
+.trigger[aria-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.trigger:has([data-icon='inline-end']) {
+  padding-inline-end: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.trigger:has([data-icon='inline-start']) {
+  padding-inline-start: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.trigger svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.trigger[data-active] {
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+:global(.dark) .trigger[data-active] {
+  border-color: var(--input);
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+  color: var(--foreground);
+}
+
+.list[data-variant='default'] .trigger[data-active],
+.listDefault .trigger[data-active] {
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+}
+
+.list[data-variant='line'] .trigger[data-active],
+.listLine .trigger[data-active] {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+:global(.dark) .list[data-variant='line'] .trigger[data-active],
+:global(.dark) .listLine .trigger[data-active] {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.trigger::after {
+  content: '';
+  position: absolute;
+  background-color: var(--foreground);
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.root[data-orientation='horizontal'] .list[data-variant='line'] .trigger[data-active]::after,
+.root[data-horizontal] .list[data-variant='line'] .trigger[data-active]::after {
+  inset-inline: 0;
+  bottom: -5px;
+  height: 2px;
+  opacity: 1;
+}
+
+.root[data-orientation='vertical'] .list[data-variant='line'] .trigger[data-active]::after,
+.root[data-vertical] .list[data-variant='line'] .trigger[data-active]::after {
+  inset-block: 0;
+  right: -4px;
+  width: 2px;
+  opacity: 1;
+}
+
+.content {
+  flex: 1;
+  font-size: 0.875rem;
+  outline: none;
+}
diff --git a/packages/react/src/components/ui/tabs/tabs.tsx b/packages/react/src/components/ui/tabs/tabs.tsx
index 7a7b3cc6..660e37b9 100644
--- a/packages/react/src/components/ui/tabs/tabs.tsx
+++ b/packages/react/src/components/ui/tabs/tabs.tsx
@@ -1,47 +1,58 @@
 'use client';
 
 import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
-import { cva, type VariantProps } from 'class-variance-authority';
 import type { TabsVariantName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 
+import tabStyles from './tabs.module.css';
+
+type TabsModuleClasses = {
+  root: string;
+  list: string;
+  listDefault: string;
+  listLine: string;
+  trigger: string;
+  content: string;
+};
+
+const styles = tabStyles as TabsModuleClasses;
+
+const listVariantClass: Record<TabsVariantName, string> = {
+  default: styles.listDefault,
+  line: styles.listLine,
+};
+
+export type TabsListVariantsOptions = {
+  variant?: TabsVariantName;
+  className?: string;
+};
+
+function tabsListVariants({ variant = 'default', className }: TabsListVariantsOptions = {}) {
+  return cn(styles.list, listVariantClass[variant], className);
+}
+
 function Tabs({ className, orientation = 'horizontal', ...props }: TabsPrimitive.Root.Props) {
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
       data-orientation={orientation}
-      className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}
+      className={cn(styles.root, className)}
       {...props}
     />
   );
 }
 
-const tabsListVariants = cva(
-  'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none',
-  {
-    variants: {
-      variant: {
-        default: 'bg-muted',
-        line: 'gap-1 bg-transparent',
-      } satisfies Record<TabsVariantName, string>,
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
 function TabsList({
   className,
   variant = 'default',
   ...props
-}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+}: TabsPrimitive.List.Props & TabsListVariantsOptions) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
       data-variant={variant}
-      className={cn(tabsListVariants({ variant }), className)}
+      className={tabsListVariants({ variant, className })}
       {...props}
     />
   );
@@ -51,13 +62,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
   return (
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
-      className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
-        'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
-        'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
-        className,
-      )}
+      className={cn(styles.trigger, className)}
       {...props}
     />
   );
@@ -67,7 +72,7 @@ function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
   return (
     <TabsPrimitive.Panel
       data-slot="tabs-content"
-      className={cn('flex-1 text-sm outline-none', className)}
+      className={cn(styles.content, className)}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/textarea/textarea.module.css b/packages/react/src/components/ui/textarea/textarea.module.css
new file mode 100644
index 00000000..7a9150df
--- /dev/null
+++ b/packages/react/src/components/ui/textarea/textarea.module.css
@@ -0,0 +1,52 @@
+.textarea {
+  display: flex;
+  field-sizing: content;
+  min-height: calc(var(--spacing, 0.25rem) * 16);
+  width: 100%;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: transparent;
+  padding: calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 2.5);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  transition:
+    color 150ms ease,
+    box-shadow 150ms ease;
+  outline: none;
+}
+
+.textarea::placeholder {
+  color: var(--muted-foreground);
+}
+
+.textarea:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.textarea[aria-invalid='true'] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .textarea {
+  background-color: color-mix(in oklch, var(--input) 30%, transparent);
+}
+
+:global(.dark) .textarea[aria-invalid='true'] {
+  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+@media (min-width: 768px) {
+  .textarea {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
diff --git a/packages/react/src/components/ui/textarea/textarea.tsx b/packages/react/src/components/ui/textarea/textarea.tsx
index d5cf269c..0980ef36 100644
--- a/packages/react/src/components/ui/textarea/textarea.tsx
+++ b/packages/react/src/components/ui/textarea/textarea.tsx
@@ -2,17 +2,10 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
+import styles from './textarea.module.css';
+
 function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <textarea data-slot="textarea" className={cn(styles.textarea, className)} {...props} />;
 }
 
 export { Textarea };
diff --git a/packages/react/src/components/ui/toggle-group/toggle-group.module.css b/packages/react/src/components/ui/toggle-group/toggle-group.module.css
new file mode 100644
index 00000000..349d07ec
--- /dev/null
+++ b/packages/react/src/components/ui/toggle-group/toggle-group.module.css
@@ -0,0 +1,110 @@
+.group {
+  display: flex;
+  width: fit-content;
+  flex-direction: row;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * var(--gap, 2));
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+.group[data-orientation='vertical'],
+.group[data-vertical] {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.group[data-spacing='0'][data-variant='outline'] {
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+}
+
+.item {
+  flex-shrink: 0;
+}
+
+.item:focus,
+.item:focus-visible {
+  z-index: 10;
+}
+
+.item[data-state='on'] {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+/* spacing=0 segmented control */
+:global([data-slot='toggle-group'][data-spacing='0']) .item {
+  border-radius: 0;
+  padding-inline: calc(var(--spacing, 0.25rem) * 2);
+  box-shadow: none;
+}
+
+:global([data-slot='toggle-group'][data-spacing='0']) .item:has([data-icon='inline-end']) {
+  padding-inline-end: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+:global([data-slot='toggle-group'][data-spacing='0']) .item:has([data-icon='inline-start']) {
+  padding-inline-start: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+:global([data-slot='toggle-group'][data-spacing='0'][data-orientation='horizontal'])
+  .item:first-child,
+:global([data-slot='toggle-group'][data-spacing='0'][data-horizontal]) .item:first-child {
+  border-top-left-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  border-bottom-left-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+:global([data-slot='toggle-group'][data-spacing='0'][data-orientation='horizontal'])
+  .item:last-child,
+:global([data-slot='toggle-group'][data-spacing='0'][data-horizontal]) .item:last-child {
+  border-top-right-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  border-bottom-right-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+:global([data-slot='toggle-group'][data-spacing='0'][data-orientation='vertical'])
+  .item:first-child,
+:global([data-slot='toggle-group'][data-spacing='0'][data-vertical]) .item:first-child {
+  border-top-left-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  border-top-right-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+:global([data-slot='toggle-group'][data-spacing='0'][data-orientation='vertical']) .item:last-child,
+:global([data-slot='toggle-group'][data-spacing='0'][data-vertical]) .item:last-child {
+  border-bottom-right-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  border-bottom-left-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+}
+
+:global(
+    [data-slot='toggle-group'][data-spacing='0'][data-variant='outline'][data-orientation='horizontal']
+  )
+  .item:not(:first-child),
+:global([data-slot='toggle-group'][data-spacing='0'][data-variant='outline'][data-horizontal])
+  .item:not(:first-child) {
+  border-left-width: 0;
+}
+
+:global(
+    [data-slot='toggle-group'][data-spacing='0'][data-variant='outline'][data-orientation='vertical']
+  )
+  .item:not(:first-child),
+:global([data-slot='toggle-group'][data-spacing='0'][data-variant='outline'][data-vertical])
+  .item:not(:first-child) {
+  border-top-width: 0;
+}
+
+:global(
+    [data-slot='toggle-group'][data-spacing='0'][data-variant='outline'][data-orientation='horizontal']
+  )
+  .item:first-child,
+:global([data-slot='toggle-group'][data-spacing='0'][data-variant='outline'][data-horizontal])
+  .item:first-child {
+  border-left-width: 1px;
+}
+
+:global(
+    [data-slot='toggle-group'][data-spacing='0'][data-variant='outline'][data-orientation='vertical']
+  )
+  .item:first-child,
+:global([data-slot='toggle-group'][data-spacing='0'][data-variant='outline'][data-vertical])
+  .item:first-child {
+  border-top-width: 1px;
+}
diff --git a/packages/react/src/components/ui/toggle-group/toggle-group.tsx b/packages/react/src/components/ui/toggle-group/toggle-group.tsx
index 95694574..91cfda41 100644
--- a/packages/react/src/components/ui/toggle-group/toggle-group.tsx
+++ b/packages/react/src/components/ui/toggle-group/toggle-group.tsx
@@ -3,14 +3,15 @@
 import * as React from 'react';
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
-import { type VariantProps } from 'class-variance-authority';
 import type { ToggleGroupOrientationName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
-import { toggleVariants } from '@/components/ui/toggle';
+import { toggleVariants, type ToggleVariantsOptions } from '@/components/ui/toggle';
+
+import groupStyles from './toggle-group.module.css';
 
 const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
+  ToggleVariantsOptions & {
     spacing?: number;
     orientation?: ToggleGroupOrientationName;
   }
@@ -30,7 +31,7 @@ function ToggleGroup({
   children,
   ...props
 }: ToggleGroupPrimitive.Props &
-  VariantProps<typeof toggleVariants> & {
+  ToggleVariantsOptions & {
     spacing?: number;
     orientation?: ToggleGroupOrientationName;
   }) {
@@ -42,10 +43,7 @@ function ToggleGroup({
       data-spacing={spacing}
       data-orientation={orientation}
       style={{ '--gap': spacing } as React.CSSProperties}
-      className={cn(
-        'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs data-vertical:flex-col data-vertical:items-stretch',
-        className,
-      )}
+      className={cn(groupStyles.group, className)}
       {...props}
     >
       <ToggleGroupContext.Provider value={{ variant, size, spacing, orientation }}>
@@ -61,7 +59,7 @@ function ToggleGroupItem({
   variant = 'default',
   size = 'default',
   ...props
-}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+}: TogglePrimitive.Props & ToggleVariantsOptions) {
   const context = React.useContext(ToggleGroupContext);
 
   return (
@@ -71,7 +69,7 @@ function ToggleGroupItem({
       data-size={context.size || size}
       data-spacing={context.spacing}
       className={cn(
-        'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+        groupStyles.item,
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,
diff --git a/packages/react/src/components/ui/toggle/toggle.module.css b/packages/react/src/components/ui/toggle/toggle.module.css
new file mode 100644
index 00000000..b65106fe
--- /dev/null
+++ b/packages/react/src/components/ui/toggle/toggle.module.css
@@ -0,0 +1,109 @@
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem) * 1);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  white-space: nowrap;
+  transition:
+    color 150ms ease,
+    box-shadow 150ms ease,
+    background-color 150ms ease;
+  outline: none;
+}
+
+.toggle:hover {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
+.toggle:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.toggle:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.toggle[aria-invalid='true'] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+:global(.dark) .toggle[aria-invalid='true'] {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.toggle[aria-pressed='true'] {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.toggle svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.toggle:has([data-icon='inline-end']) {
+  padding-inline-end: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.toggle:has([data-icon='inline-start']) {
+  padding-inline-start: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.toggle[data-variant='default'],
+.variantDefault {
+  background-color: transparent;
+}
+
+.toggle[data-variant='outline'],
+.variantOutline {
+  border-color: var(--input);
+  background-color: transparent;
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+}
+
+.toggle[data-variant='outline']:hover,
+.variantOutline:hover {
+  background-color: var(--muted);
+}
+
+.toggle[data-size='default'],
+.sizeDefault {
+  height: calc(var(--spacing, 0.25rem) * 9);
+  min-width: calc(var(--spacing, 0.25rem) * 9);
+  padding-inline: calc(var(--spacing, 0.25rem) * 2.5);
+}
+
+.toggle[data-size='sm'],
+.sizeSm {
+  height: calc(var(--spacing, 0.25rem) * 8);
+  min-width: calc(var(--spacing, 0.25rem) * 8);
+  padding-inline: calc(var(--spacing, 0.25rem) * 2.5);
+}
+
+.toggle[data-size='sm']:has([data-icon='inline-end']),
+.sizeSm:has([data-icon='inline-end']) {
+  padding-inline-end: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.toggle[data-size='sm']:has([data-icon='inline-start']),
+.sizeSm:has([data-icon='inline-start']) {
+  padding-inline-start: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.toggle[data-size='lg'],
+.sizeLg {
+  height: calc(var(--spacing, 0.25rem) * 10);
+  min-width: calc(var(--spacing, 0.25rem) * 10);
+  padding-inline: calc(var(--spacing, 0.25rem) * 2.5);
+}
diff --git a/packages/react/src/components/ui/toggle/toggle.tsx b/packages/react/src/components/ui/toggle/toggle.tsx
index 942f2fe1..ced764ec 100644
--- a/packages/react/src/components/ui/toggle/toggle.tsx
+++ b/packages/react/src/components/ui/toggle/toggle.tsx
@@ -1,46 +1,57 @@
 'use client';
 
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
 import type { ToggleSizeName, ToggleVariantName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 
-const toggleVariantClasses = {
-  default: 'bg-transparent',
-  outline: 'border border-input bg-transparent shadow-xs hover:bg-muted',
-} satisfies Record<ToggleVariantName, string>;
-
-const toggleSizeClasses = {
-  default: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-  sm: 'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
-  lg: 'h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-} satisfies Record<ToggleSizeName, string>;
-
-const toggleVariants = cva(
-  "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-secondary aria-pressed:text-secondary-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: toggleVariantClasses,
-      size: toggleSizeClasses,
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-function Toggle({
-  className,
+import toggleStyles from './toggle.module.css';
+
+type ToggleModuleClasses = {
+  toggle: string;
+  variantDefault: string;
+  variantOutline: string;
+  sizeDefault: string;
+  sizeSm: string;
+  sizeLg: string;
+};
+
+const styles = toggleStyles as ToggleModuleClasses;
+
+const variantClass: Record<ToggleVariantName, string> = {
+  default: styles.variantDefault,
+  outline: styles.variantOutline,
+};
+
+const sizeClass: Record<ToggleSizeName, string> = {
+  default: styles.sizeDefault,
+  sm: styles.sizeSm,
+  lg: styles.sizeLg,
+};
+
+export type ToggleVariantsOptions = {
+  variant?: ToggleVariantName;
+  size?: ToggleSizeName;
+  className?: string;
+};
+
+function toggleVariants({
   variant = 'default',
   size = 'default',
-  ...props
-}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  className,
+}: ToggleVariantsOptions = {}) {
+  return cn(styles.toggle, variantClass[variant], sizeClass[size], className);
+}
+
+type ToggleProps = TogglePrimitive.Props & ToggleVariantsOptions;
+
+function Toggle({ className, variant = 'default', size = 'default', ...props }: ToggleProps) {
   return (
     <TogglePrimitive
       data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
+      data-variant={variant}
+      data-size={size}
+      className={toggleVariants({ variant, size, className })}
       {...props}
     />
   );
diff --git a/packages/react/src/components/ui/tooltip/tooltip.module.css b/packages/react/src/components/ui/tooltip/tooltip.module.css
new file mode 100644
index 00000000..2c798ff5
--- /dev/null
+++ b/packages/react/src/components/ui/tooltip/tooltip.module.css
@@ -0,0 +1,33 @@
+.positioner {
+  isolation: isolate;
+  z-index: 50;
+}
+
+.content {
+  z-index: 50;
+  display: inline-flex;
+  width: fit-content;
+  max-width: 20rem;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem) * 1.5);
+  border-radius: var(--radius-md, calc(var(--radius, 0.625rem) * 0.8));
+  background-color: var(--foreground);
+  padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 3);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--background);
+}
+
+.content:has([data-slot='kbd']) {
+  padding-inline-end: calc(var(--spacing, 0.25rem) * 1.5);
+}
+
+.arrow {
+  z-index: 50;
+  width: calc(var(--spacing, 0.25rem) * 2.5);
+  height: calc(var(--spacing, 0.25rem) * 2.5);
+  rotate: 45deg;
+  border-radius: 2px;
+  background-color: var(--foreground);
+  fill: var(--foreground);
+}
diff --git a/packages/react/src/components/ui/tooltip/tooltip.tsx b/packages/react/src/components/ui/tooltip/tooltip.tsx
index c2e42f97..44541eda 100644
--- a/packages/react/src/components/ui/tooltip/tooltip.tsx
+++ b/packages/react/src/components/ui/tooltip/tooltip.tsx
@@ -4,6 +4,8 @@ import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
 
 import { cn } from '@/lib/utils';
 
+import styles from './tooltip.module.css';
+
 function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
   return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
 }
@@ -33,18 +35,15 @@ function TooltipContent({
         alignOffset={alignOffset}
         side={side}
         sideOffset={sideOffset}
-        className="isolate z-50"
+        className={styles.positioner}
       >
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
-          className={cn(
-            'z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-            className,
-          )}
+          className={cn(styles.content, className)}
           {...props}
         >
           {children}
-          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+          <TooltipPrimitive.Arrow className={styles.arrow} />
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
diff --git a/packages/react/src/index.css b/packages/react/src/index.css
index d69b9ba0..f21cd27d 100644
--- a/packages/react/src/index.css
+++ b/packages/react/src/index.css
@@ -1,8 +1,8 @@
-@import 'tailwindcss';
-@import 'tw-animate-css';
-@import 'shadcn/tailwind.css';
 @import '@fontsource-variable/geist';
 @import '@fontsource-variable/source-sans-3';
+@import '@surfnet/curve-tokens/tokens.css';
+@import './styles/base.css';
+@import './styles/semantic-colors.css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -89,20 +89,6 @@
   --radius-4xl: calc(var(--radius) * 2.6);
 }
 
-@import '@surfnet/curve-tokens/tokens.css';
-
 :root {
   --radius: 0.625rem;
 }
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-  html {
-    @apply font-sans;
-  }
-}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 467af11b..5becafc5 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -29,7 +29,17 @@ export * from '@/components/ui/input-otp';
 export * from '@/components/ui/item';
 export * from '@/components/ui/kbd';
 export * from '@/components/ui/label';
+export * from '@/components/ui/native-checkbox';
+export * from '@/components/ui/native-details';
+export * from '@/components/ui/native-dialog';
+export * from '@/components/ui/native-fieldset';
+export * from '@/components/ui/native-input';
+export * from '@/components/ui/native-popover';
+export * from '@/components/ui/native-progress';
+export * from '@/components/ui/native-radio';
+export * from '@/components/ui/native-range';
 export * from '@/components/ui/native-select';
+export * from '@/components/ui/native-textarea';
 export * from '@/components/ui/navigation-menu';
 export * from '@/components/ui/pagination';
 export * from '@/components/ui/popover';
diff --git a/packages/react/src/styles/base.css b/packages/react/src/styles/base.css
new file mode 100644
index 00000000..f55a9d6d
--- /dev/null
+++ b/packages/react/src/styles/base.css
@@ -0,0 +1,14 @@
+*,
+*::before,
+*::after {
+  border-color: var(--border);
+}
+
+html {
+  font-family: var(--font-sans);
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+}
diff --git a/packages/react/src/styles/semantic-colors.css b/packages/react/src/styles/semantic-colors.css
new file mode 100644
index 00000000..a93977c2
--- /dev/null
+++ b/packages/react/src/styles/semantic-colors.css
@@ -0,0 +1,227 @@
+/*
+ * Designer- and app-facing semantic color utilities (Tailwind-like names).
+ * Maps to Curve token CSS variables — not generated by Tailwind.
+ * Layout/spacing utilities belong in the app or Storybook Tailwind entry.
+ */
+
+/* -- text-* -- */
+.text-background {
+  color: var(--background);
+}
+.text-foreground {
+  color: var(--foreground);
+}
+.text-card {
+  color: var(--card);
+}
+.text-card-foreground {
+  color: var(--card-foreground);
+}
+.text-popover {
+  color: var(--popover);
+}
+.text-popover-foreground {
+  color: var(--popover-foreground);
+}
+.text-primary {
+  color: var(--primary);
+}
+.text-primary-foreground {
+  color: var(--primary-foreground);
+}
+.text-primary-strong {
+  color: var(--primary-strong);
+}
+.text-secondary {
+  color: var(--secondary);
+}
+.text-secondary-foreground {
+  color: var(--secondary-foreground);
+}
+.text-muted {
+  color: var(--muted);
+}
+.text-muted-foreground {
+  color: var(--muted-foreground);
+}
+.text-accent {
+  color: var(--accent);
+}
+.text-accent-foreground {
+  color: var(--accent-foreground);
+}
+.text-destructive {
+  color: var(--destructive);
+}
+.text-destructive-foreground {
+  color: var(--destructive-foreground);
+}
+.text-border {
+  color: var(--border);
+}
+.text-input {
+  color: var(--input);
+}
+.text-ring {
+  color: var(--ring);
+}
+.text-chart-1 {
+  color: var(--chart-1);
+}
+.text-chart-2 {
+  color: var(--chart-2);
+}
+.text-chart-3 {
+  color: var(--chart-3);
+}
+.text-chart-4 {
+  color: var(--chart-4);
+}
+.text-chart-5 {
+  color: var(--chart-5);
+}
+.text-sidebar {
+  color: var(--sidebar);
+}
+.text-sidebar-foreground {
+  color: var(--sidebar-foreground);
+}
+.text-sidebar-primary {
+  color: var(--sidebar-primary);
+}
+.text-sidebar-primary-foreground {
+  color: var(--sidebar-primary-foreground);
+}
+.text-sidebar-accent {
+  color: var(--sidebar-accent);
+}
+.text-sidebar-accent-foreground {
+  color: var(--sidebar-accent-foreground);
+}
+.text-sidebar-border {
+  color: var(--sidebar-border);
+}
+.text-sidebar-ring {
+  color: var(--sidebar-ring);
+}
+
+/* -- bg-* -- */
+.bg-background {
+  background-color: var(--background);
+}
+.bg-foreground {
+  background-color: var(--foreground);
+}
+.bg-card {
+  background-color: var(--card);
+}
+.bg-card-foreground {
+  background-color: var(--card-foreground);
+}
+.bg-popover {
+  background-color: var(--popover);
+}
+.bg-popover-foreground {
+  background-color: var(--popover-foreground);
+}
+.bg-primary {
+  background-color: var(--primary);
+}
+.bg-primary-foreground {
+  background-color: var(--primary-foreground);
+}
+.bg-primary-strong {
+  background-color: var(--primary-strong);
+}
+.bg-secondary {
+  background-color: var(--secondary);
+}
+.bg-secondary-foreground {
+  background-color: var(--secondary-foreground);
+}
+.bg-muted {
+  background-color: var(--muted);
+}
+.bg-muted-foreground {
+  background-color: var(--muted-foreground);
+}
+.bg-accent {
+  background-color: var(--accent);
+}
+.bg-accent-foreground {
+  background-color: var(--accent-foreground);
+}
+.bg-destructive {
+  background-color: var(--destructive);
+}
+.bg-destructive-foreground {
+  background-color: var(--destructive-foreground);
+}
+.bg-border {
+  background-color: var(--border);
+}
+.bg-input {
+  background-color: var(--input);
+}
+.bg-ring {
+  background-color: var(--ring);
+}
+.bg-chart-1 {
+  background-color: var(--chart-1);
+}
+.bg-chart-2 {
+  background-color: var(--chart-2);
+}
+.bg-chart-3 {
+  background-color: var(--chart-3);
+}
+.bg-chart-4 {
+  background-color: var(--chart-4);
+}
+.bg-chart-5 {
+  background-color: var(--chart-5);
+}
+.bg-sidebar {
+  background-color: var(--sidebar);
+}
+.bg-sidebar-foreground {
+  background-color: var(--sidebar-foreground);
+}
+.bg-sidebar-primary {
+  background-color: var(--sidebar-primary);
+}
+.bg-sidebar-primary-foreground {
+  background-color: var(--sidebar-primary-foreground);
+}
+.bg-sidebar-accent {
+  background-color: var(--sidebar-accent);
+}
+.bg-sidebar-accent-foreground {
+  background-color: var(--sidebar-accent-foreground);
+}
+.bg-sidebar-border {
+  background-color: var(--sidebar-border);
+}
+.bg-sidebar-ring {
+  background-color: var(--sidebar-ring);
+}
+
+/* -- border-* (common semantic borders) -- */
+.border-border {
+  border-color: var(--border);
+}
+.border-input {
+  border-color: var(--input);
+}
+.border-ring {
+  border-color: var(--ring);
+}
+.border-primary {
+  border-color: var(--primary);
+}
+.border-destructive {
+  border-color: var(--destructive);
+}
+.border-sidebar-border {
+  border-color: var(--sidebar-border);
+}
diff --git a/packages/react/src/vite-env.d.ts b/packages/react/src/vite-env.d.ts
index 11f02fe2..40abd8c1 100644
--- a/packages/react/src/vite-env.d.ts
+++ b/packages/react/src/vite-env.d.ts
@@ -1 +1,6 @@
 /// <reference types="vite/client" />
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts
index 02b130d0..1f90316e 100644
--- a/packages/react/vite.config.ts
+++ b/packages/react/vite.config.ts
@@ -1,7 +1,6 @@
 import { isAbsolute, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import react from '@vitejs/plugin-react';
-import tailwindcss from '@tailwindcss/vite';
 import dts from 'vite-plugin-dts';
 import preserveDirectives from 'rollup-plugin-preserve-directives';
 import { defineConfig } from 'vite';
@@ -11,7 +10,6 @@ const rootDir = fileURLToPath(new URL('.', import.meta.url));
 export default defineConfig({
   plugins: [
     react(),
-    tailwindcss(),
     dts({
       tsconfigPath: './tsconfig.build.json',
       entryRoot: 'src',
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/03-geautomatiseerd-testen.mdx b/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/03-geautomatiseerd-testen.mdx
index d0da46b5..f102f716 100644
--- a/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/03-geautomatiseerd-testen.mdx
+++ b/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/03-geautomatiseerd-testen.mdx
@@ -116,6 +116,21 @@ selectie op elke pull request en laat de tragere scans op `main` of 's nachts dr
 Laat de build falen op nieuwe fouten in de code die wordt aangeraakt. Houd bekende problemen bij als
 issues met een eigenaar, niet als een permanent rode pipeline die iedereen heeft leren negeren.
 
+## 5. Visuele regressie (Playwright)
+
+Curve screenshot de gebouwde Storybooks met Playwright. Dat vangt twee dingen: een React-component
+die per ongeluk anders gaat uitzien, en een React- en Angular-story met dezelfde id die niet meer
+op elkaar lijken.
+
+```bash
+pnpm build-storybook
+pnpm test:visual
+```
+
+De React-baselines staan in `tests/visual/__screenshots__/` en worden in CI vergeleken. Parity-tests
+bewaren geen snapshots: ze zetten dezelfde story in beide Storybooks naast elkaar. Tag een story
+`skip-visual` als die niet stabiel te fotograferen is (animatie, willekeurige data).
+
 ## Wat hier allemaal niet uit komt
 
 Alles wat een afweging vraagt: of de kopstructuur een verhaal vertelt, of iets een link had moeten zijn,
diff --git a/packages/storybook-config/src/index.ts b/packages/storybook-config/src/index.ts
index 5e3e4ec8..bfa799b4 100644
--- a/packages/storybook-config/src/index.ts
+++ b/packages/storybook-config/src/index.ts
@@ -4,6 +4,7 @@
 export { FRAMEWORKS, frameworkGlobalTypes, frameworkSwitcher } from './frameworks.js';
 export type { Framework, FrameworkTarget } from './frameworks.js';
 export { THEME_NAMES, themeGlobalTypes, themeInitialGlobals, themeSwitcher } from './themes.js';
+export { visualReadyMarker } from './visual-ready.js';
 export { TOKEN_GROUPS, getTokenGroups, getTokenValue, getTypographyScale } from './tokens.js';
 export type {
   TokenEntry,
diff --git a/packages/storybook-config/src/visual-ready.tsx b/packages/storybook-config/src/visual-ready.tsx
new file mode 100644
index 00000000..27687fe9
--- /dev/null
+++ b/packages/storybook-config/src/visual-ready.tsx
@@ -0,0 +1,100 @@
+import { useEffect } from 'react';
+import { useGlobals } from 'storybook/preview-api';
+
+const FONT_FACES = ['Source Sans 3 Variable', 'Source Sans 3', 'Geist Variable'] as const;
+
+async function preloadCurveFonts(): Promise<void> {
+  await document.fonts.ready;
+  for (const face of FONT_FACES) {
+    for (const weight of ['400', '500', '600']) {
+      await document.fonts.load(`${weight} 16px "${face}"`).catch(() => undefined);
+    }
+  }
+  await document.fonts.ready;
+}
+
+/** Wait until token CSS and the Storybook preview stylesheet are active. */
+function waitForPreviewStyles(timeoutMs = 20_000): Promise<boolean> {
+  return new Promise((resolve) => {
+    const deadline = performance.now() + timeoutMs;
+    const tick = () => {
+      const root = document.documentElement;
+      const bg = getComputedStyle(root).getPropertyValue('--background').trim();
+      const font = getComputedStyle(root).fontFamily.toLowerCase();
+      if (!bg || font.includes('times new roman')) {
+        if (performance.now() >= deadline) {
+          resolve(false);
+          return;
+        }
+        requestAnimationFrame(tick);
+        return;
+      }
+
+      let ruleCount = 0;
+      for (const sheet of document.styleSheets) {
+        try {
+          ruleCount += sheet.cssRules?.length ?? 0;
+        } catch {
+          if (performance.now() >= deadline) {
+            resolve(false);
+            return;
+          }
+          requestAnimationFrame(tick);
+          return;
+        }
+      }
+
+      if (ruleCount >= 50) {
+        resolve(true);
+        return;
+      }
+      if (performance.now() >= deadline) {
+        resolve(false);
+        return;
+      }
+      requestAnimationFrame(tick);
+    };
+    tick();
+  });
+}
+
+/**
+ * Sets `data-curve-visual-ready` on `<html>` once theme classes, tokens, and fonts
+ * are ready. Playwright visual tests wait for this instead of brittle font-family checks.
+ */
+export function visualReadyMarker() {
+  return (StoryFn: () => unknown) => {
+    const [{ theme, mode }] = useGlobals();
+
+    useEffect(() => {
+      const root = document.documentElement;
+      delete root.dataset.curveVisualReady;
+
+      let cancelled = false;
+
+      void (async () => {
+        await preloadCurveFonts();
+        const tokensReady = await waitForPreviewStyles();
+        if (cancelled || !tokensReady) {
+          return;
+        }
+
+        await new Promise<void>((resolve) => {
+          requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+        });
+        if (cancelled) {
+          return;
+        }
+
+        root.dataset.curveVisualReady = 'true';
+      })();
+
+      return () => {
+        cancelled = true;
+        delete root.dataset.curveVisualReady;
+      };
+    }, [theme, mode]);
+
+    return StoryFn();
+  };
+}
diff --git a/packages/storybook-config/static/storybook-docs.css b/packages/storybook-config/static/storybook-docs.css
index f0c77ab2..ed987548 100644
--- a/packages/storybook-config/static/storybook-docs.css
+++ b/packages/storybook-config/static/storybook-docs.css
@@ -1,28 +1,28 @@
 /* Restore list markers inside docs prose; Tailwind preflight strips them globally. */
 
-.sbdocs-content ul,
-.sbdocs-content ol {
+.sbdocs-content > ul,
+.sbdocs-content > ol {
   list-style: revert;
   font-size: inherit;
   padding-inline-start: 1.5rem;
 }
-.sbdocs-content ul {
+.sbdocs-content > ul {
   list-style-type: disc;
 }
-.sbdocs-content ol {
+.sbdocs-content > ol {
   list-style-type: decimal;
 }
-.sbdocs-content ul ul {
+.sbdocs-content > ul ul {
   list-style-type: circle;
 }
-.sbdocs-content ul ul ul {
+.sbdocs-content > ul ul ul {
   list-style-type: square;
 }
-.sbdocs-content ol li,
-.sbdocs-content ul li {
+.sbdocs-content > ol li,
+.sbdocs-content > ul li {
   font-size: inherit;
 }
-.sbdocs-content.sbdocs-content dl {
+.sbdocs-content.sbdocs-content > dl {
   margin-block: 1em;
 }
 .sbdocs-content.sbdocs-content dt {
@@ -46,18 +46,18 @@
   vertical-align: top;
   text-align: left;
 }
-.sbdocs-content.sbdocs-content h2 {
+.sbdocs-content.sbdocs-content > h2 {
   margin-block-start: 2rem;
 }
-.sbdocs-content.sbdocs-content h3 {
+.sbdocs-content.sbdocs-content > h3 {
   margin-block-start: 1.5rem;
 }
-.sbdocs-content.sbdocs-content h4 {
+.sbdocs-content.sbdocs-content > h4 {
   margin-block-start: 1rem;
 }
-.sbdocs-content.sbdocs-content h5 {
+.sbdocs-content.sbdocs-content > h5 {
   margin-block-start: 0.5rem;
 }
-.sbdocs-a.sbdocs-a {
+.sbdocs-content.sbdocs-content > p > .sbdocs-a.sbdocs-a {
   color: rgb(0 85 182);
 }
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 00000000..adaefa28
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,58 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/visual',
+  testMatch: '*.spec.ts',
+  testIgnore: ['**/parity.spec.ts'],
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: process.env.CI ? 2 : undefined,
+  reporter: process.env.CI
+    ? [['github'], ['html', { open: 'never' }]]
+    : [['list'], ['html', { open: 'never' }]],
+  timeout: 30_000,
+  expect: {
+    toHaveScreenshot: {
+      animations: 'disabled',
+      caret: 'hide',
+      scale: 'css',
+      maxDiffPixelRatio: 0.01,
+    },
+  },
+  use: {
+    browserName: 'chromium',
+    viewport: { width: 1280, height: 720 },
+    deviceScaleFactor: 1,
+    locale: 'en-US',
+    timezoneId: 'UTC',
+    colorScheme: 'light',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'react',
+      testMatch: /react\.spec\.ts/,
+      snapshotPathTemplate: '{testDir}/__screenshots__/react/{arg}{ext}',
+    },
+    {
+      name: 'angular',
+      testMatch: /angular\.spec\.ts/,
+      snapshotPathTemplate: '{testDir}/__screenshots__/angular/{arg}{ext}',
+    },
+  ],
+  webServer: [
+    {
+      command: 'node tests/visual/serve-storybook.mjs packages/react/storybook-static 6008',
+      url: 'http://127.0.0.1:6008/index.json',
+      reuseExistingServer: !process.env.CI,
+      timeout: 30_000,
+    },
+    {
+      command: 'node tests/visual/serve-storybook.mjs packages/angular/storybook-static 6009',
+      url: 'http://127.0.0.1:6009/index.json',
+      reuseExistingServer: !process.env.CI,
+      timeout: 30_000,
+    },
+  ],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 81dd6b0b..db11a82d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,9 +14,15 @@ importers:
       '@figma/rest-api-spec':
         specifier: 0.40.0
         version: 0.40.0
+      '@playwright/test':
+        specifier: 1.62.1
+        version: 1.62.1
       '@types/node':
         specifier: ^22.19.21
         version: 22.19.21
+      '@types/pngjs':
+        specifier: 6.0.5
+        version: 6.0.5
       dotenv:
         specifier: 17.4.2
         version: 17.4.2
@@ -29,6 +35,12 @@ importers:
       lint-staged:
         specifier: 17.0.7
         version: 17.0.7
+      pixelmatch:
+        specifier: 7.2.0
+        version: 7.2.0
+      pngjs:
+        specifier: 7.0.0
+        version: 7.0.0
       prettier:
         specifier: 3.8.4
         version: 3.8.4
@@ -134,7 +146,7 @@ importers:
         version: link:../../packages/tokens
       next:
         specifier: 16.2.9
-        version: 16.2.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+        version: 16.2.9(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       react:
         specifier: 19.2.7
         version: 19.2.7
@@ -320,9 +332,6 @@ importers:
       '@tanstack/react-table':
         specifier: ^8.21.3
         version: 8.21.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      class-variance-authority:
-        specifier: 0.7.1
-        version: 0.7.1
       clsx:
         specifier: 2.1.1
         version: 2.1.1
@@ -384,9 +393,6 @@ importers:
       '@surfnet/curve-typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
-      '@tailwindcss/vite':
-        specifier: 4.3.1
-        version: 4.3.1(vite@8.0.16(@types/node@24.13.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.6)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.48.0)(yaml@2.9.0))
       '@types/node':
         specifier: 24.13.2
         version: 24.13.2
@@ -417,12 +423,6 @@ importers:
       storybook:
         specifier: 10.4.5
         version: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.4)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      tailwindcss:
-        specifier: 4.3.1
-        version: 4.3.1
-      tw-animate-css:
-        specifier: 1.4.0
-        version: 1.4.0
       typescript:
         specifier: 6.0.3
         version: 6.0.3
@@ -3950,6 +3950,11 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@playwright/test@1.62.1':
+    resolution: {integrity: sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   '@pnpm/deps.graph-sequencer@1100.0.1':
     resolution: {integrity: sha512-pOr5+q1fLYKwFN3LAJuGZEnfXDcQ73zqgDHMtGy+K+uIoUqyY+6MeDCWFwfu+4EFuq76I5EPFofoNAI+Bmmq4A==}
     engines: {node: '>=22.13'}
@@ -4981,11 +4986,6 @@ packages:
   '@tailwindcss/postcss@4.3.1':
     resolution: {integrity: sha512-dNJuNbdEJT/SWRuXTYP1WSamelsz3ztkUsdtWQPjrexysrTpaEPM40P/71knXiXLYEojqPOEGitVLLpPMS5T6A==}
 
-  '@tailwindcss/vite@4.3.1':
-    resolution: {integrity: sha512-hItDHuIIlEV61R+faXu66s1K36aTurO/Qw0e45Vskz57gXl9pWOT6eg3zmcEui6CZXddbN7zd41bwmvag4JGwQ==}
-    peerDependencies:
-      vite: ^5.2.0 || ^6 || ^7 || ^8
-
   '@tanstack/angular-table@8.21.4':
     resolution: {integrity: sha512-djyuJFvIB/pBuBIqny8b7+5ozeXJSElaxYRZyyKLpYrXn4xQSysBT//X51eDT/mi3kS0spcjIHhoObjk3iCjcQ==}
     engines: {node: '>=12'}
@@ -5178,6 +5178,9 @@ packages:
   '@types/parse-json@4.0.2':
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
+  '@types/pngjs@6.0.5':
+    resolution: {integrity: sha512-0k5eKfrA83JOZPppLtS2C7OUtyNAl2wKNxfyYl9Q5g9lPkgBl/9hNyAu6HuEH2J4XmIv2znEpkDd0SaZVxW6iQ==}
+
   '@types/qs@6.15.1':
     resolution: {integrity: sha512-GZHUBZR9hckSUhrxmp1nG6NwdpM9fCunJwyThLW1X3AyHgd9IlHb6VANpQQqDr2o/qQp6McZ3y/IA2rVzKzSbw==}
 
@@ -7257,6 +7260,11 @@ packages:
   fs-monkey@1.1.0:
     resolution: {integrity: sha512-QMUezzXWII9EV5aTFXW1UBVUO77wYPpjqIF8/AviUCThNeSYZykpoTixUeaNNBwmCev0AMDWMAni+f8Hxb1IFw==}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -9103,6 +9111,10 @@ packages:
     resolution: {integrity: sha512-DszUCKeVN/5G5QKo6jAVHL8fmKnkJvQ0ACiVgY7YGCq3TUB2oznAOayvZPIAdEThvhczkXR+qm3IHsNXpFCYfA==}
     engines: {node: '>=20.x'}
 
+  pixelmatch@7.2.0:
+    resolution: {integrity: sha512-xhcb4yHu9sM/G7foGzoLtXYcC0zHEaOXXjRKhGup0fw78Nf2Tkiapv4EQyMzrbcmQPsllAI7DbFY2UT7PlI9Pg==}
+    hasBin: true
+
   pkce-challenge@5.0.1:
     resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
     engines: {node: '>=16.20.0'}
@@ -9125,6 +9137,20 @@ packages:
     resolution: {integrity: sha512-emEcLuomt2j03vxD54giVB4SxTjnsqkU692xZOZXHDVoYyypEm+b3jpiTcc+Cf+myooc+/Ly0z01jqeNHVgJGw==}
     engines: {node: '>=16.0.0'}
 
+  playwright-core@1.62.1:
+    resolution: {integrity: sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  playwright@1.62.1:
+    resolution: {integrity: sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  pngjs@7.0.0:
+    resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==}
+    engines: {node: '>=14.19.0'}
+
   portfinder@1.0.38:
     resolution: {integrity: sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==}
     engines: {node: '>= 10.12'}
@@ -15701,6 +15727,10 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@playwright/test@1.62.1':
+    dependencies:
+      playwright: 1.62.1
+
   '@pnpm/deps.graph-sequencer@1100.0.1': {}
 
   '@radix-ui/primitive@1.1.5': {}
@@ -16669,13 +16699,6 @@ snapshots:
       postcss: 8.5.15
       tailwindcss: 4.3.1
 
-  '@tailwindcss/vite@4.3.1(vite@8.0.16(@types/node@24.13.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.6)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.48.0)(yaml@2.9.0))':
-    dependencies:
-      '@tailwindcss/node': 4.3.1
-      '@tailwindcss/oxide': 4.3.1
-      tailwindcss: 4.3.1
-      vite: 8.0.16(@types/node@24.13.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.6)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.48.0)(yaml@2.9.0)
-
   '@tanstack/angular-table@8.21.4(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))':
     dependencies:
       '@angular/core': 22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2)
@@ -16894,6 +16917,10 @@ snapshots:
 
   '@types/parse-json@4.0.2': {}
 
+  '@types/pngjs@6.0.5':
+    dependencies:
+      '@types/node': 24.13.2
+
   '@types/qs@6.15.1': {}
 
   '@types/range-parser@1.2.7': {}
@@ -19456,6 +19483,9 @@ snapshots:
 
   fs-monkey@1.1.0: {}
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -21059,7 +21089,7 @@ snapshots:
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
 
-  next@16.2.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0):
+  next@16.2.9(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0):
     dependencies:
       '@next/env': 16.2.9
       '@swc/helpers': 0.5.15
@@ -21078,6 +21108,7 @@ snapshots:
       '@next/swc-linux-x64-musl': 16.2.9
       '@next/swc-win32-arm64-msvc': 16.2.9
       '@next/swc-win32-x64-msvc': 16.2.9
+      '@playwright/test': 1.62.1
       sass: 1.101.0
       sharp: 0.34.5
     transitivePeerDependencies:
@@ -21760,6 +21791,10 @@ snapshots:
     optionalDependencies:
       '@napi-rs/nice': 1.1.1
 
+  pixelmatch@7.2.0:
+    dependencies:
+      pngjs: 7.0.0
+
   pkce-challenge@5.0.1: {}
 
   pkg-dir@7.0.0:
@@ -21791,6 +21826,16 @@ snapshots:
       pvutils: 1.1.5
       tslib: 2.8.1
 
+  playwright-core@1.62.1: {}
+
+  playwright@1.62.1:
+    dependencies:
+      playwright-core: 1.62.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  pngjs@7.0.0: {}
+
   portfinder@1.0.38:
     dependencies:
       async: 3.2.6
@@ -23913,7 +23958,7 @@ snapshots:
       picomatch: 4.0.4
       std-env: 4.1.0
       tinybench: 2.9.0
-      tinyexec: 1.2.4
+      tinyexec: 1.3.1
       tinyglobby: 0.2.17
       tinyrainbow: 3.1.0
       vite: 7.3.2(@types/node@24.13.2)(jiti@2.7.0)(less@4.6.6)(lightningcss@1.32.0)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0)(yaml@2.9.0)
@@ -23942,7 +23987,7 @@ snapshots:
       picomatch: 4.0.4
       std-env: 4.1.0
       tinybench: 2.9.0
-      tinyexec: 1.2.4
+      tinyexec: 1.3.1
       tinyglobby: 0.2.17
       tinyrainbow: 3.1.0
       vite: 8.0.16(@types/node@24.13.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.6)(sass-embedded@1.100.0)(sass@1.99.0)(terser@5.48.0)(yaml@2.9.0)
diff --git a/tests/visual/__screenshots__/angular/components-accordion--default-dark.png b/tests/visual/__screenshots__/angular/components-accordion--default-dark.png
new file mode 100644
index 00000000..6e29e20b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-accordion--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-accordion--default-light.png b/tests/visual/__screenshots__/angular/components-accordion--default-light.png
new file mode 100644
index 00000000..15c071b0
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-accordion--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-accordion--disabled-item-dark.png b/tests/visual/__screenshots__/angular/components-accordion--disabled-item-dark.png
new file mode 100644
index 00000000..3cd7430c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-accordion--disabled-item-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-accordion--disabled-item-light.png b/tests/visual/__screenshots__/angular/components-accordion--disabled-item-light.png
new file mode 100644
index 00000000..6ce88fb3
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-accordion--disabled-item-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-accordion--multiple-dark.png b/tests/visual/__screenshots__/angular/components-accordion--multiple-dark.png
new file mode 100644
index 00000000..344f0cd8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-accordion--multiple-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-accordion--multiple-light.png b/tests/visual/__screenshots__/angular/components-accordion--multiple-light.png
new file mode 100644
index 00000000..dee72af7
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-accordion--multiple-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alert--default-dark.png b/tests/visual/__screenshots__/angular/components-alert--default-dark.png
new file mode 100644
index 00000000..720d9dbf
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alert--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alert--default-light.png b/tests/visual/__screenshots__/angular/components-alert--default-light.png
new file mode 100644
index 00000000..085d6f3b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alert--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alert--destructive-dark.png b/tests/visual/__screenshots__/angular/components-alert--destructive-dark.png
new file mode 100644
index 00000000..1b3f2277
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alert--destructive-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alert--destructive-light.png b/tests/visual/__screenshots__/angular/components-alert--destructive-light.png
new file mode 100644
index 00000000..6569ff1b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alert--destructive-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alert--title-only-dark.png b/tests/visual/__screenshots__/angular/components-alert--title-only-dark.png
new file mode 100644
index 00000000..9930b5d9
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alert--title-only-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alert--title-only-light.png b/tests/visual/__screenshots__/angular/components-alert--title-only-light.png
new file mode 100644
index 00000000..1c48faa2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alert--title-only-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alert--variants-dark.png b/tests/visual/__screenshots__/angular/components-alert--variants-dark.png
new file mode 100644
index 00000000..52eac389
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alert--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alert--variants-light.png b/tests/visual/__screenshots__/angular/components-alert--variants-light.png
new file mode 100644
index 00000000..e1519bc3
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alert--variants-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alert--with-action-dark.png b/tests/visual/__screenshots__/angular/components-alert--with-action-dark.png
new file mode 100644
index 00000000..ca5bca7b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alert--with-action-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alert--with-action-light.png b/tests/visual/__screenshots__/angular/components-alert--with-action-light.png
new file mode 100644
index 00000000..e569c2e4
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alert--with-action-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alertdialog--default-dark.png b/tests/visual/__screenshots__/angular/components-alertdialog--default-dark.png
new file mode 100644
index 00000000..949221ff
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alertdialog--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alertdialog--default-light.png b/tests/visual/__screenshots__/angular/components-alertdialog--default-light.png
new file mode 100644
index 00000000..f9667663
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alertdialog--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alertdialog--small-dark.png b/tests/visual/__screenshots__/angular/components-alertdialog--small-dark.png
new file mode 100644
index 00000000..85ddb400
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alertdialog--small-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alertdialog--small-light.png b/tests/visual/__screenshots__/angular/components-alertdialog--small-light.png
new file mode 100644
index 00000000..2bc267f9
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alertdialog--small-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alertdialog--with-media-dark.png b/tests/visual/__screenshots__/angular/components-alertdialog--with-media-dark.png
new file mode 100644
index 00000000..ff87711c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alertdialog--with-media-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-alertdialog--with-media-light.png b/tests/visual/__screenshots__/angular/components-alertdialog--with-media-light.png
new file mode 100644
index 00000000..289f7e79
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-alertdialog--with-media-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-aspectratio--default-dark.png b/tests/visual/__screenshots__/angular/components-aspectratio--default-dark.png
new file mode 100644
index 00000000..68cfb51d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-aspectratio--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-aspectratio--default-light.png b/tests/visual/__screenshots__/angular/components-aspectratio--default-light.png
new file mode 100644
index 00000000..7664de9b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-aspectratio--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-aspectratio--in-card-dark.png b/tests/visual/__screenshots__/angular/components-aspectratio--in-card-dark.png
new file mode 100644
index 00000000..1e7e837c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-aspectratio--in-card-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-aspectratio--in-card-light.png b/tests/visual/__screenshots__/angular/components-aspectratio--in-card-light.png
new file mode 100644
index 00000000..a04080ef
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-aspectratio--in-card-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-aspectratio--ratios-dark.png b/tests/visual/__screenshots__/angular/components-aspectratio--ratios-dark.png
new file mode 100644
index 00000000..0381b41d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-aspectratio--ratios-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-aspectratio--ratios-light.png b/tests/visual/__screenshots__/angular/components-aspectratio--ratios-light.png
new file mode 100644
index 00000000..5617eb75
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-aspectratio--ratios-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-avatar--default-dark.png b/tests/visual/__screenshots__/angular/components-avatar--default-dark.png
new file mode 100644
index 00000000..cd9bb97c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-avatar--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-avatar--default-light.png b/tests/visual/__screenshots__/angular/components-avatar--default-light.png
new file mode 100644
index 00000000..726562e2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-avatar--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-avatar--fallback-dark.png b/tests/visual/__screenshots__/angular/components-avatar--fallback-dark.png
new file mode 100644
index 00000000..870d8658
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-avatar--fallback-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-avatar--fallback-light.png b/tests/visual/__screenshots__/angular/components-avatar--fallback-light.png
new file mode 100644
index 00000000..bf4ba212
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-avatar--fallback-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-avatar--group-dark.png b/tests/visual/__screenshots__/angular/components-avatar--group-dark.png
new file mode 100644
index 00000000..442c5313
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-avatar--group-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-avatar--group-light.png b/tests/visual/__screenshots__/angular/components-avatar--group-light.png
new file mode 100644
index 00000000..2d810aa8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-avatar--group-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-avatar--sizes-dark.png b/tests/visual/__screenshots__/angular/components-avatar--sizes-dark.png
new file mode 100644
index 00000000..e5b9c9f4
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-avatar--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-avatar--sizes-light.png b/tests/visual/__screenshots__/angular/components-avatar--sizes-light.png
new file mode 100644
index 00000000..306e6011
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-avatar--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-badge--as-link-dark.png b/tests/visual/__screenshots__/angular/components-badge--as-link-dark.png
new file mode 100644
index 00000000..7b5b7b1b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-badge--as-link-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-badge--as-link-light.png b/tests/visual/__screenshots__/angular/components-badge--as-link-light.png
new file mode 100644
index 00000000..aad4375d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-badge--as-link-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-badge--counts-dark.png b/tests/visual/__screenshots__/angular/components-badge--counts-dark.png
new file mode 100644
index 00000000..60ae66ff
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-badge--counts-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-badge--counts-light.png b/tests/visual/__screenshots__/angular/components-badge--counts-light.png
new file mode 100644
index 00000000..93f0b873
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-badge--counts-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-badge--default-dark.png b/tests/visual/__screenshots__/angular/components-badge--default-dark.png
new file mode 100644
index 00000000..4a5d3b0f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-badge--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-badge--default-light.png b/tests/visual/__screenshots__/angular/components-badge--default-light.png
new file mode 100644
index 00000000..19f9a00c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-badge--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-badge--status-list-dark.png b/tests/visual/__screenshots__/angular/components-badge--status-list-dark.png
new file mode 100644
index 00000000..0bab37bf
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-badge--status-list-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-badge--status-list-light.png b/tests/visual/__screenshots__/angular/components-badge--status-list-light.png
new file mode 100644
index 00000000..5f6211fc
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-badge--status-list-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-badge--variants-dark.png b/tests/visual/__screenshots__/angular/components-badge--variants-dark.png
new file mode 100644
index 00000000..5ffd42cc
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-badge--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-badge--variants-light.png b/tests/visual/__screenshots__/angular/components-badge--variants-light.png
new file mode 100644
index 00000000..ebe56244
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-badge--variants-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-badge--with-icon-dark.png b/tests/visual/__screenshots__/angular/components-badge--with-icon-dark.png
new file mode 100644
index 00000000..778188ce
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-badge--with-icon-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-badge--with-icon-light.png b/tests/visual/__screenshots__/angular/components-badge--with-icon-light.png
new file mode 100644
index 00000000..441d5c13
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-badge--with-icon-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-breadcrumb--default-dark.png b/tests/visual/__screenshots__/angular/components-breadcrumb--default-dark.png
new file mode 100644
index 00000000..ab2e01b3
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-breadcrumb--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-breadcrumb--default-light.png b/tests/visual/__screenshots__/angular/components-breadcrumb--default-light.png
new file mode 100644
index 00000000..08a37f03
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-breadcrumb--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-breadcrumb--with-ellipsis-dark.png b/tests/visual/__screenshots__/angular/components-breadcrumb--with-ellipsis-dark.png
new file mode 100644
index 00000000..5da7aa63
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-breadcrumb--with-ellipsis-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-breadcrumb--with-ellipsis-light.png b/tests/visual/__screenshots__/angular/components-breadcrumb--with-ellipsis-light.png
new file mode 100644
index 00000000..1b1bfa21
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-breadcrumb--with-ellipsis-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--as-link-dark.png b/tests/visual/__screenshots__/angular/components-button--as-link-dark.png
new file mode 100644
index 00000000..eb68bf03
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--as-link-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--as-link-light.png b/tests/visual/__screenshots__/angular/components-button--as-link-light.png
new file mode 100644
index 00000000..c29b2de7
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--as-link-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--default-dark.png b/tests/visual/__screenshots__/angular/components-button--default-dark.png
new file mode 100644
index 00000000..11e55735
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--default-light.png b/tests/visual/__screenshots__/angular/components-button--default-light.png
new file mode 100644
index 00000000..6a81c3db
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--destructive-states-dark.png b/tests/visual/__screenshots__/angular/components-button--destructive-states-dark.png
new file mode 100644
index 00000000..40bfb861
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--destructive-states-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--destructive-states-light.png b/tests/visual/__screenshots__/angular/components-button--destructive-states-light.png
new file mode 100644
index 00000000..ba4892b6
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--destructive-states-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--disabled-dark.png b/tests/visual/__screenshots__/angular/components-button--disabled-dark.png
new file mode 100644
index 00000000..f16b3356
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--disabled-light.png b/tests/visual/__screenshots__/angular/components-button--disabled-light.png
new file mode 100644
index 00000000..284a8b5f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--icon-sizes-dark.png b/tests/visual/__screenshots__/angular/components-button--icon-sizes-dark.png
new file mode 100644
index 00000000..8cc3b7fa
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--icon-sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--icon-sizes-light.png b/tests/visual/__screenshots__/angular/components-button--icon-sizes-light.png
new file mode 100644
index 00000000..d2aa47a2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--icon-sizes-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--sizes-dark.png b/tests/visual/__screenshots__/angular/components-button--sizes-dark.png
new file mode 100644
index 00000000..13561090
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--sizes-light.png b/tests/visual/__screenshots__/angular/components-button--sizes-light.png
new file mode 100644
index 00000000..61f1b8fd
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--variants-dark.png b/tests/visual/__screenshots__/angular/components-button--variants-dark.png
new file mode 100644
index 00000000..4d2d1a16
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--variants-light.png b/tests/visual/__screenshots__/angular/components-button--variants-light.png
new file mode 100644
index 00000000..acacae1d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--variants-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--with-icon-dark.png b/tests/visual/__screenshots__/angular/components-button--with-icon-dark.png
new file mode 100644
index 00000000..218951f9
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--with-icon-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-button--with-icon-light.png b/tests/visual/__screenshots__/angular/components-button--with-icon-light.png
new file mode 100644
index 00000000..02ec3fb8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-button--with-icon-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-buttongroup--default-dark.png b/tests/visual/__screenshots__/angular/components-buttongroup--default-dark.png
new file mode 100644
index 00000000..8aac7492
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-buttongroup--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-buttongroup--default-light.png b/tests/visual/__screenshots__/angular/components-buttongroup--default-light.png
new file mode 100644
index 00000000..788011f2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-buttongroup--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-buttongroup--vertical-dark.png b/tests/visual/__screenshots__/angular/components-buttongroup--vertical-dark.png
new file mode 100644
index 00000000..22d274dc
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-buttongroup--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-buttongroup--vertical-light.png b/tests/visual/__screenshots__/angular/components-buttongroup--vertical-light.png
new file mode 100644
index 00000000..c887dbbc
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-buttongroup--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-buttongroup--with-input-dark.png b/tests/visual/__screenshots__/angular/components-buttongroup--with-input-dark.png
new file mode 100644
index 00000000..d237c5c8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-buttongroup--with-input-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-buttongroup--with-input-light.png b/tests/visual/__screenshots__/angular/components-buttongroup--with-input-light.png
new file mode 100644
index 00000000..2d18c583
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-buttongroup--with-input-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-buttongroup--with-separator-dark.png b/tests/visual/__screenshots__/angular/components-buttongroup--with-separator-dark.png
new file mode 100644
index 00000000..bbe25398
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-buttongroup--with-separator-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-buttongroup--with-separator-light.png b/tests/visual/__screenshots__/angular/components-buttongroup--with-separator-light.png
new file mode 100644
index 00000000..2570dcf5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-buttongroup--with-separator-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-buttongroup--with-text-dark.png b/tests/visual/__screenshots__/angular/components-buttongroup--with-text-dark.png
new file mode 100644
index 00000000..a8f0fd2e
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-buttongroup--with-text-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-buttongroup--with-text-light.png b/tests/visual/__screenshots__/angular/components-buttongroup--with-text-light.png
new file mode 100644
index 00000000..9255a979
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-buttongroup--with-text-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--default-dark.png b/tests/visual/__screenshots__/angular/components-calendar--default-dark.png
new file mode 100644
index 00000000..0d1af244
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--default-light.png b/tests/visual/__screenshots__/angular/components-calendar--default-light.png
new file mode 100644
index 00000000..cfe2dbbb
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--disabled-dates-dark.png b/tests/visual/__screenshots__/angular/components-calendar--disabled-dates-dark.png
new file mode 100644
index 00000000..b97a376d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--disabled-dates-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--disabled-dates-light.png b/tests/visual/__screenshots__/angular/components-calendar--disabled-dates-light.png
new file mode 100644
index 00000000..c7696904
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--disabled-dates-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--dropdown-caption-dark.png b/tests/visual/__screenshots__/angular/components-calendar--dropdown-caption-dark.png
new file mode 100644
index 00000000..b2480981
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--dropdown-caption-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--dropdown-caption-light.png b/tests/visual/__screenshots__/angular/components-calendar--dropdown-caption-light.png
new file mode 100644
index 00000000..b71e727a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--dropdown-caption-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--highlighted-and-bounded-dark.png b/tests/visual/__screenshots__/angular/components-calendar--highlighted-and-bounded-dark.png
new file mode 100644
index 00000000..2fe4d56b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--highlighted-and-bounded-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--highlighted-and-bounded-light.png b/tests/visual/__screenshots__/angular/components-calendar--highlighted-and-bounded-light.png
new file mode 100644
index 00000000..dec2c088
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--highlighted-and-bounded-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--in-popover-dark.png b/tests/visual/__screenshots__/angular/components-calendar--in-popover-dark.png
new file mode 100644
index 00000000..4cac2692
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--in-popover-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--in-popover-light.png b/tests/visual/__screenshots__/angular/components-calendar--in-popover-light.png
new file mode 100644
index 00000000..796ddad0
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--in-popover-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--multiple-dark.png b/tests/visual/__screenshots__/angular/components-calendar--multiple-dark.png
new file mode 100644
index 00000000..e30fef43
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--multiple-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--multiple-light.png b/tests/visual/__screenshots__/angular/components-calendar--multiple-light.png
new file mode 100644
index 00000000..8f12b225
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--multiple-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--range-dark.png b/tests/visual/__screenshots__/angular/components-calendar--range-dark.png
new file mode 100644
index 00000000..b42d1a05
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--range-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-calendar--range-light.png b/tests/visual/__screenshots__/angular/components-calendar--range-light.png
new file mode 100644
index 00000000..ddd6a9a7
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-calendar--range-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-card--content-only-dark.png b/tests/visual/__screenshots__/angular/components-card--content-only-dark.png
new file mode 100644
index 00000000..abd2f164
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-card--content-only-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-card--content-only-light.png b/tests/visual/__screenshots__/angular/components-card--content-only-light.png
new file mode 100644
index 00000000..e0b34e27
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-card--content-only-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-card--default-dark.png b/tests/visual/__screenshots__/angular/components-card--default-dark.png
new file mode 100644
index 00000000..e8824871
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-card--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-card--default-light.png b/tests/visual/__screenshots__/angular/components-card--default-light.png
new file mode 100644
index 00000000..b068daad
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-card--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-card--small-dark.png b/tests/visual/__screenshots__/angular/components-card--small-dark.png
new file mode 100644
index 00000000..bd404019
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-card--small-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-card--small-light.png b/tests/visual/__screenshots__/angular/components-card--small-light.png
new file mode 100644
index 00000000..3787de2f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-card--small-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-card--with-header-action-dark.png b/tests/visual/__screenshots__/angular/components-card--with-header-action-dark.png
new file mode 100644
index 00000000..05048315
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-card--with-header-action-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-card--with-header-action-light.png b/tests/visual/__screenshots__/angular/components-card--with-header-action-light.png
new file mode 100644
index 00000000..63f671c8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-card--with-header-action-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-carousel--default-dark.png b/tests/visual/__screenshots__/angular/components-carousel--default-dark.png
new file mode 100644
index 00000000..830a56f3
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-carousel--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-carousel--default-light.png b/tests/visual/__screenshots__/angular/components-carousel--default-light.png
new file mode 100644
index 00000000..7189dce6
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-carousel--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-carousel--horizontal-dark.png b/tests/visual/__screenshots__/angular/components-carousel--horizontal-dark.png
new file mode 100644
index 00000000..830a56f3
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-carousel--horizontal-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-carousel--horizontal-light.png b/tests/visual/__screenshots__/angular/components-carousel--horizontal-light.png
new file mode 100644
index 00000000..7189dce6
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-carousel--horizontal-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-carousel--vertical-dark.png b/tests/visual/__screenshots__/angular/components-carousel--vertical-dark.png
new file mode 100644
index 00000000..8a65fe7f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-carousel--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-carousel--vertical-light.png b/tests/visual/__screenshots__/angular/components-carousel--vertical-light.png
new file mode 100644
index 00000000..9f8cb280
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-carousel--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-checkbox--default-dark.png b/tests/visual/__screenshots__/angular/components-checkbox--default-dark.png
new file mode 100644
index 00000000..2faa6d61
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-checkbox--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-checkbox--default-light.png b/tests/visual/__screenshots__/angular/components-checkbox--default-light.png
new file mode 100644
index 00000000..1974bead
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-checkbox--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-checkbox--states-dark.png b/tests/visual/__screenshots__/angular/components-checkbox--states-dark.png
new file mode 100644
index 00000000..17bbfde3
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-checkbox--states-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-checkbox--states-light.png b/tests/visual/__screenshots__/angular/components-checkbox--states-light.png
new file mode 100644
index 00000000..8f1f430c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-checkbox--states-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-checkbox--with-label-dark.png b/tests/visual/__screenshots__/angular/components-checkbox--with-label-dark.png
new file mode 100644
index 00000000..1959a846
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-checkbox--with-label-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-checkbox--with-label-light.png b/tests/visual/__screenshots__/angular/components-checkbox--with-label-light.png
new file mode 100644
index 00000000..3845649b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-checkbox--with-label-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--default-dark.png b/tests/visual/__screenshots__/angular/components-combobox--default-dark.png
new file mode 100644
index 00000000..9e92c64e
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-combobox--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--default-light.png b/tests/visual/__screenshots__/angular/components-combobox--default-light.png
new file mode 100644
index 00000000..d4e9062a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-combobox--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--disabled-dark.png b/tests/visual/__screenshots__/angular/components-combobox--disabled-dark.png
new file mode 100644
index 00000000..70fac1a8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-combobox--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--disabled-light.png b/tests/visual/__screenshots__/angular/components-combobox--disabled-light.png
new file mode 100644
index 00000000..5c573d9f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-combobox--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--grouped-dark.png b/tests/visual/__screenshots__/angular/components-combobox--grouped-dark.png
new file mode 100644
index 00000000..1ebcf250
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-combobox--grouped-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--grouped-light.png b/tests/visual/__screenshots__/angular/components-combobox--grouped-light.png
new file mode 100644
index 00000000..f4ab8d11
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-combobox--grouped-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--multiple-dark.png b/tests/visual/__screenshots__/angular/components-combobox--multiple-dark.png
new file mode 100644
index 00000000..26d1f28d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-combobox--multiple-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--multiple-light.png b/tests/visual/__screenshots__/angular/components-combobox--multiple-light.png
new file mode 100644
index 00000000..c70a5033
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-combobox--multiple-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-command--default-dark.png b/tests/visual/__screenshots__/angular/components-command--default-dark.png
new file mode 100644
index 00000000..efc26dca
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-command--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-command--default-light.png b/tests/visual/__screenshots__/angular/components-command--default-light.png
new file mode 100644
index 00000000..38fbe720
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-command--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-command--disabled-item-dark.png b/tests/visual/__screenshots__/angular/components-command--disabled-item-dark.png
new file mode 100644
index 00000000..a2b2bc4b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-command--disabled-item-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-command--disabled-item-light.png b/tests/visual/__screenshots__/angular/components-command--disabled-item-light.png
new file mode 100644
index 00000000..3b2a068d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-command--disabled-item-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-command--empty-dark.png b/tests/visual/__screenshots__/angular/components-command--empty-dark.png
new file mode 100644
index 00000000..6aef7d13
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-command--empty-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-command--empty-light.png b/tests/visual/__screenshots__/angular/components-command--empty-light.png
new file mode 100644
index 00000000..4d2c140b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-command--empty-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-command--in-dialog-dark.png b/tests/visual/__screenshots__/angular/components-command--in-dialog-dark.png
new file mode 100644
index 00000000..096076ab
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-command--in-dialog-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-command--in-dialog-light.png b/tests/visual/__screenshots__/angular/components-command--in-dialog-light.png
new file mode 100644
index 00000000..be0c0c2a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-command--in-dialog-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--default-dark.png b/tests/visual/__screenshots__/angular/components-contextmenu--default-dark.png
new file mode 100644
index 00000000..48c2503d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-contextmenu--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--default-light.png b/tests/visual/__screenshots__/angular/components-contextmenu--default-light.png
new file mode 100644
index 00000000..1cbca1c4
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-contextmenu--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-dark.png b/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-dark.png
new file mode 100644
index 00000000..48c2503d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-light.png b/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-light.png
new file mode 100644
index 00000000..1cbca1c4
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-dark.png b/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-dark.png
new file mode 100644
index 00000000..48c2503d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-light.png b/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-light.png
new file mode 100644
index 00000000..1cbca1c4
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-dark.png b/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-dark.png
new file mode 100644
index 00000000..48c2503d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-light.png b/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-light.png
new file mode 100644
index 00000000..1cbca1c4
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-curvedatatable--default-dark.png b/tests/visual/__screenshots__/angular/components-curvedatatable--default-dark.png
new file mode 100644
index 00000000..2eb90a8c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-curvedatatable--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-curvedatatable--default-light.png b/tests/visual/__screenshots__/angular/components-curvedatatable--default-light.png
new file mode 100644
index 00000000..f1261931
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-curvedatatable--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datatable--custom-toolbar-dark.png b/tests/visual/__screenshots__/angular/components-datatable--custom-toolbar-dark.png
new file mode 100644
index 00000000..b7b05545
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datatable--custom-toolbar-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datatable--custom-toolbar-light.png b/tests/visual/__screenshots__/angular/components-datatable--custom-toolbar-light.png
new file mode 100644
index 00000000..8b4539fc
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datatable--custom-toolbar-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datatable--default-dark.png b/tests/visual/__screenshots__/angular/components-datatable--default-dark.png
new file mode 100644
index 00000000..5843b192
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datatable--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datatable--default-light.png b/tests/visual/__screenshots__/angular/components-datatable--default-light.png
new file mode 100644
index 00000000..123c174c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datatable--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datatable--empty-dark.png b/tests/visual/__screenshots__/angular/components-datatable--empty-dark.png
new file mode 100644
index 00000000..7828f7a4
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datatable--empty-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datatable--empty-light.png b/tests/visual/__screenshots__/angular/components-datatable--empty-light.png
new file mode 100644
index 00000000..95569f7b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datatable--empty-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--bounded-dates-dark.png b/tests/visual/__screenshots__/angular/components-datepicker--bounded-dates-dark.png
new file mode 100644
index 00000000..c5608e4c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--bounded-dates-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--bounded-dates-light.png b/tests/visual/__screenshots__/angular/components-datepicker--bounded-dates-light.png
new file mode 100644
index 00000000..0a296523
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--bounded-dates-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--default-dark.png b/tests/visual/__screenshots__/angular/components-datepicker--default-dark.png
new file mode 100644
index 00000000..c5608e4c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--default-light.png b/tests/visual/__screenshots__/angular/components-datepicker--default-light.png
new file mode 100644
index 00000000..0a296523
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--disabled-dark.png b/tests/visual/__screenshots__/angular/components-datepicker--disabled-dark.png
new file mode 100644
index 00000000..79d725b9
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--disabled-light.png b/tests/visual/__screenshots__/angular/components-datepicker--disabled-light.png
new file mode 100644
index 00000000..6c5307b1
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--multiple-dark.png b/tests/visual/__screenshots__/angular/components-datepicker--multiple-dark.png
new file mode 100644
index 00000000..30f9cf1d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--multiple-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--multiple-light.png b/tests/visual/__screenshots__/angular/components-datepicker--multiple-light.png
new file mode 100644
index 00000000..9517fb7a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--multiple-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--range-dark.png b/tests/visual/__screenshots__/angular/components-datepicker--range-dark.png
new file mode 100644
index 00000000..7ec5293a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--range-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--range-light.png b/tests/visual/__screenshots__/angular/components-datepicker--range-light.png
new file mode 100644
index 00000000..c4c9db7f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--range-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--text-input-trigger-dark.png b/tests/visual/__screenshots__/angular/components-datepicker--text-input-trigger-dark.png
new file mode 100644
index 00000000..f636e1e5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--text-input-trigger-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--text-input-trigger-light.png b/tests/visual/__screenshots__/angular/components-datepicker--text-input-trigger-light.png
new file mode 100644
index 00000000..91b4fb95
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--text-input-trigger-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--with-footer-actions-dark.png b/tests/visual/__screenshots__/angular/components-datepicker--with-footer-actions-dark.png
new file mode 100644
index 00000000..0eca4b8d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--with-footer-actions-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--with-footer-actions-light.png b/tests/visual/__screenshots__/angular/components-datepicker--with-footer-actions-light.png
new file mode 100644
index 00000000..e3058ad5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--with-footer-actions-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--with-value-dark.png b/tests/visual/__screenshots__/angular/components-datepicker--with-value-dark.png
new file mode 100644
index 00000000..0eca4b8d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--with-value-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-datepicker--with-value-light.png b/tests/visual/__screenshots__/angular/components-datepicker--with-value-light.png
new file mode 100644
index 00000000..e3058ad5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-datepicker--with-value-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-dialog--default-dark.png b/tests/visual/__screenshots__/angular/components-dialog--default-dark.png
new file mode 100644
index 00000000..2ce152d6
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-dialog--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-dialog--default-light.png b/tests/visual/__screenshots__/angular/components-dialog--default-light.png
new file mode 100644
index 00000000..604ff39a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-dialog--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-dialog--without-close-button-dark.png b/tests/visual/__screenshots__/angular/components-dialog--without-close-button-dark.png
new file mode 100644
index 00000000..9cebfb9b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-dialog--without-close-button-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-dialog--without-close-button-light.png b/tests/visual/__screenshots__/angular/components-dialog--without-close-button-light.png
new file mode 100644
index 00000000..a1fcb18b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-dialog--without-close-button-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-dropdown-menu--default-dark.png b/tests/visual/__screenshots__/angular/components-dropdown-menu--default-dark.png
new file mode 100644
index 00000000..d2a649e7
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-dropdown-menu--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-dropdown-menu--default-light.png b/tests/visual/__screenshots__/angular/components-dropdown-menu--default-light.png
new file mode 100644
index 00000000..d1b11cd7
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-dropdown-menu--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-dropdown-menu--row-actions-dark.png b/tests/visual/__screenshots__/angular/components-dropdown-menu--row-actions-dark.png
new file mode 100644
index 00000000..d2c2823f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-dropdown-menu--row-actions-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-dropdown-menu--row-actions-light.png b/tests/visual/__screenshots__/angular/components-dropdown-menu--row-actions-light.png
new file mode 100644
index 00000000..5307df13
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-dropdown-menu--row-actions-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-dropdown-menu--with-checkbox-items-dark.png b/tests/visual/__screenshots__/angular/components-dropdown-menu--with-checkbox-items-dark.png
new file mode 100644
index 00000000..66d86a7a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-dropdown-menu--with-checkbox-items-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-dropdown-menu--with-checkbox-items-light.png b/tests/visual/__screenshots__/angular/components-dropdown-menu--with-checkbox-items-light.png
new file mode 100644
index 00000000..6882bae6
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-dropdown-menu--with-checkbox-items-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-empty--default-dark.png b/tests/visual/__screenshots__/angular/components-empty--default-dark.png
new file mode 100644
index 00000000..25c9969a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-empty--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-empty--default-light.png b/tests/visual/__screenshots__/angular/components-empty--default-light.png
new file mode 100644
index 00000000..24e074f7
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-empty--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-empty--media-variants-dark.png b/tests/visual/__screenshots__/angular/components-empty--media-variants-dark.png
new file mode 100644
index 00000000..2cbddcac
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-empty--media-variants-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-empty--media-variants-light.png b/tests/visual/__screenshots__/angular/components-empty--media-variants-light.png
new file mode 100644
index 00000000..9a1e6268
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-empty--media-variants-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-empty--no-results-dark.png b/tests/visual/__screenshots__/angular/components-empty--no-results-dark.png
new file mode 100644
index 00000000..e174ed11
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-empty--no-results-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-empty--no-results-light.png b/tests/visual/__screenshots__/angular/components-empty--no-results-light.png
new file mode 100644
index 00000000..05643f5f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-empty--no-results-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-empty--with-multiple-actions-dark.png b/tests/visual/__screenshots__/angular/components-empty--with-multiple-actions-dark.png
new file mode 100644
index 00000000..34501210
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-empty--with-multiple-actions-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-empty--with-multiple-actions-light.png b/tests/visual/__screenshots__/angular/components-empty--with-multiple-actions-light.png
new file mode 100644
index 00000000..3c4b9318
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-empty--with-multiple-actions-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-field--default-dark.png b/tests/visual/__screenshots__/angular/components-field--default-dark.png
new file mode 100644
index 00000000..2c7b9c73
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-field--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-field--default-light.png b/tests/visual/__screenshots__/angular/components-field--default-light.png
new file mode 100644
index 00000000..9082a418
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-field--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-field--group-dark.png b/tests/visual/__screenshots__/angular/components-field--group-dark.png
new file mode 100644
index 00000000..6c6b2ee8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-field--group-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-field--group-light.png b/tests/visual/__screenshots__/angular/components-field--group-light.png
new file mode 100644
index 00000000..06d32e62
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-field--group-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-field--horizontal-dark.png b/tests/visual/__screenshots__/angular/components-field--horizontal-dark.png
new file mode 100644
index 00000000..0a4e74f2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-field--horizontal-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-field--horizontal-light.png b/tests/visual/__screenshots__/angular/components-field--horizontal-light.png
new file mode 100644
index 00000000..6f44ae4f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-field--horizontal-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-field--with-error-dark.png b/tests/visual/__screenshots__/angular/components-field--with-error-dark.png
new file mode 100644
index 00000000..3a8a7529
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-field--with-error-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-field--with-error-light.png b/tests/visual/__screenshots__/angular/components-field--with-error-light.png
new file mode 100644
index 00000000..a3dec2df
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-field--with-error-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-hovercard--default-dark.png b/tests/visual/__screenshots__/angular/components-hovercard--default-dark.png
new file mode 100644
index 00000000..10797f3a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-hovercard--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-hovercard--default-light.png b/tests/visual/__screenshots__/angular/components-hovercard--default-light.png
new file mode 100644
index 00000000..a9ff8465
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-hovercard--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-hovercard--placement-dark.png b/tests/visual/__screenshots__/angular/components-hovercard--placement-dark.png
new file mode 100644
index 00000000..06641f34
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-hovercard--placement-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-hovercard--placement-light.png b/tests/visual/__screenshots__/angular/components-hovercard--placement-light.png
new file mode 100644
index 00000000..c6c08f74
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-hovercard--placement-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-hovercard--text-trigger-dark.png b/tests/visual/__screenshots__/angular/components-hovercard--text-trigger-dark.png
new file mode 100644
index 00000000..ea5f0f97
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-hovercard--text-trigger-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-hovercard--text-trigger-light.png b/tests/visual/__screenshots__/angular/components-hovercard--text-trigger-light.png
new file mode 100644
index 00000000..447fc0dd
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-hovercard--text-trigger-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input--default-dark.png b/tests/visual/__screenshots__/angular/components-input--default-dark.png
new file mode 100644
index 00000000..5cbc9def
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input--default-light.png b/tests/visual/__screenshots__/angular/components-input--default-light.png
new file mode 100644
index 00000000..b43df351
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input--disabled-dark.png b/tests/visual/__screenshots__/angular/components-input--disabled-dark.png
new file mode 100644
index 00000000..dd8e2dff
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input--disabled-light.png b/tests/visual/__screenshots__/angular/components-input--disabled-light.png
new file mode 100644
index 00000000..9bc7496c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input--error-dark.png b/tests/visual/__screenshots__/angular/components-input--error-dark.png
new file mode 100644
index 00000000..f211d6e1
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input--error-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input--error-light.png b/tests/visual/__screenshots__/angular/components-input--error-light.png
new file mode 100644
index 00000000..bab53d11
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input--error-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input--types-dark.png b/tests/visual/__screenshots__/angular/components-input--types-dark.png
new file mode 100644
index 00000000..dff09845
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input--types-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input--types-light.png b/tests/visual/__screenshots__/angular/components-input--types-light.png
new file mode 100644
index 00000000..7c1f35d2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input--types-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input-group--textarea-with-block-end-toolbar-dark.png b/tests/visual/__screenshots__/angular/components-input-group--textarea-with-block-end-toolbar-dark.png
new file mode 100644
index 00000000..1068198f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input-group--textarea-with-block-end-toolbar-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input-group--textarea-with-block-end-toolbar-light.png b/tests/visual/__screenshots__/angular/components-input-group--textarea-with-block-end-toolbar-light.png
new file mode 100644
index 00000000..97f3cdd0
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input-group--textarea-with-block-end-toolbar-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input-group--with-leading-and-trailing-addon-dark.png b/tests/visual/__screenshots__/angular/components-input-group--with-leading-and-trailing-addon-dark.png
new file mode 100644
index 00000000..8c902fd9
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input-group--with-leading-and-trailing-addon-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input-group--with-leading-and-trailing-addon-light.png b/tests/visual/__screenshots__/angular/components-input-group--with-leading-and-trailing-addon-light.png
new file mode 100644
index 00000000..f02d4bcc
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input-group--with-leading-and-trailing-addon-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input-group--with-leading-dropdown-dark.png b/tests/visual/__screenshots__/angular/components-input-group--with-leading-dropdown-dark.png
new file mode 100644
index 00000000..fc3daaad
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input-group--with-leading-dropdown-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input-group--with-leading-dropdown-light.png b/tests/visual/__screenshots__/angular/components-input-group--with-leading-dropdown-light.png
new file mode 100644
index 00000000..66c9d868
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input-group--with-leading-dropdown-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input-group--with-text-prefix-dark.png b/tests/visual/__screenshots__/angular/components-input-group--with-text-prefix-dark.png
new file mode 100644
index 00000000..16f9692a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input-group--with-text-prefix-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-input-group--with-text-prefix-light.png b/tests/visual/__screenshots__/angular/components-input-group--with-text-prefix-light.png
new file mode 100644
index 00000000..f47321e0
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-input-group--with-text-prefix-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-inputotp--default-dark.png b/tests/visual/__screenshots__/angular/components-inputotp--default-dark.png
new file mode 100644
index 00000000..dc089a98
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-inputotp--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-inputotp--default-light.png b/tests/visual/__screenshots__/angular/components-inputotp--default-light.png
new file mode 100644
index 00000000..98813a28
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-inputotp--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-inputotp--disabled-dark.png b/tests/visual/__screenshots__/angular/components-inputotp--disabled-dark.png
new file mode 100644
index 00000000..e11b87a4
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-inputotp--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-inputotp--disabled-light.png b/tests/visual/__screenshots__/angular/components-inputotp--disabled-light.png
new file mode 100644
index 00000000..a7c1dacc
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-inputotp--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-inputotp--verification-form-dark.png b/tests/visual/__screenshots__/angular/components-inputotp--verification-form-dark.png
new file mode 100644
index 00000000..663f6888
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-inputotp--verification-form-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-inputotp--verification-form-light.png b/tests/visual/__screenshots__/angular/components-inputotp--verification-form-light.png
new file mode 100644
index 00000000..b0d72513
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-inputotp--verification-form-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-inputotp--with-separator-dark.png b/tests/visual/__screenshots__/angular/components-inputotp--with-separator-dark.png
new file mode 100644
index 00000000..e884afeb
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-inputotp--with-separator-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-inputotp--with-separator-light.png b/tests/visual/__screenshots__/angular/components-inputotp--with-separator-light.png
new file mode 100644
index 00000000..98d014b2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-inputotp--with-separator-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-item--default-dark.png b/tests/visual/__screenshots__/angular/components-item--default-dark.png
new file mode 100644
index 00000000..0e9b1359
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-item--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-item--default-light.png b/tests/visual/__screenshots__/angular/components-item--default-light.png
new file mode 100644
index 00000000..e1cb7fbc
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-item--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-item--group-dark.png b/tests/visual/__screenshots__/angular/components-item--group-dark.png
new file mode 100644
index 00000000..9017015f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-item--group-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-item--group-light.png b/tests/visual/__screenshots__/angular/components-item--group-light.png
new file mode 100644
index 00000000..d85ff80f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-item--group-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-item--media-variants-dark.png b/tests/visual/__screenshots__/angular/components-item--media-variants-dark.png
new file mode 100644
index 00000000..e1271268
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-item--media-variants-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-item--media-variants-light.png b/tests/visual/__screenshots__/angular/components-item--media-variants-light.png
new file mode 100644
index 00000000..288141d2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-item--media-variants-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-item--sizes-dark.png b/tests/visual/__screenshots__/angular/components-item--sizes-dark.png
new file mode 100644
index 00000000..a97728d9
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-item--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-item--sizes-light.png b/tests/visual/__screenshots__/angular/components-item--sizes-light.png
new file mode 100644
index 00000000..633e2bf5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-item--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-item--variants-dark.png b/tests/visual/__screenshots__/angular/components-item--variants-dark.png
new file mode 100644
index 00000000..3535d48b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-item--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-item--variants-light.png b/tests/visual/__screenshots__/angular/components-item--variants-light.png
new file mode 100644
index 00000000..57608c74
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-item--variants-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-item--with-header-and-footer-dark.png b/tests/visual/__screenshots__/angular/components-item--with-header-and-footer-dark.png
new file mode 100644
index 00000000..79c239e0
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-item--with-header-and-footer-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-item--with-header-and-footer-light.png b/tests/visual/__screenshots__/angular/components-item--with-header-and-footer-light.png
new file mode 100644
index 00000000..a89a715e
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-item--with-header-and-footer-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-kbd--default-dark.png b/tests/visual/__screenshots__/angular/components-kbd--default-dark.png
new file mode 100644
index 00000000..473fb8ea
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-kbd--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-kbd--default-light.png b/tests/visual/__screenshots__/angular/components-kbd--default-light.png
new file mode 100644
index 00000000..bdde6a17
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-kbd--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-kbd--groups-dark.png b/tests/visual/__screenshots__/angular/components-kbd--groups-dark.png
new file mode 100644
index 00000000..899062e9
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-kbd--groups-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-kbd--groups-light.png b/tests/visual/__screenshots__/angular/components-kbd--groups-light.png
new file mode 100644
index 00000000..ac6af7b2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-kbd--groups-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-kbd--in-button-dark.png b/tests/visual/__screenshots__/angular/components-kbd--in-button-dark.png
new file mode 100644
index 00000000..ce37fb1e
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-kbd--in-button-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-kbd--in-button-light.png b/tests/visual/__screenshots__/angular/components-kbd--in-button-light.png
new file mode 100644
index 00000000..e77a56b5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-kbd--in-button-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-kbd--in-input-group-dark.png b/tests/visual/__screenshots__/angular/components-kbd--in-input-group-dark.png
new file mode 100644
index 00000000..0e916c24
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-kbd--in-input-group-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-kbd--in-input-group-light.png b/tests/visual/__screenshots__/angular/components-kbd--in-input-group-light.png
new file mode 100644
index 00000000..161e840d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-kbd--in-input-group-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-kbd--in-text-dark.png b/tests/visual/__screenshots__/angular/components-kbd--in-text-dark.png
new file mode 100644
index 00000000..cbb539ff
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-kbd--in-text-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-kbd--in-text-light.png b/tests/visual/__screenshots__/angular/components-kbd--in-text-light.png
new file mode 100644
index 00000000..003c00f5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-kbd--in-text-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-label--default-dark.png b/tests/visual/__screenshots__/angular/components-label--default-dark.png
new file mode 100644
index 00000000..d4f4fded
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-label--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-label--default-light.png b/tests/visual/__screenshots__/angular/components-label--default-light.png
new file mode 100644
index 00000000..4da4c3ab
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-label--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-label--with-input-dark.png b/tests/visual/__screenshots__/angular/components-label--with-input-dark.png
new file mode 100644
index 00000000..7cbaf380
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-label--with-input-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-label--with-input-light.png b/tests/visual/__screenshots__/angular/components-label--with-input-light.png
new file mode 100644
index 00000000..971fc37d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-label--with-input-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-nativeselect--default-dark.png b/tests/visual/__screenshots__/angular/components-nativeselect--default-dark.png
new file mode 100644
index 00000000..50e5beb0
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-nativeselect--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-nativeselect--default-light.png b/tests/visual/__screenshots__/angular/components-nativeselect--default-light.png
new file mode 100644
index 00000000..32f7c968
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-nativeselect--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-nativeselect--disabled-dark.png b/tests/visual/__screenshots__/angular/components-nativeselect--disabled-dark.png
new file mode 100644
index 00000000..12f506db
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-nativeselect--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-nativeselect--disabled-light.png b/tests/visual/__screenshots__/angular/components-nativeselect--disabled-light.png
new file mode 100644
index 00000000..8689e449
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-nativeselect--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-nativeselect--invalid-dark.png b/tests/visual/__screenshots__/angular/components-nativeselect--invalid-dark.png
new file mode 100644
index 00000000..001ab2dc
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-nativeselect--invalid-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-nativeselect--invalid-light.png b/tests/visual/__screenshots__/angular/components-nativeselect--invalid-light.png
new file mode 100644
index 00000000..4e622648
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-nativeselect--invalid-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-nativeselect--sizes-dark.png b/tests/visual/__screenshots__/angular/components-nativeselect--sizes-dark.png
new file mode 100644
index 00000000..8d3d03d8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-nativeselect--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-nativeselect--sizes-light.png b/tests/visual/__screenshots__/angular/components-nativeselect--sizes-light.png
new file mode 100644
index 00000000..3d1b6d8d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-nativeselect--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-nativeselect--with-option-groups-dark.png b/tests/visual/__screenshots__/angular/components-nativeselect--with-option-groups-dark.png
new file mode 100644
index 00000000..33617a90
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-nativeselect--with-option-groups-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-nativeselect--with-option-groups-light.png b/tests/visual/__screenshots__/angular/components-nativeselect--with-option-groups-light.png
new file mode 100644
index 00000000..caf06ec4
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-nativeselect--with-option-groups-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-navigationmenu--alignment-dark.png b/tests/visual/__screenshots__/angular/components-navigationmenu--alignment-dark.png
new file mode 100644
index 00000000..63be41bb
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-navigationmenu--alignment-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-navigationmenu--alignment-light.png b/tests/visual/__screenshots__/angular/components-navigationmenu--alignment-light.png
new file mode 100644
index 00000000..89b8e292
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-navigationmenu--alignment-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-navigationmenu--default-dark.png b/tests/visual/__screenshots__/angular/components-navigationmenu--default-dark.png
new file mode 100644
index 00000000..e54b2e9a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-navigationmenu--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-navigationmenu--default-light.png b/tests/visual/__screenshots__/angular/components-navigationmenu--default-light.png
new file mode 100644
index 00000000..aef55c68
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-navigationmenu--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-navigationmenu--simple-links-dark.png b/tests/visual/__screenshots__/angular/components-navigationmenu--simple-links-dark.png
new file mode 100644
index 00000000..1bc31fc1
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-navigationmenu--simple-links-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-navigationmenu--simple-links-light.png b/tests/visual/__screenshots__/angular/components-navigationmenu--simple-links-light.png
new file mode 100644
index 00000000..39f53767
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-navigationmenu--simple-links-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-navigationmenu--vertical-dark.png b/tests/visual/__screenshots__/angular/components-navigationmenu--vertical-dark.png
new file mode 100644
index 00000000..ba67db44
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-navigationmenu--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-navigationmenu--vertical-light.png b/tests/visual/__screenshots__/angular/components-navigationmenu--vertical-light.png
new file mode 100644
index 00000000..475b7c4c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-navigationmenu--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-navigationmenu--with-icon-dark.png b/tests/visual/__screenshots__/angular/components-navigationmenu--with-icon-dark.png
new file mode 100644
index 00000000..684bbf24
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-navigationmenu--with-icon-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-navigationmenu--with-icon-light.png b/tests/visual/__screenshots__/angular/components-navigationmenu--with-icon-light.png
new file mode 100644
index 00000000..7c5fdbb2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-navigationmenu--with-icon-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-pagination--default-dark.png b/tests/visual/__screenshots__/angular/components-pagination--default-dark.png
new file mode 100644
index 00000000..88223e8d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-pagination--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-pagination--default-light.png b/tests/visual/__screenshots__/angular/components-pagination--default-light.png
new file mode 100644
index 00000000..54dc0837
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-pagination--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-pagination--interactive-dark.png b/tests/visual/__screenshots__/angular/components-pagination--interactive-dark.png
new file mode 100644
index 00000000..aa8e726b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-pagination--interactive-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-pagination--interactive-light.png b/tests/visual/__screenshots__/angular/components-pagination--interactive-light.png
new file mode 100644
index 00000000..1f3fceb7
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-pagination--interactive-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-pagination--many-pages-dark.png b/tests/visual/__screenshots__/angular/components-pagination--many-pages-dark.png
new file mode 100644
index 00000000..36a160a0
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-pagination--many-pages-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-pagination--many-pages-light.png b/tests/visual/__screenshots__/angular/components-pagination--many-pages-light.png
new file mode 100644
index 00000000..5ca0a73c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-pagination--many-pages-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-pagination--numbered-pagination-dark.png b/tests/visual/__screenshots__/angular/components-pagination--numbered-pagination-dark.png
new file mode 100644
index 00000000..c38151a5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-pagination--numbered-pagination-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-pagination--numbered-pagination-light.png b/tests/visual/__screenshots__/angular/components-pagination--numbered-pagination-light.png
new file mode 100644
index 00000000..7479f794
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-pagination--numbered-pagination-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-popover--align-dark.png b/tests/visual/__screenshots__/angular/components-popover--align-dark.png
new file mode 100644
index 00000000..e72c89a8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-popover--align-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-popover--align-light.png b/tests/visual/__screenshots__/angular/components-popover--align-light.png
new file mode 100644
index 00000000..df7cae2c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-popover--align-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-popover--default-dark.png b/tests/visual/__screenshots__/angular/components-popover--default-dark.png
new file mode 100644
index 00000000..25477f2f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-popover--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-popover--default-light.png b/tests/visual/__screenshots__/angular/components-popover--default-light.png
new file mode 100644
index 00000000..4d2bcd15
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-popover--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-progress--default-dark.png b/tests/visual/__screenshots__/angular/components-progress--default-dark.png
new file mode 100644
index 00000000..45708b84
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-progress--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-progress--default-light.png b/tests/visual/__screenshots__/angular/components-progress--default-light.png
new file mode 100644
index 00000000..89feaef2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-progress--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-progress--indeterminate-dark.png b/tests/visual/__screenshots__/angular/components-progress--indeterminate-dark.png
new file mode 100644
index 00000000..7438d7f2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-progress--indeterminate-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-progress--indeterminate-light.png b/tests/visual/__screenshots__/angular/components-progress--indeterminate-light.png
new file mode 100644
index 00000000..4f5e75b7
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-progress--indeterminate-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-progress--values-dark.png b/tests/visual/__screenshots__/angular/components-progress--values-dark.png
new file mode 100644
index 00000000..d41d3c1a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-progress--values-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-progress--values-light.png b/tests/visual/__screenshots__/angular/components-progress--values-light.png
new file mode 100644
index 00000000..f8d19ff6
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-progress--values-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-progress--with-label-dark.png b/tests/visual/__screenshots__/angular/components-progress--with-label-dark.png
new file mode 100644
index 00000000..d3a7b9a5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-progress--with-label-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-progress--with-label-light.png b/tests/visual/__screenshots__/angular/components-progress--with-label-light.png
new file mode 100644
index 00000000..35f5bc6c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-progress--with-label-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-radiogroup--default-dark.png b/tests/visual/__screenshots__/angular/components-radiogroup--default-dark.png
new file mode 100644
index 00000000..8ed32a9b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-radiogroup--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-radiogroup--default-light.png b/tests/visual/__screenshots__/angular/components-radiogroup--default-light.png
new file mode 100644
index 00000000..2a9208ad
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-radiogroup--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-radiogroup--disabled-dark.png b/tests/visual/__screenshots__/angular/components-radiogroup--disabled-dark.png
new file mode 100644
index 00000000..85e6938c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-radiogroup--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-radiogroup--disabled-light.png b/tests/visual/__screenshots__/angular/components-radiogroup--disabled-light.png
new file mode 100644
index 00000000..1378725b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-radiogroup--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-radiogroup--in-fieldset-dark.png b/tests/visual/__screenshots__/angular/components-radiogroup--in-fieldset-dark.png
new file mode 100644
index 00000000..20291a94
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-radiogroup--in-fieldset-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-radiogroup--in-fieldset-light.png b/tests/visual/__screenshots__/angular/components-radiogroup--in-fieldset-light.png
new file mode 100644
index 00000000..20fa60aa
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-radiogroup--in-fieldset-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-radiogroup--invalid-dark.png b/tests/visual/__screenshots__/angular/components-radiogroup--invalid-dark.png
new file mode 100644
index 00000000..9dd0385c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-radiogroup--invalid-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-radiogroup--invalid-light.png b/tests/visual/__screenshots__/angular/components-radiogroup--invalid-light.png
new file mode 100644
index 00000000..c64c6cf1
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-radiogroup--invalid-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-resizable--composed-layout-dark.png b/tests/visual/__screenshots__/angular/components-resizable--composed-layout-dark.png
new file mode 100644
index 00000000..84af4d25
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-resizable--composed-layout-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-resizable--composed-layout-light.png b/tests/visual/__screenshots__/angular/components-resizable--composed-layout-light.png
new file mode 100644
index 00000000..7957ec7a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-resizable--composed-layout-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-resizable--default-dark.png b/tests/visual/__screenshots__/angular/components-resizable--default-dark.png
new file mode 100644
index 00000000..a4e6d0c9
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-resizable--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-resizable--default-light.png b/tests/visual/__screenshots__/angular/components-resizable--default-light.png
new file mode 100644
index 00000000..3e60b143
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-resizable--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-resizable--vertical-dark.png b/tests/visual/__screenshots__/angular/components-resizable--vertical-dark.png
new file mode 100644
index 00000000..2c4f0e93
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-resizable--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-resizable--vertical-light.png b/tests/visual/__screenshots__/angular/components-resizable--vertical-light.png
new file mode 100644
index 00000000..1748b7aa
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-resizable--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-resizable--without-handle-grip-dark.png b/tests/visual/__screenshots__/angular/components-resizable--without-handle-grip-dark.png
new file mode 100644
index 00000000..a30fb91b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-resizable--without-handle-grip-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-resizable--without-handle-grip-light.png b/tests/visual/__screenshots__/angular/components-resizable--without-handle-grip-light.png
new file mode 100644
index 00000000..25567139
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-resizable--without-handle-grip-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-scrollarea--default-dark.png b/tests/visual/__screenshots__/angular/components-scrollarea--default-dark.png
new file mode 100644
index 00000000..799696e8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-scrollarea--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-scrollarea--default-light.png b/tests/visual/__screenshots__/angular/components-scrollarea--default-light.png
new file mode 100644
index 00000000..bd8a9468
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-scrollarea--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-scrollarea--horizontal-dark.png b/tests/visual/__screenshots__/angular/components-scrollarea--horizontal-dark.png
new file mode 100644
index 00000000..d7001c13
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-scrollarea--horizontal-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-scrollarea--horizontal-light.png b/tests/visual/__screenshots__/angular/components-scrollarea--horizontal-light.png
new file mode 100644
index 00000000..7a7c8ef5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-scrollarea--horizontal-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-select--default-dark.png b/tests/visual/__screenshots__/angular/components-select--default-dark.png
new file mode 100644
index 00000000..07cb7088
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-select--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-select--default-light.png b/tests/visual/__screenshots__/angular/components-select--default-light.png
new file mode 100644
index 00000000..e261bfd3
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-select--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-select--disabled-dark.png b/tests/visual/__screenshots__/angular/components-select--disabled-dark.png
new file mode 100644
index 00000000..7c8b1509
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-select--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-select--disabled-light.png b/tests/visual/__screenshots__/angular/components-select--disabled-light.png
new file mode 100644
index 00000000..8a6031da
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-select--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-select--grouped-dark.png b/tests/visual/__screenshots__/angular/components-select--grouped-dark.png
new file mode 100644
index 00000000..91118f1a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-select--grouped-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-select--grouped-light.png b/tests/visual/__screenshots__/angular/components-select--grouped-light.png
new file mode 100644
index 00000000..0533e970
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-select--grouped-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-select--sizes-dark.png b/tests/visual/__screenshots__/angular/components-select--sizes-dark.png
new file mode 100644
index 00000000..50ef0ac6
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-select--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-select--sizes-light.png b/tests/visual/__screenshots__/angular/components-select--sizes-light.png
new file mode 100644
index 00000000..a55faa20
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-select--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-separator--default-dark.png b/tests/visual/__screenshots__/angular/components-separator--default-dark.png
new file mode 100644
index 00000000..e895845d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-separator--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-separator--default-light.png b/tests/visual/__screenshots__/angular/components-separator--default-light.png
new file mode 100644
index 00000000..d659cb67
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-separator--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-separator--horizontal-dark.png b/tests/visual/__screenshots__/angular/components-separator--horizontal-dark.png
new file mode 100644
index 00000000..4d9420aa
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-separator--horizontal-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-separator--horizontal-light.png b/tests/visual/__screenshots__/angular/components-separator--horizontal-light.png
new file mode 100644
index 00000000..ba2bce45
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-separator--horizontal-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-separator--vertical-dark.png b/tests/visual/__screenshots__/angular/components-separator--vertical-dark.png
new file mode 100644
index 00000000..b58279a6
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-separator--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-separator--vertical-light.png b/tests/visual/__screenshots__/angular/components-separator--vertical-light.png
new file mode 100644
index 00000000..3428fe48
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-separator--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sheet--default-dark.png b/tests/visual/__screenshots__/angular/components-sheet--default-dark.png
new file mode 100644
index 00000000..2ce152d6
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sheet--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sheet--default-light.png b/tests/visual/__screenshots__/angular/components-sheet--default-light.png
new file mode 100644
index 00000000..604ff39a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sheet--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sheet--sides-dark.png b/tests/visual/__screenshots__/angular/components-sheet--sides-dark.png
new file mode 100644
index 00000000..14d4bb42
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sheet--sides-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sheet--sides-light.png b/tests/visual/__screenshots__/angular/components-sheet--sides-light.png
new file mode 100644
index 00000000..dc4081e0
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sheet--sides-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sheet--without-close-button-dark.png b/tests/visual/__screenshots__/angular/components-sheet--without-close-button-dark.png
new file mode 100644
index 00000000..9cebfb9b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sheet--without-close-button-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sheet--without-close-button-light.png b/tests/visual/__screenshots__/angular/components-sheet--without-close-button-light.png
new file mode 100644
index 00000000..a1fcb18b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sheet--without-close-button-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sidebar--default-dark.png b/tests/visual/__screenshots__/angular/components-sidebar--default-dark.png
new file mode 100644
index 00000000..02c73cfe
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sidebar--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sidebar--default-light.png b/tests/visual/__screenshots__/angular/components-sidebar--default-light.png
new file mode 100644
index 00000000..97fe7841
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sidebar--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sidebar--menu-button-variants-dark.png b/tests/visual/__screenshots__/angular/components-sidebar--menu-button-variants-dark.png
new file mode 100644
index 00000000..6ba10630
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sidebar--menu-button-variants-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sidebar--menu-button-variants-light.png b/tests/visual/__screenshots__/angular/components-sidebar--menu-button-variants-light.png
new file mode 100644
index 00000000..bd6ffac3
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sidebar--menu-button-variants-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-skeleton--card-loading-dark.png b/tests/visual/__screenshots__/angular/components-skeleton--card-loading-dark.png
new file mode 100644
index 00000000..5615d9c0
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-skeleton--card-loading-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-skeleton--card-loading-light.png b/tests/visual/__screenshots__/angular/components-skeleton--card-loading-light.png
new file mode 100644
index 00000000..961e0c06
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-skeleton--card-loading-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-skeleton--default-dark.png b/tests/visual/__screenshots__/angular/components-skeleton--default-dark.png
new file mode 100644
index 00000000..05262a37
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-skeleton--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-skeleton--default-light.png b/tests/visual/__screenshots__/angular/components-skeleton--default-light.png
new file mode 100644
index 00000000..356afab5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-skeleton--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-skeleton--menu-list-dark.png b/tests/visual/__screenshots__/angular/components-skeleton--menu-list-dark.png
new file mode 100644
index 00000000..3e4d3121
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-skeleton--menu-list-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-skeleton--menu-list-light.png b/tests/visual/__screenshots__/angular/components-skeleton--menu-list-light.png
new file mode 100644
index 00000000..09e6c00f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-skeleton--menu-list-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-skeleton--shapes-dark.png b/tests/visual/__screenshots__/angular/components-skeleton--shapes-dark.png
new file mode 100644
index 00000000..20bf843a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-skeleton--shapes-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-skeleton--shapes-light.png b/tests/visual/__screenshots__/angular/components-skeleton--shapes-light.png
new file mode 100644
index 00000000..f5163a9b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-skeleton--shapes-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-slider--default-dark.png b/tests/visual/__screenshots__/angular/components-slider--default-dark.png
new file mode 100644
index 00000000..bd6df754
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-slider--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-slider--default-light.png b/tests/visual/__screenshots__/angular/components-slider--default-light.png
new file mode 100644
index 00000000..ace11fd5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-slider--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-slider--disabled-dark.png b/tests/visual/__screenshots__/angular/components-slider--disabled-dark.png
new file mode 100644
index 00000000..25121730
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-slider--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-slider--disabled-light.png b/tests/visual/__screenshots__/angular/components-slider--disabled-light.png
new file mode 100644
index 00000000..25518f0a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-slider--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-slider--horizontal-dark.png b/tests/visual/__screenshots__/angular/components-slider--horizontal-dark.png
new file mode 100644
index 00000000..bd6df754
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-slider--horizontal-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-slider--horizontal-light.png b/tests/visual/__screenshots__/angular/components-slider--horizontal-light.png
new file mode 100644
index 00000000..ace11fd5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-slider--horizontal-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-slider--range-dark.png b/tests/visual/__screenshots__/angular/components-slider--range-dark.png
new file mode 100644
index 00000000..6cf901a1
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-slider--range-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-slider--range-light.png b/tests/visual/__screenshots__/angular/components-slider--range-light.png
new file mode 100644
index 00000000..e6883a7d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-slider--range-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-slider--vertical-dark.png b/tests/visual/__screenshots__/angular/components-slider--vertical-dark.png
new file mode 100644
index 00000000..326a6338
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-slider--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-slider--vertical-light.png b/tests/visual/__screenshots__/angular/components-slider--vertical-light.png
new file mode 100644
index 00000000..c83e41af
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-slider--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-slider--with-field-dark.png b/tests/visual/__screenshots__/angular/components-slider--with-field-dark.png
new file mode 100644
index 00000000..5e856a71
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-slider--with-field-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-slider--with-field-light.png b/tests/visual/__screenshots__/angular/components-slider--with-field-light.png
new file mode 100644
index 00000000..b5008ba2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-slider--with-field-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sonner--default-dark.png b/tests/visual/__screenshots__/angular/components-sonner--default-dark.png
new file mode 100644
index 00000000..394e6ffb
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sonner--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sonner--default-light.png b/tests/visual/__screenshots__/angular/components-sonner--default-light.png
new file mode 100644
index 00000000..90e180dd
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sonner--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sonner--rich-colors-dark.png b/tests/visual/__screenshots__/angular/components-sonner--rich-colors-dark.png
new file mode 100644
index 00000000..6a7a7034
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sonner--rich-colors-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sonner--rich-colors-light.png b/tests/visual/__screenshots__/angular/components-sonner--rich-colors-light.png
new file mode 100644
index 00000000..fa173d28
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sonner--rich-colors-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sonner--types-dark.png b/tests/visual/__screenshots__/angular/components-sonner--types-dark.png
new file mode 100644
index 00000000..f0a7b859
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sonner--types-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sonner--types-light.png b/tests/visual/__screenshots__/angular/components-sonner--types-light.png
new file mode 100644
index 00000000..1c36995c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sonner--types-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sonner--with-action-dark.png b/tests/visual/__screenshots__/angular/components-sonner--with-action-dark.png
new file mode 100644
index 00000000..970d2d1f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sonner--with-action-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-sonner--with-action-light.png b/tests/visual/__screenshots__/angular/components-sonner--with-action-light.png
new file mode 100644
index 00000000..b19202ef
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-sonner--with-action-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-switch--default-dark.png b/tests/visual/__screenshots__/angular/components-switch--default-dark.png
new file mode 100644
index 00000000..8654c0e6
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-switch--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-switch--default-light.png b/tests/visual/__screenshots__/angular/components-switch--default-light.png
new file mode 100644
index 00000000..99658726
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-switch--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-switch--sizes-dark.png b/tests/visual/__screenshots__/angular/components-switch--sizes-dark.png
new file mode 100644
index 00000000..42b3317c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-switch--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-switch--sizes-light.png b/tests/visual/__screenshots__/angular/components-switch--sizes-light.png
new file mode 100644
index 00000000..d1e4fb6a
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-switch--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-switch--states-dark.png b/tests/visual/__screenshots__/angular/components-switch--states-dark.png
new file mode 100644
index 00000000..19e614e7
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-switch--states-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-switch--states-light.png b/tests/visual/__screenshots__/angular/components-switch--states-light.png
new file mode 100644
index 00000000..aa07f0a8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-switch--states-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-switch--with-label-dark.png b/tests/visual/__screenshots__/angular/components-switch--with-label-dark.png
new file mode 100644
index 00000000..07e3c4dc
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-switch--with-label-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-switch--with-label-light.png b/tests/visual/__screenshots__/angular/components-switch--with-label-light.png
new file mode 100644
index 00000000..d6d3a93b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-switch--with-label-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-table--menu-button-variants-dark.png b/tests/visual/__screenshots__/angular/components-table--menu-button-variants-dark.png
new file mode 100644
index 00000000..6b9a8f8f
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-table--menu-button-variants-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-table--menu-button-variants-light.png b/tests/visual/__screenshots__/angular/components-table--menu-button-variants-light.png
new file mode 100644
index 00000000..b70a3ff0
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-table--menu-button-variants-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tabs--default-dark.png b/tests/visual/__screenshots__/angular/components-tabs--default-dark.png
new file mode 100644
index 00000000..f090fdb8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tabs--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tabs--default-light.png b/tests/visual/__screenshots__/angular/components-tabs--default-light.png
new file mode 100644
index 00000000..26a9fb64
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tabs--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tabs--disabled-trigger-dark.png b/tests/visual/__screenshots__/angular/components-tabs--disabled-trigger-dark.png
new file mode 100644
index 00000000..67291e2b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tabs--disabled-trigger-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tabs--disabled-trigger-light.png b/tests/visual/__screenshots__/angular/components-tabs--disabled-trigger-light.png
new file mode 100644
index 00000000..fa205c00
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tabs--disabled-trigger-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tabs--variants-dark.png b/tests/visual/__screenshots__/angular/components-tabs--variants-dark.png
new file mode 100644
index 00000000..910f6c0d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tabs--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tabs--variants-light.png b/tests/visual/__screenshots__/angular/components-tabs--variants-light.png
new file mode 100644
index 00000000..e295cc9b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tabs--variants-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tabs--vertical-dark.png b/tests/visual/__screenshots__/angular/components-tabs--vertical-dark.png
new file mode 100644
index 00000000..d4ef4cec
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tabs--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tabs--vertical-light.png b/tests/visual/__screenshots__/angular/components-tabs--vertical-light.png
new file mode 100644
index 00000000..c5b5c1fa
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tabs--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-textarea--default-dark.png b/tests/visual/__screenshots__/angular/components-textarea--default-dark.png
new file mode 100644
index 00000000..380f1f6e
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-textarea--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-textarea--default-light.png b/tests/visual/__screenshots__/angular/components-textarea--default-light.png
new file mode 100644
index 00000000..4c53e8f6
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-textarea--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-textarea--disabled-dark.png b/tests/visual/__screenshots__/angular/components-textarea--disabled-dark.png
new file mode 100644
index 00000000..e4e8b096
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-textarea--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-textarea--disabled-light.png b/tests/visual/__screenshots__/angular/components-textarea--disabled-light.png
new file mode 100644
index 00000000..a970a5a1
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-textarea--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-textarea--invalid-dark.png b/tests/visual/__screenshots__/angular/components-textarea--invalid-dark.png
new file mode 100644
index 00000000..58daa178
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-textarea--invalid-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-textarea--invalid-light.png b/tests/visual/__screenshots__/angular/components-textarea--invalid-light.png
new file mode 100644
index 00000000..2938408c
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-textarea--invalid-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-toggle--default-dark.png b/tests/visual/__screenshots__/angular/components-toggle--default-dark.png
new file mode 100644
index 00000000..6d834bcb
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-toggle--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-toggle--default-light.png b/tests/visual/__screenshots__/angular/components-toggle--default-light.png
new file mode 100644
index 00000000..d32582f3
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-toggle--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-toggle--disabled-dark.png b/tests/visual/__screenshots__/angular/components-toggle--disabled-dark.png
new file mode 100644
index 00000000..6e8ec8b5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-toggle--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-toggle--disabled-light.png b/tests/visual/__screenshots__/angular/components-toggle--disabled-light.png
new file mode 100644
index 00000000..c51e4e79
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-toggle--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-toggle--formatting-toolbar-dark.png b/tests/visual/__screenshots__/angular/components-toggle--formatting-toolbar-dark.png
new file mode 100644
index 00000000..60b7fa55
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-toggle--formatting-toolbar-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-toggle--formatting-toolbar-light.png b/tests/visual/__screenshots__/angular/components-toggle--formatting-toolbar-light.png
new file mode 100644
index 00000000..9f9132a2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-toggle--formatting-toolbar-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-toggle--sizes-dark.png b/tests/visual/__screenshots__/angular/components-toggle--sizes-dark.png
new file mode 100644
index 00000000..f82db5b3
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-toggle--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-toggle--sizes-light.png b/tests/visual/__screenshots__/angular/components-toggle--sizes-light.png
new file mode 100644
index 00000000..2cbb0d02
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-toggle--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-toggle--variants-dark.png b/tests/visual/__screenshots__/angular/components-toggle--variants-dark.png
new file mode 100644
index 00000000..6c1ef808
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-toggle--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-toggle--variants-light.png b/tests/visual/__screenshots__/angular/components-toggle--variants-light.png
new file mode 100644
index 00000000..17946499
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-toggle--variants-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-toggle--with-icon-dark.png b/tests/visual/__screenshots__/angular/components-toggle--with-icon-dark.png
new file mode 100644
index 00000000..864455cb
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-toggle--with-icon-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-toggle--with-icon-light.png b/tests/visual/__screenshots__/angular/components-toggle--with-icon-light.png
new file mode 100644
index 00000000..8bde94b7
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-toggle--with-icon-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--default-dark.png b/tests/visual/__screenshots__/angular/components-togglegroup--default-dark.png
new file mode 100644
index 00000000..5d4af5d2
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--default-light.png b/tests/visual/__screenshots__/angular/components-togglegroup--default-light.png
new file mode 100644
index 00000000..e8b6e479
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--disabled-dark.png b/tests/visual/__screenshots__/angular/components-togglegroup--disabled-dark.png
new file mode 100644
index 00000000..8fd8ebe1
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--disabled-light.png b/tests/visual/__screenshots__/angular/components-togglegroup--disabled-light.png
new file mode 100644
index 00000000..2852e678
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--sizes-dark.png b/tests/visual/__screenshots__/angular/components-togglegroup--sizes-dark.png
new file mode 100644
index 00000000..b00eec3d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--sizes-light.png b/tests/visual/__screenshots__/angular/components-togglegroup--sizes-light.png
new file mode 100644
index 00000000..a200325e
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--text-alignment-dark.png b/tests/visual/__screenshots__/angular/components-togglegroup--text-alignment-dark.png
new file mode 100644
index 00000000..65dbb65b
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--text-alignment-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--text-alignment-light.png b/tests/visual/__screenshots__/angular/components-togglegroup--text-alignment-light.png
new file mode 100644
index 00000000..a84f2f57
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--text-alignment-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--text-formatting-dark.png b/tests/visual/__screenshots__/angular/components-togglegroup--text-formatting-dark.png
new file mode 100644
index 00000000..45b9a156
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--text-formatting-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--text-formatting-light.png b/tests/visual/__screenshots__/angular/components-togglegroup--text-formatting-light.png
new file mode 100644
index 00000000..ca50f168
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--text-formatting-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--variants-dark.png b/tests/visual/__screenshots__/angular/components-togglegroup--variants-dark.png
new file mode 100644
index 00000000..5a1435b3
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--variants-light.png b/tests/visual/__screenshots__/angular/components-togglegroup--variants-light.png
new file mode 100644
index 00000000..db559e25
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--variants-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--vertical-dark.png b/tests/visual/__screenshots__/angular/components-togglegroup--vertical-dark.png
new file mode 100644
index 00000000..00544f42
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-togglegroup--vertical-light.png b/tests/visual/__screenshots__/angular/components-togglegroup--vertical-light.png
new file mode 100644
index 00000000..2752e1d8
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-togglegroup--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tooltip--default-dark.png b/tests/visual/__screenshots__/angular/components-tooltip--default-dark.png
new file mode 100644
index 00000000..cde54325
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tooltip--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tooltip--default-light.png b/tests/visual/__screenshots__/angular/components-tooltip--default-light.png
new file mode 100644
index 00000000..4d5d7407
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tooltip--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tooltip--delayed-open-dark.png b/tests/visual/__screenshots__/angular/components-tooltip--delayed-open-dark.png
new file mode 100644
index 00000000..7b5b524d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tooltip--delayed-open-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tooltip--delayed-open-light.png b/tests/visual/__screenshots__/angular/components-tooltip--delayed-open-light.png
new file mode 100644
index 00000000..d7cf1800
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tooltip--delayed-open-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tooltip--icon-trigger-dark.png b/tests/visual/__screenshots__/angular/components-tooltip--icon-trigger-dark.png
new file mode 100644
index 00000000..93146064
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tooltip--icon-trigger-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tooltip--icon-trigger-light.png b/tests/visual/__screenshots__/angular/components-tooltip--icon-trigger-light.png
new file mode 100644
index 00000000..ed1c48fd
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tooltip--icon-trigger-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tooltip--placement-dark.png b/tests/visual/__screenshots__/angular/components-tooltip--placement-dark.png
new file mode 100644
index 00000000..06641f34
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tooltip--placement-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tooltip--placement-light.png b/tests/visual/__screenshots__/angular/components-tooltip--placement-light.png
new file mode 100644
index 00000000..c6c08f74
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tooltip--placement-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tooltip--rich-content-dark.png b/tests/visual/__screenshots__/angular/components-tooltip--rich-content-dark.png
new file mode 100644
index 00000000..ddfb2953
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tooltip--rich-content-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-tooltip--rich-content-light.png b/tests/visual/__screenshots__/angular/components-tooltip--rich-content-light.png
new file mode 100644
index 00000000..573f6d02
Binary files /dev/null and b/tests/visual/__screenshots__/angular/components-tooltip--rich-content-light.png differ
diff --git a/tests/visual/__screenshots__/angular/foundations-design-tokens--colors-dark.png b/tests/visual/__screenshots__/angular/foundations-design-tokens--colors-dark.png
new file mode 100644
index 00000000..d0669c43
Binary files /dev/null and b/tests/visual/__screenshots__/angular/foundations-design-tokens--colors-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/foundations-design-tokens--colors-light.png b/tests/visual/__screenshots__/angular/foundations-design-tokens--colors-light.png
new file mode 100644
index 00000000..f148053d
Binary files /dev/null and b/tests/visual/__screenshots__/angular/foundations-design-tokens--colors-light.png differ
diff --git a/tests/visual/__screenshots__/angular/foundations-design-tokens--radius-and-spacing-dark.png b/tests/visual/__screenshots__/angular/foundations-design-tokens--radius-and-spacing-dark.png
new file mode 100644
index 00000000..912987d9
Binary files /dev/null and b/tests/visual/__screenshots__/angular/foundations-design-tokens--radius-and-spacing-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/foundations-design-tokens--radius-and-spacing-light.png b/tests/visual/__screenshots__/angular/foundations-design-tokens--radius-and-spacing-light.png
new file mode 100644
index 00000000..ccc18b91
Binary files /dev/null and b/tests/visual/__screenshots__/angular/foundations-design-tokens--radius-and-spacing-light.png differ
diff --git a/tests/visual/__screenshots__/angular/foundations-design-tokens--shadows-and-effects-dark.png b/tests/visual/__screenshots__/angular/foundations-design-tokens--shadows-and-effects-dark.png
new file mode 100644
index 00000000..a8e31318
Binary files /dev/null and b/tests/visual/__screenshots__/angular/foundations-design-tokens--shadows-and-effects-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/foundations-design-tokens--shadows-and-effects-light.png b/tests/visual/__screenshots__/angular/foundations-design-tokens--shadows-and-effects-light.png
new file mode 100644
index 00000000..5e804062
Binary files /dev/null and b/tests/visual/__screenshots__/angular/foundations-design-tokens--shadows-and-effects-light.png differ
diff --git a/tests/visual/__screenshots__/angular/foundations-design-tokens--typography-dark.png b/tests/visual/__screenshots__/angular/foundations-design-tokens--typography-dark.png
new file mode 100644
index 00000000..71415f2e
Binary files /dev/null and b/tests/visual/__screenshots__/angular/foundations-design-tokens--typography-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/foundations-design-tokens--typography-light.png b/tests/visual/__screenshots__/angular/foundations-design-tokens--typography-light.png
new file mode 100644
index 00000000..ca2b03e5
Binary files /dev/null and b/tests/visual/__screenshots__/angular/foundations-design-tokens--typography-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-accordion--default-dark.png b/tests/visual/__screenshots__/react/components-accordion--default-dark.png
new file mode 100644
index 00000000..9593a4e2
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-accordion--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-accordion--default-light.png b/tests/visual/__screenshots__/react/components-accordion--default-light.png
new file mode 100644
index 00000000..80739738
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-accordion--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-accordion--disabled-item-dark.png b/tests/visual/__screenshots__/react/components-accordion--disabled-item-dark.png
new file mode 100644
index 00000000..64caec40
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-accordion--disabled-item-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-accordion--disabled-item-light.png b/tests/visual/__screenshots__/react/components-accordion--disabled-item-light.png
new file mode 100644
index 00000000..3aedaf12
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-accordion--disabled-item-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-accordion--multiple-dark.png b/tests/visual/__screenshots__/react/components-accordion--multiple-dark.png
new file mode 100644
index 00000000..2b1dfb29
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-accordion--multiple-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-accordion--multiple-light.png b/tests/visual/__screenshots__/react/components-accordion--multiple-light.png
new file mode 100644
index 00000000..a2753299
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-accordion--multiple-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-alert--danger-dark.png b/tests/visual/__screenshots__/react/components-alert--danger-dark.png
new file mode 100644
index 00000000..a84853cc
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alert--danger-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-alert--danger-light.png b/tests/visual/__screenshots__/react/components-alert--danger-light.png
new file mode 100644
index 00000000..dd9df24f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alert--danger-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-alert--default-dark.png b/tests/visual/__screenshots__/react/components-alert--default-dark.png
new file mode 100644
index 00000000..856d74a8
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alert--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-alert--default-light.png b/tests/visual/__screenshots__/react/components-alert--default-light.png
new file mode 100644
index 00000000..ebc5d068
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alert--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-alert--title-only-dark.png b/tests/visual/__screenshots__/react/components-alert--title-only-dark.png
new file mode 100644
index 00000000..d39d260f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alert--title-only-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-alert--title-only-light.png b/tests/visual/__screenshots__/react/components-alert--title-only-light.png
new file mode 100644
index 00000000..3d2f1c2c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alert--title-only-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-alert--variants-dark.png b/tests/visual/__screenshots__/react/components-alert--variants-dark.png
new file mode 100644
index 00000000..c911dd67
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alert--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-alert--variants-light.png b/tests/visual/__screenshots__/react/components-alert--variants-light.png
new file mode 100644
index 00000000..dffd5c04
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alert--variants-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-alert--with-action-dark.png b/tests/visual/__screenshots__/react/components-alert--with-action-dark.png
new file mode 100644
index 00000000..d3484f5a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alert--with-action-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-alert--with-action-light.png b/tests/visual/__screenshots__/react/components-alert--with-action-light.png
new file mode 100644
index 00000000..41b7e6af
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alert--with-action-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-alertdialog--default-dark.png b/tests/visual/__screenshots__/react/components-alertdialog--default-dark.png
new file mode 100644
index 00000000..33bdd931
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alertdialog--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-alertdialog--default-light.png b/tests/visual/__screenshots__/react/components-alertdialog--default-light.png
new file mode 100644
index 00000000..e3906996
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alertdialog--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-alertdialog--small-dark.png b/tests/visual/__screenshots__/react/components-alertdialog--small-dark.png
new file mode 100644
index 00000000..7733393f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alertdialog--small-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-alertdialog--small-light.png b/tests/visual/__screenshots__/react/components-alertdialog--small-light.png
new file mode 100644
index 00000000..8ccf8739
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alertdialog--small-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-alertdialog--with-media-dark.png b/tests/visual/__screenshots__/react/components-alertdialog--with-media-dark.png
new file mode 100644
index 00000000..afe88968
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alertdialog--with-media-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-alertdialog--with-media-light.png b/tests/visual/__screenshots__/react/components-alertdialog--with-media-light.png
new file mode 100644
index 00000000..1cf2ea52
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-alertdialog--with-media-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-aspectratio--default-dark.png b/tests/visual/__screenshots__/react/components-aspectratio--default-dark.png
new file mode 100644
index 00000000..68cfb51d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-aspectratio--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-aspectratio--default-light.png b/tests/visual/__screenshots__/react/components-aspectratio--default-light.png
new file mode 100644
index 00000000..7664de9b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-aspectratio--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-aspectratio--in-card-dark.png b/tests/visual/__screenshots__/react/components-aspectratio--in-card-dark.png
new file mode 100644
index 00000000..db895a9c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-aspectratio--in-card-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-aspectratio--in-card-light.png b/tests/visual/__screenshots__/react/components-aspectratio--in-card-light.png
new file mode 100644
index 00000000..c9237ed3
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-aspectratio--in-card-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-aspectratio--ratios-dark.png b/tests/visual/__screenshots__/react/components-aspectratio--ratios-dark.png
new file mode 100644
index 00000000..6dcba8a6
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-aspectratio--ratios-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-aspectratio--ratios-light.png b/tests/visual/__screenshots__/react/components-aspectratio--ratios-light.png
new file mode 100644
index 00000000..a711847b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-aspectratio--ratios-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-avatar--default-dark.png b/tests/visual/__screenshots__/react/components-avatar--default-dark.png
new file mode 100644
index 00000000..cd9bb97c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-avatar--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-avatar--default-light.png b/tests/visual/__screenshots__/react/components-avatar--default-light.png
new file mode 100644
index 00000000..726562e2
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-avatar--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-avatar--fallback-dark.png b/tests/visual/__screenshots__/react/components-avatar--fallback-dark.png
new file mode 100644
index 00000000..d8b1ba58
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-avatar--fallback-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-avatar--fallback-light.png b/tests/visual/__screenshots__/react/components-avatar--fallback-light.png
new file mode 100644
index 00000000..a725f874
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-avatar--fallback-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-avatar--group-dark.png b/tests/visual/__screenshots__/react/components-avatar--group-dark.png
new file mode 100644
index 00000000..c63b1df7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-avatar--group-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-avatar--group-light.png b/tests/visual/__screenshots__/react/components-avatar--group-light.png
new file mode 100644
index 00000000..3c8c0d1c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-avatar--group-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-avatar--sizes-dark.png b/tests/visual/__screenshots__/react/components-avatar--sizes-dark.png
new file mode 100644
index 00000000..fee2494a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-avatar--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-avatar--sizes-light.png b/tests/visual/__screenshots__/react/components-avatar--sizes-light.png
new file mode 100644
index 00000000..3b37cbf1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-avatar--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-badge--as-link-dark.png b/tests/visual/__screenshots__/react/components-badge--as-link-dark.png
new file mode 100644
index 00000000..b0bd459d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-badge--as-link-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-badge--as-link-light.png b/tests/visual/__screenshots__/react/components-badge--as-link-light.png
new file mode 100644
index 00000000..186acd2e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-badge--as-link-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-badge--counts-dark.png b/tests/visual/__screenshots__/react/components-badge--counts-dark.png
new file mode 100644
index 00000000..34f798fe
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-badge--counts-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-badge--counts-light.png b/tests/visual/__screenshots__/react/components-badge--counts-light.png
new file mode 100644
index 00000000..f2fd48c2
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-badge--counts-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-badge--default-dark.png b/tests/visual/__screenshots__/react/components-badge--default-dark.png
new file mode 100644
index 00000000..34b6cec8
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-badge--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-badge--default-light.png b/tests/visual/__screenshots__/react/components-badge--default-light.png
new file mode 100644
index 00000000..d1c2cfb6
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-badge--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-badge--status-list-dark.png b/tests/visual/__screenshots__/react/components-badge--status-list-dark.png
new file mode 100644
index 00000000..b80ccce0
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-badge--status-list-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-badge--status-list-light.png b/tests/visual/__screenshots__/react/components-badge--status-list-light.png
new file mode 100644
index 00000000..c4fdba91
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-badge--status-list-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-badge--variants-dark.png b/tests/visual/__screenshots__/react/components-badge--variants-dark.png
new file mode 100644
index 00000000..03e4c154
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-badge--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-badge--variants-light.png b/tests/visual/__screenshots__/react/components-badge--variants-light.png
new file mode 100644
index 00000000..5193a67f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-badge--variants-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-badge--with-icon-dark.png b/tests/visual/__screenshots__/react/components-badge--with-icon-dark.png
new file mode 100644
index 00000000..8541b816
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-badge--with-icon-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-badge--with-icon-light.png b/tests/visual/__screenshots__/react/components-badge--with-icon-light.png
new file mode 100644
index 00000000..dbcbb45c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-badge--with-icon-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-breadcrumb--default-dark.png b/tests/visual/__screenshots__/react/components-breadcrumb--default-dark.png
new file mode 100644
index 00000000..4bee97ad
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-breadcrumb--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-breadcrumb--default-light.png b/tests/visual/__screenshots__/react/components-breadcrumb--default-light.png
new file mode 100644
index 00000000..913363ec
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-breadcrumb--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-breadcrumb--with-ellipsis-dark.png b/tests/visual/__screenshots__/react/components-breadcrumb--with-ellipsis-dark.png
new file mode 100644
index 00000000..b20e102a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-breadcrumb--with-ellipsis-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-breadcrumb--with-ellipsis-light.png b/tests/visual/__screenshots__/react/components-breadcrumb--with-ellipsis-light.png
new file mode 100644
index 00000000..49112707
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-breadcrumb--with-ellipsis-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--as-link-dark.png b/tests/visual/__screenshots__/react/components-button--as-link-dark.png
new file mode 100644
index 00000000..2c539801
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--as-link-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--as-link-light.png b/tests/visual/__screenshots__/react/components-button--as-link-light.png
new file mode 100644
index 00000000..b3407774
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--as-link-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--default-dark.png b/tests/visual/__screenshots__/react/components-button--default-dark.png
new file mode 100644
index 00000000..ea66f10a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--default-light.png b/tests/visual/__screenshots__/react/components-button--default-light.png
new file mode 100644
index 00000000..bbc5bea7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--destructive-states-dark.png b/tests/visual/__screenshots__/react/components-button--destructive-states-dark.png
new file mode 100644
index 00000000..9a53f9bb
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--destructive-states-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--destructive-states-light.png b/tests/visual/__screenshots__/react/components-button--destructive-states-light.png
new file mode 100644
index 00000000..353942e1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--destructive-states-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--disabled-dark.png b/tests/visual/__screenshots__/react/components-button--disabled-dark.png
new file mode 100644
index 00000000..8accf74c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--disabled-light.png b/tests/visual/__screenshots__/react/components-button--disabled-light.png
new file mode 100644
index 00000000..a0845fe3
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--icon-sizes-dark.png b/tests/visual/__screenshots__/react/components-button--icon-sizes-dark.png
new file mode 100644
index 00000000..8cc3b7fa
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--icon-sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--icon-sizes-light.png b/tests/visual/__screenshots__/react/components-button--icon-sizes-light.png
new file mode 100644
index 00000000..d2aa47a2
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--icon-sizes-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--sizes-dark.png b/tests/visual/__screenshots__/react/components-button--sizes-dark.png
new file mode 100644
index 00000000..424d07f8
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--sizes-light.png b/tests/visual/__screenshots__/react/components-button--sizes-light.png
new file mode 100644
index 00000000..a356f938
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--variants-dark.png b/tests/visual/__screenshots__/react/components-button--variants-dark.png
new file mode 100644
index 00000000..b4c7944c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--variants-light.png b/tests/visual/__screenshots__/react/components-button--variants-light.png
new file mode 100644
index 00000000..c11b86b1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--variants-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--with-icon-dark.png b/tests/visual/__screenshots__/react/components-button--with-icon-dark.png
new file mode 100644
index 00000000..1c61329f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--with-icon-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-button--with-icon-light.png b/tests/visual/__screenshots__/react/components-button--with-icon-light.png
new file mode 100644
index 00000000..3e7a89a5
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-button--with-icon-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-buttongroup--default-dark.png b/tests/visual/__screenshots__/react/components-buttongroup--default-dark.png
new file mode 100644
index 00000000..96a00a9e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-buttongroup--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-buttongroup--default-light.png b/tests/visual/__screenshots__/react/components-buttongroup--default-light.png
new file mode 100644
index 00000000..2d3cea75
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-buttongroup--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-buttongroup--vertical-dark.png b/tests/visual/__screenshots__/react/components-buttongroup--vertical-dark.png
new file mode 100644
index 00000000..e69d6c93
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-buttongroup--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-buttongroup--vertical-light.png b/tests/visual/__screenshots__/react/components-buttongroup--vertical-light.png
new file mode 100644
index 00000000..d4ca23d6
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-buttongroup--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-buttongroup--with-input-dark.png b/tests/visual/__screenshots__/react/components-buttongroup--with-input-dark.png
new file mode 100644
index 00000000..5981d165
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-buttongroup--with-input-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-buttongroup--with-input-light.png b/tests/visual/__screenshots__/react/components-buttongroup--with-input-light.png
new file mode 100644
index 00000000..7736899c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-buttongroup--with-input-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-buttongroup--with-separator-dark.png b/tests/visual/__screenshots__/react/components-buttongroup--with-separator-dark.png
new file mode 100644
index 00000000..00b4542f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-buttongroup--with-separator-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-buttongroup--with-separator-light.png b/tests/visual/__screenshots__/react/components-buttongroup--with-separator-light.png
new file mode 100644
index 00000000..835b0875
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-buttongroup--with-separator-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-buttongroup--with-text-dark.png b/tests/visual/__screenshots__/react/components-buttongroup--with-text-dark.png
new file mode 100644
index 00000000..c332c640
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-buttongroup--with-text-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-buttongroup--with-text-light.png b/tests/visual/__screenshots__/react/components-buttongroup--with-text-light.png
new file mode 100644
index 00000000..75f68ab1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-buttongroup--with-text-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--default-dark.png b/tests/visual/__screenshots__/react/components-calendar--default-dark.png
new file mode 100644
index 00000000..0b791beb
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--default-light.png b/tests/visual/__screenshots__/react/components-calendar--default-light.png
new file mode 100644
index 00000000..833ba47f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--disabled-dates-dark.png b/tests/visual/__screenshots__/react/components-calendar--disabled-dates-dark.png
new file mode 100644
index 00000000..65635374
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--disabled-dates-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--disabled-dates-light.png b/tests/visual/__screenshots__/react/components-calendar--disabled-dates-light.png
new file mode 100644
index 00000000..1ffa4339
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--disabled-dates-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--dropdown-caption-dark.png b/tests/visual/__screenshots__/react/components-calendar--dropdown-caption-dark.png
new file mode 100644
index 00000000..535e7795
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--dropdown-caption-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--dropdown-caption-light.png b/tests/visual/__screenshots__/react/components-calendar--dropdown-caption-light.png
new file mode 100644
index 00000000..f73421f2
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--dropdown-caption-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--in-card-dark.png b/tests/visual/__screenshots__/react/components-calendar--in-card-dark.png
new file mode 100644
index 00000000..5c9afee0
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--in-card-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--in-card-light.png b/tests/visual/__screenshots__/react/components-calendar--in-card-light.png
new file mode 100644
index 00000000..bd8e63bf
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--in-card-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--in-popover-dark.png b/tests/visual/__screenshots__/react/components-calendar--in-popover-dark.png
new file mode 100644
index 00000000..f796d008
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--in-popover-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--in-popover-light.png b/tests/visual/__screenshots__/react/components-calendar--in-popover-light.png
new file mode 100644
index 00000000..f79d9569
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--in-popover-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--multiple-dark.png b/tests/visual/__screenshots__/react/components-calendar--multiple-dark.png
new file mode 100644
index 00000000..813fa75b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--multiple-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--multiple-light.png b/tests/visual/__screenshots__/react/components-calendar--multiple-light.png
new file mode 100644
index 00000000..200d78ee
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--multiple-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--range-dark.png b/tests/visual/__screenshots__/react/components-calendar--range-dark.png
new file mode 100644
index 00000000..813fa75b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--range-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--range-light.png b/tests/visual/__screenshots__/react/components-calendar--range-light.png
new file mode 100644
index 00000000..200d78ee
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--range-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--single-dark.png b/tests/visual/__screenshots__/react/components-calendar--single-dark.png
new file mode 100644
index 00000000..ab66c83b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--single-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--single-light.png b/tests/visual/__screenshots__/react/components-calendar--single-light.png
new file mode 100644
index 00000000..d0040bc5
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--single-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--two-months-dark.png b/tests/visual/__screenshots__/react/components-calendar--two-months-dark.png
new file mode 100644
index 00000000..3e8408c0
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--two-months-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--two-months-light.png b/tests/visual/__screenshots__/react/components-calendar--two-months-light.png
new file mode 100644
index 00000000..c78b0c86
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--two-months-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--with-footer-dark.png b/tests/visual/__screenshots__/react/components-calendar--with-footer-dark.png
new file mode 100644
index 00000000..baa57135
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--with-footer-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-calendar--with-footer-light.png b/tests/visual/__screenshots__/react/components-calendar--with-footer-light.png
new file mode 100644
index 00000000..bdc4b0c7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-calendar--with-footer-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-card--content-only-dark.png b/tests/visual/__screenshots__/react/components-card--content-only-dark.png
new file mode 100644
index 00000000..fb59db7a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-card--content-only-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-card--content-only-light.png b/tests/visual/__screenshots__/react/components-card--content-only-light.png
new file mode 100644
index 00000000..f2c7b12b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-card--content-only-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-card--default-dark.png b/tests/visual/__screenshots__/react/components-card--default-dark.png
new file mode 100644
index 00000000..c72d34cd
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-card--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-card--default-light.png b/tests/visual/__screenshots__/react/components-card--default-light.png
new file mode 100644
index 00000000..f11f3d00
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-card--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-card--small-dark.png b/tests/visual/__screenshots__/react/components-card--small-dark.png
new file mode 100644
index 00000000..abe4cc7f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-card--small-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-card--small-light.png b/tests/visual/__screenshots__/react/components-card--small-light.png
new file mode 100644
index 00000000..f0800732
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-card--small-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-card--with-header-action-dark.png b/tests/visual/__screenshots__/react/components-card--with-header-action-dark.png
new file mode 100644
index 00000000..8d60233e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-card--with-header-action-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-card--with-header-action-light.png b/tests/visual/__screenshots__/react/components-card--with-header-action-light.png
new file mode 100644
index 00000000..dd4a2f99
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-card--with-header-action-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-carousel--default-dark.png b/tests/visual/__screenshots__/react/components-carousel--default-dark.png
new file mode 100644
index 00000000..45ab7ee2
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-carousel--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-carousel--default-light.png b/tests/visual/__screenshots__/react/components-carousel--default-light.png
new file mode 100644
index 00000000..2635a254
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-carousel--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-carousel--horizontal-dark.png b/tests/visual/__screenshots__/react/components-carousel--horizontal-dark.png
new file mode 100644
index 00000000..45ab7ee2
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-carousel--horizontal-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-carousel--horizontal-light.png b/tests/visual/__screenshots__/react/components-carousel--horizontal-light.png
new file mode 100644
index 00000000..2635a254
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-carousel--horizontal-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-carousel--vertical-dark.png b/tests/visual/__screenshots__/react/components-carousel--vertical-dark.png
new file mode 100644
index 00000000..c18b96b9
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-carousel--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-carousel--vertical-light.png b/tests/visual/__screenshots__/react/components-carousel--vertical-light.png
new file mode 100644
index 00000000..e134f952
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-carousel--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-checkbox--default-dark.png b/tests/visual/__screenshots__/react/components-checkbox--default-dark.png
new file mode 100644
index 00000000..2faa6d61
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-checkbox--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-checkbox--default-light.png b/tests/visual/__screenshots__/react/components-checkbox--default-light.png
new file mode 100644
index 00000000..1974bead
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-checkbox--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-checkbox--states-dark.png b/tests/visual/__screenshots__/react/components-checkbox--states-dark.png
new file mode 100644
index 00000000..74be320e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-checkbox--states-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-checkbox--states-light.png b/tests/visual/__screenshots__/react/components-checkbox--states-light.png
new file mode 100644
index 00000000..9caba009
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-checkbox--states-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-checkbox--with-label-dark.png b/tests/visual/__screenshots__/react/components-checkbox--with-label-dark.png
new file mode 100644
index 00000000..49086884
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-checkbox--with-label-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-checkbox--with-label-light.png b/tests/visual/__screenshots__/react/components-checkbox--with-label-light.png
new file mode 100644
index 00000000..01b17053
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-checkbox--with-label-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--default-dark.png b/tests/visual/__screenshots__/react/components-combobox--default-dark.png
new file mode 100644
index 00000000..4b004863
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-combobox--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--default-light.png b/tests/visual/__screenshots__/react/components-combobox--default-light.png
new file mode 100644
index 00000000..5db05e52
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-combobox--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--disabled-dark.png b/tests/visual/__screenshots__/react/components-combobox--disabled-dark.png
new file mode 100644
index 00000000..de5889cb
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-combobox--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--disabled-light.png b/tests/visual/__screenshots__/react/components-combobox--disabled-light.png
new file mode 100644
index 00000000..a15a27c6
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-combobox--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--grouped-dark.png b/tests/visual/__screenshots__/react/components-combobox--grouped-dark.png
new file mode 100644
index 00000000..4c148ce4
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-combobox--grouped-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--grouped-light.png b/tests/visual/__screenshots__/react/components-combobox--grouped-light.png
new file mode 100644
index 00000000..6f2db9f2
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-combobox--grouped-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--multiple-dark.png b/tests/visual/__screenshots__/react/components-combobox--multiple-dark.png
new file mode 100644
index 00000000..9f1c7bd5
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-combobox--multiple-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--multiple-light.png b/tests/visual/__screenshots__/react/components-combobox--multiple-light.png
new file mode 100644
index 00000000..f0d3292f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-combobox--multiple-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-command--default-dark.png b/tests/visual/__screenshots__/react/components-command--default-dark.png
new file mode 100644
index 00000000..76e1187b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-command--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-command--default-light.png b/tests/visual/__screenshots__/react/components-command--default-light.png
new file mode 100644
index 00000000..b8c6a151
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-command--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-command--disabled-item-dark.png b/tests/visual/__screenshots__/react/components-command--disabled-item-dark.png
new file mode 100644
index 00000000..291a7483
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-command--disabled-item-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-command--disabled-item-light.png b/tests/visual/__screenshots__/react/components-command--disabled-item-light.png
new file mode 100644
index 00000000..fc79b38e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-command--disabled-item-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-command--empty-dark.png b/tests/visual/__screenshots__/react/components-command--empty-dark.png
new file mode 100644
index 00000000..8c103962
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-command--empty-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-command--empty-light.png b/tests/visual/__screenshots__/react/components-command--empty-light.png
new file mode 100644
index 00000000..b390be28
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-command--empty-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-command--in-dialog-dark.png b/tests/visual/__screenshots__/react/components-command--in-dialog-dark.png
new file mode 100644
index 00000000..f224dcfa
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-command--in-dialog-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-command--in-dialog-light.png b/tests/visual/__screenshots__/react/components-command--in-dialog-light.png
new file mode 100644
index 00000000..49834ec7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-command--in-dialog-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--default-dark.png b/tests/visual/__screenshots__/react/components-contextmenu--default-dark.png
new file mode 100644
index 00000000..5a4f543b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-contextmenu--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--default-light.png b/tests/visual/__screenshots__/react/components-contextmenu--default-light.png
new file mode 100644
index 00000000..ed89900e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-contextmenu--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-dark.png b/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-dark.png
new file mode 100644
index 00000000..5a4f543b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-light.png b/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-light.png
new file mode 100644
index 00000000..ed89900e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-dark.png b/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-dark.png
new file mode 100644
index 00000000..5a4f543b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-light.png b/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-light.png
new file mode 100644
index 00000000..ed89900e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-dark.png b/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-dark.png
new file mode 100644
index 00000000..5a4f543b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-light.png b/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-light.png
new file mode 100644
index 00000000..ed89900e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-datatable--custom-toolbar-dark.png b/tests/visual/__screenshots__/react/components-datatable--custom-toolbar-dark.png
new file mode 100644
index 00000000..cc395c76
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-datatable--custom-toolbar-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-datatable--custom-toolbar-light.png b/tests/visual/__screenshots__/react/components-datatable--custom-toolbar-light.png
new file mode 100644
index 00000000..03f1feea
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-datatable--custom-toolbar-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-datatable--default-dark.png b/tests/visual/__screenshots__/react/components-datatable--default-dark.png
new file mode 100644
index 00000000..032af45b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-datatable--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-datatable--default-light.png b/tests/visual/__screenshots__/react/components-datatable--default-light.png
new file mode 100644
index 00000000..9a157b1d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-datatable--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-datatable--empty-dark.png b/tests/visual/__screenshots__/react/components-datatable--empty-dark.png
new file mode 100644
index 00000000..01db6f27
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-datatable--empty-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-datatable--empty-light.png b/tests/visual/__screenshots__/react/components-datatable--empty-light.png
new file mode 100644
index 00000000..286470ed
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-datatable--empty-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-datepicker--default-dark.png b/tests/visual/__screenshots__/react/components-datepicker--default-dark.png
new file mode 100644
index 00000000..5181f562
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-datepicker--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-datepicker--default-light.png b/tests/visual/__screenshots__/react/components-datepicker--default-light.png
new file mode 100644
index 00000000..624e1075
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-datepicker--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-datepicker--range-dark.png b/tests/visual/__screenshots__/react/components-datepicker--range-dark.png
new file mode 100644
index 00000000..26ee3869
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-datepicker--range-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-datepicker--range-light.png b/tests/visual/__screenshots__/react/components-datepicker--range-light.png
new file mode 100644
index 00000000..b5920378
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-datepicker--range-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-datepicker--with-value-dark.png b/tests/visual/__screenshots__/react/components-datepicker--with-value-dark.png
new file mode 100644
index 00000000..cc5c4ab7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-datepicker--with-value-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-datepicker--with-value-light.png b/tests/visual/__screenshots__/react/components-datepicker--with-value-light.png
new file mode 100644
index 00000000..d22e5159
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-datepicker--with-value-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-dialog--default-dark.png b/tests/visual/__screenshots__/react/components-dialog--default-dark.png
new file mode 100644
index 00000000..43f30836
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-dialog--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-dialog--default-light.png b/tests/visual/__screenshots__/react/components-dialog--default-light.png
new file mode 100644
index 00000000..fbb9e961
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-dialog--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-dialog--without-close-button-dark.png b/tests/visual/__screenshots__/react/components-dialog--without-close-button-dark.png
new file mode 100644
index 00000000..e2e83590
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-dialog--without-close-button-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-dialog--without-close-button-light.png b/tests/visual/__screenshots__/react/components-dialog--without-close-button-light.png
new file mode 100644
index 00000000..8cef0596
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-dialog--without-close-button-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-dropdownmenu--default-dark.png b/tests/visual/__screenshots__/react/components-dropdownmenu--default-dark.png
new file mode 100644
index 00000000..51cd8882
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-dropdownmenu--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-dropdownmenu--default-light.png b/tests/visual/__screenshots__/react/components-dropdownmenu--default-light.png
new file mode 100644
index 00000000..e845c575
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-dropdownmenu--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-dropdownmenu--row-actions-dark.png b/tests/visual/__screenshots__/react/components-dropdownmenu--row-actions-dark.png
new file mode 100644
index 00000000..d2c2823f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-dropdownmenu--row-actions-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-dropdownmenu--row-actions-light.png b/tests/visual/__screenshots__/react/components-dropdownmenu--row-actions-light.png
new file mode 100644
index 00000000..5307df13
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-dropdownmenu--row-actions-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-dropdownmenu--with-checkbox-items-dark.png b/tests/visual/__screenshots__/react/components-dropdownmenu--with-checkbox-items-dark.png
new file mode 100644
index 00000000..b32524d9
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-dropdownmenu--with-checkbox-items-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-dropdownmenu--with-checkbox-items-light.png b/tests/visual/__screenshots__/react/components-dropdownmenu--with-checkbox-items-light.png
new file mode 100644
index 00000000..4102a139
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-dropdownmenu--with-checkbox-items-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-empty--default-dark.png b/tests/visual/__screenshots__/react/components-empty--default-dark.png
new file mode 100644
index 00000000..5d30c9d6
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-empty--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-empty--default-light.png b/tests/visual/__screenshots__/react/components-empty--default-light.png
new file mode 100644
index 00000000..b5733498
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-empty--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-empty--media-variants-dark.png b/tests/visual/__screenshots__/react/components-empty--media-variants-dark.png
new file mode 100644
index 00000000..611459e9
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-empty--media-variants-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-empty--media-variants-light.png b/tests/visual/__screenshots__/react/components-empty--media-variants-light.png
new file mode 100644
index 00000000..929b46d7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-empty--media-variants-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-empty--no-results-dark.png b/tests/visual/__screenshots__/react/components-empty--no-results-dark.png
new file mode 100644
index 00000000..5500682e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-empty--no-results-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-empty--no-results-light.png b/tests/visual/__screenshots__/react/components-empty--no-results-light.png
new file mode 100644
index 00000000..37c63592
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-empty--no-results-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-empty--with-multiple-actions-dark.png b/tests/visual/__screenshots__/react/components-empty--with-multiple-actions-dark.png
new file mode 100644
index 00000000..35a8b3f1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-empty--with-multiple-actions-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-empty--with-multiple-actions-light.png b/tests/visual/__screenshots__/react/components-empty--with-multiple-actions-light.png
new file mode 100644
index 00000000..bc725dea
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-empty--with-multiple-actions-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-field--default-dark.png b/tests/visual/__screenshots__/react/components-field--default-dark.png
new file mode 100644
index 00000000..7b9fe3b9
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-field--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-field--default-light.png b/tests/visual/__screenshots__/react/components-field--default-light.png
new file mode 100644
index 00000000..0d49368b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-field--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-field--group-dark.png b/tests/visual/__screenshots__/react/components-field--group-dark.png
new file mode 100644
index 00000000..62513b4c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-field--group-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-field--group-light.png b/tests/visual/__screenshots__/react/components-field--group-light.png
new file mode 100644
index 00000000..4c529c77
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-field--group-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-field--horizontal-dark.png b/tests/visual/__screenshots__/react/components-field--horizontal-dark.png
new file mode 100644
index 00000000..82c9cd5b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-field--horizontal-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-field--horizontal-light.png b/tests/visual/__screenshots__/react/components-field--horizontal-light.png
new file mode 100644
index 00000000..e08580ff
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-field--horizontal-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-field--with-error-dark.png b/tests/visual/__screenshots__/react/components-field--with-error-dark.png
new file mode 100644
index 00000000..b500779b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-field--with-error-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-field--with-error-light.png b/tests/visual/__screenshots__/react/components-field--with-error-light.png
new file mode 100644
index 00000000..357e6b18
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-field--with-error-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-hovercard--default-dark.png b/tests/visual/__screenshots__/react/components-hovercard--default-dark.png
new file mode 100644
index 00000000..91c3c6e4
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-hovercard--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-hovercard--default-light.png b/tests/visual/__screenshots__/react/components-hovercard--default-light.png
new file mode 100644
index 00000000..b4dd4c39
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-hovercard--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-hovercard--placement-dark.png b/tests/visual/__screenshots__/react/components-hovercard--placement-dark.png
new file mode 100644
index 00000000..39ded6c7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-hovercard--placement-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-hovercard--placement-light.png b/tests/visual/__screenshots__/react/components-hovercard--placement-light.png
new file mode 100644
index 00000000..07765003
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-hovercard--placement-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-hovercard--text-trigger-dark.png b/tests/visual/__screenshots__/react/components-hovercard--text-trigger-dark.png
new file mode 100644
index 00000000..60c22250
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-hovercard--text-trigger-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-hovercard--text-trigger-light.png b/tests/visual/__screenshots__/react/components-hovercard--text-trigger-light.png
new file mode 100644
index 00000000..844e0163
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-hovercard--text-trigger-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-input--default-dark.png b/tests/visual/__screenshots__/react/components-input--default-dark.png
new file mode 100644
index 00000000..5927b59f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-input--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-input--default-light.png b/tests/visual/__screenshots__/react/components-input--default-light.png
new file mode 100644
index 00000000..cfe88391
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-input--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-input--disabled-dark.png b/tests/visual/__screenshots__/react/components-input--disabled-dark.png
new file mode 100644
index 00000000..66e79556
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-input--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-input--disabled-light.png b/tests/visual/__screenshots__/react/components-input--disabled-light.png
new file mode 100644
index 00000000..2edb18f6
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-input--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-input--invalid-dark.png b/tests/visual/__screenshots__/react/components-input--invalid-dark.png
new file mode 100644
index 00000000..8ffa6265
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-input--invalid-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-input--invalid-light.png b/tests/visual/__screenshots__/react/components-input--invalid-light.png
new file mode 100644
index 00000000..7acaf443
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-input--invalid-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-input--types-dark.png b/tests/visual/__screenshots__/react/components-input--types-dark.png
new file mode 100644
index 00000000..7ee8ff64
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-input--types-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-input--types-light.png b/tests/visual/__screenshots__/react/components-input--types-light.png
new file mode 100644
index 00000000..ecc09021
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-input--types-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputgroup--textarea-with-block-end-toolbar-dark.png b/tests/visual/__screenshots__/react/components-inputgroup--textarea-with-block-end-toolbar-dark.png
new file mode 100644
index 00000000..82bb610a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputgroup--textarea-with-block-end-toolbar-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputgroup--textarea-with-block-end-toolbar-light.png b/tests/visual/__screenshots__/react/components-inputgroup--textarea-with-block-end-toolbar-light.png
new file mode 100644
index 00000000..f4af5308
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputgroup--textarea-with-block-end-toolbar-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputgroup--with-leading-and-trailing-addon-dark.png b/tests/visual/__screenshots__/react/components-inputgroup--with-leading-and-trailing-addon-dark.png
new file mode 100644
index 00000000..3eca1b32
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputgroup--with-leading-and-trailing-addon-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputgroup--with-leading-and-trailing-addon-light.png b/tests/visual/__screenshots__/react/components-inputgroup--with-leading-and-trailing-addon-light.png
new file mode 100644
index 00000000..1200a490
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputgroup--with-leading-and-trailing-addon-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputgroup--with-leading-dropdown-dark.png b/tests/visual/__screenshots__/react/components-inputgroup--with-leading-dropdown-dark.png
new file mode 100644
index 00000000..5c832a2d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputgroup--with-leading-dropdown-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputgroup--with-leading-dropdown-light.png b/tests/visual/__screenshots__/react/components-inputgroup--with-leading-dropdown-light.png
new file mode 100644
index 00000000..a973ed1b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputgroup--with-leading-dropdown-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputgroup--with-text-prefix-dark.png b/tests/visual/__screenshots__/react/components-inputgroup--with-text-prefix-dark.png
new file mode 100644
index 00000000..365bcc62
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputgroup--with-text-prefix-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputgroup--with-text-prefix-light.png b/tests/visual/__screenshots__/react/components-inputgroup--with-text-prefix-light.png
new file mode 100644
index 00000000..67fa53d4
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputgroup--with-text-prefix-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputotp--default-dark.png b/tests/visual/__screenshots__/react/components-inputotp--default-dark.png
new file mode 100644
index 00000000..dc089a98
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputotp--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputotp--default-light.png b/tests/visual/__screenshots__/react/components-inputotp--default-light.png
new file mode 100644
index 00000000..98813a28
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputotp--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputotp--disabled-dark.png b/tests/visual/__screenshots__/react/components-inputotp--disabled-dark.png
new file mode 100644
index 00000000..04416aa9
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputotp--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputotp--disabled-light.png b/tests/visual/__screenshots__/react/components-inputotp--disabled-light.png
new file mode 100644
index 00000000..934bdaad
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputotp--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputotp--verification-form-dark.png b/tests/visual/__screenshots__/react/components-inputotp--verification-form-dark.png
new file mode 100644
index 00000000..25b9eba8
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputotp--verification-form-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputotp--verification-form-light.png b/tests/visual/__screenshots__/react/components-inputotp--verification-form-light.png
new file mode 100644
index 00000000..efb84155
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputotp--verification-form-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputotp--with-separator-dark.png b/tests/visual/__screenshots__/react/components-inputotp--with-separator-dark.png
new file mode 100644
index 00000000..8c586c1f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputotp--with-separator-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-inputotp--with-separator-light.png b/tests/visual/__screenshots__/react/components-inputotp--with-separator-light.png
new file mode 100644
index 00000000..17a53b01
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-inputotp--with-separator-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-item--default-dark.png b/tests/visual/__screenshots__/react/components-item--default-dark.png
new file mode 100644
index 00000000..c93ae0bb
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-item--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-item--default-light.png b/tests/visual/__screenshots__/react/components-item--default-light.png
new file mode 100644
index 00000000..7e8b070c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-item--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-item--group-dark.png b/tests/visual/__screenshots__/react/components-item--group-dark.png
new file mode 100644
index 00000000..853aeb9c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-item--group-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-item--group-light.png b/tests/visual/__screenshots__/react/components-item--group-light.png
new file mode 100644
index 00000000..2a6b2716
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-item--group-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-item--media-variants-dark.png b/tests/visual/__screenshots__/react/components-item--media-variants-dark.png
new file mode 100644
index 00000000..94824950
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-item--media-variants-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-item--media-variants-light.png b/tests/visual/__screenshots__/react/components-item--media-variants-light.png
new file mode 100644
index 00000000..340523c1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-item--media-variants-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-item--sizes-dark.png b/tests/visual/__screenshots__/react/components-item--sizes-dark.png
new file mode 100644
index 00000000..97b94b53
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-item--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-item--sizes-light.png b/tests/visual/__screenshots__/react/components-item--sizes-light.png
new file mode 100644
index 00000000..577303f1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-item--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-item--variants-dark.png b/tests/visual/__screenshots__/react/components-item--variants-dark.png
new file mode 100644
index 00000000..4fc16d8e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-item--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-item--variants-light.png b/tests/visual/__screenshots__/react/components-item--variants-light.png
new file mode 100644
index 00000000..7465c04b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-item--variants-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-item--with-header-and-footer-dark.png b/tests/visual/__screenshots__/react/components-item--with-header-and-footer-dark.png
new file mode 100644
index 00000000..e3761a8a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-item--with-header-and-footer-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-item--with-header-and-footer-light.png b/tests/visual/__screenshots__/react/components-item--with-header-and-footer-light.png
new file mode 100644
index 00000000..8de73878
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-item--with-header-and-footer-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-kbd--default-dark.png b/tests/visual/__screenshots__/react/components-kbd--default-dark.png
new file mode 100644
index 00000000..fba74ebb
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-kbd--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-kbd--default-light.png b/tests/visual/__screenshots__/react/components-kbd--default-light.png
new file mode 100644
index 00000000..4fd69bd4
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-kbd--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-kbd--groups-dark.png b/tests/visual/__screenshots__/react/components-kbd--groups-dark.png
new file mode 100644
index 00000000..f31a07d4
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-kbd--groups-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-kbd--groups-light.png b/tests/visual/__screenshots__/react/components-kbd--groups-light.png
new file mode 100644
index 00000000..aa708733
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-kbd--groups-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-kbd--in-button-dark.png b/tests/visual/__screenshots__/react/components-kbd--in-button-dark.png
new file mode 100644
index 00000000..3108c113
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-kbd--in-button-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-kbd--in-button-light.png b/tests/visual/__screenshots__/react/components-kbd--in-button-light.png
new file mode 100644
index 00000000..6b562efa
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-kbd--in-button-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-kbd--in-input-group-dark.png b/tests/visual/__screenshots__/react/components-kbd--in-input-group-dark.png
new file mode 100644
index 00000000..6aafa3b3
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-kbd--in-input-group-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-kbd--in-input-group-light.png b/tests/visual/__screenshots__/react/components-kbd--in-input-group-light.png
new file mode 100644
index 00000000..d8618538
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-kbd--in-input-group-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-kbd--in-text-dark.png b/tests/visual/__screenshots__/react/components-kbd--in-text-dark.png
new file mode 100644
index 00000000..5c924b16
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-kbd--in-text-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-kbd--in-text-light.png b/tests/visual/__screenshots__/react/components-kbd--in-text-light.png
new file mode 100644
index 00000000..2cd9379a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-kbd--in-text-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-label--default-dark.png b/tests/visual/__screenshots__/react/components-label--default-dark.png
new file mode 100644
index 00000000..008e3ede
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-label--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-label--default-light.png b/tests/visual/__screenshots__/react/components-label--default-light.png
new file mode 100644
index 00000000..f1e8d119
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-label--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-label--with-input-dark.png b/tests/visual/__screenshots__/react/components-label--with-input-dark.png
new file mode 100644
index 00000000..534fa3a9
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-label--with-input-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-label--with-input-light.png b/tests/visual/__screenshots__/react/components-label--with-input-light.png
new file mode 100644
index 00000000..a11a0587
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-label--with-input-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-nativeselect--default-dark.png b/tests/visual/__screenshots__/react/components-nativeselect--default-dark.png
new file mode 100644
index 00000000..4f457671
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-nativeselect--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-nativeselect--default-light.png b/tests/visual/__screenshots__/react/components-nativeselect--default-light.png
new file mode 100644
index 00000000..20053c0e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-nativeselect--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-nativeselect--disabled-dark.png b/tests/visual/__screenshots__/react/components-nativeselect--disabled-dark.png
new file mode 100644
index 00000000..0c45888a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-nativeselect--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-nativeselect--disabled-light.png b/tests/visual/__screenshots__/react/components-nativeselect--disabled-light.png
new file mode 100644
index 00000000..6fe70167
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-nativeselect--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-nativeselect--invalid-dark.png b/tests/visual/__screenshots__/react/components-nativeselect--invalid-dark.png
new file mode 100644
index 00000000..ccdf5eb7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-nativeselect--invalid-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-nativeselect--invalid-light.png b/tests/visual/__screenshots__/react/components-nativeselect--invalid-light.png
new file mode 100644
index 00000000..79769312
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-nativeselect--invalid-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-nativeselect--sizes-dark.png b/tests/visual/__screenshots__/react/components-nativeselect--sizes-dark.png
new file mode 100644
index 00000000..add153cd
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-nativeselect--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-nativeselect--sizes-light.png b/tests/visual/__screenshots__/react/components-nativeselect--sizes-light.png
new file mode 100644
index 00000000..84e2fe82
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-nativeselect--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-nativeselect--with-option-groups-dark.png b/tests/visual/__screenshots__/react/components-nativeselect--with-option-groups-dark.png
new file mode 100644
index 00000000..988a5f07
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-nativeselect--with-option-groups-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-nativeselect--with-option-groups-light.png b/tests/visual/__screenshots__/react/components-nativeselect--with-option-groups-light.png
new file mode 100644
index 00000000..eae58462
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-nativeselect--with-option-groups-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-navigationmenu--alignment-dark.png b/tests/visual/__screenshots__/react/components-navigationmenu--alignment-dark.png
new file mode 100644
index 00000000..aa0dbadc
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-navigationmenu--alignment-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-navigationmenu--alignment-light.png b/tests/visual/__screenshots__/react/components-navigationmenu--alignment-light.png
new file mode 100644
index 00000000..8b906ad3
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-navigationmenu--alignment-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-navigationmenu--default-dark.png b/tests/visual/__screenshots__/react/components-navigationmenu--default-dark.png
new file mode 100644
index 00000000..37f5eeaf
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-navigationmenu--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-navigationmenu--default-light.png b/tests/visual/__screenshots__/react/components-navigationmenu--default-light.png
new file mode 100644
index 00000000..1cdc2349
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-navigationmenu--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-navigationmenu--simple-links-dark.png b/tests/visual/__screenshots__/react/components-navigationmenu--simple-links-dark.png
new file mode 100644
index 00000000..6eb36484
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-navigationmenu--simple-links-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-navigationmenu--simple-links-light.png b/tests/visual/__screenshots__/react/components-navigationmenu--simple-links-light.png
new file mode 100644
index 00000000..784d3cf2
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-navigationmenu--simple-links-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-navigationmenu--vertical-dark.png b/tests/visual/__screenshots__/react/components-navigationmenu--vertical-dark.png
new file mode 100644
index 00000000..d47ef1cb
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-navigationmenu--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-navigationmenu--vertical-light.png b/tests/visual/__screenshots__/react/components-navigationmenu--vertical-light.png
new file mode 100644
index 00000000..d34629ba
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-navigationmenu--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-navigationmenu--with-icon-dark.png b/tests/visual/__screenshots__/react/components-navigationmenu--with-icon-dark.png
new file mode 100644
index 00000000..d47a8a63
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-navigationmenu--with-icon-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-navigationmenu--with-icon-light.png b/tests/visual/__screenshots__/react/components-navigationmenu--with-icon-light.png
new file mode 100644
index 00000000..01946e01
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-navigationmenu--with-icon-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-pagination--default-dark.png b/tests/visual/__screenshots__/react/components-pagination--default-dark.png
new file mode 100644
index 00000000..f3c9d040
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-pagination--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-pagination--default-light.png b/tests/visual/__screenshots__/react/components-pagination--default-light.png
new file mode 100644
index 00000000..bd0b93fe
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-pagination--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-pagination--interactive-dark.png b/tests/visual/__screenshots__/react/components-pagination--interactive-dark.png
new file mode 100644
index 00000000..ffab3942
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-pagination--interactive-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-pagination--interactive-light.png b/tests/visual/__screenshots__/react/components-pagination--interactive-light.png
new file mode 100644
index 00000000..cd74c494
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-pagination--interactive-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-pagination--many-pages-dark.png b/tests/visual/__screenshots__/react/components-pagination--many-pages-dark.png
new file mode 100644
index 00000000..cbd68a7e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-pagination--many-pages-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-pagination--many-pages-light.png b/tests/visual/__screenshots__/react/components-pagination--many-pages-light.png
new file mode 100644
index 00000000..4280cbaf
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-pagination--many-pages-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-pagination--numbered-pagination-story-dark.png b/tests/visual/__screenshots__/react/components-pagination--numbered-pagination-story-dark.png
new file mode 100644
index 00000000..6e48e819
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-pagination--numbered-pagination-story-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-pagination--numbered-pagination-story-light.png b/tests/visual/__screenshots__/react/components-pagination--numbered-pagination-story-light.png
new file mode 100644
index 00000000..101dc879
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-pagination--numbered-pagination-story-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-popover--align-dark.png b/tests/visual/__screenshots__/react/components-popover--align-dark.png
new file mode 100644
index 00000000..3cf4c117
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-popover--align-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-popover--align-light.png b/tests/visual/__screenshots__/react/components-popover--align-light.png
new file mode 100644
index 00000000..c4272037
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-popover--align-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-popover--default-dark.png b/tests/visual/__screenshots__/react/components-popover--default-dark.png
new file mode 100644
index 00000000..2a8aea10
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-popover--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-popover--default-light.png b/tests/visual/__screenshots__/react/components-popover--default-light.png
new file mode 100644
index 00000000..d7a8801e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-popover--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-popover--placement-dark.png b/tests/visual/__screenshots__/react/components-popover--placement-dark.png
new file mode 100644
index 00000000..39ded6c7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-popover--placement-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-popover--placement-light.png b/tests/visual/__screenshots__/react/components-popover--placement-light.png
new file mode 100644
index 00000000..07765003
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-popover--placement-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-progress--default-dark.png b/tests/visual/__screenshots__/react/components-progress--default-dark.png
new file mode 100644
index 00000000..b04b2e7a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-progress--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-progress--default-light.png b/tests/visual/__screenshots__/react/components-progress--default-light.png
new file mode 100644
index 00000000..52449e46
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-progress--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-progress--indeterminate-dark.png b/tests/visual/__screenshots__/react/components-progress--indeterminate-dark.png
new file mode 100644
index 00000000..fb29d03c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-progress--indeterminate-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-progress--indeterminate-light.png b/tests/visual/__screenshots__/react/components-progress--indeterminate-light.png
new file mode 100644
index 00000000..0336d391
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-progress--indeterminate-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-progress--values-dark.png b/tests/visual/__screenshots__/react/components-progress--values-dark.png
new file mode 100644
index 00000000..c4a0e0c7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-progress--values-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-progress--values-light.png b/tests/visual/__screenshots__/react/components-progress--values-light.png
new file mode 100644
index 00000000..ab419829
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-progress--values-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-progress--with-label-dark.png b/tests/visual/__screenshots__/react/components-progress--with-label-dark.png
new file mode 100644
index 00000000..8f27aae9
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-progress--with-label-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-progress--with-label-light.png b/tests/visual/__screenshots__/react/components-progress--with-label-light.png
new file mode 100644
index 00000000..f0847377
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-progress--with-label-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-radiogroup--default-dark.png b/tests/visual/__screenshots__/react/components-radiogroup--default-dark.png
new file mode 100644
index 00000000..2205ec09
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-radiogroup--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-radiogroup--default-light.png b/tests/visual/__screenshots__/react/components-radiogroup--default-light.png
new file mode 100644
index 00000000..09a8f769
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-radiogroup--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-radiogroup--disabled-dark.png b/tests/visual/__screenshots__/react/components-radiogroup--disabled-dark.png
new file mode 100644
index 00000000..ce27da82
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-radiogroup--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-radiogroup--disabled-light.png b/tests/visual/__screenshots__/react/components-radiogroup--disabled-light.png
new file mode 100644
index 00000000..be726af9
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-radiogroup--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-radiogroup--in-fieldset-dark.png b/tests/visual/__screenshots__/react/components-radiogroup--in-fieldset-dark.png
new file mode 100644
index 00000000..0b928fa5
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-radiogroup--in-fieldset-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-radiogroup--in-fieldset-light.png b/tests/visual/__screenshots__/react/components-radiogroup--in-fieldset-light.png
new file mode 100644
index 00000000..7213d0a0
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-radiogroup--in-fieldset-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-radiogroup--invalid-dark.png b/tests/visual/__screenshots__/react/components-radiogroup--invalid-dark.png
new file mode 100644
index 00000000..d4389dba
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-radiogroup--invalid-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-radiogroup--invalid-light.png b/tests/visual/__screenshots__/react/components-radiogroup--invalid-light.png
new file mode 100644
index 00000000..405800db
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-radiogroup--invalid-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-resizable--composed-layout-dark.png b/tests/visual/__screenshots__/react/components-resizable--composed-layout-dark.png
new file mode 100644
index 00000000..25050c88
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-resizable--composed-layout-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-resizable--composed-layout-light.png b/tests/visual/__screenshots__/react/components-resizable--composed-layout-light.png
new file mode 100644
index 00000000..0110077b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-resizable--composed-layout-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-resizable--default-dark.png b/tests/visual/__screenshots__/react/components-resizable--default-dark.png
new file mode 100644
index 00000000..a4e6d0c9
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-resizable--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-resizable--default-light.png b/tests/visual/__screenshots__/react/components-resizable--default-light.png
new file mode 100644
index 00000000..3e60b143
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-resizable--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-resizable--vertical-dark.png b/tests/visual/__screenshots__/react/components-resizable--vertical-dark.png
new file mode 100644
index 00000000..2c4f0e93
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-resizable--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-resizable--vertical-light.png b/tests/visual/__screenshots__/react/components-resizable--vertical-light.png
new file mode 100644
index 00000000..1748b7aa
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-resizable--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-resizable--without-handle-grip-dark.png b/tests/visual/__screenshots__/react/components-resizable--without-handle-grip-dark.png
new file mode 100644
index 00000000..a30fb91b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-resizable--without-handle-grip-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-resizable--without-handle-grip-light.png b/tests/visual/__screenshots__/react/components-resizable--without-handle-grip-light.png
new file mode 100644
index 00000000..25567139
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-resizable--without-handle-grip-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-scrollarea--default-dark.png b/tests/visual/__screenshots__/react/components-scrollarea--default-dark.png
new file mode 100644
index 00000000..e0f402b0
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-scrollarea--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-scrollarea--default-light.png b/tests/visual/__screenshots__/react/components-scrollarea--default-light.png
new file mode 100644
index 00000000..08ddfc1f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-scrollarea--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-scrollarea--horizontal-dark.png b/tests/visual/__screenshots__/react/components-scrollarea--horizontal-dark.png
new file mode 100644
index 00000000..583249fd
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-scrollarea--horizontal-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-scrollarea--horizontal-light.png b/tests/visual/__screenshots__/react/components-scrollarea--horizontal-light.png
new file mode 100644
index 00000000..220dd948
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-scrollarea--horizontal-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-select--default-dark.png b/tests/visual/__screenshots__/react/components-select--default-dark.png
new file mode 100644
index 00000000..fcdce109
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-select--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-select--default-light.png b/tests/visual/__screenshots__/react/components-select--default-light.png
new file mode 100644
index 00000000..2d14dfbb
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-select--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-select--disabled-dark.png b/tests/visual/__screenshots__/react/components-select--disabled-dark.png
new file mode 100644
index 00000000..a59df4fb
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-select--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-select--disabled-light.png b/tests/visual/__screenshots__/react/components-select--disabled-light.png
new file mode 100644
index 00000000..199c6ba6
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-select--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-select--grouped-dark.png b/tests/visual/__screenshots__/react/components-select--grouped-dark.png
new file mode 100644
index 00000000..006b09d4
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-select--grouped-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-select--grouped-light.png b/tests/visual/__screenshots__/react/components-select--grouped-light.png
new file mode 100644
index 00000000..7982a40f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-select--grouped-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-select--sizes-dark.png b/tests/visual/__screenshots__/react/components-select--sizes-dark.png
new file mode 100644
index 00000000..b2539f0a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-select--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-select--sizes-light.png b/tests/visual/__screenshots__/react/components-select--sizes-light.png
new file mode 100644
index 00000000..cc62e4a6
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-select--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-separator--default-dark.png b/tests/visual/__screenshots__/react/components-separator--default-dark.png
new file mode 100644
index 00000000..e27eeb50
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-separator--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-separator--default-light.png b/tests/visual/__screenshots__/react/components-separator--default-light.png
new file mode 100644
index 00000000..bc6d9121
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-separator--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-separator--horizontal-dark.png b/tests/visual/__screenshots__/react/components-separator--horizontal-dark.png
new file mode 100644
index 00000000..e85bbe0d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-separator--horizontal-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-separator--horizontal-light.png b/tests/visual/__screenshots__/react/components-separator--horizontal-light.png
new file mode 100644
index 00000000..e86d2f5c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-separator--horizontal-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-separator--vertical-dark.png b/tests/visual/__screenshots__/react/components-separator--vertical-dark.png
new file mode 100644
index 00000000..87122926
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-separator--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-separator--vertical-light.png b/tests/visual/__screenshots__/react/components-separator--vertical-light.png
new file mode 100644
index 00000000..e04fd942
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-separator--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-sheet--default-dark.png b/tests/visual/__screenshots__/react/components-sheet--default-dark.png
new file mode 100644
index 00000000..43f30836
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sheet--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-sheet--default-light.png b/tests/visual/__screenshots__/react/components-sheet--default-light.png
new file mode 100644
index 00000000..fbb9e961
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sheet--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-sheet--sides-dark.png b/tests/visual/__screenshots__/react/components-sheet--sides-dark.png
new file mode 100644
index 00000000..b48bb7a7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sheet--sides-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-sheet--sides-light.png b/tests/visual/__screenshots__/react/components-sheet--sides-light.png
new file mode 100644
index 00000000..8cfaf212
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sheet--sides-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-sheet--without-close-button-dark.png b/tests/visual/__screenshots__/react/components-sheet--without-close-button-dark.png
new file mode 100644
index 00000000..e2e83590
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sheet--without-close-button-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-sheet--without-close-button-light.png b/tests/visual/__screenshots__/react/components-sheet--without-close-button-light.png
new file mode 100644
index 00000000..8cef0596
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sheet--without-close-button-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-sidebar--default-dark.png b/tests/visual/__screenshots__/react/components-sidebar--default-dark.png
new file mode 100644
index 00000000..a6556481
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sidebar--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-sidebar--default-light.png b/tests/visual/__screenshots__/react/components-sidebar--default-light.png
new file mode 100644
index 00000000..013abc1d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sidebar--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-sidebar--menu-button-variants-dark.png b/tests/visual/__screenshots__/react/components-sidebar--menu-button-variants-dark.png
new file mode 100644
index 00000000..6d1309a3
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sidebar--menu-button-variants-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-sidebar--menu-button-variants-light.png b/tests/visual/__screenshots__/react/components-sidebar--menu-button-variants-light.png
new file mode 100644
index 00000000..c8a0a4f1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sidebar--menu-button-variants-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-skeleton--card-loading-dark.png b/tests/visual/__screenshots__/react/components-skeleton--card-loading-dark.png
new file mode 100644
index 00000000..5615d9c0
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-skeleton--card-loading-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-skeleton--card-loading-light.png b/tests/visual/__screenshots__/react/components-skeleton--card-loading-light.png
new file mode 100644
index 00000000..961e0c06
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-skeleton--card-loading-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-skeleton--default-dark.png b/tests/visual/__screenshots__/react/components-skeleton--default-dark.png
new file mode 100644
index 00000000..05262a37
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-skeleton--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-skeleton--default-light.png b/tests/visual/__screenshots__/react/components-skeleton--default-light.png
new file mode 100644
index 00000000..356afab5
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-skeleton--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-skeleton--menu-list-dark.png b/tests/visual/__screenshots__/react/components-skeleton--menu-list-dark.png
new file mode 100644
index 00000000..3e4d3121
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-skeleton--menu-list-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-skeleton--menu-list-light.png b/tests/visual/__screenshots__/react/components-skeleton--menu-list-light.png
new file mode 100644
index 00000000..09e6c00f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-skeleton--menu-list-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-skeleton--shapes-dark.png b/tests/visual/__screenshots__/react/components-skeleton--shapes-dark.png
new file mode 100644
index 00000000..20bf843a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-skeleton--shapes-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-skeleton--shapes-light.png b/tests/visual/__screenshots__/react/components-skeleton--shapes-light.png
new file mode 100644
index 00000000..f5163a9b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-skeleton--shapes-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-slider--default-dark.png b/tests/visual/__screenshots__/react/components-slider--default-dark.png
new file mode 100644
index 00000000..4d069b7c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-slider--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-slider--default-light.png b/tests/visual/__screenshots__/react/components-slider--default-light.png
new file mode 100644
index 00000000..68bb48f1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-slider--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-slider--disabled-dark.png b/tests/visual/__screenshots__/react/components-slider--disabled-dark.png
new file mode 100644
index 00000000..a756a165
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-slider--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-slider--disabled-light.png b/tests/visual/__screenshots__/react/components-slider--disabled-light.png
new file mode 100644
index 00000000..d598eca6
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-slider--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-slider--horizontal-dark.png b/tests/visual/__screenshots__/react/components-slider--horizontal-dark.png
new file mode 100644
index 00000000..4d069b7c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-slider--horizontal-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-slider--horizontal-light.png b/tests/visual/__screenshots__/react/components-slider--horizontal-light.png
new file mode 100644
index 00000000..68bb48f1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-slider--horizontal-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-slider--range-dark.png b/tests/visual/__screenshots__/react/components-slider--range-dark.png
new file mode 100644
index 00000000..6cf901a1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-slider--range-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-slider--range-light.png b/tests/visual/__screenshots__/react/components-slider--range-light.png
new file mode 100644
index 00000000..e6883a7d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-slider--range-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-slider--vertical-dark.png b/tests/visual/__screenshots__/react/components-slider--vertical-dark.png
new file mode 100644
index 00000000..85529456
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-slider--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-slider--vertical-light.png b/tests/visual/__screenshots__/react/components-slider--vertical-light.png
new file mode 100644
index 00000000..6fce5759
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-slider--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-slider--with-field-dark.png b/tests/visual/__screenshots__/react/components-slider--with-field-dark.png
new file mode 100644
index 00000000..5ef4dbf7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-slider--with-field-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-slider--with-field-light.png b/tests/visual/__screenshots__/react/components-slider--with-field-light.png
new file mode 100644
index 00000000..4ba886d8
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-slider--with-field-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-sonner--default-dark.png b/tests/visual/__screenshots__/react/components-sonner--default-dark.png
new file mode 100644
index 00000000..dfb611ce
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sonner--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-sonner--default-light.png b/tests/visual/__screenshots__/react/components-sonner--default-light.png
new file mode 100644
index 00000000..a435896c
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sonner--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-sonner--rich-colors-dark.png b/tests/visual/__screenshots__/react/components-sonner--rich-colors-dark.png
new file mode 100644
index 00000000..83fa9dee
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sonner--rich-colors-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-sonner--rich-colors-light.png b/tests/visual/__screenshots__/react/components-sonner--rich-colors-light.png
new file mode 100644
index 00000000..77d8ea2b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sonner--rich-colors-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-sonner--types-dark.png b/tests/visual/__screenshots__/react/components-sonner--types-dark.png
new file mode 100644
index 00000000..ad194913
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sonner--types-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-sonner--types-light.png b/tests/visual/__screenshots__/react/components-sonner--types-light.png
new file mode 100644
index 00000000..f7ff0e9d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sonner--types-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-sonner--with-action-dark.png b/tests/visual/__screenshots__/react/components-sonner--with-action-dark.png
new file mode 100644
index 00000000..2c88c760
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sonner--with-action-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-sonner--with-action-light.png b/tests/visual/__screenshots__/react/components-sonner--with-action-light.png
new file mode 100644
index 00000000..1cd0e15d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-sonner--with-action-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-switch--default-dark.png b/tests/visual/__screenshots__/react/components-switch--default-dark.png
new file mode 100644
index 00000000..8654c0e6
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-switch--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-switch--default-light.png b/tests/visual/__screenshots__/react/components-switch--default-light.png
new file mode 100644
index 00000000..99658726
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-switch--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-switch--sizes-dark.png b/tests/visual/__screenshots__/react/components-switch--sizes-dark.png
new file mode 100644
index 00000000..478e0310
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-switch--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-switch--sizes-light.png b/tests/visual/__screenshots__/react/components-switch--sizes-light.png
new file mode 100644
index 00000000..a9b721e6
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-switch--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-switch--states-dark.png b/tests/visual/__screenshots__/react/components-switch--states-dark.png
new file mode 100644
index 00000000..6d58722f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-switch--states-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-switch--states-light.png b/tests/visual/__screenshots__/react/components-switch--states-light.png
new file mode 100644
index 00000000..ddffa913
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-switch--states-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-switch--with-label-dark.png b/tests/visual/__screenshots__/react/components-switch--with-label-dark.png
new file mode 100644
index 00000000..3f72b131
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-switch--with-label-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-switch--with-label-light.png b/tests/visual/__screenshots__/react/components-switch--with-label-light.png
new file mode 100644
index 00000000..4d228551
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-switch--with-label-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-table--default-dark.png b/tests/visual/__screenshots__/react/components-table--default-dark.png
new file mode 100644
index 00000000..7f7412a1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-table--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-table--default-light.png b/tests/visual/__screenshots__/react/components-table--default-light.png
new file mode 100644
index 00000000..d5ca19ab
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-table--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-tabs--default-dark.png b/tests/visual/__screenshots__/react/components-tabs--default-dark.png
new file mode 100644
index 00000000..59b06c32
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tabs--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-tabs--default-light.png b/tests/visual/__screenshots__/react/components-tabs--default-light.png
new file mode 100644
index 00000000..8fd94fec
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tabs--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-tabs--disabled-trigger-dark.png b/tests/visual/__screenshots__/react/components-tabs--disabled-trigger-dark.png
new file mode 100644
index 00000000..1b51bf3b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tabs--disabled-trigger-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-tabs--disabled-trigger-light.png b/tests/visual/__screenshots__/react/components-tabs--disabled-trigger-light.png
new file mode 100644
index 00000000..85008910
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tabs--disabled-trigger-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-tabs--variants-dark.png b/tests/visual/__screenshots__/react/components-tabs--variants-dark.png
new file mode 100644
index 00000000..4d872e66
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tabs--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-tabs--variants-light.png b/tests/visual/__screenshots__/react/components-tabs--variants-light.png
new file mode 100644
index 00000000..7c3b9813
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tabs--variants-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-tabs--vertical-dark.png b/tests/visual/__screenshots__/react/components-tabs--vertical-dark.png
new file mode 100644
index 00000000..cfd4d16d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tabs--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-tabs--vertical-light.png b/tests/visual/__screenshots__/react/components-tabs--vertical-light.png
new file mode 100644
index 00000000..d33ea869
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tabs--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-textarea--default-dark.png b/tests/visual/__screenshots__/react/components-textarea--default-dark.png
new file mode 100644
index 00000000..609564f2
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-textarea--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-textarea--default-light.png b/tests/visual/__screenshots__/react/components-textarea--default-light.png
new file mode 100644
index 00000000..c4072aca
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-textarea--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-textarea--disabled-dark.png b/tests/visual/__screenshots__/react/components-textarea--disabled-dark.png
new file mode 100644
index 00000000..d4977643
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-textarea--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-textarea--disabled-light.png b/tests/visual/__screenshots__/react/components-textarea--disabled-light.png
new file mode 100644
index 00000000..2f42203d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-textarea--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-textarea--invalid-dark.png b/tests/visual/__screenshots__/react/components-textarea--invalid-dark.png
new file mode 100644
index 00000000..9f8a43e6
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-textarea--invalid-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-textarea--invalid-light.png b/tests/visual/__screenshots__/react/components-textarea--invalid-light.png
new file mode 100644
index 00000000..b6719e6d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-textarea--invalid-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-toggle--default-dark.png b/tests/visual/__screenshots__/react/components-toggle--default-dark.png
new file mode 100644
index 00000000..e7d884d0
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-toggle--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-toggle--default-light.png b/tests/visual/__screenshots__/react/components-toggle--default-light.png
new file mode 100644
index 00000000..05a74637
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-toggle--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-toggle--disabled-dark.png b/tests/visual/__screenshots__/react/components-toggle--disabled-dark.png
new file mode 100644
index 00000000..41f1811a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-toggle--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-toggle--disabled-light.png b/tests/visual/__screenshots__/react/components-toggle--disabled-light.png
new file mode 100644
index 00000000..9fde53ec
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-toggle--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-toggle--formatting-toolbar-dark.png b/tests/visual/__screenshots__/react/components-toggle--formatting-toolbar-dark.png
new file mode 100644
index 00000000..60b7fa55
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-toggle--formatting-toolbar-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-toggle--formatting-toolbar-light.png b/tests/visual/__screenshots__/react/components-toggle--formatting-toolbar-light.png
new file mode 100644
index 00000000..9f9132a2
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-toggle--formatting-toolbar-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-toggle--sizes-dark.png b/tests/visual/__screenshots__/react/components-toggle--sizes-dark.png
new file mode 100644
index 00000000..11a0825d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-toggle--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-toggle--sizes-light.png b/tests/visual/__screenshots__/react/components-toggle--sizes-light.png
new file mode 100644
index 00000000..1d3a5a34
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-toggle--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-toggle--variants-dark.png b/tests/visual/__screenshots__/react/components-toggle--variants-dark.png
new file mode 100644
index 00000000..d0162d0d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-toggle--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-toggle--variants-light.png b/tests/visual/__screenshots__/react/components-toggle--variants-light.png
new file mode 100644
index 00000000..857ae94f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-toggle--variants-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-toggle--with-icon-dark.png b/tests/visual/__screenshots__/react/components-toggle--with-icon-dark.png
new file mode 100644
index 00000000..7a2a112f
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-toggle--with-icon-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-toggle--with-icon-light.png b/tests/visual/__screenshots__/react/components-toggle--with-icon-light.png
new file mode 100644
index 00000000..9b9acf50
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-toggle--with-icon-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--default-dark.png b/tests/visual/__screenshots__/react/components-togglegroup--default-dark.png
new file mode 100644
index 00000000..b4642943
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--default-light.png b/tests/visual/__screenshots__/react/components-togglegroup--default-light.png
new file mode 100644
index 00000000..ec696bb4
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--disabled-dark.png b/tests/visual/__screenshots__/react/components-togglegroup--disabled-dark.png
new file mode 100644
index 00000000..366ccfac
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--disabled-light.png b/tests/visual/__screenshots__/react/components-togglegroup--disabled-light.png
new file mode 100644
index 00000000..991df19d
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--sizes-dark.png b/tests/visual/__screenshots__/react/components-togglegroup--sizes-dark.png
new file mode 100644
index 00000000..701cf6f1
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--sizes-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--sizes-light.png b/tests/visual/__screenshots__/react/components-togglegroup--sizes-light.png
new file mode 100644
index 00000000..bdc5959b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--sizes-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--text-alignment-dark.png b/tests/visual/__screenshots__/react/components-togglegroup--text-alignment-dark.png
new file mode 100644
index 00000000..2a0b7402
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--text-alignment-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--text-alignment-light.png b/tests/visual/__screenshots__/react/components-togglegroup--text-alignment-light.png
new file mode 100644
index 00000000..7edee9fe
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--text-alignment-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--text-formatting-dark.png b/tests/visual/__screenshots__/react/components-togglegroup--text-formatting-dark.png
new file mode 100644
index 00000000..2b83b970
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--text-formatting-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--text-formatting-light.png b/tests/visual/__screenshots__/react/components-togglegroup--text-formatting-light.png
new file mode 100644
index 00000000..64a8e94e
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--text-formatting-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--variants-dark.png b/tests/visual/__screenshots__/react/components-togglegroup--variants-dark.png
new file mode 100644
index 00000000..93d6af52
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--variants-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--variants-light.png b/tests/visual/__screenshots__/react/components-togglegroup--variants-light.png
new file mode 100644
index 00000000..37eb2a3b
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--variants-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--vertical-dark.png b/tests/visual/__screenshots__/react/components-togglegroup--vertical-dark.png
new file mode 100644
index 00000000..d7aed208
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--vertical-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-togglegroup--vertical-light.png b/tests/visual/__screenshots__/react/components-togglegroup--vertical-light.png
new file mode 100644
index 00000000..08793c3a
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-togglegroup--vertical-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-tooltip--default-dark.png b/tests/visual/__screenshots__/react/components-tooltip--default-dark.png
new file mode 100644
index 00000000..f89f7774
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tooltip--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-tooltip--default-light.png b/tests/visual/__screenshots__/react/components-tooltip--default-light.png
new file mode 100644
index 00000000..5bdab813
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tooltip--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-tooltip--delayed-open-dark.png b/tests/visual/__screenshots__/react/components-tooltip--delayed-open-dark.png
new file mode 100644
index 00000000..bcc097e7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tooltip--delayed-open-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-tooltip--delayed-open-light.png b/tests/visual/__screenshots__/react/components-tooltip--delayed-open-light.png
new file mode 100644
index 00000000..a84ac301
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tooltip--delayed-open-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-tooltip--icon-trigger-dark.png b/tests/visual/__screenshots__/react/components-tooltip--icon-trigger-dark.png
new file mode 100644
index 00000000..93146064
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tooltip--icon-trigger-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-tooltip--icon-trigger-light.png b/tests/visual/__screenshots__/react/components-tooltip--icon-trigger-light.png
new file mode 100644
index 00000000..ed1c48fd
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tooltip--icon-trigger-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-tooltip--placement-dark.png b/tests/visual/__screenshots__/react/components-tooltip--placement-dark.png
new file mode 100644
index 00000000..39ded6c7
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tooltip--placement-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-tooltip--placement-light.png b/tests/visual/__screenshots__/react/components-tooltip--placement-light.png
new file mode 100644
index 00000000..07765003
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tooltip--placement-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-tooltip--with-shortcut-dark.png b/tests/visual/__screenshots__/react/components-tooltip--with-shortcut-dark.png
new file mode 100644
index 00000000..9065b143
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tooltip--with-shortcut-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-tooltip--with-shortcut-light.png b/tests/visual/__screenshots__/react/components-tooltip--with-shortcut-light.png
new file mode 100644
index 00000000..9656c401
Binary files /dev/null and b/tests/visual/__screenshots__/react/components-tooltip--with-shortcut-light.png differ
diff --git a/tests/visual/__screenshots__/react/foundations-design-tokens--colors-dark.png b/tests/visual/__screenshots__/react/foundations-design-tokens--colors-dark.png
new file mode 100644
index 00000000..ce10e6c5
Binary files /dev/null and b/tests/visual/__screenshots__/react/foundations-design-tokens--colors-dark.png differ
diff --git a/tests/visual/__screenshots__/react/foundations-design-tokens--colors-light.png b/tests/visual/__screenshots__/react/foundations-design-tokens--colors-light.png
new file mode 100644
index 00000000..83536600
Binary files /dev/null and b/tests/visual/__screenshots__/react/foundations-design-tokens--colors-light.png differ
diff --git a/tests/visual/__screenshots__/react/foundations-design-tokens--radius-and-spacing-dark.png b/tests/visual/__screenshots__/react/foundations-design-tokens--radius-and-spacing-dark.png
new file mode 100644
index 00000000..4ebaee37
Binary files /dev/null and b/tests/visual/__screenshots__/react/foundations-design-tokens--radius-and-spacing-dark.png differ
diff --git a/tests/visual/__screenshots__/react/foundations-design-tokens--radius-and-spacing-light.png b/tests/visual/__screenshots__/react/foundations-design-tokens--radius-and-spacing-light.png
new file mode 100644
index 00000000..073356ba
Binary files /dev/null and b/tests/visual/__screenshots__/react/foundations-design-tokens--radius-and-spacing-light.png differ
diff --git a/tests/visual/__screenshots__/react/foundations-design-tokens--shadows-and-effects-dark.png b/tests/visual/__screenshots__/react/foundations-design-tokens--shadows-and-effects-dark.png
new file mode 100644
index 00000000..e8601fd6
Binary files /dev/null and b/tests/visual/__screenshots__/react/foundations-design-tokens--shadows-and-effects-dark.png differ
diff --git a/tests/visual/__screenshots__/react/foundations-design-tokens--shadows-and-effects-light.png b/tests/visual/__screenshots__/react/foundations-design-tokens--shadows-and-effects-light.png
new file mode 100644
index 00000000..cd1a27ae
Binary files /dev/null and b/tests/visual/__screenshots__/react/foundations-design-tokens--shadows-and-effects-light.png differ
diff --git a/tests/visual/__screenshots__/react/foundations-design-tokens--typography-dark.png b/tests/visual/__screenshots__/react/foundations-design-tokens--typography-dark.png
new file mode 100644
index 00000000..55091fa0
Binary files /dev/null and b/tests/visual/__screenshots__/react/foundations-design-tokens--typography-dark.png differ
diff --git a/tests/visual/__screenshots__/react/foundations-design-tokens--typography-light.png b/tests/visual/__screenshots__/react/foundations-design-tokens--typography-light.png
new file mode 100644
index 00000000..f87e3c56
Binary files /dev/null and b/tests/visual/__screenshots__/react/foundations-design-tokens--typography-light.png differ
diff --git a/tests/visual/angular.spec.ts b/tests/visual/angular.spec.ts
new file mode 100644
index 00000000..a962de48
--- /dev/null
+++ b/tests/visual/angular.spec.ts
@@ -0,0 +1,26 @@
+import { expect, test } from '@playwright/test';
+
+import {
+  ANGULAR_ORIGIN,
+  MODES,
+  openStory,
+  preparePage,
+  storyLocator,
+  visualStories,
+} from './storybook';
+
+const stories = visualStories('angular');
+
+test.describe('Angular visual regression', () => {
+  test.describe.configure({ mode: 'parallel' });
+
+  for (const story of stories) {
+    for (const mode of MODES) {
+      test(`${story.id} (${mode})`, async ({ page }) => {
+        await preparePage(page);
+        await openStory(page, ANGULAR_ORIGIN, story.id, mode);
+        await expect(storyLocator(page, story)).toHaveScreenshot(`${story.id}-${mode}.png`);
+      });
+    }
+  }
+});
diff --git a/tests/visual/fixtures/avatar.png b/tests/visual/fixtures/avatar.png
new file mode 100644
index 00000000..2912d1d3
Binary files /dev/null and b/tests/visual/fixtures/avatar.png differ
diff --git a/tests/visual/fixtures/photo.png b/tests/visual/fixtures/photo.png
new file mode 100644
index 00000000..5a78026c
Binary files /dev/null and b/tests/visual/fixtures/photo.png differ
diff --git a/tests/visual/parity.spec.ts b/tests/visual/parity.spec.ts
new file mode 100644
index 00000000..3dd2cd8e
--- /dev/null
+++ b/tests/visual/parity.spec.ts
@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test';
+
+import { assertParity } from './parity';
+import {
+  ANGULAR_ORIGIN,
+  MODES,
+  REACT_ORIGIN,
+  openStory,
+  preparePage,
+  screenshotStory,
+  visualStories,
+} from './storybook';
+
+const reactStories = visualStories('react');
+const angularIds = new Set(visualStories('angular').map((story) => story.id));
+const shared = reactStories.filter((story) => angularIds.has(story.id));
+
+test.describe('React / Angular visual parity', () => {
+  test.describe.configure({ mode: 'parallel' });
+
+  test('React and Angular share component stories to compare', () => {
+    expect(shared.length).toBeGreaterThan(0);
+  });
+
+  for (const story of shared) {
+    for (const mode of MODES) {
+      test(`${story.id} (${mode})`, async ({ page, context }) => {
+        const angularPage = await context.newPage();
+        await preparePage(page);
+        await preparePage(angularPage);
+        await Promise.all([
+          openStory(page, REACT_ORIGIN, story.id, mode),
+          openStory(angularPage, ANGULAR_ORIGIN, story.id, mode),
+        ]);
+
+        const [reactPng, angularPng] = await Promise.all([
+          screenshotStory(page, story),
+          screenshotStory(angularPage, story),
+        ]);
+
+        await assertParity(reactPng, angularPng, test.info());
+      });
+    }
+  }
+});
diff --git a/tests/visual/parity.ts b/tests/visual/parity.ts
new file mode 100644
index 00000000..1c757829
--- /dev/null
+++ b/tests/visual/parity.ts
@@ -0,0 +1,38 @@
+import { PNG } from 'pngjs';
+import pixelmatch from 'pixelmatch';
+import type { TestInfo } from '@playwright/test';
+
+/** Allow tiny rasterization differences (antialiasing, subpixel fonts) between frameworks. */
+export const MAX_PARITY_DIFF_RATIO = 0.03;
+
+export async function assertParity(
+  reactPng: Buffer,
+  angularPng: Buffer,
+  info: TestInfo,
+): Promise<void> {
+  const imgA = PNG.sync.read(reactPng);
+  const imgB = PNG.sync.read(angularPng);
+
+  if (imgA.width !== imgB.width || imgA.height !== imgB.height) {
+    await info.attach('react', { body: reactPng, contentType: 'image/png' });
+    await info.attach('angular', { body: angularPng, contentType: 'image/png' });
+    throw new Error(
+      `Size mismatch: React ${imgA.width}×${imgA.height} vs Angular ${imgB.width}×${imgB.height}`,
+    );
+  }
+
+  const diff = new PNG({ width: imgA.width, height: imgA.height });
+  const mismatched = pixelmatch(imgA.data, imgB.data, diff.data, imgA.width, imgA.height, {
+    threshold: 0.1,
+  });
+  const ratio = mismatched / (imgA.width * imgA.height);
+
+  if (ratio > MAX_PARITY_DIFF_RATIO) {
+    await info.attach('react', { body: reactPng, contentType: 'image/png' });
+    await info.attach('angular', { body: angularPng, contentType: 'image/png' });
+    await info.attach('diff', { body: PNG.sync.write(diff), contentType: 'image/png' });
+    throw new Error(
+      `Parity mismatch: ${mismatched} pixels (${(ratio * 100).toFixed(2)}%, allowed ${(MAX_PARITY_DIFF_RATIO * 100).toFixed(0)}%)`,
+    );
+  }
+}
diff --git a/tests/visual/react.spec.ts b/tests/visual/react.spec.ts
new file mode 100644
index 00000000..8e2825c0
--- /dev/null
+++ b/tests/visual/react.spec.ts
@@ -0,0 +1,26 @@
+import { expect, test } from '@playwright/test';
+
+import {
+  MODES,
+  REACT_ORIGIN,
+  openStory,
+  preparePage,
+  storyLocator,
+  visualStories,
+} from './storybook';
+
+const stories = visualStories('react');
+
+test.describe('React visual regression', () => {
+  test.describe.configure({ mode: 'parallel' });
+
+  for (const story of stories) {
+    for (const mode of MODES) {
+      test(`${story.id} (${mode})`, async ({ page }) => {
+        await preparePage(page);
+        await openStory(page, REACT_ORIGIN, story.id, mode);
+        await expect(storyLocator(page, story)).toHaveScreenshot(`${story.id}-${mode}.png`);
+      });
+    }
+  }
+});
diff --git a/tests/visual/serve-storybook.mjs b/tests/visual/serve-storybook.mjs
new file mode 100644
index 00000000..bf0e679c
--- /dev/null
+++ b/tests/visual/serve-storybook.mjs
@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+/**
+ * Tiny static file server for a built Storybook.
+ * Usage: node tests/visual/serve-storybook.mjs <dir> <port>
+ */
+import { createReadStream, existsSync, statSync } from 'node:fs';
+import { createServer } from 'node:http';
+import { extname, join, normalize, resolve, sep } from 'node:path';
+
+const MIME = {
+  '.css': 'text/css; charset=utf-8',
+  '.html': 'text/html; charset=utf-8',
+  '.ico': 'image/x-icon',
+  '.js': 'text/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.map': 'application/json; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+  '.txt': 'text/plain; charset=utf-8',
+  '.wasm': 'application/wasm',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+};
+
+const dir = resolve(process.argv[2] ?? '');
+const port = Number(process.argv[3]);
+
+if (!dir || !Number.isInteger(port)) {
+  console.error('Usage: node tests/visual/serve-storybook.mjs <dir> <port>');
+  process.exit(1);
+}
+
+if (!existsSync(join(dir, 'index.json'))) {
+  console.error(
+    `Storybook static build missing at ${dir} (no index.json).\nRun \`pnpm build-storybook\` first.`,
+  );
+  process.exit(1);
+}
+
+const root = resolve(dir) + sep;
+
+const server = createServer((req, res) => {
+  const url = new URL(req.url ?? '/', `http://127.0.0.1:${port}`);
+  const relative = decodeURIComponent(url.pathname);
+  const filePath = normalize(join(dir, relative === '/' ? 'index.html' : relative));
+
+  if (!filePath.startsWith(root) && filePath !== root.slice(0, -1)) {
+    res.writeHead(403).end('Forbidden');
+    return;
+  }
+
+  if (!existsSync(filePath) || !statSync(filePath).isFile()) {
+    res.writeHead(404).end('Not found');
+    return;
+  }
+
+  const type = MIME[extname(filePath)] ?? 'application/octet-stream';
+  res.writeHead(200, { 'Content-Type': type, 'Cache-Control': 'no-store' });
+  createReadStream(filePath).pipe(res);
+});
+
+server.listen(port, '127.0.0.1', () => {
+  console.log(`Serving ${dir} at http://127.0.0.1:${port}`);
+});
diff --git a/tests/visual/storybook.ts b/tests/visual/storybook.ts
new file mode 100644
index 00000000..d76f08ac
--- /dev/null
+++ b/tests/visual/storybook.ts
@@ -0,0 +1,212 @@
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+
+import type { Locator, Page } from '@playwright/test';
+
+export const REACT_ORIGIN = 'http://127.0.0.1:6008';
+export const ANGULAR_ORIGIN = 'http://127.0.0.1:6009';
+
+export const MODES = ['light', 'dark'] as const;
+export type Mode = (typeof MODES)[number];
+
+/** Frozen calendar / relative-time date so date stories don't drift month to month. */
+export const FROZEN_DATE = '2026-04-15T12:00:00.000Z';
+
+const VISUAL_TITLE_PREFIXES = ['Components/', 'Foundations/'];
+const SKIP_TITLES = new Set(['Components/Spinner']);
+
+const FIXTURES = path.join(process.cwd(), 'tests/visual/fixtures');
+
+const CURVE_FONT_FAMILIES = ['Source Sans 3 Variable', 'Source Sans 3', 'Geist Variable'] as const;
+
+const DATE_STORY = /calendar|date-picker|datepicker/i;
+
+export type StoryType = 'story' | 'docs';
+
+export type StoryEntry = {
+  id: string;
+  title: string;
+  name: string;
+  type: StoryType;
+  tags?: string[];
+};
+
+type StoryIndex = {
+  entries: Record<string, StoryEntry>;
+};
+
+export type Framework = 'react' | 'angular';
+
+export function loadIndex(framework: Framework): StoryIndex {
+  const file = path.join(process.cwd(), 'packages', framework, 'storybook-static', 'index.json');
+  if (!existsSync(file)) {
+    throw new Error(`Missing ${file}. Run \`pnpm build-storybook\` before visual tests.`);
+  }
+  return JSON.parse(readFileSync(file, 'utf8')) as StoryIndex;
+}
+
+export function visualStories(framework: Framework): StoryEntry[] {
+  return Object.values(loadIndex(framework).entries)
+    .filter((entry) => {
+      if (entry.type !== 'story') return false;
+      if (!VISUAL_TITLE_PREFIXES.some((prefix) => entry.title.startsWith(prefix))) return false;
+      if (entry.tags?.includes('skip-visual')) return false;
+      if (SKIP_TITLES.has(entry.title)) return false;
+      return true;
+    })
+    .sort((a, b) => a.id.localeCompare(b.id));
+}
+
+export function isFullPage(story: StoryEntry): boolean {
+  return story.tags?.includes('visual-fullpage') === true;
+}
+
+export function frameworkFromOrigin(origin: string): Framework {
+  return origin === ANGULAR_ORIGIN ? 'angular' : 'react';
+}
+
+async function waitForThemeMode(page: Page, mode: Mode): Promise<void> {
+  await page.waitForFunction(
+    (expectedMode) => {
+      const isDark = document.documentElement.classList.contains('dark');
+      return expectedMode === 'dark' ? isDark : !isDark;
+    },
+    mode,
+    { timeout: 10_000 },
+  );
+}
+
+async function loadCurveFonts(page: Page): Promise<void> {
+  await page.evaluate(async (families) => {
+    await document.fonts.ready;
+    for (const family of families) {
+      for (const weight of ['400', '500', '600']) {
+        await document.fonts.load(`${weight} 16px "${family}"`).catch(() => undefined);
+      }
+    }
+    await document.fonts.ready;
+  }, CURVE_FONT_FAMILIES);
+}
+
+/** Angular Storybook injects global CSS via webpack `styles` — light wait is enough. */
+async function waitForAngularStoryReady(page: Page, mode: Mode): Promise<void> {
+  await waitForThemeMode(page, mode);
+  await page.locator('#storybook-root').waitFor({ state: 'visible' });
+  await loadCurveFonts(page);
+}
+
+/** React Storybook sets `data-curve-visual-ready` from preview (fonts + tokens in-browser). */
+async function waitForReactStoryReady(page: Page, mode: Mode): Promise<void> {
+  await waitForThemeMode(page, mode);
+  await page.locator('#storybook-root').waitFor({ state: 'visible' });
+  await page.locator('html[data-curve-visual-ready="true"]').waitFor({ timeout: 25_000 });
+}
+
+async function waitForStoryReady(page: Page, mode: Mode, framework: Framework): Promise<void> {
+  if (framework === 'react') {
+    await waitForReactStoryReady(page, mode);
+  } else {
+    await waitForAngularStoryReady(page, mode);
+  }
+}
+
+/** Pin Date for calendar stories without Playwright's fake clock (that breaks React/Vite paint). */
+async function installFrozenDateIfNeeded(page: Page, storyId: string): Promise<void> {
+  if (!DATE_STORY.test(storyId)) {
+    return;
+  }
+  await page.addInitScript((iso) => {
+    const fixed = new Date(iso).getTime();
+    const NativeDate = Date;
+    function PatchedDate(
+      ...args: [] | [Date | number | string] | [number, number, number, ...number[]]
+    ) {
+      if (args.length === 0) {
+        return new NativeDate(fixed);
+      }
+      return new NativeDate(...args);
+    }
+    PatchedDate.now = () => fixed;
+    PatchedDate.parse = NativeDate.parse;
+    PatchedDate.UTC = NativeDate.UTC;
+    PatchedDate.prototype = NativeDate.prototype;
+    // @ts-expect-error — frozen clock for date-picker stories only
+    Date = PatchedDate;
+  }, FROZEN_DATE);
+}
+
+/**
+ * Intercept flaky remote images and prefer reduced motion before the Storybook iframe loads.
+ */
+export async function preparePage(page: Page): Promise<void> {
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+
+  await page.route('https://example.com/**', (route) =>
+    route.fulfill({ status: 404, body: 'not found' }),
+  );
+
+  await page.route(
+    /https:\/\/(i\.pravatar\.cc|images\.unsplash\.com|github\.com)\//,
+    async (route) => {
+      const url = route.request().url();
+      const fixture = url.includes('unsplash.com') ? 'photo.png' : 'avatar.png';
+      await route.fulfill({
+        path: path.join(FIXTURES, fixture),
+        contentType: 'image/png',
+      });
+    },
+  );
+}
+
+export async function openStory(
+  page: Page,
+  origin: string,
+  storyId: string,
+  mode: Mode,
+): Promise<void> {
+  const framework = frameworkFromOrigin(origin);
+  await installFrozenDateIfNeeded(page, storyId);
+
+  const url = new URL('/iframe.html', origin);
+  url.searchParams.set('id', storyId);
+  url.searchParams.set('viewMode', 'story');
+  url.searchParams.set('globals', `theme:default;mode:${mode}`);
+
+  await page.goto(url.toString(), { waitUntil: 'load', timeout: 60_000 });
+  await page.waitForFunction(() => document.body.classList.contains('sb-show-main'));
+  await waitForStoryReady(page, mode, framework);
+
+  await page.evaluate(async () => {
+    await Promise.all(
+      [...document.images].map((img) => {
+        if (img.complete) return undefined;
+        return new Promise<void>((resolve) => {
+          img.addEventListener('load', () => resolve(), { once: true });
+          img.addEventListener('error', () => resolve(), { once: true });
+        });
+      }),
+    );
+  });
+
+  const error = page.locator('#error-message, .sb-errordisplay');
+  if (
+    await error
+      .first()
+      .isVisible()
+      .catch(() => false)
+  ) {
+    throw new Error(`Story ${storyId} failed to render:\n${await error.first().innerText()}`);
+  }
+}
+
+export function storyLocator(page: Page, story: StoryEntry): Locator | Page {
+  return isFullPage(story) ? page : page.locator('#storybook-root');
+}
+
+export async function screenshotStory(page: Page, story: StoryEntry): Promise<Buffer> {
+  const options = { animations: 'disabled' as const, caret: 'hide' as const };
+  if (isFullPage(story)) {
+    return page.screenshot(options);
+  }
+  return page.locator('#storybook-root').screenshot(options);
+}
diff --git a/tests/visual/tsconfig.json b/tests/visual/tsconfig.json
new file mode 100644
index 00000000..85ad6df3
--- /dev/null
+++ b/tests/visual/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "resolveJsonModule": true,
+    "noEmit": true
+  },
+  "include": ["./**/*.ts", "../../playwright.config.ts"]
+}