### Install registry items

Source: https://tuiparts.sh/docs/registry

Commands to install items using either a namespace or a direct URL.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/checkbox
```

```bash
pnpm dlx shadcn@4.13.0 add https://tuiparts.sh/r/react/checkbox.json
```

--------------------------------

### Install Checkbox

Source: https://tuiparts.sh/docs/catalog/checkbox

Installation commands for different framework implementations.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/checkbox
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/checkbox
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/checkbox
```

--------------------------------

### Install and register a theme preset

Source: https://tuiparts.sh/docs/theming

Install a preset via the CLI and register it within the application to activate it.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/theme-catppuccin
```

```ts
import { theme } from "./components/ui/theme";
import { catppuccin } from "./themes/catppuccin";

theme.register("catppuccin", catppuccin);
theme.setActive("catppuccin");
```

--------------------------------

### Install Toggle package

Source: https://tuiparts.sh/docs/catalog/toggle

Install the Toggle component for the desired framework using the shadcn CLI.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/toggle
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/toggle
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/toggle
```

--------------------------------

### Define item addresses

Source: https://tuiparts.sh/docs/registry

Examples of runtime-specific Recipe addresses used for installation.

```text
core/checkbox
react/checkbox
solid/checkbox
```

--------------------------------

### Install Dialog components

Source: https://tuiparts.sh/docs/catalog/dialog

Use the shadcn CLI to add the Dialog component to your project.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/dialog
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/dialog
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/dialog
```

--------------------------------

### Install Checkbox Recipe

Source: https://tuiparts.sh/docs/quickstart

Use the shadcn CLI to add the checkbox recipe to your project.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/checkbox
```

--------------------------------

### Install Button components

Source: https://tuiparts.sh/docs/catalog/button

Use the shadcn CLI to add the Button component for your specific framework.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/button
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/button
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/button
```

--------------------------------

### Install Tabs package

Source: https://tuiparts.sh/docs/catalog/tabs

Use the CLI to add the Tabs component to your project.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/tabs
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/tabs
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/tabs
```

--------------------------------

### Install Input components

Source: https://tuiparts.sh/docs/catalog/input

Commands to add the Input component for different frameworks using the shadcn CLI.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/input
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/input
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/input
```

--------------------------------

### Install Switch components

Source: https://tuiparts.sh/docs/catalog/switch

Commands to add the Switch component to React, Solid, or Core projects.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/switch
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/switch
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/switch
```

--------------------------------

### Install Accordion packages

Source: https://tuiparts.sh/docs/catalog/accordion

Use the shadcn CLI to add the Accordion component for your specific framework.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/accordion
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/accordion
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/accordion
```

--------------------------------

### Use Checkbox in Core

Source: https://tuiparts.sh/docs/catalog/checkbox

Implementation example for the Core library.

```ts
import { createCheckbox } from "./components/ui/checkbox";

const checkbox = createCheckbox(ctx, {
  label: "Enable notifications",
  defaultChecked: true,
  onCheckedChange: (checked) => console.log({ checked }),
});

parent.add(checkbox);
```

--------------------------------

### Use Checkbox in React and Solid

Source: https://tuiparts.sh/docs/catalog/checkbox

Implementation example for React and Solid frameworks.

```tsx
import { Checkbox } from "./components/ui/checkbox";

<Checkbox
  label="Enable notifications"
  defaultChecked
  onCheckedChange={(checked) => console.log({ checked })}
/>;
```

--------------------------------

### Install Number Field

Source: https://tuiparts.sh/docs/catalog/number-field

Install the Number Field component for React, Solid, or Core using the shadcn CLI.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/number-field
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/number-field
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/number-field
```

--------------------------------

### Install Collapsible

Source: https://tuiparts.sh/docs/catalog/collapsible

Commands to add the Collapsible component to your project using the shadcn CLI.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/collapsible
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/collapsible
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/collapsible
```

--------------------------------

### Install Radio Group

Source: https://tuiparts.sh/docs/catalog/radio-group

Use the shadcn CLI to add the Radio Group component to your project.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/radio-group
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/radio-group
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/radio-group
```

--------------------------------

### Install Badge components

Source: https://tuiparts.sh/docs/catalog/badge

Use the shadcn CLI to add the Badge recipe to your project for React, Solid, or Core.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/badge
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/badge
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/badge
```

--------------------------------

### Install OpenTUI Primitive packages

Source: https://tuiparts.sh/docs/primitives

Use these commands to add the necessary Primitive package to your existing OpenTUI project.

```bash
pnpm add @tuiparts/react
```

```bash
pnpm add @tuiparts/solid
```

```bash
pnpm add @tuiparts/core
```

--------------------------------

### Install Textarea components

Source: https://tuiparts.sh/docs/catalog/textarea

Commands to add the Textarea component to React, Solid, or Core projects using the shadcn CLI.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/textarea
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/textarea
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/textarea
```

--------------------------------

### Install Toggle Group packages

Source: https://tuiparts.sh/docs/catalog/toggle-group

Use the shadcn CLI to add the Toggle Group component for React, Solid, or Core.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/toggle-group
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/toggle-group
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/toggle-group
```

--------------------------------

### Review and update registry items

Source: https://tuiparts.sh/docs/registry

Commands to check for updates, view changes, or perform a dry run of an installation.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/checkbox
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/checkbox --view
pnpm dlx shadcn@4.13.0 add @tuiparts/react/checkbox --diff
pnpm dlx shadcn@4.13.0 add @tuiparts/react/checkbox --dry-run
```

--------------------------------

### Install Checkbox Group

Source: https://tuiparts.sh/docs/catalog/checkbox-group

Commands to add the Checkbox Group component to your project using shadcn.

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/react/checkbox-group
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/solid/checkbox-group
```

```bash
pnpm dlx shadcn@4.13.0 add @tuiparts/core/checkbox-group
```

--------------------------------

### Implement a Checkbox component

Source: https://tuiparts.sh/

Example of using the Checkbox primitive in a React application.

```typescript
import { Checkbox as CheckboxPrimitive } from "@tuiparts/react/checkbox";

export function Checkbox() {
  return (
    <CheckboxPrimitive.Root defaultChecked flexDirection="row" gap={1}>
      {(state) => (
        <>
          <CheckboxPrimitive.Indicator>
            <text content="✓" />
          </CheckboxPrimitive.Indicator>
          <text content={state.checked ? "Enabled" : "Disabled"} />
        </>
      )}
    </CheckboxPrimitive.Root>
  );
}
```

--------------------------------

### Compose the Radio Group primitive

Source: https://tuiparts.sh/docs/primitives/radio-group

Examples of implementing a Radio Group in React, Solid, and Core frameworks.

```tsx
import { Radio } from "@tuiparts/react/radio";
import { RadioGroup } from "@tuiparts/react/radio-group";

<RadioGroup defaultValue="dark" flexDirection="column" gap={1}>
  {[
    ["dark", "Dark"],
    ["light", "Light"],
    ["system", "System"],
  ].map(([value, label]) => (
    <Radio.Root key={value} value={value} flexDirection="row" gap={1}>
      <Radio.Indicator>
        <text content="●" />
      </Radio.Indicator>
      <text content={label} />
    </Radio.Root>
  ))}
</RadioGroup>;
```

```tsx
import { Radio } from "@tuiparts/solid/radio";
import { RadioGroup } from "@tuiparts/solid/radio-group";

<RadioGroup defaultValue="dark" flexDirection="column" gap={1}>
  <Radio.Root value="dark" flexDirection="row" gap={1}>
    <Radio.Indicator>
      <text content="●" />
    </Radio.Indicator>
    <text content="Dark" />
  </Radio.Root>
  <Radio.Root value="light" flexDirection="row" gap={1}>
    <Radio.Indicator>
      <text content="●" />
    </Radio.Indicator>
    <text content="Light" />
  </Radio.Root>
</RadioGroup>;
```

```ts
import { TextRenderable } from "@opentui/core";
import { RadioGroupRenderable } from "@tuiparts/core/radio-group";
import {
  RadioIndicatorRenderable,
  RadioRootRenderable,
} from "@tuiparts/core/radio";

const group = new RadioGroupRenderable(ctx, { defaultValue: "dark", gap: 1 });

for (const value of ["dark", "light"]) {
  const radio = new RadioRootRenderable(ctx, { store: group.store, value });
  const indicator = new RadioIndicatorRenderable(ctx, { radio });
  indicator.add(new TextRenderable(ctx, { content: "●" }));
  radio.add(indicator);
  radio.add(new TextRenderable(ctx, { content: value }));
  group.add(radio);
}

parent.add(group);
```

--------------------------------

### Compose Checkbox Group

Source: https://tuiparts.sh/docs/primitives/checkbox-group

Examples of implementing a grouped checkbox structure across different frameworks.

```tsx
import { Checkbox } from "@tuiparts/react/checkbox";
import { CheckboxGroup } from "@tuiparts/react/checkbox-group";

<CheckboxGroup defaultValue={["email"]} flexDirection="column" gap={1}>
  {[
    ["email", "Email notifications"],
    ["sms", "SMS notifications"],
  ].map(([value, label]) => (
    <Checkbox.Root key={value} value={value} flexDirection="row" gap={1}>
      <Checkbox.Indicator>
        <text content="✓" />
      </Checkbox.Indicator>
      <text content={label} />
    </Checkbox.Root>
  ))}
</CheckboxGroup>;
```

```tsx
import { Checkbox } from "@tuiparts/solid/checkbox";
import { CheckboxGroup } from "@tuiparts/solid/checkbox-group";

<CheckboxGroup defaultValue={["email"]} flexDirection="column" gap={1}>
  <Checkbox.Root value="email" flexDirection="row" gap={1}>
    <Checkbox.Indicator>
      <text content="✓" />
    </Checkbox.Indicator>
    <text content="Email notifications" />
  </Checkbox.Root>
  <Checkbox.Root value="sms" flexDirection="row" gap={1}>
    <Checkbox.Indicator>
      <text content="✓" />
    </Checkbox.Indicator>
    <text content="SMS notifications" />
  </Checkbox.Root>
</CheckboxGroup>;
```

```ts
import { TextRenderable } from "@opentui/core";
import {
  CheckboxIndicatorRenderable,
  CheckboxRootRenderable,
} from "@tuiparts/core/checkbox";
import { CheckboxGroupRenderable } from "@tuiparts/core/checkbox-group";

const group = new CheckboxGroupRenderable(ctx, {
  defaultValue: ["email"],
  flexDirection: "column",
  gap: 1,
});
const email = new CheckboxRootRenderable(ctx, {
  group: group.store,
  value: "email",
});
const indicator = new CheckboxIndicatorRenderable(ctx, {
  store: email.store,
});
indicator.add(new TextRenderable(ctx, { content: "✓" }));
email.add(indicator);
email.add(new TextRenderable(ctx, { content: "Email notifications" }));
group.add(email);
parent.add(group);
```

--------------------------------

### Use Dialog in React and Solid

Source: https://tuiparts.sh/docs/catalog/dialog

Import the Dialog components and compose them within the Dialog root.

```tsx
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "./components/ui/dialog";

<Dialog>
  <DialogTrigger>
    <text content="Open settings" />
  </DialogTrigger>
  <DialogContent>
    <DialogTitle content="Settings" />
    <DialogDescription content="Change this project's options." />
    <DialogClose>
      <text content="Close" />
    </DialogClose>
  </DialogContent>
</Dialog>;
```

--------------------------------

### theme.follow(renderer)

Source: https://tuiparts.sh/docs/theming

Synchronizes theme with the renderer's terminal color mode.

```APIDOC
### theme.follow(renderer)

Configures the theme to follow the specified renderer's terminal color mode.
```

--------------------------------

### Use Input in Core

Source: https://tuiparts.sh/docs/catalog/input

Use the createInput function to create an input renderable in the Core framework.

```ts
import { createInput } from "./components/ui/input";

const input = createInput(ctx, {
  placeholder: "Search Recipes…",
  onInput: (value) => setQuery(value),
  onSubmit: (value) => search(value),
});

parent.add(input);
```

--------------------------------

### Use Badge in Core

Source: https://tuiparts.sh/docs/catalog/badge

Use the createBadge factory to generate a BoxRenderable, then add it to the parent container.

```ts
import { createBadge } from "./components/ui/badge";

const status = createBadge(ctx, {
  label: "Passing",
  intent: "success",
});

parent.add(status);
```

--------------------------------

### Use Textarea in React and Solid

Source: https://tuiparts.sh/docs/catalog/textarea

Basic implementation of the Textarea component with initial value and submission handling.

```tsx
import { Textarea } from "./components/ui/textarea";

<Textarea
  initialValue="Release notes"
  placeholder="Describe this release…"
  onSubmit={() => publish()}
/>;
```

--------------------------------

### Build the registry

Source: https://tuiparts.sh/docs/registry

Command for registry maintainers to generate payloads from the repository's registry.json.

```bash
pnpm registry:build --output apps/www/public/r
```

--------------------------------

### Implement Accordion in Core

Source: https://tuiparts.sh/docs/catalog/accordion

Use factory functions to manually construct the accordion structure and manage the ownership chain.

```ts
import { TextRenderable } from "@opentui/core";
import {
  createAccordion,
  createAccordionContent,
  createAccordionItem,
  createAccordionTrigger,
} from "./components/ui/accordion";

const accordion = createAccordion(ctx, { defaultValue: ["shipping"] });
const item = createAccordionItem(ctx, accordion, { value: "shipping" });
const trigger = createAccordionTrigger(ctx, item, {
  label: "How long does shipping take?",
});
const content = createAccordionContent(ctx, item);
content.add(new TextRenderable(ctx, {
  content: "Most orders arrive within three business days.",
}));

item.add(trigger);
item.add(content);
accordion.add(item);
parent.add(accordion);
```

--------------------------------

### Implement Tabs in Core

Source: https://tuiparts.sh/docs/catalog/tabs

Use the imperative factory functions to construct the tabs structure and add content panels.

```ts
import { TextRenderable } from "@opentui/core";
import {
  createTabs,
  createTabsList,
  createTabsPanel,
  createTabsTab,
} from "./components/ui/tabs";

const tabs = createTabs(ctx, { defaultValue: "overview" });
const list = createTabsList(ctx, tabs);

list.add(createTabsTab(ctx, tabs, { label: "Overview", value: "overview" }));
list.add(createTabsTab(ctx, tabs, { label: "Activity", value: "activity" }));

const overview = createTabsPanel(ctx, tabs, { value: "overview" });
overview.add(new TextRenderable(ctx, { content: "Summary" }));
const activity = createTabsPanel(ctx, tabs, { value: "activity" });
activity.add(new TextRenderable(ctx, { content: "Recent activity" }));

tabs.add(list);
tabs.add(overview);
tabs.add(activity);
parent.add(tabs);
```

--------------------------------

### theme.get()

Source: https://tuiparts.sh/docs/theming

Retrieves the current deep-frozen token snapshot.

```APIDOC
### theme.get()

Returns the current deep-frozen token snapshot of the active theme.
```

--------------------------------

### Use Button in Core

Source: https://tuiparts.sh/docs/catalog/button

Use the createButton factory to instantiate a button and add it to a parent context.

```ts
import { createButton } from "./components/ui/button";

const button = createButton(ctx, {
  label: "Save changes",
  intent: "primary",
  size: "comfortable",
  onPress: () => save(),
});

parent.add(button);
```

--------------------------------

### Use Toggle in Core

Source: https://tuiparts.sh/docs/catalog/toggle

Create a toggle instance using the factory function and add it to the parent context.

```ts
import { createToggle } from "./components/ui/toggle";

const bold = createToggle(ctx, {
  label: "Bold",
  defaultPressed: true,
});

parent.add(bold);
```

--------------------------------

### theme.register(name, definition)

Source: https://tuiparts.sh/docs/theming

Registers a new theme definition.

```APIDOC
### theme.register(name, definition)

Adds a new theme definition or replaces an existing one with the same name.
```

--------------------------------

### Use Button in React and Solid

Source: https://tuiparts.sh/docs/catalog/button

Import the Button component and pass convenience props like label, intent, and size.

```tsx
import { Button } from "./components/ui/button";

<Button
  label="Save changes"
  intent="primary"
  size="comfortable"
  onPress={() => save()}
/>;
```

--------------------------------

### theme.override(partial)

Source: https://tuiparts.sh/docs/theming

Applies a top-priority partial overlay to the theme.

```APIDOC
### theme.override(partial)

Applies a top-priority partial overlay. Passing `undefined` clears the current override.
```

--------------------------------

### Use Input in React and Solid

Source: https://tuiparts.sh/docs/catalog/input

Import and use the Input component, which retains the Primitive's props.

```tsx
import { Input } from "./components/ui/input";

<Input
  placeholder="Search Recipes…"
  onInput={(value) => setQuery(value)}
  onSubmit={(value) => search(value)}
/>;
```

--------------------------------

### Implement Tabs in React and Solid

Source: https://tuiparts.sh/docs/catalog/tabs

Use the declarative component API to define tabs and their associated content panels.

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger label="Overview" value="overview" />
    <TabsTrigger label="Activity" value="activity" />
  </TabsList>
  <TabsContent value="overview">
    <text content="Summary" />
  </TabsContent>
  <TabsContent value="activity">
    <text content="Recent activity" />
  </TabsContent>
</Tabs>;
```

--------------------------------

### Implement Switch in Core

Source: https://tuiparts.sh/docs/catalog/switch

Usage of the createSwitch factory to generate a switch component in Core.

```ts
import { createSwitch } from "./components/ui/switch";

const colorMode = createSwitch(ctx, {
  label: "Dark mode",
  density: "comfortable",
  defaultChecked: true,
});

parent.add(colorMode);
```

--------------------------------

### Define the Tokens interface

Source: https://tuiparts.sh/docs/theming

The Tokens interface establishes the semantic vocabulary for colors, glyphs, borders, and density used by starter Recipes.

```ts
export interface Tokens {
  colors: {
    background: ColorInput;
    surface: ColorInput;
    foreground: ColorInput;
    mutedForeground: ColorInput;
    border: ColorInput;
    focus: ColorInput;
    primary: ColorInput;
    primaryForeground: ColorInput;
    destructive: ColorInput;
    destructiveForeground: ColorInput;
    success: ColorInput;
    successForeground: ColorInput;
    warning: ColorInput;
    warningForeground: ColorInput;
    disabled: ColorInput;
    disabledForeground: ColorInput;
  };
  glyphs: {
    check: string;
    radio: string;
    thumb: string;
    track: string;
  };
  borders: {
    style: "single" | "rounded" | "double" | "heavy";
  };
  density: {
    paddingX: number;
    comfortablePaddingX: number;
  };
}
```

--------------------------------

### Root Options

Source: https://tuiparts.sh/docs/primitives/collapsible

Configuration options available for the Collapsible.Root component.

```APIDOC
## Root Options

- **open** (boolean) - Controlled state for the open status.
- **defaultOpen** (boolean) - Initial state for the open status.
- **onOpenChange** (function) - Callback triggered when the open state changes.
- **disabled** (boolean) - Disables the collapsible functionality.
```

--------------------------------

### Implement Radio Group in Core

Source: https://tuiparts.sh/docs/catalog/radio-group

Use createRadioGroup and createRadioGroupItem to manage state explicitly. Each item must receive the group's store.

```ts
import {
  createRadioGroup,
  createRadioGroupItem,
} from "./components/ui/radio-group";

const colorMode = createRadioGroup(ctx, { defaultValue: "dark" });

colorMode.add(
  createRadioGroupItem(ctx, colorMode.store, {
    value: "dark",
    label: "Dark",
  }),
);
colorMode.add(
  createRadioGroupItem(ctx, colorMode.store, {
    value: "light",
    label: "Light",
  }),
);

parent.add(colorMode);
```

--------------------------------

### Use Dialog in Core

Source: https://tuiparts.sh/docs/catalog/dialog

Imperatively assemble the Dialog using the Core API and helper functions.

```ts
import { TextRenderable } from "@opentui/core";
import {
  addDialogClose,
  addDialogDescription,
  addDialogTitle,
  createDialog,
} from "./components/ui/dialog";

const dialog = createDialog(ctx);
dialog.trigger.add(new TextRenderable(ctx, { content: "Open settings" }));
addDialogTitle(ctx, dialog, "Settings");
addDialogDescription(ctx, dialog, "Change this project's options.");
addDialogClose(ctx, dialog, "Close");

parent.add(dialog.root);
parent.add(dialog.portal);
```

--------------------------------

### tint(base, overlay, alpha)

Source: https://tuiparts.sh/docs/theming

Blends two OpenTUI colors.

```APIDOC
### tint(base, overlay, alpha)

Blends two OpenTUI colors based on the provided alpha value.
```

--------------------------------

### Compose Switch primitive

Source: https://tuiparts.sh/docs/primitives/switch

Use Root and Thumb components to build a switch. React and Solid use context for state, while Core requires explicit store subscription.

```tsx
import { Switch } from "@tuiparts/react/switch";

<Switch.Root defaultChecked flexDirection="row" gap={1}>
  {(state) => (
    <>
      <box width={5}>
        <text content="─────" />
        <Switch.Thumb position="absolute" left={state.checked ? 4 : 0}>
          <text content="●" />
        </Switch.Thumb>
      </box>
      <text content="Dark mode" />
    </>
  )}
</Switch.Root>;
```

```tsx
import { Switch } from "@tuiparts/solid/switch";

<Switch.Root defaultChecked flexDirection="row" gap={1}>
  {(state) => (
    <>
      <box width={5}>
        <text content="─────" />
        <Switch.Thumb position="absolute" left={state.checked ? 4 : 0}>
          <text content="●" />
        </Switch.Thumb>
      </box>
      <text content="Dark mode" />
    </>
  )}
</Switch.Root>;
```

```ts
import { TextRenderable } from "@opentui/core";
import {
  SwitchRootRenderable,
  SwitchThumbRenderable,
} from "@tuiparts/core/switch";

const root = new SwitchRootRenderable(ctx, { defaultChecked: true, gap: 1 });
const thumb = new SwitchThumbRenderable(ctx, { store: root.store });

thumb.add(new TextRenderable(ctx, { content: "●" }));
root.add(thumb);
root.add(new TextRenderable(ctx, { content: "Dark mode" }));
parent.add(root);
```

--------------------------------

### Use Badge in React and Solid

Source: https://tuiparts.sh/docs/catalog/badge

Import the Badge component and pass label and intent props to render the status label.

```tsx
import { Badge } from "./components/ui/badge";

<Badge label="Passing" intent="success" />
<Badge label="Deprecated" intent="danger" size="comfortable" />
```

--------------------------------

### Import Switch components

Source: https://tuiparts.sh/docs/primitives/switch

Import the Switch component from the framework-specific package.

```ts
import { Switch } from "@tuiparts/react/switch";
```

--------------------------------

### Implement Switch in React and Solid

Source: https://tuiparts.sh/docs/catalog/switch

Usage of the Switch component with label, density, and symbol configuration.

```tsx
import { Switch } from "./components/ui/switch";

<Switch
  label="Dark mode"
  density="comfortable"
  symbols="round"
  defaultChecked
/>;
```

--------------------------------

### Tabs Configuration Options

Source: https://tuiparts.sh/docs/primitives/tabs

Configuration options for the Tabs Root, Tab, and Panel components.

```APIDOC
## Configuration Options

### Root Options
- `value`
- `defaultValue`
- `onValueChange`
- `activationMode`
- `orientation`
- `loopFocus`
- `disabled`

### Tab Options
- `value` (Required)
- `disabled` (Optional)
- `select()` (Action)

### Panel Options
- `value` (Required)
- `keepMounted` (Optional - React/Solid only)
```

--------------------------------

### Import Input Primitive

Source: https://tuiparts.sh/docs/primitives/input

Import the Input component for the specific runtime being used.

```ts
import { Input } from "@tuiparts/react/input";
```

--------------------------------

### Import Radio Group components

Source: https://tuiparts.sh/docs/primitives/radio-group

Import the necessary components from the respective framework subpath.

```ts
import { Radio } from "@tuiparts/react/radio";
import { RadioGroup } from "@tuiparts/react/radio-group";
```

--------------------------------

### Button Recipe API

Source: https://tuiparts.sh/docs/catalog/button

The Button component accepts specific props to configure its appearance and behavior.

```APIDOC
## Button Recipe API

### Properties

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | - | Text rendered inside the Button. |
| `intent?` | `"neutral" | "primary"` | `"primary"` | Uses either the surface or primary theme token pair. |
| `size?` | `"compact" | "comfortable"` | `"compact"` | Selects the horizontal padding token. |
```

--------------------------------

### Import Textarea Primitive

Source: https://tuiparts.sh/docs/primitives/textarea

Import the Textarea component for specific framework runtimes.

```ts
import { Textarea } from "@tuiparts/react/textarea";
```

--------------------------------

### Use Textarea in Core

Source: https://tuiparts.sh/docs/catalog/textarea

Implementation of the Textarea using the Core API, requiring a context and manual addition to a parent container.

```ts
import { createTextarea } from "./components/ui/textarea";

const textarea = createTextarea(ctx, {
  initialValue: "Release notes",
  placeholder: "Describe this release…",
  onSubmit: () => publish(textarea.plainText),
});

parent.add(textarea);
```

--------------------------------

### Compose Input Primitive

Source: https://tuiparts.sh/docs/primitives/input

Initialize the Input component or renderable with configuration options for placeholders, styling, and event handling.

```tsx
import { Input } from "@tuiparts/react/input";

<Input
  placeholder="Search commands…"
  focusedBackgroundColor="#20242c"
  onInput={(value) => setQuery(value)}
  onSubmit={(value) => runSearch(value)}
/>;
```

```tsx
import { Input } from "@tuiparts/solid/input";

<Input
  placeholder="Search commands…"
  focusedBackgroundColor="#20242c"
  onInput={(value) => setQuery(value)}
  onSubmit={(value) => runSearch(value)}
/>;
```

```ts
import { InputRenderable } from "@tuiparts/core/input";

const input = new InputRenderable(ctx, {
  placeholder: "Search commands…",
  focusedBackgroundColor: "#20242c",
  onInput: (value) => setQuery(value),
  onSubmit: (value) => runSearch(value),
});

parent.add(input);
```

--------------------------------

### theme.subscribe(listener)

Source: https://tuiparts.sh/docs/theming

Subscribes to resolved theme changes.

```APIDOC
### theme.subscribe(listener)

Subscribes to resolved theme changes. Returns an unsubscribe function to stop listening for updates.
```

--------------------------------

### Import Toggle Group components

Source: https://tuiparts.sh/docs/primitives/toggle-group

Import the necessary components from the respective framework subpaths.

```ts
import { ToggleGroup } from "@tuiparts/react/toggle-group";
import { Toggle } from "@tuiparts/react/toggle";
```

--------------------------------

### Toggle Component API

Source: https://tuiparts.sh/docs/catalog/toggle

Documentation for the Toggle component properties and usage.

```APIDOC
## Toggle Component

### Description
A two-state action component that maintains a pressed or unpressed state.

### Props
- **label** (string) - Required - Text rendered inside the Toggle.
- **defaultPressed** (boolean) - Optional - The initial pressed state for uncontrolled components.
- **pressed** (boolean) - Optional - The controlled pressed state.
- **onPressedChange** (function) - Optional - Callback function triggered when the pressed state changes. Receives `(pressed, details)` where details contains the source of the change.
```

--------------------------------

### Implement Accordion in React and Solid

Source: https://tuiparts.sh/docs/catalog/accordion

Use the component-based API to define accordion items and their content.

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "./components/ui/accordion";

<Accordion defaultValue={["shipping"]}>
  <AccordionItem value="shipping">
    <AccordionTrigger label="How long does shipping take?" />
    <AccordionContent>
      <text content="Most orders arrive within three business days." />
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="returns">
    <AccordionTrigger label="Can I return an order?" />
    <AccordionContent>
      <text content="Unused items can be returned within 30 days." />
    </AccordionContent>
  </AccordionItem>
</Accordion>;
```

--------------------------------

### Import Toggle

Source: https://tuiparts.sh/docs/primitives/toggle

Import the Toggle component for the desired runtime.

```ts
import { Toggle } from "@tuiparts/react/toggle";
```

--------------------------------

### theme.setMode(mode)

Source: https://tuiparts.sh/docs/theming

Sets the active color mode.

```APIDOC
### theme.setMode(mode)

Sets the theme mode to "system", "dark", or "light".
```

--------------------------------

### Import Dialog primitive

Source: https://tuiparts.sh/docs/primitives/dialog

Import the Dialog subpath from the appropriate package for your runtime.

```ts
import { Dialog } from "@tuiparts/react/dialog";
```

--------------------------------

### Implement Toggle Group in Core

Source: https://tuiparts.sh/docs/catalog/toggle-group

Use the createToggleGroup and createToggleGroupItem factories to manage group state and items.

```ts
import {
  createToggleGroup,
  createToggleGroupItem,
} from "./components/ui/toggle-group";

const alignment = createToggleGroup(ctx, {
  defaultValue: ["left"],
});

alignment.add(
  createToggleGroupItem(ctx, alignment.store, {
    value: "left",
    label: "Left",
  }),
);
alignment.add(
  createToggleGroupItem(ctx, alignment.store, {
    value: "center",
    label: "Center",
  }),
);

parent.add(alignment);
```

--------------------------------

### Compose Tabs primitive

Source: https://tuiparts.sh/docs/primitives/tabs

Compose the Tabs primitive using React, Solid, or Core renderables. Framework adapters provide the Root Store through context, while Core callers must pass the store manually.

```tsx
import { Tabs } from "@tuiparts/react/tabs";

<Tabs.Root defaultValue="overview">
  <Tabs.List flexDirection="row" gap={1}>
    <Tabs.Tab value="overview">
      {(state) => <text content={state.selected ? "[Overview]" : "Overview"} />}
    </Tabs.Tab>
    <Tabs.Tab value="activity">
      {(state) => <text content={state.selected ? "[Activity]" : "Activity"} />}
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="overview">
    <text content="Summary" />
  </Tabs.Panel>
  <Tabs.Panel value="activity">
    <text content="Recent activity" />
  </Tabs.Panel>
</Tabs.Root>;
```

```tsx
import { Tabs } from "@tuiparts/solid/tabs";

<Tabs.Root defaultValue="overview">
  <Tabs.List flexDirection="row" gap={1}>
    <Tabs.Tab value="overview">
      {(state) => <text content={state.selected ? "[Overview]" : "Overview"} />}
    </Tabs.Tab>
    <Tabs.Tab value="activity">
      {(state) => <text content={state.selected ? "[Activity]" : "Activity"} />}
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="overview">
    <text content="Summary" />
  </Tabs.Panel>
  <Tabs.Panel value="activity">
    <text content="Recent activity" />
  </Tabs.Panel>
</Tabs.Root>;
```

```ts
import { TextRenderable } from "@opentui/core";
import {
  TabsListRenderable,
  TabsPanelRenderable,
  TabsRootRenderable,
  TabsTabRenderable,
} from "@tuiparts/core/tabs";

const root = new TabsRootRenderable(ctx, { defaultValue: "overview" });
const list = new TabsListRenderable(ctx, {
  store: root.store,
  flexDirection: "row",
  gap: 1,
});

for (const value of ["overview", "activity"]) {
  const tab = new TabsTabRenderable(ctx, { store: root.store, value });
  tab.add(new TextRenderable(ctx, { content: value }));
  list.add(tab);
}

const overview = new TabsPanelRenderable(ctx, {
  store: root.store,
  value: "overview",
});
overview.add(new TextRenderable(ctx, { content: "Summary" }));
const activity = new TabsPanelRenderable(ctx, {
  store: root.store,
  value: "activity",
});
activity.add(new TextRenderable(ctx, { content: "Recent activity" }));

root.add(list);
root.add(overview);
root.add(activity);
parent.add(root);
```

--------------------------------

### Tabs API Components

Source: https://tuiparts.sh/docs/primitives/tabs

Overview of the available components and stores for Tabs across different frameworks.

```APIDOC
## Tabs API Components

### React and Solid
- `Tabs.Root`
- `Tabs.List`
- `Tabs.Tab`
- `Tabs.Panel`
- `Tabs.useRootState`

### Core
- `TabsStore`
- `TabsRootRenderable`
- `TabsListRenderable`
- `TabsTabRenderable`
- `TabsPanelRenderable`
```

--------------------------------

### Compose Textarea Primitive

Source: https://tuiparts.sh/docs/primitives/textarea

Initialize the Textarea component or renderable with initial values and submission handlers.

```tsx
import { Textarea } from "@tuiparts/react/textarea";

<Textarea
  initialValue="Release notes"
  placeholder="Describe this release…"
  onSubmit={() => publish()}
/>;
```

```tsx
import { Textarea } from "@tuiparts/solid/textarea";

<Textarea
  initialValue="Release notes"
  placeholder="Describe this release…"
  onSubmit={() => publish()}
/>;
```

```ts
import { TextareaRenderable } from "@tuiparts/core/textarea";

const textarea = new TextareaRenderable(ctx, {
  initialValue: "Release notes",
  onSubmit: () => publish(textarea.plainText),
});

parent.add(textarea);
```

--------------------------------

### Import Accordion primitive

Source: https://tuiparts.sh/docs/primitives/accordion

Import the Accordion component from the appropriate package for your runtime.

```ts
import { Accordion } from "@tuiparts/react/accordion";
```

--------------------------------

### Import Tabs primitive

Source: https://tuiparts.sh/docs/primitives/tabs

Import the Tabs component from the appropriate package for your runtime.

```ts
import { Tabs } from "@tuiparts/react/tabs";
```

--------------------------------

### Follow terminal color mode

Source: https://tuiparts.sh/docs/theming

Connect the theme store to the renderer to automatically track terminal color changes. Call the returned function during teardown to stop tracking.

```ts
const renderer = await createCliRenderer({ exitOnCtrlC: true });
const stopFollowingTheme = theme.follow(renderer);
```

--------------------------------

### Define a custom theme in TypeScript

Source: https://tuiparts.sh/docs/theming

Create a theme definition by implementing the ThemeDefinition interface, specifying base tokens and optional light mode overrides.

```ts
import type { ThemeDefinition } from "../components/ui/theme";

export const midnight: ThemeDefinition = {
  tokens: {
    colors: {
      background: "#0B0E15",
      primary: "#7AA2F7",
      primaryForeground: "#0B0E15",
    },
  },
  light: {
    colors: {
      background: "#E9EDF4",
      primary: "#2D62E4",
      primaryForeground: "#FFFFFF",
    },
  },
};
```

--------------------------------

### Import Collapsible primitive

Source: https://tuiparts.sh/docs/primitives/collapsible

Import the Collapsible component from the respective framework package.

```ts
import { Collapsible } from "@tuiparts/react/collapsible";
```

--------------------------------

### Use Collapsible in React and Solid

Source: https://tuiparts.sh/docs/catalog/collapsible

Basic implementation of the Collapsible component using declarative JSX syntax.

```tsx
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "./components/ui/collapsible";

<Collapsible defaultOpen>
  <CollapsibleTrigger label="Connection details" />
  <CollapsibleContent>
    <text content="Region: eu-west" />
  </CollapsibleContent>
</Collapsible>;
```

--------------------------------

### Compose the Toggle Primitive

Source: https://tuiparts.sh/docs/primitives/toggle

Implement a Toggle component using React, Solid, or the Core library.

```tsx
import { Toggle } from "@tuiparts/react/toggle";

<Toggle defaultPressed paddingLeft={1} paddingRight={1}>
  {(state) => <text content={state.pressed ? "[x] Bold" : "[ ] Bold"} />}
</Toggle>;
```

```tsx
import { Toggle } from "@tuiparts/solid/toggle";

<Toggle defaultPressed paddingLeft={1} paddingRight={1}>
  {(state) => <text content={state.pressed ? "[x] Bold" : "[ ] Bold"} />}
</Toggle>;
```

```ts
import { TextRenderable } from "@opentui/core";
import { ToggleRenderable } from "@tuiparts/core/toggle";

const toggle = new ToggleRenderable(ctx, {
  defaultPressed: true,
  onPressedChange: (pressed) => console.log({ pressed }),
});

toggle.add(new TextRenderable(ctx, { content: "Bold" }));
parent.add(toggle);
```

--------------------------------

### theme.setActive(name)

Source: https://tuiparts.sh/docs/theming

Activates a registered theme by name.

```APIDOC
### theme.setActive(name)

Activates a registered theme. Returns `false` if the provided name is unknown.
```

--------------------------------

### Import Checkbox Group primitives

Source: https://tuiparts.sh/docs/primitives/checkbox-group

Import the necessary components from the respective framework package.

```ts
import { CheckboxGroup } from "@tuiparts/react/checkbox-group";
import { Checkbox } from "@tuiparts/react/checkbox";
```

--------------------------------

### Import Button Primitive

Source: https://tuiparts.sh/docs/primitives/button

Import the Button component from the appropriate framework-specific package.

```ts
import { Button } from "@tuiparts/react/button";
```

--------------------------------

### Implement Toggle Group in React and Solid

Source: https://tuiparts.sh/docs/catalog/toggle-group

Import the ToggleGroup and ToggleGroupItem components to create a group of related toggles.

```tsx
import {
  ToggleGroup,
  ToggleGroupItem,
} from "./components/ui/toggle-group";

<ToggleGroup defaultValue={["left"]}>
  <ToggleGroupItem value="left" label="Left" />
  <ToggleGroupItem value="center" label="Center" />
  <ToggleGroupItem value="right" label="Right" />
</ToggleGroup>;
```

--------------------------------

### Use Toggle in React and Solid

Source: https://tuiparts.sh/docs/catalog/toggle

Implement the Toggle component using controlled or uncontrolled state patterns.

```tsx
import { Toggle } from "./components/ui/toggle";

<Toggle
  label="Bold"
  defaultPressed
  onPressedChange={(pressed, details) => {
    console.log({ pressed, source: details.source });
  }}
/>;
```

--------------------------------

### Compose Button Primitive

Source: https://tuiparts.sh/docs/primitives/button

Implement the Button primitive using framework-specific render patterns or the core renderable class.

```tsx
import { Button } from "@tuiparts/react/button";

<Button
  flexDirection="row"
  paddingLeft={2}
  paddingRight={2}
  onPress={(details) => save(details.source)}
>
  {(state) => (
    <text content={state.pressed ? "Saving…" : "Save changes"} />
  )}
</Button>;
```

```tsx
import { Button } from "@tuiparts/solid/button";

<Button
  flexDirection="row"
  paddingLeft={2}
  paddingRight={2}
  onPress={(details) => save(details.source)}
>
  {(state) => (
    <text content={state.pressed ? "Saving…" : "Save changes"} />
  )}
</Button>;
```

```ts
import { TextRenderable } from "@opentui/core";
import { ButtonRenderable } from "@tuiparts/core/button";

const button = new ButtonRenderable(ctx, {
  paddingLeft: 2,
  paddingRight: 2,
  onPress: (details) => save(details.source),
});

button.add(new TextRenderable(ctx, { content: "Save changes" }));
parent.add(button);
```

--------------------------------

### Accessing theme tokens in runtimes

Source: https://tuiparts.sh/docs/theming

Use the useTheme hook in React or Solid, or the theme store directly in Core, to access resolved design tokens. Ensure the styling function is called once before subscribing in Core environments.

```tsx
import { useTheme } from "./components/ui/use-theme";

function StatusLine() {
  const tokens = useTheme();
  return <text content="ready" fg={tokens.colors.mutedForeground} />;
}
```

```tsx
import { useTheme } from "./components/ui/use-theme";

function StatusLine() {
  const tokens = useTheme();
  return <text content="ready" fg={tokens().colors.mutedForeground} />;
}
```

```ts
import { theme } from "./components/ui/theme";

const applyTheme = () => {
  label.fg = theme.get().colors.mutedForeground;
};

applyTheme();
const unsubscribe = theme.subscribe(applyTheme);
```

--------------------------------

### Compose the Dialog primitive

Source: https://tuiparts.sh/docs/primitives/dialog

Compose a modal dialog using the provided parts. Core callers must add both Root and Portal to the render tree.

```tsx
import { Dialog } from "@tuiparts/react/dialog";

<Dialog.Root>
  <Dialog.Trigger><text content="Open settings" /></Dialog.Trigger>
  <Dialog.Portal
    width="100%"
    height="100%"
    alignItems="center"
    justifyContent="center"
  >
    <Dialog.Backdrop
      position="absolute"
      width="100%"
      height="100%"
      backgroundColor="#000000"
    />
    <Dialog.Popup flexDirection="column" border padding={1} gap={1} width={40}>
      <Dialog.Title content="Settings" />
      <Dialog.Description content="Change this project's options." />
      <Dialog.Close><text content="Close" /></Dialog.Close>
    </Dialog.Popup>
  </Dialog.Portal>
</Dialog.Root>;
```

```tsx
import { Dialog } from "@tuiparts/solid/dialog";

<Dialog.Root>
  <Dialog.Trigger><text content="Open settings" /></Dialog.Trigger>
  <Dialog.Portal
    width="100%"
    height="100%"
    alignItems="center"
    justifyContent="center"
  >
    <Dialog.Backdrop
      position="absolute"
      width="100%"
      height="100%"
      backgroundColor="#000000"
    />
    <Dialog.Popup flexDirection="column" border padding={1} gap={1} width={40}>
      <Dialog.Title content="Settings" />
      <Dialog.Description content="Change this project's options." />
      <Dialog.Close><text content="Close" /></Dialog.Close>
    </Dialog.Popup>
  </Dialog.Portal>
</Dialog.Root>;
```

```ts
import { TextRenderable } from "@opentui/core";
import {
  DialogBackdropRenderable,
  DialogCloseRenderable,
  DialogPopupRenderable,
  DialogPortalRenderable,
  DialogRootRenderable,
  DialogTitleRenderable,
  DialogTriggerRenderable,
} from "@tuiparts/core/dialog";

const root = new DialogRootRenderable(ctx);
const trigger = new DialogTriggerRenderable(ctx, { store: root.store });
const portal = new DialogPortalRenderable(ctx, {
  store: root.store,
  width: "100%",
  height: "100%",
  alignItems: "center",
  justifyContent: "center",
});
const backdrop = new DialogBackdropRenderable(ctx, {
  store: root.store,
  position: "absolute",
  width: "100%",
  height: "100%",
  backgroundColor: "#000000",
});
const popup = new DialogPopupRenderable(ctx, {
  store: root.store,
  flexDirection: "column",
  border: true,
  padding: 1,
  width: 40,
});
const close = new DialogCloseRenderable(ctx, { store: root.store });

trigger.add(new TextRenderable(ctx, { content: "Open settings" }));
popup.add(new DialogTitleRenderable(ctx, { content: "Settings" }));
close.add(new TextRenderable(ctx, { content: "Close" }));
popup.add(close);
popup.registerFocusable(close, true);
portal.add(backdrop);
portal.add(popup);
root.add(trigger);
parent.add(root);
parent.add(portal);
```

--------------------------------

### Import Checkbox

Source: https://tuiparts.sh/docs/primitives/checkbox

Import the Checkbox component from the appropriate package for your runtime.

```ts
import { Checkbox } from "@tuiparts/react/checkbox";
```