Live preview

Components and sections

Every governed library file stays selectable through one responsive component catalog and one live preview shell.

Open catalog Open components Open styleguide Back to library

UI catalog

Selective live preview of the shared UI through one navigation, one filter surface, and one real library directory in the main workspace.

Showroom task

Choose whether you need the library catalog, individual building blocks, or token truth.

Catalog Components Styleguide

Catalog control

The showroom remains a documentation and verification surface for shared UI, not a second product frontend.

Organisms

Filter bar

Search, family, surface, and status stay controlled through the same governed catalog toolbar.

Reset
ORGANISMS STABLE SYSTEM organisms/showroom-catalog

Showroom Catalog

The catalog itself stays a shared UI organism with one selective preview instead of a second rendering engine.

Theme
Viewport
Category System and catalog
Surface System
Status Stable
Source file resources/ui/organisms/showroom-catalog/showroom-catalog.php
System points
  • Shell-adjacent composition
  • Navigation, dialogs, and data
  • Shared UI instead of bespoke views
Series 01 Foundation STABLE Current

Showroom Catalog

The catalog itself stays a shared UI organism with one selective preview instead of a second rendering engine.

System and catalog System resources/ui/organisms/showroom-catalog/showroom-catalog.php
Live preview Desktop

UI catalog

One selective preview surface.

Catalog modes

Nested preview for the showroom catalog organism itself.

Catalog

Catalog control

The showroom stays focused on the shared UI library.

Atoms

Filter bar

Search, family, surface, and status stay controlled through one filter bar.

Reset
ATOMS STABLE CORE atoms/button

Button

Buttons expose one shared interaction contract.

Theme
Viewport
Category Atoms
Surface Core
Status Stable
Source file resources/ui/atoms/button/button.php
System points
  • Shared variants
  • Shared focus ring
Series 01 STABLE Current

Button

Buttons expose one shared interaction contract.

Core resources/ui/atoms/button/button.php
Live preview Desktop
ATOMS-BUTTON 5 references Min 5

Button examples

Button previews render real shared action states, sizes, and widths through the governed atom.

01 PRIMARY primary-md button-01

Primary action

Default primary action with leading icon.

02 SECONDARY secondary-md button-02

Secondary action

Secondary emphasis for supporting actions.

03 GHOST ghost-md button-03

Ghost action

Quiet action style using the same spacing and focus rules.

04 DANGER danger-md button-04

Danger action

Destructive action still governed by shared tokens and accessibility states.

05 FULL-WIDTH primary-full-width button-05

Full-width action

Full-width button for forms and narrow mobile surfaces.

Surface Core
Status Stable
Source file resources/ui/atoms/button/button.php
System points
  • Shared variants
  • Shared focus ring
Category System and catalog
Surface System
Status Stable
Source file resources/ui/organisms/showroom-catalog/showroom-catalog.php
System points
  • Shell-adjacent composition
  • Navigation, dialogs, and data
  • Shared UI instead of bespoke views

Filter state and count truth

One library total, one filter pool, one active family result count.

The showroom keeps global library count separate from the current filter pool and the active family result set.

Library total 77
Filter pool 77
Active family 22

Current state

Family: Organisms Surface: All surfaces Status: All statuses

Stateful navigation

Show all matching families Reset showroom filters