Component Explorer · osx Components

Typography

Heading

<osx-heading>

Semantic hierarchy with an editorial OS X voice.

Built for thoughtful software.

A complete application vocabulary.

Interface controls

Component library

Copy

<osx-copy>

Readable body text and supporting copy.

A larger introduction for product narratives and important explanations.

Default copy stays comfortable across settings, inspectors, and documentation.

Supporting details remain clear without competing for attention.

Link

<osx-link>

Accessible navigation in every interaction state.

Browse buttons

View on GitHub

Unavailable destination

Ecosystem

Ecosystem Card

<osx-ecosystem-card>

Transparent first-party discovery across related products.

Application & agents

App Shell

<osx-app-shell>

Responsive agent workspace regions with optional resizing.

main · clean

I inspected the requested files and prepared a bounded patch.

Agent Composer

<osx-agent-composer>

Enter-to-send prompt input.

Agent Message

<osx-agent-message>

Conversation roles and streaming states.

Explain the verification failure.

The failing assertion expects the previous token state…

Agent Run Status

<osx-agent-run-status>

Plan, work, verify, and completion.

Agent Approval

<osx-agent-approval>

Human control over risky actions.

Tool Call

<osx-tool-call>

Inspectable bounded tool activity.

Agent output

Thinking

<osx-thinking>

Inspectable reasoning summaries and progress.

The session store is written before the refresh token is rotated. I’m checking whether the failure is transactional or an assertion mismatch.

Plan

<osx-plan>

Per-step execution state, not just run lifecycle.

Markdown

<osx-markdown>

Streaming-safe agent responses with structured code and tables.

Artifact

<osx-artifact>

Generated output with copy, download, and open actions.

Citation

<osx-citation>

Inline grounding chips for RAG and search agents.

Source Panel

<osx-source-panel>

Readable source details coordinated with citations.

Developer tools

Diff Viewer

<osx-diff-viewer>

Unified and split, syntax-aware patch review.

Terminal

<osx-terminal>

Command output and execution controls.

File Tree

<osx-file-tree>

Filterable repository hierarchy.

Feedback & loading

Alert

<osx-alert>

Persistent inline feedback.

Toast

<osx-toast>

Transient, politely announced feedback.

Show toast

Progress

<osx-progress>

Determinate and indeterminate work.

Shimmer

<osx-shimmer>

One flexible loading surface.

Skeleton

<osx-skeleton>

Useful text, profile, and card shapes.

Spinner

<osx-spinner>

Compact indeterminate activity feedback.

Icon

<osx-icon>

The complete curated Lucide vocabulary.

Icon Button

<osx-icon-button>

Consistent icon-only actions and hit areas.

Foundations

Tabs

<osx-tabs>

Keyboard-navigable content panels.

Overview

Use tabs when related panels share one context.

API

Properties, events, slots, and tokens.

Accessibility

Arrow keys move between tabs.

Dialog

<osx-dialog>

Centered modal with controlled actions.

Open dialog

Review the changelog before continuing.

Empty State

<osx-empty-state>

Helpful zero-data guidance.

Badge

<osx-badge>

Compact labels and statuses.

Draft

Review

Ready

2 checks

Avatar

<osx-avatar>

Initials, images, and presence.

Inputs & navigation

Button

<osx-button>

Standard actions with optional Lucide icons.

Cancel

Download

Continue

Remove

Checkbox

<osx-checkbox>

Checked, mixed, and disabled states.

Radio Group

<osx-radio-group>

Native single-choice forms with optional card treatment.

Toggle

<osx-toggle>

Immediate on/off settings with switch semantics.

Text Field

<osx-text-field>

Labeled inputs with optional Lucide icons and validation.

Textarea

<osx-textarea>

Multi-line content with validation and controlled resizing.

Select

<osx-select>

Native selection with structured options and validation.

Segmented Control

<osx-segmented-control>

Compact single-selection views.

Structure

Data Table

<osx-data-table>

Searchable, selectable application data with pagination.

Table

<osx-table>

Responsive native data with sortable columns.

Window

<osx-window>

Complete OS X application chrome.

Details

Edit

osx Components

A Vue-authored Custom Element library.

Source List

<osx-source-list>

Finder-style section navigation.

Split View

<osx-split-view>

Primary-detail composition.

Files

src

demo

Component

Select an element to inspect its story.

Sheet

<osx-sheet>

Window-attached confirmation.

Open sheet

Dependencies remain unchanged.

Status Bar

<osx-status-bar>

Compact connection and activity state.