### Installation

Source: https://zero-sq.github.io/slintcn/docs/dropdown-menu.html

Command to install the DropdownMenu component using the slintcn CLI.

```APIDOC
## Installation

### Command
`cargo slintcn add dropdown-menu`
```

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

### Install Pricing block with bun

Source: https://zero-sq.github.io/slintcn/docs/pricing.html

Install the Pricing block using bun.

```bash
bun slintcn add pricing
```

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

### Install Pricing block with yarn

Source: https://zero-sq.github.io/slintcn/docs/pricing.html

Install the Pricing block using yarn.

```bash
yarn slintcn add pricing
```

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

### Install DropdownMenu with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/dropdown-menu.html

Install the dropdown-menu component using the cargo slintcn add command. This is the recommended installation method.

```bash
cargo slintcn add dropdown-menu
```

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

### Install SheetPanel with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/sheet-panel.html

Install the sheet-panel component using the cargo command. This is the primary installation method shown.

```bash
cargo slintcn add sheet-panel
```

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

### Install Pricing block with npm

Source: https://zero-sq.github.io/slintcn/docs/pricing.html

Install the Pricing block using npm.

```bash
npm slintcn add pricing
```

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

### Install Pricing block with pnpm

Source: https://zero-sq.github.io/slintcn/docs/pricing.html

Install the Pricing block using pnpm.

```bash
pnpm slintcn add pricing
```

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

### Install Button with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/button.html

Install the button component using the cargo command. This is the primary installation method shown.

```bash
cargo slintcn add button
```

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

### Install DatePicker with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/date-picker.html

Command to install the date-picker component using the slintcn CLI. This is the recommended installation method.

```bash
cargo slintcn add date-picker
```

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

### Install Pricing block with cargo

Source: https://zero-sq.github.io/slintcn/docs/pricing.html

Install the Pricing block using the cargo command.

```bash
cargo slintcn add pricing
```

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

### Install Menubar with cargo

Source: https://zero-sq.github.io/slintcn/docs/menubar.html

Install the menubar component using the cargo command.

```bash
cargo slintcn add menubar
```

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

### Install Badge with bun

Source: https://zero-sq.github.io/slintcn/docs/badge.html

Install the Badge component using the bun package manager.

```bash
bun slintcn add badge
```

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

### Installation with cargo slintcn add label

Source: https://zero-sq.github.io/slintcn/docs/label.html

Install the Label component using the `cargo slintcn add label` command. The command installs theme as a transitive dependency.

```bash
cargo slintcn add label
```

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

### Install Keycap with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/keycap.html

Installs the Keycap component via the SlintCN CLI. The command is available in the Installation section and is the recommended way to add the component.

```bash
cargo slintcn add keycap
```

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

### Usage example for Command component in Slint

Source: https://zero-sq.github.io/slintcn/docs/command.html

Example showing how to import and use the Command component in a Slint file. Mount it as the last child of Window so the backdrop covers everything. The example demonstrates two-way bindings for open and query, and the selected callback.

```slint
import { Command, CommandItem } from "slintcn/components/command.slint";

// Mount as the LAST child of Window so the backdrop covers everything.
Command {
    width: parent.width;
    height: parent.height;
    open <=> palette-open;
    items: [
        { label: "New file",   id: "file.new",   hint: "⌘N" },
        { label: "Open file…", id: "file.open",  hint: "⌘O" },
        { label: "Save",       id: "file.save",  hint: "⌘S" },
    ];
    query <=> query;
    selected(id) => { /* dispatch by id */ }
}
```

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

### Install Card with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/card.html

Install the Card component using the cargo CLI command.

```bash
cargo slintcn add card
```

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

### Install Badge with pnpm

Source: https://zero-sq.github.io/slintcn/docs/badge.html

Install the Badge component using the pnpm package manager.

```bash
pnpm slintcn add badge
```

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

### Install Sidebar with cargo slintcn add sidebar

Source: https://zero-sq.github.io/slintcn/docs/sidebar.html

Install the Sidebar component using the cargo command. This is the primary installation method for Rust projects.

```bash
cargo slintcn add sidebar
```

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

### Install Text component with pnpm

Source: https://zero-sq.github.io/slintcn/docs/text.html

Install the Text component using the pnpm package manager.

```bash
pnpm
```

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

### Install components with slintcn add using namespace or direct URL

Source: https://zero-sq.github.io/slintcn/docs/directory.html

Install components from a custom registry using the namespace prefix or a direct URL. The direct URL form bypasses the registry configuration.

```bash
slintcn add @acme/button-pro
slintcn add https://example.com/registry/r/special.json   # direct URL also works
```

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

### Install Tabs component with bun

Source: https://zero-sq.github.io/slintcn/docs/tabs.html

Install the Tabs component using the bun package manager.

```bash
bun slintcn add tabs
```

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

### Install Badge with yarn

Source: https://zero-sq.github.io/slintcn/docs/badge.html

Install the Badge component using the yarn package manager.

```bash
yarn slintcn add badge
```

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

### Install Badge with npm

Source: https://zero-sq.github.io/slintcn/docs/badge.html

Install the Badge component using the npm package manager.

```bash
npm slintcn add badge
```

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

### Install Hover Card with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/hover-card.html

Install the Hover Card component using the `cargo slintcn add hover-card` command. This is the installation method for the Cargo package manager.

```bash
cargo slintcn add hover-card
```

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

### Install Text component with yarn

Source: https://zero-sq.github.io/slintcn/docs/text.html

Install the Text component using the yarn package manager.

```bash
yarn
```

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

### Usage example for Badge component

Source: https://zero-sq.github.io/slintcn/docs/badge.html

Shows how to import and use the Badge component in a Slint file. The example creates a Badge with text "New" and the default variant.

```slint
import { Badge, BadgeVariant } from "slintcn/components/badge.slint";

Badge { text: "New"; variant: BadgeVariant.default; }
```

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

### Install Command component with cargo slintcn add command

Source: https://zero-sq.github.io/slintcn/docs/command.html

Install the Command component using the cargo package manager. This is the primary installation command for the slintcn CLI.

```bash
cargo slintcn add command
```

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

### Install CompassStrip with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/compass-strip.html

Install the compass-strip component using the cargo package manager.

```bash
cargo slintcn add compass-strip
```

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

### Install Text component with npm

Source: https://zero-sq.github.io/slintcn/docs/text.html

Install the Text component using the npm package manager.

```bash
npm
```

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

### Install Badge with cargo

Source: https://zero-sq.github.io/slintcn/docs/badge.html

Install the Badge component using the cargo package manager.

```bash
cargo slintcn add badge
```

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

### Usage example for Text component

Source: https://zero-sq.github.io/slintcn/docs/text.html

Shows how to import the Text component and use it with different variants and tones.

```slint
// alias to avoid shadowing the built-in Text:
import { Text as Typography, TextVariant, TextTone } from "slintcn/components/text.slint";

Typography { text: "Display"; variant: TextVariant.display; }
Typography { text: "Muted body"; variant: TextVariant.body; tone: TextTone.muted; }
```

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

### Install Text component with cargo

Source: https://zero-sq.github.io/slintcn/docs/text.html

Install the Text component using the cargo package manager.

```bash
cargo slintcn add text
```

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

### Install Settings block with cargo

Source: https://zero-sq.github.io/slintcn/docs/settings.html

Install the Settings block using the SlintCN CLI. This command adds the block and its dependencies automatically.

```bash
cargo slintcn add settings
```

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

### Install aspect-ratio component with package manager

Source: https://zero-sq.github.io/slintcn/docs/aspect-ratio.html

Install the aspect-ratio component using your package manager. The command is run in the project root and adds the component as a dependency.

```bash
cargo slintcn add aspect-ratio
```

```bash
npm slintcn add aspect-ratio
```

```bash
pnpm slintcn add aspect-ratio
```

```bash
yarn slintcn add aspect-ratio
```

```bash
bun slintcn add aspect-ratio
```

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

### Install slintcn via cargo

Source: https://zero-sq.github.io/slintcn

Install the slintcn CLI using cargo. This is the recommended method for Rust users without Node.

```bash
$ cargo install slintcn
```

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

### Usage example for Pricing block

Source: https://zero-sq.github.io/slintcn/docs/pricing.html

Import the Pricing component and use it with the 'chosen' property and 'pick' callback.

```slint
import { Pricing } from "slintcn/blocks/pricing.slint";

Pricing { chosen: 1; pick(i) => { /* … */ } }
```

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

### Install Dashboard component

Source: https://zero-sq.github.io/slintcn/docs/dashboard.html

Use the CLI to add the dashboard block to your project.

```bash
cargo slintcn add dashboard
```

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

### Install Tabs component with pnpm

Source: https://zero-sq.github.io/slintcn/docs/tabs.html

Install the Tabs component using the pnpm package manager.

```bash
pnpm slintcn add tabs
```

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

### Install context-menu with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/context-menu.html

Install the context-menu component using the SlintCN CLI. This command adds the component and its theme dependency automatically.

```bash
cargo slintcn add context-menu
```

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

### Install Progress component

Source: https://zero-sq.github.io/slintcn/docs/progress.html

Use the package manager command to add the progress component to your project.

```bash
cargo slintcn add progress
```

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

### Usage example

Source: https://zero-sq.github.io/slintcn/docs/checkbox.html

Example of importing and using the Checkbox component with a two-way bound `checked` property.

```slint
import { Checkbox } from "slintcn/components/checkbox.slint";

Checkbox { label: "Accept terms"; checked <=> accepted; }
```

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

### Install Tabs component with npm

Source: https://zero-sq.github.io/slintcn/docs/tabs.html

Install the Tabs component using the npm package manager.

```bash
npm slintcn add tabs
```

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

### Install Tabs component with yarn

Source: https://zero-sq.github.io/slintcn/docs/tabs.html

Install the Tabs component using the yarn package manager.

```bash
yarn slintcn add tabs
```

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

### Install Input component via Cargo

Source: https://zero-sq.github.io/slintcn/docs/input.html

Installs the input component as a dependency using Cargo, making focus-ring available as a transitive dependency.

```bash
cargo slintcn add input
```

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

### Usage

Source: https://zero-sq.github.io/slintcn/docs/dropdown-menu.html

Example of importing and using the DropdownMenu component in a Slint file.

```APIDOC
## Usage

### Import
```
import { DropdownMenu, DropdownMenuItem } from "slintcn/components/dropdown-menu.slint";
```

### Example
```
DropdownMenu {
    items: [{ label: "Profile" }, { label: "Billing" }, { label: "Sign out" }];
    selected(i) => { /* … */ }
    Button { text: "Open menu"; }   // trigger = @children
}
```
```

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

### Install Stats block with cargo

Source: https://zero-sq.github.io/slintcn/docs/stats.html

Install the Stats block using the Cargo package manager. Run this command in your project directory.

```bash
cargo slintcn add stats
```

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

### Installation command

Source: https://zero-sq.github.io/slintcn/docs/checkbox.html

Command to add the Checkbox component to a Slint project.

```bash
cargo slintcn add checkbox
```

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

### Install Toast component with cargo slintcn add toast

Source: https://zero-sq.github.io/slintcn/docs/toast.html

Install the Toast component using the cargo command. The command is `cargo slintcn add toast`.

```bash
cargo slintcn add toast
```

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

### Install Skeleton with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/skeleton.html

Install the Skeleton component using the slintcn CLI. This command adds the component and its theme dependency automatically.

```bash
cargo slintcn add skeleton
```

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

### Install Tabs component with cargo

Source: https://zero-sq.github.io/slintcn/docs/tabs.html

Install the Tabs component using the cargo package manager.

```bash
cargo slintcn add tabs
```

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

### Install Toggle component

Source: https://zero-sq.github.io/slintcn/docs/toggle.html

Use the package manager command to add the toggle component to your project.

```shell
cargo slintcn add toggle
```

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

### Install navigation-menu with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/navigation-menu.html

Install the navigation-menu component using the SlintCN CLI. Run this command in your project directory to add the component and its theme dependency automatically.

```bash
cargo slintcn add navigation-menu
```

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

### Install Hotbar with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/hotbar.html

Install the Hotbar component using the SlintCN CLI. This command adds the component and its transitive dependencies automatically.

```bash
cargo slintcn add hotbar
```

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

### Install Collapsible with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/collapsible.html

Install the Collapsible component using the cargo package manager. The command is `cargo slintcn add collapsible`.

```bash
cargo slintcn add collapsible
```

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

### Install Textarea with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/textarea.html

Install the Textarea component using the cargo package manager. This command adds the component and its transitive dependencies, including focus-ring.

```bash
cargo slintcn add textarea
```

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

### Install popover with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/popover.html

Install the popover component using the SlintCN CLI. This command adds the component and its theme dependency automatically.

```bash
cargo slintcn add popover
```

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

### Usage example for Sidebar component

Source: https://zero-sq.github.io/slintcn/docs/sidebar.html

Example showing how to import and use the Sidebar component in a Slint file. It defines items with labels and icons, binds active and collapsed properties, and handles navigation.

```slint
import { Sidebar, SidebarItem } from "slintcn/components/sidebar.slint";
import { LucidePaths } from "slintcn/components/lucide-paths.slint";

Sidebar {
    items: [
        { label: "Overview",  id: "home",     icon: LucidePaths.dot },
        { label: "Customers", id: "people",   icon: LucidePaths.dot },
        { label: "Settings",  id: "settings", icon: LucidePaths.dot },
    ];
    active <=> route;
    collapsed <=> nav-collapsed;
    navigate(id) => { /* route to id */ }
}
```

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

### Installation: cargo slintcn add radio-group

Source: https://zero-sq.github.io/slintcn/docs/radio-group.html

Command to install the radio-group component using Cargo.

```bash
cargo slintcn add radio-group
```

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

### Import and use Keycap component

Source: https://zero-sq.github.io/slintcn/docs/keycap.html

Imports the Keycap component and its enums, then instantiates a Keycap with a text label and a tone. The example uses the on-glass tone.

```slint
import { Keycap, KeycapSize, KeycapTone } from "slintcn/components/keycap.slint";

Keycap { text: "⌘"; tone: KeycapTone.on-glass; }
```

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

### Install data-table with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/data-table.html

Adds the data-table component to a Slint project using Cargo. This is the installation command for the data-table component.

```bash
cargo slintcn add data-table
```

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

### Install Combobox with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/combobox.html

Install the Combobox component using the cargo package manager. This command adds the component and its transitive dependencies automatically.

```bash
cargo slintcn add combobox
```

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

### Install accordion with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/accordion.html

Install the accordion component using the SlintCN CLI. Run this command in your project directory to add the accordion component and its transitive dependencies (icon, lucide-paths, separator) automatically.

```bash
cargo slintcn add accordion
```

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

### Usage example for Alert component

Source: https://zero-sq.github.io/slintcn/docs/alert.html

Shows how to use the Alert component in Slint. Import Alert, AlertVariant, and LucidePaths, then instantiate Alert with icon, title, and description properties.

```slint
import { Alert, AlertVariant } from "slintcn/components/alert.slint";
import { LucidePaths } from "slintcn/components/lucide-paths.slint";

Alert {
    icon: LucidePaths.check;
    title: "Deployed";
    description: "Your changes are live.";
}
```

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

### Add a component with cargo slintcn add

Source: https://zero-sq.github.io/slintcn

Install a component from the registry using the cargo CLI. The command copies .slint source into your project and rewrites imports.

```bash
$`cargo slintcn add button` copy
```

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

### Install Table component with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/table.html

Installs the Table component using the cargo package manager. This command adds the component and its transitive dependencies.

```bash
cargo slintcn add table
```

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

### Install Avatar with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/avatar.html

Install the Avatar component using the slintcn CLI. This command adds the component and its transitive dependencies (theme only).

```bash
cargo slintcn add avatar
```

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

### Install login block with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/login.html

Install the login block using the SlintCN CLI. This command adds the block and its transitive dependencies (card, input, label, button, separator) automatically.

```bash
cargo slintcn add login
```

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

### Input component usage example

Source: https://zero-sq.github.io/slintcn/docs/input.html

Import the Input component and use it with a placeholder, a two-way text binding to email, and an edited callback that fires on every keystroke.

```slint
import { Input } from "slintcn/components/input.slint";

Input {
    placeholder: "you@example.com";
    text <=> email;
    edited(t) => { /* … */ }
}
```

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

### Install Switch with cargo slintcn add switch

Source: https://zero-sq.github.io/slintcn/docs/switch.html

Install the Switch component using the SlintCN CLI. This command adds the switch component and its transitive dependency focus-ring automatically.

```bash
cargo slintcn add switch
```

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

### Usage example for Tabs component

Source: https://zero-sq.github.io/slintcn/docs/tabs.html

Example showing how to import and use the Tabs component in a Slint file. It defines two tabs and binds the current index to a variable, with a conditional comment for content.

```slint
import { Tabs, TabsVariant } from "slintcn/components/tabs.slint";

Tabs {
    items: [{ label: "Account" }, { label: "Password" }];
    current <=> tab;
}
if tab == 0: /* Account content */
```

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

### Install Profile component via Cargo

Source: https://zero-sq.github.io/slintcn/docs/profile.html

Use the cargo command to add the profile block to your project.

```bash
cargo slintcn add profile
```

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

### Install Alert component with cargo slintcn add alert

Source: https://zero-sq.github.io/slintcn/docs/alert.html

Command to add the Alert component to your project. It installs the component and its transitive dependencies automatically.

```bash
cargo slintcn add alert
```

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

### Install Icon component with cargo slintcn add icon

Source: https://zero-sq.github.io/slintcn/docs/icon.html

Install the Icon component using the slintcn CLI. This command adds the component and its transitive dependencies (theme only).

```bash
cargo slintcn add icon
```

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

### cargo slintcn add sheet

Source: https://zero-sq.github.io/slintcn/docs/sheet.html

Command to install the Sheet component. Shown in the Installation tab as the package manager command (cargo).

```bash
cargo slintcn add sheet
```

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

### Install Separator with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/separator.html

Install the Separator component using the Cargo package manager. This command adds the separator component and its theme dependency automatically.

```bash
cargo slintcn add separator
```

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

### Install Breadcrumb with Cargo

Source: https://zero-sq.github.io/slintcn/docs/breadcrumb.html

Adds the Breadcrumb component to a Slint project using Cargo. This is the installation command for the Rust package manager.

```bash
cargo slintcn add breadcrumb
```

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

### Import and use Card component in Slint

Source: https://zero-sq.github.io/slintcn/docs/card.html

Example of importing the Card component and using it with a solid variant and a vertical layout for content.

```slint
import { Card, CardVariant } from "slintcn/components/card.slint";

Card {
    variant: CardVariant.solid;
    VerticalLayout {
        padding: parent.padding-l;
        spacing: parent.gap-l;
        // your content
    }
}
```

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

### Install Slider with cargo slintcn add slider

Source: https://zero-sq.github.io/slintcn/docs/slider.html

Install the Slider component using the cargo package manager. The command is `cargo slintcn add slider`.

```bash
cargo slintcn add slider
```

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

### Install dialog with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/dialog.html

Command to add the dialog component to a Slint project.

```bash
cargo slintcn add dialog
```

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

### Initialize and add components with cargo slintcn

Source: https://zero-sq.github.io/slintcn

Initialize a slintcn project and add components (button, card, dialog) using the cargo CLI. Files land in ui/slintcn/.

```bash
$ cargo slintcn init
```

```bash
$ cargo slintcn add button card dialog
```

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

### Install Reticle with cargo slintcn add

Source: https://zero-sq.github.io/slintcn/docs/reticle.html

Install the Reticle component via the SlintCN CLI. Run this command in your project directory to add the component and its theme dependency automatically.

```bash
cargo slintcn add reticle
```

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

### Install Team block with cargo slintcn add team

Source: https://zero-sq.github.io/slintcn/docs/team.html

Install the Team block using the SlintCN CLI. Run this command in your project directory to add the block and its transitive dependencies (card, avatar, label, badge, button, separator).

```bash
cargo slintcn add team
```

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

### Usage example for DropdownMenu

Source: https://zero-sq.github.io/slintcn/docs/dropdown-menu.html

Shows how to import and use DropdownMenu and DropdownMenuItem in a Slint file. The component displays menu items when the trigger (a Button) is clicked, and the selected callback fires with the chosen row's index.

```slint
import { DropdownMenu, DropdownMenuItem } from "slintcn/components/dropdown-menu.slint";

DropdownMenu {
    items: [{ label: "Profile" }, { label: "Billing" }, { label: "Sign out" }];
    selected(i) => { /* … */ }
    Button { text: "Open menu"; }   // trigger = @children
}
```

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

### Install with cargo slintcn add pagination

Source: https://zero-sq.github.io/slintcn/docs/pagination.html

Command to add the pagination component to a project using the slintcn CLI.

```bash
cargo slintcn add pagination
```

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

### Usage example for Table component

Source: https://zero-sq.github.io/slintcn/docs/table.html

Shows how to import and use the Table component in Slint. The Table is configured with column headers and row data. Each row's cells array must match the number of columns.

```slint
import { Table, TableRow } from "slintcn/components/table.slint";

Table {
    columns: ["Invoice", "Status", "Amount"];
    rows: [
        { cells: ["INV-001", "Paid", "$ 250.00"] },
        { cells: ["INV-002", "Pending", "$ 1,200.00"] },
    ];
}
```

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

### DatePicker usage example

Source: https://zero-sq.github.io/slintcn/docs/date-picker.html

Example of using the DatePicker component in a Slint UI file. It shows how to set properties like month-label, days-in-month, first-day-offset, and bind selected-day. The day-selected callback updates the selected day, and prev-month/next-month callbacks are placeholders. The Button inside the DatePicker acts as the trigger.

```slint
import { DatePicker } from "slintcn/components/date-picker.slint";

DatePicker {
    month-label: "May 2026";
    days-in-month: 31;
    first-day-offset: 5;
    selected-day <=> day;
    day-selected(d) => { day = d }
    prev-month => { /* … */ }
    next-month => { /* … */ }
    Button { text: "Pick a date"; }   // trigger = @children
}
```

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

### Import and use SheetPanel in Slint

Source: https://zero-sq.github.io/slintcn/docs/sheet-panel.html

Import the SheetPanel component and place it inside your overlay root. The example sets the title and description properties.

```slint
import { SheetPanel } from "slintcn/components/sheet-panel.slint";

// You position + size it inside your overlay root.
SheetPanel {
    title: "Filters";
    description: "Refine your results.";
}
```

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

### Empty Component Usage

Source: https://zero-sq.github.io/slintcn/docs/empty.html

Example of using the Empty component in a Slint UI, showing how to set icon, title, description, and action label, and handle the action-clicked callback.

```APIDOC
## Empty Component

### Description
Empty-state surface — icon + title + description + optional CTA.

### Usage
```
import { Empty } from "slintcn/components/empty.slint";
import { LucidePaths } from "slintcn/components/lucide-paths.slint";

Empty {
    icon: LucidePaths.plus;
    title: "No customers yet";
    description: "Invite your first customer to get started.";
    action-label: "Invite customer";
    action-clicked => { /* … */ }
}
```

### Properties
- `icon` in `string` - SVG path commands for the leading icon (pass `LucidePaths.*`).
- `title` in `string` - Bold heading at the top.
- `description` in `string` - Body text below the title.
- `action-label` in `string` - CTA button label; empty string hides the button.
- `action-clicked` callback `()` - Fired when the CTA button is pressed.

### Accessibility
- `focusable` - no

### Dependencies
- iconbutton (installed automatically as transitive dependencies of `slintcn add empty`)
```

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

### Combobox usage example in Slint

Source: https://zero-sq.github.io/slintcn/docs/combobox.html

Example usage of the Combobox component. It imports Combobox and ComboboxItem, defines items with labels and values, binds selected-index and query, and handles the changed callback. The Button inside is the trigger via @children.

```slint
import { Combobox, ComboboxItem } from "slintcn/components/combobox.slint";

Combobox {
    items: [
        { label: "Apple",  value: "apple" },
        { label: "Banana", value: "banana" },
        { label: "Cherry", value: "cherry" },
    ];
    selected-index <=> picked;
    query <=> query;
    changed(i) => { /* … */ }
    Button { text: "Pick a fruit"; }   // trigger = @children
}
```

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

### Use Skeleton component in Slint

Source: https://zero-sq.github.io/slintcn/docs/skeleton.html

Import and use the Skeleton component in a Slint file. The example creates a pulsing placeholder with a width of 220px and height of 16px.

```slint
import { Skeleton } from "slintcn/components/skeleton.slint";

Skeleton { width: 220px; height: 16px; }
```

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

### Usage: RadioGroup component

Source: https://zero-sq.github.io/slintcn/docs/radio-group.html

Example of using the RadioGroup component with items, selected binding, and changed callback.

```slint
import { RadioGroup, RadioOrientation } from "slintcn/components/radio-group.slint";

RadioGroup {
    items: [{ label: "Free" }, { label: "Pro" }, { label: "Team" }];
    selected <=> tier;
    changed(i) => { /* … */ }
}
```

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

### Import and use HudPill in Slint

Source: https://zero-sq.github.io/slintcn/docs/hud-pill.html

Import the HudPill component and its enums from the slintcn package, then instantiate it with a text label and a tone. The example sets the tone to HudPillTone.scrim1.

```slint
import { HudPill, HudPillSize, HudPillTone } from "slintcn/components/hud-pill.slint";

HudPill { text: "120 FPS"; tone: HudPillTone.scrim1; }
```

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

### Use Icon component with LucidePaths.check

Source: https://zero-sq.github.io/slintcn/docs/icon.html

Import the Icon component and LucidePaths, then instantiate Icon with a LucidePaths command, size, and tint. The tint defaults to the foreground token.

```slint
import { Icon } from "slintcn/components/icon.slint";
import { LucidePaths } from "slintcn/components/lucide-paths.slint";

Icon { commands: LucidePaths.check; size: 20px; tint: Tokens.color-foreground; }
```

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

### Import and use Textarea in Slint

Source: https://zero-sq.github.io/slintcn/docs/textarea.html

Import the Textarea component and use it in a Slint UI file. The example shows a Textarea with a placeholder and a two-way binding to a bio property.

```slint
import { Textarea } from "slintcn/components/textarea.slint";

Textarea { placeholder: "Tell us about yourself…"; text <=> bio; }
```

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

### Calendar component usage

Source: https://zero-sq.github.io/slintcn/docs/calendar.html

Usage example for the Calendar component. Sets the month label, number of days, and first-day offset, binds the selected day two-way, and handles day selection and month navigation callbacks.

```slint
import { Calendar } from "slintcn/components/calendar.slint";

Calendar {
    month-label: "May 2026";
    days-in-month: 31;
    first-day-offset: 5;      // 1 May 2026 = Friday
    selected-day <=> day;
    day-selected(d) => { day = d }
    prev-month => { /* roll model back one month */ }
    next-month => { /* roll model forward one month */ }
}

```

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

### Use DataTable component in Slint

Source: https://zero-sq.github.io/slintcn/docs/data-table.html

Imports and instantiates the DataTable component. The example shows how to bind columns, rows, pagination, and handle sorting, page changes, and row clicks.

```slint
import { DataTable, DataTableRow } from "slintcn/components/data-table.slint";

DataTable {
    columns: ["Name", "Email", "Role"];
    rows: visible-page;   // already sorted / filtered / paged in your model
    total-pages: pages;
    current-page <=> page;
    sort(col)      => { /* re-sort your model by column index */ }
    page-changed(p) => { /* slice rows for the new page */ }
    row-clicked(r)  => { /* … */ }
}
```

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

### Use Stats block in Slint

Source: https://zero-sq.github.io/slintcn/docs/stats.html

Import and use the Stats block in your Slint UI. The Stats component is instantiated with empty metrics and sources; edit them after installation.

```slint
import { Stats, StatMetric, TrafficSource } from "slintcn/blocks/stats.slint";

Stats { }   // edit the inline metrics + sources after install
```

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

### Import Dialog and mount as last child of Window

Source: https://zero-sq.github.io/slintcn/docs/dialog.html

Usage example showing how to import the Dialog component and declare it as the last child of Window. The `open` property is bound to `dialog-open` for two-way control, with title and description set.

```slint
import { Dialog } from "slintcn/components/dialog.slint";

// Mount as the LAST child of Window:
dlg := Dialog {
    width: parent.width;
    height: parent.height;
    open <=> dialog-open;
    title: "Confirm your action";
    description: "This cannot be undone.";
}
```

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

### Import and use Slider component in Slint

Source: https://zero-sq.github.io/slintcn/docs/slider.html

Import the Slider component from slintcn/components/slider.slint and use it in a Slint UI file. The example binds the value to a property `volume`, sets minimum to 0 and maximum to 100.

```slint
import { Slider } from "slintcn/components/slider.slint";

Slider { value <=> volume; minimum: 0; maximum: 100; }
```

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

### Use Hotbar component in Slint

Source: https://zero-sq.github.io/slintcn/docs/hotbar.html

Example of using the Hotbar component with slots, active binding, and selected callback. The slots array defines each tile's tone and label, active is two-way bound to a slot variable, and selected fires with the slot index when clicked.

```slint
import { Hotbar, HotbarSlot } from "slintcn/components/hotbar.slint";
import { SlotTileTone } from "slintcn/components/slot-tile.slint";

Hotbar {
    slots: [
        { tone: SlotTileTone.stone, label: "1" },
        { tone: SlotTileTone.accent, label: "2" },
        { tone: SlotTileTone.empty,  label: "3" },
        { tone: SlotTileTone.stone, label: "4" },
    ];
    active <=> slot;
    selected(i) => { /* equip slot i */ }
}
```

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

### Use Switch component in Slint

Source: https://zero-sq.github.io/slintcn/docs/switch.html

Import and use the Switch component in a Slint UI file. The example creates a switch with a label and two-way binds its checked property to a variable named dark.

```slint
import { Switch } from "slintcn/components/switch.slint";

Switch { label: "Dark mode"; checked <=> dark; }
```

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

### Import and use HoverCard component in Slint

Source: https://zero-sq.github.io/slintcn/docs/hover-card.html

Example usage of the HoverCard component. It imports the component from 'slintcn/components/hover-card.slint' and sets the `title` and `description` properties. The `Button` inside acts as the trigger via the `@children` slot.

```slint
import { HoverCard } from "slintcn/components/hover-card.slint";

HoverCard {
    title: "@sofia";
    description: "Product designer. Building tools for makers.";
    Button { text: "@sofia"; }   // trigger = @children
}
```

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

### Use Progress component

Source: https://zero-sq.github.io/slintcn/docs/progress.html

Import the Progress component and set its value property to display the progress bar.

```slint
import { Progress } from "slintcn/components/progress.slint";

Progress { value: 64; } // 0–100
```

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

### Use ToastQueue to show toasts in Slint

Source: https://zero-sq.github.io/slintcn/docs/toast.html

Import the Toaster, ToastQueue, and ToastVariant from slintcn/components/toast.slint. Mount a Toaster at the window root, then call ToastQueue.show with a message and variant to display a toast.

```slint
import { Toaster, ToastQueue, ToastVariant } from "slintcn/components/toast.slint";

// Mount once at Window root:
Toaster { width: parent.width; height: parent.height; }

// Fire from anywhere:
ToastQueue.show("Event created", ToastVariant.success);
```

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

### Import and use SlotTile component

Source: https://zero-sq.github.io/slintcn/docs/slot-tile.html

Import the SlotTile component and its enums, then instantiate a SlotTile with stone tone, active state, and interactive enabled. Place an icon, Keycap, or Badge inside the tile.

```slint
import { SlotTile, SlotTileTone, SlotTileState } from "slintcn/components/slot-tile.slint";

SlotTile {
    tone: SlotTileTone.stone;
    state: SlotTileState.active;
    interactive: true;
    // place an icon / Keycap / Badge inside
}
```

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

### Usage: Import and instantiate Pagination

Source: https://zero-sq.github.io/slintcn/docs/pagination.html

Shows how to import the Pagination component and use it in a Slint UI file. The component has a total property, a two-way current binding, and a changed callback.

```slint
import { Pagination } from "slintcn/components/pagination.slint";

Pagination { total: 5; current <=> page; changed(p) => { /* … */ } }
```

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

### Use Menubar in Slint

Source: https://zero-sq.github.io/slintcn/docs/menubar.html

Import and use the Menubar component with menus and items, and handle selection.

```slint
import { Menubar, MenubarMenu, MenubarItem } from "slintcn/components/menubar.slint";

Menubar {
    menus: [
        { label: "File", items: [{ label: "New" }, { label: "Save" }] },
        { label: "Edit", items: [{ label: "Undo" }, { label: "Redo" }] },
    ];
    selected(mi, ii) => { /* … */ }
}
```

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

### Import and use SignIn component in Slint

Source: https://zero-sq.github.io/slintcn/docs/sign-in.html

Import the SignIn component from slintcn/blocks/sign-in.slint and instantiate it, binding email and password properties and handling submit and forgot callbacks.

```slint
import { SignIn } from "slintcn/blocks/sign-in.slint";

SignIn {
    email <=> email;
    password <=> password;
    submit => { /* authenticate */ }
    forgot => { /* … */ }
}
```

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

### Import and use Button in Slint

Source: https://zero-sq.github.io/slintcn/docs/button.html

Import Button, ButtonVariant, and ButtonSize from slintcn/components/button.slint, then create a Button with variant, size, text, and a clicked callback.

```slint
import { Button, ButtonVariant, ButtonSize } from "slintcn/components/button.slint";

Button {
    variant: ButtonVariant.default;
    size: ButtonSize.lg;
    text: "Ship it";
    clicked => { /* … */ }
}
```

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

### Import and use Settings block in Slint

Source: https://zero-sq.github.io/slintcn/docs/settings.html

Import the Settings block and instantiate it, binding the display-name, email, and save callback. The save callback is fired when the Save button is clicked.

```slint
import { Settings } from "slintcn/blocks/settings.slint";

Settings {
    display-name <=> name;
    email <=> email;
    save => { /* … */ }
}
```

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

### Properties

Source: https://zero-sq.github.io/slintcn/docs/dropdown-menu.html

Documentation of the properties and callback for the DropdownMenu component.

```APIDOC
## Properties

### `items` in `[DropdownMenuItem]`
Menu rows shown when the trigger is clicked.

### `content-width` in `length`
Pixel width of the popup panel.

### `highlighted-index` in-out `int`
Row highlighted by ↑/↓ inside the open popup; consumers rarely set this.

### `selected` callback `(int)`
Fired with the chosen row's index; the popup auto-closes.
```

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

### Add registry entry to registry/directory.json

Source: https://zero-sq.github.io/slintcn/docs/directory.html

Add your registry to the directory by opening a PR that adds an entry to registry/directory.json. The entry includes metadata such as namespace, title, description, URL, homepage, repo, maintainer, license, component and block counts, and tags.

```json
{
  "namespace": "yours",
  "title":     "Your registry",
  "description": "What it offers in one line.",
  "url":       "https://yours.example/r",
  "homepage":  "https://yours.example",
  "repo":      "https://github.com/you/yours",
  "maintainer": "you",
  "license":   "MIT",
  "components": 12,
  "blocks":     2,
  "tags":      ["light", "minimal"]
}
```

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

### Import and use Avatar component

Source: https://zero-sq.github.io/slintcn/docs/avatar.html

Import the Avatar component and use it with a fallback initials string and size. Optionally, set the source property to an image URL.

```slint
import { Avatar } from "slintcn/components/avatar.slint";

Avatar { fallback: "SK"; size: 40px; } // or source: @image-url(...)
```

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

### Use NavigationMenu with items, active binding, and navigate callback

Source: https://zero-sq.github.io/slintcn/docs/navigation-menu.html

Use the NavigationMenu component in a Slint file. Import the component, set the items, bind the active property two-way to your routing state, and handle the navigate callback to update the page.

```slint
import { NavigationMenu, NavigationItem } from "slintcn/components/navigation-menu.slint";

NavigationMenu {
    items: [{ label: "Overview" }, { label: "Customers" }, { label: "Products" }];
    active <=> page;
    navigate(i) => { /* … */ }
}
```

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

### Use Team block with members, invite, and manage callbacks

Source: https://zero-sq.github.io/slintcn/docs/team.html

Import and use the Team block in a Slint file. The members property takes an array of TeamMember objects; the invite callback fires on the Invite button and manage fires with the row index when a row's action is triggered.

```slint
import { Team, TeamMember } from "slintcn/blocks/team.slint";

Team {
    members: [{ name: "Sofia Davis", email: "sofia@acme.dev", role: "Owner", initials: "SD" }];
    invite => { /* … */ }
    manage(i) => { /* … */ }
}
```

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

### Import and use CompassStrip in Slint

Source: https://zero-sq.github.io/slintcn/docs/compass-strip.html

Import the CompassStrip component and instantiate it, binding the heading-deg property to a player-heading variable and setting the strip width.

```slint
import { CompassStrip } from "slintcn/components/compass-strip.slint";

CompassStrip {
    heading-deg <=> player-heading;   // 0=N, 90=E, 180=S, 270=W
    strip-width: 240px;
}
```

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

### Add components with npx slintcn

Source: https://zero-sq.github.io/slintcn

Alternative to cargo for Node users. Adds the same components (button, card, dialog) using npx.

```bash
…or `npx slintcn@latest add button card dialog` if you live in Node.
```

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

### API

Source: https://zero-sq.github.io/slintcn/docs/dropdown-menu.html

Accessibility and keyboard interaction details for the DropdownMenu component.

```APIDOC
## API

### Accessibility
- `focusable`: yes
- `keyboard`: Arrow keys, Enter
- `Escape` dismisses
```

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

### Import and use Dashboard component

Source: https://zero-sq.github.io/slintcn/docs/dashboard.html

Import the Dashboard component from the slintcn library and instantiate it in your Slint code.

```slint
import { Dashboard } from "slintcn/blocks/dashboard.slint";

Dashboard { }   // edit the inline metric + activity data after install
```

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

### Use Profile component in Slint

Source: https://zero-sq.github.io/slintcn/docs/profile.html

Import the Profile component and bind its properties to local variables, handling the save and cancel callbacks.

```slint
import { Profile } from "slintcn/blocks/profile.slint";

Profile {
    display-name <=> name;
    email <=> email;
    bio <=> bio;
    save => { /* … */ }
    cancel => { /* … */ }
}
```

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

### Toggle component usage

Source: https://zero-sq.github.io/slintcn/docs/toggle.html

Import the Toggle component and ToggleVariant, then instantiate the Toggle element with a label and a two-way binding for the pressed state.

```slint
import { Toggle, ToggleVariant } from "slintcn/components/toggle.slint";

Toggle { text: "Bold"; pressed <=> bold; }
```

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

### Usage: AlertDialogPanel in Slint

Source: https://zero-sq.github.io/slintcn/docs/alert-dialog-panel.html

Import and instantiate AlertDialogPanel with title, description, and callbacks for confirmed and cancelled actions.

```slint
import { AlertDialogPanel } from "slintcn/components/alert-dialog-panel.slint";

AlertDialogPanel {
    title: "Delete this account?";
    description: "This action cannot be undone.";
    confirmed => { /* … */ }
    cancelled => { /* … */ }
}

```

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

### ButtonGroup usage

Source: https://zero-sq.github.io/slintcn/docs/button-group.html

Import the ButtonGroup and Button components, then create a ButtonGroup with three outline buttons labeled Day, Week, and Month.

```slint
import { ButtonGroup } from "slintcn/components/button-group.slint";
import { Button, ButtonVariant } from "slintcn/components/button.slint";

ButtonGroup {
    Button { variant: ButtonVariant.outline; text: "Day"; }
    Button { variant: ButtonVariant.outline; text: "Week"; }
    Button { variant: ButtonVariant.outline; text: "Month"; }
}
```

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

### Select component usage

Source: https://zero-sq.github.io/slintcn/docs/select.html

Import the Select and SelectItem components from slintcn/components/select.slint. Define a Select with items, bind selected-index to a variable, and handle the changed callback.

```slint
import { Select, SelectItem } from "slintcn/components/select.slint";

Select {
    items: [{ label: "Monthly" }, { label: "Yearly (-20%)" }];
    selected-index <=> billing;
    changed(i) => { /* … */ }
}
```

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

### Use Accordion with open-index binding

Source: https://zero-sq.github.io/slintcn/docs/accordion.html

Import and use the Accordion component in a Slint file. Bind open-index to a property (e.g., open) to control the expanded item; -1 closes all. Each item requires title and content fields.

```slint
import { Accordion, AccordionItem } from "slintcn/components/accordion.slint";

Accordion {
    open-index <=> open;
    items: [
        { title: "Is it accessible?", content: "Yes — keyboard + Space toggle." },
        { title: "Is it styled?", content: "Dark glass by default." },
    ];
}
```

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

### Use DialogPanel in Slint

Source: https://zero-sq.github.io/slintcn/docs/dialog-panel.html

Import the DialogPanel component and instantiate it in your own overlay root. The panel is headless, so you control visibility and centering. The closed callback fires when the X-close button is pressed, allowing you to hide the panel.

```slint
import { DialogPanel } from "slintcn/components/dialog-panel.slint";

// Headless: mount in your own overlay root, control visibility + centering.
DialogPanel {
    title: "Confirm your action";
    description: "This cannot be undone.";
    closed => { /* hide me */ }
}
```

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

### Use Login component in Slint

Source: https://zero-sq.github.io/slintcn/docs/login.html

Import and use the Login component in a Slint file. Bind the email and password properties two-way, and handle the submit and sso callbacks for the primary and SSO actions.

```slint
import { Login } from "slintcn/blocks/login.slint";

Login {
    email <=> email;
    password <=> password;
    submit => { /* … */ }
    sso => { /* … */ }
}
```

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

### Configure slintcn.json with custom registries

Source: https://zero-sq.github.io/slintcn/docs/directory.html

Configure custom registries in your project's slintcn.json. The default registry is the official slintcn registry, and additional registries can be added with a namespace key.

```json
{
  "style": "default",
  "registries": {
    "default": "https://zero-sq.github.io/slintcn/r",
    "acme":    "https://acme.dev/slintcn"
  }
}
```

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

### Use AspectRatio component with ratio 16/9

Source: https://zero-sq.github.io/slintcn/docs/aspect-ratio.html

Use the AspectRatio component to lock a child's height to a fraction of its width. Set the ratio property (e.g., 16/9) and place content inside, such as an Image with image-fit: cover.

```slint
import { AspectRatio } from "slintcn/components/aspect-ratio.slint";

AspectRatio {
    ratio: 16 / 9;
    Image { source: @image-url("hero.png"); image-fit: cover; }
}
```

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

### Use ContextMenu component in Slint

Source: https://zero-sq.github.io/slintcn/docs/context-menu.html

Import and use the ContextMenu component. Set the items property to an array of ContextMenuItemData, handle the selected callback to receive the chosen row's index, and place the right-clickable area as the component's children.

```slint
import { ContextMenu, ContextMenuItemData } from "slintcn/components/context-menu.slint";

ContextMenu {
    items: [{ label: "Cut" }, { label: "Copy" }, { label: "Paste" }];
    selected(i) => { /* … */ }
    // right-clickable area = @children
}
```

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

### Use Collapsible component in Slint

Source: https://zero-sq.github.io/slintcn/docs/collapsible.html

Import and use the Collapsible component. The `open` property is two-way bound to `show-advanced`, and the `toggled` callback fires with the new open value after a toggle click. The body content is hidden by default.

```slint
import { Collapsible } from "slintcn/components/collapsible.slint";

Collapsible {
    title: "Advanced settings";
    open <=> show-advanced;
    toggled(o) => { /* … */ }
    // body content
    Text { text: "Hidden by default; click the title to reveal."; }
}
```

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

### Tooltip usage with TooltipSide.top

Source: https://zero-sq.github.io/slintcn/docs/tooltip.html

Import the Tooltip component and TooltipSide enum from slintcn/components/tooltip.slint. Set the text to display and the side to anchor the bubble (top, right, bottom, or left). Wrap the trigger element, such as a Button, inside the Tooltip.

```slint
import { Tooltip, TooltipSide } from "slintcn/components/tooltip.slint";

Tooltip {
    text: "Add to library";
    side: TooltipSide.top;
    Button { text: "Hover me"; }
}
```

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

### Usage: Label with LabelVariant.required

Source: https://zero-sq.github.io/slintcn/docs/label.html

Shows how to import and use the Label component with the `LabelVariant.required` variant, which appends an asterisk to the label text.

```slint
import { Label, LabelVariant } from "slintcn/components/label.slint";

Label { text: "Email"; variant: LabelVariant.required; }
```

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

### AlertDialog usage in Slint

Source: https://zero-sq.github.io/slintcn/docs/alert-dialog.html

Import the AlertDialog component from the slintcn package and instantiate it in a Slint file. Set the open property with a two-way binding to control visibility, and provide title and description text. The confirmed callback fires when the action button is pressed and the modal closes itself.

```slint
import { AlertDialog } from "slintcn/components/alert-dialog.slint";

AlertDialog {
    width: parent.width;
    height: parent.height;
    open <=> alert-open;
    title: "Delete this account?";
    description: "This action cannot be undone.";
    confirmed => { /* … */ }
}
```

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

### Use Reticle component in Slint

Source: https://zero-sq.github.io/slintcn/docs/reticle.html

Import and use the Reticle component in a Slint file. Configure the reticle's size, color, stroke width, tick length, gap, and center dot visibility through its properties.

```slint
import { Reticle } from "slintcn/components/reticle.slint";

Reticle {
    size: 28px;
    tint: #fafafa;
    stroke-width: 2px;
    tick-length: 8px;
    gap: 6px;
    show-center: true;
}
```

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

### Use Separator component in Slint

Source: https://zero-sq.github.io/slintcn/docs/separator.html

Import the Separator component and create a horizontal separator. The orientation property accepts SeparatorOrientation.horizontal (default) or SeparatorOrientation.vertical.

```slint
import { Separator, SeparatorOrientation } from "slintcn/components/separator.slint";

Separator { orientation: SeparatorOrientation.horizontal; }
```