title: "@stnd/ui" aliases: [] created: 2026-07-05 07:47 modified: 2026-07-05 19:15 last_audited: 2026-07-14 audit_interval_days: 90 next_audit: 2026-10-12 audit_priority: 3 maturity: sprout mode: read publish: false status: active tags:

• package
• stnd theme: kernel type: package visibility: private

@stnd/ui

Shared UI components for the Standard Ecosystem.

Most buttons/badges/cards should just be a CSS class on plain HTML (see @stnd/styles) — no JS, no import. This package is only for the handful of things that genuinely need interactivity: a dropdown that manages keyboard navigation, a confirm dialog you can await, a right-click menu. If you’re reaching for a component here and it’s not doing something stateful or ARIA-heavy, check whether a CSS class already does the job.

Use it (the confirm dialog, the most common one):

import { confirm } from "@stnd/ui/dialog.js";
const ok = await confirm({ title: "Delete this?", intent: "danger" });

Overview

@stnd/ui provides a collection of reusable, accessible, and high-quality UI components built for Astro and Svelte 5. These components are designed to work seamlessly with @stnd/styles and follow the Standard design principles.

🏛 The Philosophy: CSS First, Components Second

Standard is built on the philosophy of keeping the codebase as clean, fast, and static as possible. Before importing a component from @stnd/ui, ask yourself: Can this be done with just HTML and @stnd/styles?

Many UI elements you see in the Playground (like Buttons, Badges, Cards, and Inputs) are not components. They are simple CSS classes applied to standard HTML elements.

Why?

• Zero JavaScript overhead.
• Perfect semantic HTML.
• Maximum flexibility without passing dozens of props.

Example: Buttons & Badges (CSS Only)

You do not need a <Button> or <Badge> component. Just use the global classes provided by @stnd/styles:

<!-- Primary Button -->
<button class="btn">Save Changes</button>

<!-- Ghost Button -->
<button class="btn ghost">Cancel</button>

<!-- Success Badge -->
<span class="badge success">Active</span>

When to use @stnd/ui Components?

You should only import components from this package when you need:

1. Complex interactivity (e.g., Dropdown, ContextMenu).
2. State management (e.g., DialogManager, ComboBox).
3. Advanced Accessibility / ARIA management (e.g., Accordion).
4. Complex composition (e.g., Accordion, Scroller, TableOfContents).

Icons and Lottie animations are not in this package — they live in @stnd/icon (import Icon from "@stnd/icon/Icon.astro"). See its README.

🧩 Component API Reference

Astro Components (Zero JS)

<Accordion />

Accessible, collapsible content sections.

• open (boolean): Sets the initial open state.

Svelte 5 Components (Hydrated)

<Alert />

Semantic feedback banners.

• class (string): The semantic intent: success, warning, error, info. (Defaults to accent color).
• title (string): Optional bold title.
• icon (string): Optional string icon (e.g., ✓, ⚠).

<Alert class="warning" title="Watch out!" icon="⚠">
  This action cannot be undone.
</Alert>

<Dropdown />

Accessible, keyboard-navigable dropdown menus.

• align (string): Alignment of the menu (start, center, end). Defaults to start.
• Slots: trigger (the button that opens the menu), default (the menu items).

Related Sub-components:

• <DropdownItem icon="ph:user" shortcut="⌘P">Profile</DropdownItem>
• <DropdownLabel label="My Account" />
• <DropdownSeparator />

<ContextMenu />

Viewport-aware right-click menus.

• Slots: default (the area that triggers the menu on right-click), content (the menu items).

🚨 Dialog Manager

The DialogManager allows you to trigger accessible confirmation dialogs programmatically from any script using a simple Promise-based API. This prevents littering your DOM with hidden modal HTML.

1. Mount the Manager

Ensure <DialogManagerComponent client:load /> is mounted once in your root layout (Standard does this by default).

2. Call the API

import { confirm } from "@stnd/ui/dialog.js";

const isConfirmed = await confirm({
  title: "Delete this item?",
  description: "This action cannot be undone. Are you sure?",
  confirmLabel: "Yes, Delete",
  cancelLabel: "Cancel",
  intent: "danger" // "neutral" | "danger"
});

if (isConfirmed) {
  // Proceed with deletion
}

Notes / Observations

(jot down anything noticed here — quirks, gotchas, ideas)

Todo

• [ ] README is thin relative to the component count — Combobox, [priority:: 3] [token_scale:: 3] [created:: 2026-07-14] [area:: framework] Panel, Pagination, Scroller, TableOfContents, Toast, CfImage, LauncherHint exist on disk but aren’t documented above. Worth a pass once this package settles.