BeeUI Showcase

BeeUI ShowcaseThe Showcase is the executable inspection surface for BeeUI: every public component, production pattern, theme and stress fixture, running for real rather than as a screenshot. It needs JavaScript to run. The catalog below is the same inventory it renders.Build 0.86.2-rc.3 · commit 3316a6091ebb0e6fd3da12d725d3c225b046f071 · environment production.Components (63)

Accordion — Single-value controlled/uncontrolled disclosure group where one item expands at a time.

Alert Banner — Inline semantic status callout with live-region announcement for feedback that stays on screen.

Alert Dialog — Confirmation/destructive modal built on the Dialog kernel; a backdrop press or Escape never closes it.

App Header — Title/description/leading/trailing screen-header composition; owns no navigation library.

Avatar — Image-with-fallback identity surface with size variants and source-keyed failure reset.

Badge — Compact semantic status label with paired foreground/background tokens.

Bottom Action Bar — Bottom-anchored primary-action surface; safe-area ownership stays with the app shell.

Box — Thin View primitive with no design assumptions, for ad-hoc layout.

Breadcrumb — Router-neutral breadcrumb trail with decorative separators hidden from accessibility.

Button — Accessible pressable with variant/size/loading/disabled states and an optional label primitive.

Calendar — Month-grid date-selection surface; owns no field, popover, or input chrome.

Card — Elevated/outlined surface with variant and spacing contract.

Checkbox — Controlled boolean/indeterminate checkbox; enabled usage without onCheckedChange warns in development.

Chip — Standalone toggle or value-scoped group item with button/radio/checkbox semantics.

Collapsible — Controlled/uncontrolled single-region disclosure with content mounted only while open.

Date Picker — Native system date-picker field backed by @react-native-community/datetimepicker.

Date Time Picker — Native combined date-and-time picker field backed by @react-native-community/datetimepicker.

Description List — Read-only grouped label/value metadata composition with no data-state ownership.

Dialog — Controlled/uncontrolled modal backed by React Native core Modal, with a real Web focus trap and Escape dismissal.

Dropdown Menu — Non-modal action menu on the shared anchored-overlay runtime, with items, checkbox items, and radio groups.

Field — Label/description/error composition for text-entry controls; wires accessible label and required relationships to text inputs only.

Form Group — Structural legend/description/error grouping for related controls without becoming one accessible parent element.

Form Message — Destructive form feedback (with muted HelperText variant) using polite live-region semantics.

Icon Button — 44px icon-only action; an accessible label is required.

Input — Single-line text input with semantic focus/invalid/disabled states and Field-provided accessibility.

Keyboard Aware Screen — Scrollable form-screen shell with bounded width, explicit safe-area ownership, and platform keyboard handling.

Label — Semantic form/control label with accessible required-state wording and optional nativeID linkage.

Link — Link semantics over Pressable; owns no navigation library or routing behavior.

List Group — Bordered grouped-row surface with list container semantics and an aligned header.

List Item — Grouped row (with a settings-row specialization) that synthesizes accessible names from primitive content when interactive.

Metadata Row — Read-only label/value metadata row primitive.

OTP Input — Controlled/uncontrolled one-time-code input with numeric normalization and per-value completion callbacks.

Pagination — Controlled page/page-count context with normalized boundaries and type-enforced page/prev/next items.

Password Input — Password field with visibility toggle and safe keyboard/autofill defaults; caller overrides remain authoritative.

Popover — Non-modal anchored surface on the shared overlay runtime with flip/shift/collision and safe-area policy.

Progress — Clamped determinate progress bar with native progressbar semantics.

Radio — Controlled radio item and RadioGroup coordinator with native radiogroup semantics.

Safe Area — BeeUIProvider application root plus an explicit SafeArea surface with caller-owned edge selection.

Screen — Base application surface with semantic background and optional spacing; owns no safe-area behavior and offers only an opt-in scroll body.

Search Input — Search-keyboard input layered on Input; clearing a non-empty query emits one onSearch('') reset.

Section — Title/description/action/content composition for screen sections.

Segmented Control — Compact mutually-exclusive selection surface with radiogroup semantics.

Select — Persistent single string-value selection with anchored option surface and listbox semantics on Web.

Separator — Decorative-by-default divider (semantic when requested); vertical orientation stretches across the cross axis.

Sheet — Gesture-driven bottom sheet with detents on the shared overlay runtime.

Skeleton — Decorative static loading placeholder surface.

Spinner — Native activity indicator with semantic tone mapping.

Stack — Typed direction/gap/alignment/wrap layout over View, with HStack/VStack specializations.

Stat — Layout-only metric composition (label/value/help text) with no formatting or state ownership.

State Message — Empty-state and error-state (with retry) composition for zero/failure surfaces.

Stepper — Controlled current-step context with finite normalization and duplicate-step fail-safe; owns no workflow state.

Switch — Controlled native switch with semantic track/thumb colors; enabled usage without onValueChange warns in development.

Table — Semantic data-table primitives that render real table/th scope/aria-sort semantics on Web.

Tabs — Controlled tab set sharing state across list/triggers/content; inactive panels are not mounted.

Text — Semantic typography primitive with variant/tone styling that honors OS/browser font scaling.

Textarea — Multiline text input using the same semantic contract as Input.

Theme Scope — BeeThemeScope subtree boundary that applies a scoped theme override to its descendants.

Timeline — Read-only ordered history composition with semantic marker states; owns no workflow state.

Toast — Provider-scoped runtime for toast notifications, exposed via useToast (show/dismiss/dismissAll) with FIFO queueing and safe-area-aware stacking.

Toolbar — Single-row action toolbar that measures its own width and collapses lower-priority items into an overflow menu when they no longer fit.

Tooltip — Non-interactive contextual annotation (ADR-005): a hover/focus delay state machine plus an anchored, non-focusable bubble.

Use Bee Token — Read resolved design-token values at runtime via useBeeToken (hook) and getBeeToken (imperative).

Visually Hidden — Keeps non-interactive assistive content in the accessibility tree while removing it from visual layout.

Production patterns (37)

Forgot Password — Request a password-reset code for an account email.

Interests Onboarding — Let a new user pick interest topics during onboarding.

Password Updated — Confirmation surface after a password change succeeds.

Profile Setup — Collect display name, username, bio, and photo for a new profile.

Reset Password — Enter and confirm a new password behind a reset flow.

Verify Code — Enter a one-time verification code with resend and destination change.

Welcome — First-run welcome surface routing to get-started or sign-in.

Analytics — Range-filtered analytics dashboard with metric summaries.

Dashboard Overview — Finance dashboard overview with balances, activity, and primary actions.

Invoice Detail — Read-only invoice detail with download and share actions.

Payment Methods — List and manage saved payment methods.

Subscription — Current subscription plan with upgrade, manage, and cancel actions.

Transaction Detail — Read-only transaction detail with receipt and help actions.

Transactions — Searchable, filterable transaction list with loading/error/retry states.

Wallet — Wallet home with accounts, balances, and money-movement actions.

Cart — Shopping cart with quantity edits, removal, and checkout.

Checkout — Order review with address editing and place-order action.

Messages — Conversation list for a direct-messages inbox.

Notifications — Notification feed with mark-read and selection.

Order Detail — Order detail with reorder and support actions.

Orders — Order history list with selection.

Post Detail — Social post detail with like, share, and comment submission.

Product Detail — Product detail with add-to-cart and favorite actions.

Product Feed — Browsable product grid with search and favorites.

Product Search — Product search results with sort and filter affordances.

Social Feed — Social timeline with like, comment, share, and compose.

User Profile — Public user profile with follow and post-open actions.

Account — Account hub with linked accounts, devices, sign-out, and delete.

Appearance — Theme/appearance preference selection.

Change Password — Change password with current/new/confirm fields.

Edit Profile — Edit profile fields and avatar with save.

Notification Settings — Toggle notification channels and categories.

Privacy Security — Privacy and security settings hub with sessions and 2FA entries.

Profile — Personal profile summary routing to edit, account, and activity.

Settings — Top-level settings menu routing to account, privacy, and appearance.

Elsewhere

Component reference

Pattern reference

Production demo application

Documentation