Containers
Components

Containers

Cards, accordions, scroll regions, resizable panes, and carousels.

Components in this category

Stage

Page background for a single sign-in, setup, or welcome card.

Card

Content card with optional header and body.

CardHeader

Header area of a Card.

CardBody

Body area of a Card.

Accordion

Expandable accordion container.

AccordionItem

Single expandable item in an Accordion.

ScrollArea

Scrolling region with edge fades, styled scrollbars, and keyboard access.

SplitPane

Panes the reader resizes, by pointer or keyboard.

SplitPanel

Pane with size limits and optional collapse behavior inside SplitPane.

Carousel

Scroll-snap track with arrows, dots and optional autoplay.

CarouselSlide

One slide of a Carousel.

Card

Card renders as a bordered div with standard padding. Compose with CardHeader (title + optional sub-label + right-aligned actions) and CardBody (the content area).

Card

CardProps props
PropTypeDefaultDescription
fixedboolean—Sets flex: none to size the card to its content in a flex column.
childrenReactNode—Card content.

CardHeader

CardHeaderProps props
PropTypeDefaultDescription
childrenReactNode—Card title.
subReactNode—Dim sub-label below the title.
rightReactNode—Right-aligned content, such as actions or status.

CardBody

Standard padded body area. Accepts all standard div attributes.

Card
ImportTSX
import { Card, CardHeader, CardBody, Button } from "@solarius/onset";

<Card>
  <CardHeader
    sub="Last updated 3h ago"
    right={
      <Button variant="ghost" size="sm">
        Edit
      </Button>
    }
  >
    Deployment configuration
  </CardHeader>
  <CardBody>
    <p>Replicas: 3 · Region: us-east-1</p>
  </CardBody>
</Card>;

Accordion

An expandable section container, for raw payloads, advanced options, or secondary detail groups. Each AccordionItem can be controlled or uncontrolled via the open / defaultOpen props.

Accordion

Outer container: a div with standard attributes. Wraps one or more AccordionItem components.

AccordionItem

AccordionItemProps props
PropTypeDefaultDescription
titleReactNode—Header text.
metaReactNode—Dim right-aligned meta on the header row (counts, sizes).
openboolean—Controlled open state.
defaultOpenbooleanfalseDefault open state when uncontrolled.
onOpenChange(open: boolean) => void—Open state change handler.
childrenReactNode—Collapsible body content.
Accordion
ImportTSX
import { Accordion, AccordionItem } from "@solarius/onset";

<Accordion>
  <AccordionItem title="Connection details" meta="3 items">
    <p>Host: us-east-1.db.example.com</p>
  </AccordionItem>
  <AccordionItem title="Advanced" defaultOpen>
    <p>Connection pooling configuration.</p>
  </AccordionItem>
</Accordion>;

ResourceRow

A compact cloud-resource summary row: a status dot, a name + meta pair, and a value + value-meta pair on the right. Used for node lists, database tables, and volume summaries.

ResourceRowProps props
PropTypeDefaultDescription
toneStatusTone—"ok" | "warn" | "err" | "idle" | "prov" | "dim". Drives the status dot.
nameReactNode—Resource name.
metaReactNode—Dim metadata below the name.
valueReactNode—Right-aligned primary value.
valueMetaReactNode—Dim metadata below the value.
onClick() => void—Makes the row clickable.
ResourceRow
ImportTSX
import { ResourceRow } from "@solarius/onset";

<ResourceRow
  tone="ok"
  name="web-prod-01"
  meta="t3.medium · us-east-1"
  value="42 ms"
  valueMeta="p95 latency"
/>;

TagList

A horizontal list of Tag components for showing multiple tags inline in a table cell or detail row.

TagListProps props
PropTypeDefaultDescription
tagsstring[]—Tag strings to render.
productionus-east-1t3.mediumv2.4.1
TagList
ImportTSX
import { TagList } from "@solarius/onset";

<TagList tags={["production", "us-east-1", "v2.4.1"]} />;

Scrolling & splitting

ScrollArea

The library's scrolling region. Compared with a bare overflow: auto div, it signals content past the fold, is reachable from a keyboard, and applies min-height: 0 itself. Full props on its page.

ScrollArea

SplitPane

Panes resized by pointer or keyboard. Sizes are percentages of the group, so a layout holds its proportions across viewport sizes; nest a SplitPane inside a SplitPanel to add a second axis. See SplitPane and SplitPanel.

SplitPane

Carousel

A scroll-snap track: swipe, wheel, arrow buttons and keyboard all drive the same scroll position, and the active index is read back out of it. See Carousel and CarouselSlide.

Carousel
ImportTSX
import {
  ScrollArea,
  SplitPane,
  SplitPanel,
  Carousel,
  CarouselSlide,
} from "@solarius/onset";