SideCard

In the app

The right-column pattern. Rows divide with the soft hairline because the card already has a border.

@varick/ui/components/side-cardAdded 26 Aug 2026

At a glance

Runs today342

Success rate94.2%

OwnerJS

Usage

import { SideCard, ValueRow } from "@varick/ui/components/side-card";

export function Example() {
  return (
    <SideCard title="At a glance">
      <ValueRow k="Runs today" v="342" />
      <ValueRow k="Success rate" v="94.2%" />
    </SideCard>
  );
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
title	string	required	SideCard heading.
action	ReactNode	undefined	Right of the heading. Usually an IconButton.
k	string	required	ValueRow label.
v	ReactNode	required	ValueRow value, right-aligned, tabular.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.side-card {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: #FFFFFF;
  padding: 18px 20px;
}
.value-row {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--hairline-soft);
  padding: 10px 0;
  font-size: 12.5px;
}
.value-row:first-child { border-top: 0; }