Components
29 pages of live, copyable examples. Where Stripe's dashboard has a component for the job, ours is its counterpart — the right column says which.
Setup flows
Page structure
- OverviewPageA feature's landing page in one or two columns.Stripe OverviewPage + PageModule
- DetailLayoutA record's page: a sticky summary pane and a working pane.Stripe DetailPage
- PageHeaderA page's title, description and its one primary action.Stripe FullPageView header
- SectionA heading, a count, text-link actions and a hairline.Stripe PageModule / Accordion
- PaneTabsLine tabs with a sliding underline and actions at the row's end.Stripe Tabs
- StatGroupKey figures: a grey label over each value.
Data display
- MeterA stacked bar with a legend: usage against a limit, or a whole in parts.Stripe MeterChart
- SparklineA tiny trend line with no axes and no chart library.Stripe Sparkline
- CodeBlockPayloads and keys in mono, with Copy and Show/Hide.Stripe Code
- ListHairline rows: title left, value right, the row opens its page.Stripe List
- SkeletonLoading shapes that match the page, then content that rises in.Stripe Spinner (instead of)
- ShimmeringText“Saving…” with a light band running through it.Stripe Spinner (instead of)
Status and feedback
- StatusPillA state as a badge: light fill, dark ink, always a word.Stripe Badge
- ChipA tag: what something is, neutral by default.
- BannerA message about the page, with what to do next.Stripe Banner
- ToastOne short line at the bottom: it worked, or it didn't.Stripe Toast
- EmptyStateAn empty list that says why and offers the next action.
Forms and filters
- ButtonGroupTwo or three joined peers: actions, or a segmented choice.Stripe ButtonGroup
- DateFieldOne date, from the kit's calendar — never the native picker.Stripe DateField
- FormFieldGroupFields that are one answer, under one legend.Stripe FormFieldGroup
- CurrencyInputA money field: ₹ on the baseline, groups on blur.Stripe CurrencyField
- SearchInputA boxed list search, the height of the filter buttons.Stripe SearchField
- DateRangeFilterDate presets and a custom range for a list.Stripe DateRangePicker
- ActiveFiltersThe filters in force, as removable chips.Stripe Chip