Pho Design System

Components

Opinionated, Photon-branded components composed from Base UI primitives. Each is accessible, themeable, and importable on its own.

Components

Finetuned and ready to import from @photon-ai/pho-ui/components/*.

Free-text input with matching suggestions as you type.

User or entity image with initials / icon fallback.

Small non-interactive status label — plan tier, state, count.

Filled / outlined / ghost / effect × default / destructive, sizes, slots, shapes, and loading.

Bordered content panel with header, body, and optional footer.

Select one or more options confirmed on submit.

Keyboard-first command menu built on cmdk.

Modal panels with actions footer, focus trap, and enter/exit animation.

Server errors (4xx / 5xx) rendered from the Photon problem contract.

Accessible scaffolding around a control — label, hint, error.

Accessible fields with icons, validation, and password reveal.

One field surface shared by a text control and its addons.

Keyboard keycap for documenting a shortcut.

Dropdown list of actions opened from a trigger.

One-time-code input with paste and arrow-key navigation.

Searchable country picker + national number field that commits E.164.

Click-triggered floating panel for rich, interactive content.

Choose exactly one option from a small, visible set.

Capped scroll region with overlay scrollbars and progressive edge fade.

Pick one option from a list that opens below the trigger.

Pulsing placeholder bone for loading surfaces.

Empty or error region — icon, title, supporting copy, action.

Three-way appearance control — Device, Light, and Dark.

In progress

Not yet finetuned — still settling.

Stack of headers that each reveal a section of content.

Show or hide a single region with a height animation.

Text input that filters a list and commits a value from it.

Actions for a specific element, opened by right-click.

Panel that slides in from the edge with swipe-to-dismiss.

Groups related fields under a shared legend.

Coordinates Fields under one form with constraint validation.

Horizontal strip of top-level menus — File / Edit / View.

Scalar measurement within a known range — quota, disk usage.

Navigation Menu

Primary site navigation with dropdown panels of links.

Standalone status card with tinted glyph and supporting line.

Numeric input with steppers, keyboard step, and scrubbing.

Hover-triggered card that previews what's behind a link.

How far along a task is — upload, install, multi-step flow.

Thin rule that divides related groups of content.

Pick a number — or a range — along a track by dragging.

Indeterminate loading ring for in-flight work.

On/off control for a setting that takes effect immediately.

Switch between peer views in the same context.

Transient, non-blocking notification for background actions.

Two-state button that stays pressed — Bold / Italic toolbar.

Related Toggle buttons with shared roving focus.

Row of related controls that acts as a single tab stop.

Brief label on hover or focus — most often naming an icon.