Folio charts

Live variants and states. Buttons, forms and feedback update local state only. Use keyboard Tab to inspect focus. Search the sample table for an empty state; open the native dialog and press Escape.

Charts

Line / Area / Sparkline

Trend colors identify a series, not approval.

Bar / Stack / Distribution

Payroll 74% · Operations 18% · Growth 8%

Donut / Progress ring

Cash-flow comparison

Received$86,250

Spent$64,820

Fictitious values. No connected data.

Workspace details

Native modal drawer with Escape and focus containment.

Catalog coverage

Button, icon button, button group, badge, status, tag, avatar, avatar group, label, input, helper/error, textarea, select, checkbox, radio, switch, slider, progress, spinner, skeleton, amount/text, separator, alert, card/KPI, tabs, details/accordion, dialog, drawer, menu/popover, tooltip, search, table/empty state, pagination, breadcrumb, stepper, toast, notification/list item, charts and app/form layouts.

Menus are lightweight illustrative patterns. Dialogs and drawers use native modal focus containment and Escape. A production application should add its own menu keyboard navigation and routing. No live preview sends or purchases anything.

Conversion funnel (Sankey)

Multi-stage conversion flow with drop-offs, date ranges, play/pause and keyboard focus. It inherits this template's colors and works with synthetic data. Replace the stage counts with your own source of truth.

Conversion funnel 20,400 trials

Where new trials convert or drop off. Sample data, local interactions only.

Signed up20,400100%

Activated13,26065.0%

Team invited7,82338.3%

Converted14.4%2,934 upgraded

Signed up20,400 trials · 100.0% of sign-ups

UpgradedDropped offParticle density follows trial volume. Fictitious data, no analytics service connected.