Components/Cards
intermediateFeature Stat Card
A card surface for displaying a short metric with strong information hierarchy.
statssurfacedashboard
Open itemReusable UI compositions such as cards, forms, navbars, and modal patterns. Use this domain when the problem is scoped to components work, then narrow into a category and specific references.
Each category groups references that solve a similar UI problem so the library feels more like a handbook than a flat archive.
Card layouts for information surfaces, stats, and supporting callouts.
Chart patterns for dashboards, reports, and lightweight analytics surfaces.
Form compositions for auth, contact, and focused data-entry flows.
Modal patterns for confirmation flows, warnings, and quick actions.
Navigation bars for product surfaces, docs experiences, and internal tools.
Browse every seeded item in this domain, then open the ones that need closer inspection.
A card surface for displaying a short metric with strong information hierarchy.
A testimonial card that emphasizes the user voice without excessive decoration.
A pricing card that balances plan name, pricing, feature bullets, and a high-emphasis CTA.
A feature-oriented card for spotlighting one product workflow, capability, or editorial highlight.
A compact card for recent activity, review summaries, or lightweight product updates in one surface.
A checklist-style card for launch readiness, review gates, or compact progress tracking inside a dashboard.
A compact area chart pattern for showing revenue movement across weekly or monthly ranges.
A donut chart pattern for showing top acquisition channels with an active legend state.
A stacked horizontal bar chart for comparing active versus draft reference volume across groups.
A dual-line chart for comparing current versus previous performance over one reporting range.
A vertical bar chart for comparing top categories, pages, or traffic sources in one view.
A compact KPI card with a small sparkline for showing one primary metric and its short-term movement.
A simple auth form with clear input hierarchy and a single primary CTA.
An inline form pattern for email capture that keeps the prompt and action in one compact row.
A request form pattern for demos, sales conversations, or implementation support with enough context fields.
A settings form for profile-level preferences, notification controls, and simple workspace toggles.
A checkout-style payment form with grouped card fields and one high-emphasis confirmation action.
A confirmation modal with light hierarchy for actions that require clear user intent.
A higher-emphasis confirmation modal for destructive flows that need stronger caution cues.
A side sheet modal for editing settings without breaking the context of the current page.
A success-focused modal for confirming a completed action with a calmer celebratory treatment.
A multi-step modal pattern for setup flows that need staged progress inside one dialog.
A product navbar with brand, key links, and a CTA that stays visually clear.
A docs-oriented navbar that balances product identity, search, and top-level navigation links.
A dashboard-style navbar with a compact action area and an account menu for authenticated workspaces.
An app-shell navbar for internal tools that needs persistent section switching and a utility action.
A marketing navbar with a centered link cluster and balanced actions for product landing pages.