BeeUI
Menu

Examples · recipes · starters · v20260902.0.0

Build from working BeeUI source.

Browse source-equal component examples, complete production screen recipes, and isolated consumer starters. Every preview links back to the real Showcase or committed source; there is no second examples-only runtime.

Browse recipesOpen ShowcaseGetting started
62component recipes
37production patterns
5consumer starters
1canonical Showcase runtime
Repository-local evaluation today. BeeUI packages/CLI are still unpublished. Package starters install locally packed tarballs; source ownership uses the repository-local Registry workflow.

Explore all

Search the complete source-driven inventory.

The component and pattern collections below come directly from BeeUI's public manifests. Adding/removing public source changes this page automatically.

Component recipes

Full component docs →

Component recipe

Accordion

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

Navigation & disclosureWeb previewiOSAndroid
Preview + code

Component recipe

Alert Banner

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

Overlays & feedbackWeb previewiOSAndroid
Preview + code

Component recipe

Alert Dialog

Confirmation/destructive modal built on the Dialog kernel; only explicit Cancel/Action closes it.

Overlays & feedbackWeb previewiOSAndroid
Preview + code

Component recipe

App Header

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

Navigation & disclosureWeb previewiOSAndroid
Preview + code

Component recipe

Avatar

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

Data displayWeb previewiOSAndroid
Preview + code

Component recipe

Badge

Compact semantic status label with paired foreground/background tokens.

Data displayWeb previewiOSAndroid
Preview + code

Component recipe

Bottom Action Bar

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

Layout & surfacesWeb previewiOSAndroid
Preview + code

Component recipe

Box

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

Layout & surfacesWeb previewiOSAndroid
Preview + code

Component recipe

Breadcrumb

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

Navigation & disclosureWeb previewiOSAndroid
Preview + code

Component recipe

Button

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

Actions & controlsWeb previewiOSAndroid
Preview + code

Component recipe

Calendar

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Card

Elevated/outlined surface with variant and spacing contract.

Layout & surfacesWeb previewiOSAndroid
Preview + code

Component recipe

Checkbox

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Chip

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

Data displayWeb previewiOSAndroid
Preview + code

Component recipe

Collapsible

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

Navigation & disclosureWeb previewiOSAndroid
Preview + code

Component recipe

Date Picker

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Date Time Picker

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Dialog

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

Overlays & feedbackWeb previewiOSAndroid
Preview + code

Component recipe

Dropdown Menu

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

Overlays & feedbackWeb previewiOSAndroid
Preview + code

Component recipe

Field

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Form Group

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Form Message

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Icon Button

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

Actions & controlsWeb previewiOSAndroid
Preview + code

Component recipe

Input

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Keyboard Aware Screen

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

Layout & surfacesWeb previewiOSAndroid
Preview + code

Component recipe

Label

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Link

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

Navigation & disclosureWeb previewiOSAndroid
Preview + code

Component recipe

List Group

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

Data displayWeb previewiOSAndroid
Preview + code

Component recipe

List Item

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

Data displayWeb previewiOSAndroid
Preview + code

Component recipe

OTP Input

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Pagination

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

Navigation & disclosureWeb previewiOSAndroid
Preview + code

Component recipe

Password Input

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Popover

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

Overlays & feedbackWeb previewiOSAndroid
Preview + code

Component recipe

Progress

Clamped determinate progress bar with native progressbar semantics.

Overlays & feedbackWeb previewiOSAndroid
Preview + code

Component recipe

Radio

Controlled radio item and RadioGroup coordinator with native radiogroup semantics.

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Safe Area

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

Layout & surfacesWeb previewiOSAndroid
Preview + code

Component recipe

Screen

Base application surface with semantic background and optional spacing; owns no safe-area or scroll behavior.

Layout & surfacesWeb previewiOSAndroid
Preview + code

Component recipe

Search Input

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Section

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

Layout & surfacesWeb previewiOSAndroid
Preview + code

Component recipe

Select

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Separator

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

Data displayWeb previewiOSAndroid
Preview + code

Component recipe

Sheet

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

Overlays & feedbackWeb previewiOSAndroid
Preview + code

Component recipe

Skeleton

Decorative static loading placeholder surface.

Overlays & feedbackWeb previewiOSAndroid
Preview + code

Component recipe

Spinner

Native activity indicator with semantic tone mapping.

Overlays & feedbackWeb previewiOSAndroid
Preview + code

Component recipe

Stack

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

Layout & surfacesWeb previewiOSAndroid
Preview + code

Component recipe

Stat

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

Data displayWeb previewiOSAndroid
Preview + code

Component recipe

State Message

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

Overlays & feedbackWeb previewiOSAndroid
Preview + code

Component recipe

Stepper

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

Navigation & disclosureWeb previewiOSAndroid
Preview + code

Component recipe

Switch

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

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Table

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

Data displayWeb previewiOSAndroid
Preview + code

Component recipe

Tabs

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

Navigation & disclosureWeb previewiOSAndroid
Preview + code

Component recipe

Text

Semantic typography primitive with type/tone variants that honors OS/browser font scaling.

Data displayWeb previewiOSAndroid
Preview + code

Component recipe

Textarea

Multiline text input using the same semantic contract as Input.

Forms & selectionWeb previewiOSAndroid
Preview + code

Component recipe

Theme Scope

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

Theming & utilitiesWeb previewiOSAndroid
Preview + code

Component recipe

Timeline

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

Data displayWeb previewiOSAndroid
Preview + code

Component recipe

Toast

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

Overlays & feedbackWeb previewiOSAndroid
Preview + code

Component recipe

Tooltip

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

Overlays & feedbackWeb previewiOSAndroid
Preview + code

Component recipe

Use Bee Token

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

Theming & utilitiesWeb previewiOSAndroid
Preview + code

Component recipe

Visually Hidden

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

Theming & utilitiesWeb previewiOSAndroid
Preview + code

Production patterns

Pattern documentation →

Pattern recipe

Sign In

Email/password sign-in with social and forgot-password affordances.

auth8 BeeUI exports
Preview + code

Pattern recipe

Analytics

Range-filtered analytics dashboard with metric summaries.

dashboard-finance12 BeeUI exports
Preview + code

Pattern recipe

Transactions

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

dashboard-finance10 BeeUI exports
Preview + code

Pattern recipe

Wallet

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

dashboard-finance6 BeeUI exports
Preview + code

Pattern recipe

Cart

Shopping cart with quantity edits, removal, and checkout.

commerce-social7 BeeUI exports
Preview + code

Pattern recipe

Checkout

Order review with address editing and place-order action.

commerce-social9 BeeUI exports
Preview + code

Pattern recipe

Account

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

account-settings5 BeeUI exports
Preview + code

Pattern recipe

Profile

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

account-settings7 BeeUI exports
Preview + code

Pattern recipe

Settings

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

account-settings6 BeeUI exports
Preview + code

Starter apps

Prove the consumption boundary.

These are isolated buildable consumers, not screenshots or workspace shortcuts.

Starter app

Web consumer

Vite + react-native-web consumer with a real production build and browser interaction coverage.

Packed package boundary
Preview + code

Need the full application?

Use Showcase to inspect. Use Demo to understand composition in context.

Open ShowcaseOpen Demo