Reference

Component library

Interactive examples of the shared Next.js UI building blocks.

Theme palette

Preview the nine source colors that drive every derived Family Hub theme token. Saved themes are managed on the Themes page.

Canvas
App background and the dark base for surfaces.
Text
Primary readable text and light neutral details.
On-color text
Text and icons placed on solid colored actions.
Primary
Main actions, focus states, and the floating action button.
Accent
Rare high-attention actions and gradient highlights.
Success
Confirmed actions, positive feedback, and income states.
Danger
Destructive actions, errors, and negative states.
Warning
Warnings, pending indicators, and attention states.
Transfer
Transfers, linked movement, and transfer data visuals.

AppShell and global actions

This gallery is rendered inside AppShell. Its FloatingActionButton and full PrivacyToggle are live in the application shell; the compact toggle is shown here too.

<AppShell><Page /></AppShell>

Theme colors

Live references for the Family Hub backgrounds, UI surfaces, and typography palette.

var(--fh-…)

Backgrounds

Application canvas colors.

Background--fh-backgroundPrimary application canvas
Muted background--fh-background-mutedSubtle page-area contrast

UI surfaces

Layered containers, overlays, and specialized panels.

Surface--fh-surfaceDefault container surface
Raised surface--fh-surface-raisedElevated controls and panels
Card surface--fh-surface-cardTranslucent card surface
Overlay--fh-surface-overlayModal and scrim layer
Soft overlay--fh-surface-overlay-softSubtle overlay layer
Warning surface--fh-surface-warningLow-emphasis warning background
Panel background--fh-panel-backgroundTranslucent floating panel
Chart surface--fh-chart-surfaceChart container background

Typography

Text hierarchy and on-color content.

Text--fh-textDefault body textFamily Hub typography
Strong text--fh-text-strongHeadings and high-emphasis contentFamily Hub typography
Inverse text--fh-text-inverseHigh-contrast text on dark UI surfacesFamily Hub typography
On-color text--fh-text-on-colorText and icons on solid action colorsFamily Hub typography
Muted text--fh-text-mutedSupporting metadataFamily Hub typography
Subtle text--fh-text-subtleLow-emphasis contentFamily Hub typography
Secondary text--fh-text-secondarySupporting readable copyFamily Hub typography

Button

Semantic variants and their default, hover, pressed, and disabled states.

<Button variant="secondary" />

Primary

Main actions

Default
Hover
Pressed
Disabled

Primary (Gradient)

High-emphasis primary action

Default
Hover
Pressed
Disabled

Accent

Rare, high-attention CTA

Default
Hover
Pressed
Disabled

Secondary

Lower-emphasis actions

Default
Hover
Pressed
Disabled

Outline

Subtle actions with border

Default
Hover
Pressed
Disabled

Ghost

Minimal navigation actions

Default
Hover
Pressed
Disabled

Success

Positive confirmations

Default
Hover
Pressed
Disabled

Danger

Destructive actions

Default
Hover
Pressed
Disabled

Button with icon

Sizing

Large
Medium
Small

Floating action button

The global quick-actions control uses the same primary colors, focus ring, and disabled state as Button.

<FloatingActionButton actions={actions} />
Standard FAB
Default
Hover
Active
Focus
Disabled
Mobile context

Fields

Use FormField with shared inputs for labeled values.

<FormField><TextField /></FormField>
Theme color
Search radius
Committed on release: 80 m
Period
Disabled slider

Selectors and feedback

Composed controls retain their own interaction semantics.

<OptionSelector selectionMode="multiple" />
More actions
WalletTag
Saved
Changes were saved successfully.
Heads up
A setting needs review.

Popup

Use the shared overlay for focused workflows.

<Popup isOpen onClose title="…" />