tuiparts.sh

https://tuiparts.sh
Admin
tuiparts.sh provides composable interaction primitives and editable UI recipes for OpenTUI...
Tokens:24,772
Snippets:312
Trust Score:2.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### 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 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 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
```

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

### 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);
```

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

### 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 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`
```
Tokens:
Raw