Carapace

Canonical web contract

  • OpenClaw visual foundation

    Carapace

    A carapace is a protective outer shell. Here, it is the shared visual layer that keeps OpenClaw products coherent while each application keeps its own behavior.

  • Action
  • Input Bar
  • Select
  • Toolbar
  • Input
  • Question Tool
    Question1 of 1
    How should we apply this change?
  • Tool Group
    Task completed3 tools
    • Ran commandbun run check
    • Found resultssemantic tokens
    • Read filecomponents.css
  • Table
    ComponentStatusUpdated
    ButtonStableToday
    DialogStableYesterday
    TableDraftNow
  • Timeseries

    Weekly runs

    Last six weeks

    • Successful
    • Retried
    Weekly task runsSuccessful runs increased while retried runs decreased over six weeks.
  • Tabs
    Rendered component preview.
  • Flow
    1. Draft
    2. Review
    3. Publish
  • Toast

    Changes saved

    The component reference is up to date.

  • Page Header

    Workspace

    Components

    Build interfaces from the shared visual contract.

  • Dialog

    Apply changes?

    The updated settings will be applied to this workspace.
  • Input Group
  • Combobox
  • Switch
  • Date Picker
  • Pagination
  • Resource List
  • Tooltip
    Copy component markup
  • Badge
    OfficialReadyPending
  • Breadcrumbs
  • Clipboard Text
    @openclaw/carapace
  • Autocomplete
  • Input Area
  • Collapsible
    Package requirements

    Import tokens before components and set the theme on the application root.

  • Segmented Control
  • Grid
    A
    B
    C
  • Card
    Workspace

    A grouped surface with a single responsibility.

  • Skeleton Line
  • Menu Bar