Photon 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/*.

Questions that each reveal an answer — the site's FAQ.

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.

One message's surface — outlined or inverse, aligned to its author.

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

A month of days to read or choose from, on React DayPicker.

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

Bars and lines over time: one data contract, one tooltip, ordered series colours.

An inbox in one card — conversations, the open thread, a composer; wide or compact.

Select one or more options confirmed on submit.

Read-only code panel, colored by Shiki, with wrap, copy, and a scrolling fold.

Keyboard-first command menu built on cmdk.

Quiet icon button that copies a value and says so.

Records in columns — sortable headers, aligned figures, rows that open a page.

A field that shows the chosen date and opens a calendar to change it.

Description List

Dense label / value facts about one record, mono and copyable.

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

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

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

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

Search field and filter chips that pin above a log list, fully controlled.

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.

One-line rows for requests, deliveries, and messages, with infinite loading.

Dropdown list of actions opened from a trigger.

One turn in a thread: avatar beside header, bubble, and footer.

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.

Searchable, grouped checklist for what something covers — events, permissions.

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.

Indeterminate loading ring for in-flight work.

A figure with its name, how it moved, and a row of them as one card.

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

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

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

Transient, non-blocking notification for background actions.

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

Related Toggle buttons with shared roving focus.

A request's spans as a waterfall, with its log lines.

In progress

Not yet finetuned — still settling.

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.

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.

Switch between peer views in the same context.

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

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