• Playground
Components
    • Accordion
    • Alert
    • Alert Dialog
    • Avatar
    • Badge
    • Button
    • Button Group
    • Card
    • Collapsible
    • Dialog
    • Drawer
    • Dropdown Menu
    • Empty
    • Hover Card
    • Item
    • Kbd
    • Link
    • Meter
    • Navigation Menu
    • Pagination
    • Popover
    • Progress
    • Rating
    • Sheet
    • Skeleton
    • Spinner
    • Stat
    • Table
    • Tabs
    • Tooltip
  • Custom
Surfaces
  • SEO
  1. Playground
  2. Components
  3. Elements

Elements

Each foundational component is modular, accessible, and fully customizable.

Accordion

A stack of collapsible sections that toggle content independently, minimizing scrolling on long pages.

Alert

A persistent in-page banner for status messages, drawing attention without blocking interaction.

Alert Dialog

A confirmation dialog for irreversible actions, requiring deliberate confirmation.

Avatar

A round image or initials representing a user, providing visual identity in profiles, comments, and lists.

Badge

A small status marker attached to another element, highlighting counts, states, or labels.

Button

A clickable control that triggers a defined action when the user presses it.

Button Group

A cluster of buttons rendered as one bordered surface, grouping related actions into a single visual block.

Card

A self-contained surface that groups related content and actions, providing visual structure for previews, summaries, and list items.

Collapsible

A toggleable panel that expands inline to reveal hidden content, keeping rarely-needed details out of the default view.

Dialog

A modal overlay that interrupts the page to focus attention on a confirmation, message, or short task.

Drawer

A panel that slides in from a screen edge to present supplementary content or navigation without leaving the current page.

Dropdown Menu

A toggleable menu that reveals a list of actions or options on demand, keeping the interface uncluttered until needed.

Empty

A composable empty-state placeholder that communicates absent content.

Hover Card

A floating card that opens on hover or focus to preview the content behind a link, useful for author bios and rich link previews.

Item

A composable row with media, content, and action slots that gives lists, feeds, and settings panels a consistent rhythm.

Kbd

An inline element styled like a keyboard key, used for shortcuts, key combinations, and other textual keyboard input.

Link

A clickable text element, used to navigate between pages, sections, and external resources.

Meter

A static measurement on a known scale, showing where a value sits between a minimum and maximum.

Navigation Menu

A site-navigation menu bar that combines plain links with dropdown panels, designed for desktop layouts.

Pagination

A compound control for navigating between pages of a list.

Popover

A floating panel anchored to a trigger that displays contextual content, useful for quick details without leaving the current view.

Progress

A visual indicator that shows the completion state of an operation, keeping users informed of its progress.

Rating

A score, read-only for an averaged rating or interactive for collecting feedback.

Sheet

A side-anchored panel, used for supplementary forms, settings, or content that complements the main page.

Skeleton

A placeholder shape that mirrors content layout while it loads, reducing perceived wait time and preventing layout shift.

Spinner

A spinning indicator marking a pending operation, communicating a loading state.

Stat

A single metric tile pairing a large value with a small label, with an optional trend delta for dashboard surfaces.

Table

A responsive table for tabular data, with one component per table region (header, body, footer, row, cell).

Tabs

A set of labeled sections displayed one at a time in shared screen space, used to switch between related views without navigating away.

Tooltip

A short floating label that appears on hover or keyboard focus, naming a control only when the user needs the explanation.