Component catalog

31 component families

• Accordion

  Grouped disclosure family with a low-level accordion component, a canonical AccordionField path, and thin purpose-accordion wrappers.

  Recommended: AccordionField

  Also public: FAQAccordion, SectionsAccordion, SettingsAccordion

• Avatar

  Canonical identity family with a base Avatar component, two scoped compositions, and thin semantic wrappers for profile, presence, and team contexts.

  Recommended: ProfileAvatar

  Also public: Avatar, AvatarBadge, AvatarGroup, PresenceAvatar, TeamAvatarGroup

• Badge

  Canonical compact-status family with a Badge component, a BadgeGroup composition, and thin purpose-badge wrappers for status, priority, and notification contexts.

  Recommended: StatusBadge

  Also public: Badge, BadgeGroup, NotificationBadge, PriorityBadge

• Banner

  Inline page-level status messaging component with five semantic intents, optional icon, CTA action slot, and dismiss button.

  Recommended: InfoBanner

  Also public: Banner, ErrorBanner, SuccessBanner, WarningBanner

• Breadcrumb

  Navigation hierarchy component with optional home entry, current-page metadata, hidden separators, and shared nav/list semantics across adapters.

  Recommended: Breadcrumb

• Button

  Semantic-first action family with a base Button component, visual wrappers, and purpose wrappers for canonical workflows.

  Recommended: PrimaryButton

  Also public: Button, CancelButton, CloseButton, ConfirmButton, CopyButton, CreateButton, DestructiveButton, DownloadButton, DropdownButton, EditButton, FilterButton, IconButton, LinkButton, RefreshButton, SaveButton, SearchButton, SecondaryButton, SortButton, SubmitButton, SuccessButton, TextButton, UploadButton, VerifyButton

• Card

  Family-local surface-container family with a Card component and thin purpose-card wrappers for product, profile, and stat summaries.

  Recommended: ProductCard

  Also public: Card, ProfileCard, StatCard

• Checkbox

  Native checkbox family with one CheckboxField component, two field-level compositions, and shared React/Vue contracts for component and grouped multi-select behavior.

  Recommended: CheckboxField

  Also public: CheckboxGroupField

• ContextMenu

  Compact action-list component with a menu shell, button-backed items, icon slots, dividers, disabled state, and destructive action styling.

  Recommended: ContextMenu

• Date Picker

  Calendar selection surface synced from the V2 Date Picker component, with device metadata, day-state contracts, and shared React/Vue adapters.

  Recommended: DatePickerField

• Dialog

  High-risk modal family with a non-modal shell, canonical modal overlay layer, and stable purpose-dialog wrappers.

  Recommended: DialogModal

  Also public: ConfirmDialog, DestructiveDialog, Dialog, InfoDialog

• Divider

  Family-local baseline separator family with a single Divider component for horizontal and vertical content separation.

  Recommended: Divider

• Drawer

  Dialog-adjacent panel component with left/right placement, size variants, optional scrim, optional footer, and shared dialog semantics across adapters.

  Recommended: Drawer

• Heading

  Native-semantic typography family with three heading components backed by one core recipe, one shared typography preset, and a shared React/Vue contract.

  Recommended: H1

  Also public: H2, H3

• Icon

  Named SVG icon family with one Icon component, a generated runtime inventory, gallery-driven Storybook discovery, and shared React/Vue contract coverage for decorative versus labelled behavior.

  Recommended: Icon

• Input

  Broad text-entry family spanning native text controls, Marwes-default select fields, OTP entry, and manual-review-heavy rich text.

  Recommended: InputField

  Also public: CurrencyField, DateOfBirthField, DropdownField, EmailField, InputOtpField, PasswordField, PhoneField, RichTextField, SearchField, SelectField, TextareaField, URLField, ZipCodeField

• Pagination

  Finite page navigation with shared item-window generation, ellipsis rendering, current-page semantics, and React/Vue/Svelte adapters.

  Recommended: PaginationField

• Paragraph

  Native paragraph-text family with one Paragraph component backed by a shared typography preset, theme defaults, and a shared React/Vue contract.

  Recommended: Paragraph

• ProgressBar

  Determinate progress component with optional label and percentage text, small/default Figma track sizes, and shared progressbar semantics across adapters.

  Recommended: ProgressBar

• Radio

  Native single-selection family with a RadioGroupField component, a canonical RadioGroupField path, and thin purpose-radio wrappers for common one-of-many choices.

  Recommended: RadioGroupField

  Also public: OptionRadioGroup, RatingRadioGroup, YesNoRadioGroup

• Segmented Control

  Single-select segmented toggle family with radiogroup semantics, keyboard navigation, and three visual variants (default, inverse, pill).

  Recommended: SegmentedControlField

• Skeleton

  Loading-placeholder component with text, circular, and rectangular shapes mapped from the synced Figma Skeleton page into one core recipe and shared React, Vue, and Svelte behavior.

  Recommended: Skeleton

• Slider

  Continuous-value input family with a native range slider component, a canonical SliderField path, and thin purpose-slider wrappers.

  Recommended: SliderField

  Also public: BrightnessSlider, RadiusSlider, VolumeSlider

• Spacing

  Family-local layout-spacing family with one decorative Spacing component backed by a token scale, a scale multiplier escape hatch, and shared React/Vue adapter parity.

  Recommended: Spacer

  Also public: Spacing

• Spinner

  Family-local loading-indicator family with a core Spinner component, adapter-owned context wrappers, and button-loading integration built on the same component contract.

  Recommended: Spinner

  Also public: ButtonSpinner, EmptyStateSpinner

• Stat Tile

  Compact KPI tile synced from the V2 Stat Tile Figma component, with tone treatments, optional trend metadata, and shared React/Vue adapter contracts.

  Recommended: StatTile

• Switch

  Binary toggle family with a button-backed switch component, a canonical SwitchField path, and thin purpose-switch wrappers.

  Recommended: SwitchField

  Also public: FeatureToggle, PermissionSwitch, PreferenceSwitch

• Tab

  Coordinated tabs family with a low-level tab component, a canonical TabGroup path, and thin purpose-tab wrappers.

  Recommended: NavigationTabs

  Also public: ContentTabs, SettingsTabs, Tab, TabGroup, TabPanel

• Text

  Non-heading typography component for labels, captions, overline, microcopy, and supporting body text where consumers choose the native element.

  Recommended: Text

  Also public: TypographyText

• Toast

  Canonical transient-feedback family with a Toast component, adapter-owned delivery layers, and thin purpose-toast wrappers for common message intent.

  Recommended: InfoToast

  Also public: ErrorToast, SuccessToast, Toast, ToastContainer, ToastProvider, WarningToast

• Tooltip

  Contextual-help family with a standalone tooltip component, a canonical TooltipGroup path, and an explicit non-interactive scope boundary.

  Recommended: TooltipGroup

  Also public: Tooltip