slintcn docs Playground GitHub npm

Components

56 components + 8 blocks — copy-paste Slint, install with slintcn add.

Components

Clickable action — 8 variants × 8 sizes, focus ring, press feedback.

Surface container + CardHeader/Title/Description/Content/Footer.

Single-line text field with focus ring and placeholder.

Small status label — default/secondary/outline/destructive/ghost/link.

Horizontal or vertical hairline divider.

Form label — default/muted/required (asterisk).

Headless dialog card (no Scrim/mount) for your own overlay root.

Modal overlay with title/description, X-close, click-outside dismiss.

Alert Dialog Panel

Headless destructive-confirm card (Cancel + Action) for your own overlay root.

Destructive-confirm modal — Cancel + Action, no backdrop dismiss.

Headless drawer card surface (no Scrim/slide) for your own overlay root.

Side-anchored drawer (top/right/bottom/left) with slide animation.

Hover bubble (inverted) in a PopupWindow that escapes parent bounds.

Stacked notification queue (Rust-backed VecModel) with fade-out.

Segmented control or line variant; arrow-key navigation.

Path-drawn check with optional label; Space toggles.

Sliding on/off toggle (36×20 track) with optional label.

Path-stroke icon (24-unit viewBox) with size + tint.

Single-select group, vertical or horizontal, arrow-key nav.

Trigger + PopupWindow dropdown (close-on-click-outside).

Horizontal value bar (0–100) with animated fill.

Pulsing placeholder for loading states.

Circular image with initials fallback; size variants.

Bordered callout (icon + title + description); default/destructive.

Multi-line word-wrapping text field with focus ring.

Two-state pressable button (default/outline).

Single-select row of toggles.

Single-open collapsible with animated height + chevron swap.

Draggable value slider (track + thumb), arrow-key support.

Navigation path with chevron separators; last item = current.

Prev / page-numbers / next with active highlight.

Header + rows, equal-stretch columns, hairline dividers.

Typography scale — 8 variants × 5 tones (import as Typography).

Keyboard-hint cap for HUDs — size × tone (affirm/deny).

Rounded-full HUD status pill (scrim0/1/2).

Inventory / hotbar slot (tone × state × interactive), holds children.

Clipped Flickable viewport with a slim custom scrollbar.

Click-triggered floating panel; closes on click outside.

Right-click menu over an area; opens at the cursor.

Click-triggered action menu anchored below the trigger.

Hover-triggered floating card (title + description).

Horizontal menu bar (File/Edit/View); each label opens its own menu.

Navigation Menu

Horizontal navigation strip with an active highlight; you drive routing.

Searchable Select — type to filter, Enter to choose.

Command palette (⌘K) — modal search over an action list.

Sortable / paginated table — click headers to sort, rows to act.

Month-grid date picker; the consumer owns the date math.

Trigger that opens a Calendar in a popup.

Collapsible app sidebar — icons + labels, active highlight.

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

Layout helper — locks child height to a fraction of its width.

Single show/hide section — trigger toggles the body.

Visually-joined cluster of Buttons (zero-gap horizontal row).

Horizontal strip of SlotTiles for inventory / abilities.

Crosshair overlay — 4 ticks + optional center dot.

Horizontal heading indicator — N/E/S/W marks scroll under a center pointer.

Blocks

Auth card — email/password + remember + submit. Composed block.

Minimal centered login card with an SSO action. Composed block.

Three-tier pricing cards with a highlighted plan. Composed block.

Metric cards + recent-activity feed. Composed block.

Tabbed settings panel (Account / Notifications). Composed block.

Team-members list with avatars, roles, and an Invite action. Composed block.

Account form — avatar, name, email, bio, with Save / Cancel. Composed block.

Analytics overview — metric cards + traffic-by-source bars. Composed block.