Skip to content
Monogem

Components

33 components, grouped by category. Pick one to see its full documentation and live example.

Core

  • JD
    Avatar

    A profile picture with a graceful fallback when no image loads.

  • Badge
    Badge

    A static status, category, or count label.

  • Button

    The default interactive trigger for a single user action.

  • Checkbox

    A binary control for a single choice, or one item in a multi-select set.

  • Input

    The primary control for single-line text entry.

  • Label

    The visible text that identifies a form control's purpose.

  • Plan
    Radio Group

    A set of mutually exclusive options — exactly one selection from a visible list.

  • Above
    Below
    Separator

    A thin line that divides content into distinct groups.

  • Switch

    An immediate on/off control for a live setting.

  • Textarea

    Multi-line free-text entry for longer content.

Containers & Overlays

  • Yes, it follows WAI-ARIA patterns.
    Accordion

    Progressive disclosure for stacked, expandable sections.

  • Card title

    Supporting content.

    Card

    A generic bordered content boundary for grouping related content.

  • Dialog

    A modal overlay that interrupts the flow until the user resolves it.

  • Popover

    Triggered, non-modal supplemental content anchored to a control.

  • Sheet

    An edge-attached modal panel — Dialog's drawer counterpart.

  • Account settings.
    Tabs

    Switches between several views of equal standing in one page context.

  • Tooltip

    A short, supplementary label shown on hover or keyboard focus.

  • Note:
    Heads up
    Alert

    A static, non-dismissible callout that draws attention to information.

  • Bottom Nav

    A compact tab bar for an app's primary mobile destinations.

  • Breadcrumb

    A secondary trail showing where the current page sits in the hierarchy.

  • Dropdown Menu

    A button that opens a menu of commands or actions.

  • Navbar

    A top-of-page navigation bar with a responsive mobile collapse.

  • Pagination

    Splits a long result set into numbered pages and moves between them.

  • Progress

    A horizontal bar showing how far along a task is.

  • Select

    A styled control for picking one value from a list of options.

  • Sidebar Nav

    Grouped vertical navigation for an app's primary destinations.

  • Skeleton

    A placeholder block shown while real content loads.

  • Saved
    Your changes have been saved.
    Toast

    Transient feedback that appears without interrupting the user.

Composite & Advanced

  • September 2026
    Calendar / Date Picker

    A month-grid date picker with keyboard navigation.

  • Search commands…
    Profile
    Billing
    Settings
    Combobox / Command

    A filterable command list — the foundation for Combobox and command palettes.

  • Form

    Composition patterns for assembling accessible forms from existing controls.

  • Slider

    A single horizontal value slider built on a native range input.

  • NameAmount
    Invoice #1$250.00
    Table

    A styling layer over a semantic HTML table for structured data.