Components
Component Library
25+ production-ready components, each with variant coverage, accessibility baked in, and design tokens throughout.
Buttons
Buttons trigger actions. Use the right variant to communicate priority and intent.
| Variant | When to use |
|---|---|
| Primary | The main action on a page or dialog. Use sparingly — one per context. |
| Secondary | Supporting actions that sit alongside a primary button. |
| Ghost | Low-emphasis actions. Common in toolbars or dense UIs. |
| Danger | Destructive or irreversible actions (delete, remove, revoke). |
Badges
Compact status indicators for state, category, or metadata.
Inputs
Text inputs, textareas, and selects share the same visual language — consistent border, radius, and focus ring.
Toggles, Checkboxes & Radios
Selection controls for boolean and multi-choice inputs.
Cards
Flexible containers for grouping related content. Support titles, descriptions, media, and actions.
SparkRamp
Growth & launch platform for modern SaaS teams.
StreamOps
ActiveWorkflow automation for operations teams.
Avatars
User identity display. Supports initials fallback and three sizes.
Modals
Focused overlays for confirmations, forms, or detail views. Always include a clear dismiss action.
Confirm Action
Are you sure you want to delete this item? This action cannot be undone.
Toasts
Brief non-blocking notifications for system feedback. Auto-dismiss after 4–5 seconds.
Tooltips
Contextual hints that appear on hover. Keep content short — one line max.
Navigation
Navbar and sidebar components for app-level navigation.
Tabs
Organize content into horizontally switched sections. Keep tab labels short (1–2 words).
Active tab content displays here — switch tabs to navigate between sections.
Accordion
Collapsible content sections for FAQs, settings panels, or progressive disclosure.
Carousel & Image Slider
Horizontally scrollable content containers. Carousels loop card items; image sliders display full-bleed media.
Progress & Spinner
Visual indicators for loading states and completion progress.
Tables
Structured data display for lists, records, and comparison views.
| Name | Product | Status | Role |
|---|---|---|---|
| Alex Chen | SparkRamp | Active | Admin |
| Maya Patel | StreamOps | Pending | Editor |
| Jordan Kim | ClarityMap | Inactive | Viewer |
Dropdown
Contextual menus for actions, navigation, and selection — anchored to a trigger element.
Every component above is available as a fully-built Figma component set with variants, auto-layout, and design tokens. Use the Meridian plugin to generate them all in one click.