GlancePanel

Stable

The case at a glance: the deadline, the facts, the rule and the steps, kept in view beside a chat. GlanceSheet is the phone version.

Also known as summary panel, side summary, at a glance

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

<GlancePanel
  title="Case file"
  headline={<Countdown deadline="2026-10-27" today="2026-10-07" start="2026-09-27" label="They must reply by" />}
  facts={[
    { label: "Seller", value: "Aero Home" },
    { label: "Item", value: "Aero 12 blender" },
    { label: "Paid", value: "₹2,340", edited: true },
    { label: "Bought", value: "2 September 2026" },
  ]}
  rule={{ title: "Consumer Protection Act, 2019", cite: "Section 2(9): right to be heard and to seek redressal", href: "#rule" }}
  steps={[
    { id: "told", label: "You told me", state: "done" },
    { id: "facts", label: "Facts checked", state: "done" },
    { id: "rule", label: "Rule found", state: "now", detail: "Checking the seller's return terms." },
    { id: "sent", label: "Complaint sent", state: "next" },
    { id: "reply", label: "Their reply", state: "next" },
  ]}
  className="w-full max-w-sm rounded-card border border-line bg-surface p-4"
/>

A Countdown headline, four facts with one edited, the rule cited with a link, and the journey with one step happening now.

Usage Code Design Accessibility

When to use it

Answers the three worries that repeat in a long chat: how long is left, is the case right, and what happens next. It reads from the same data as the conversation, so the two never disagree.

Made of: Title · Headline · What I know · The rule · Where it's at

Use it for

A case file beside a chat on a wide screen.
The same case file in a bottom sheet on a phone, opened from the header.
A short summary that people check again and again while waiting.

Not for

Only the deadline, with no facts or steps: use Countdown.
A list of steps with no other facts: use StepTimeline.
A to-do list people tick off themselves: use Checklist.
A record of what happened, with times: use Timeline.
A single card that wraps up a result: use SummaryCard.

Do and avoid

Do. Facts and next steps at a glance, with no private numbers.

Avoid. A full card number in the panel puts private details on show.

Do

Read the panel from the same data as the chat, so they agree.
Put the deadline first, as the headline.
Show every step in the journey, so people see what comes next.
Use GlanceSheet on phones and GlancePanel beside the chat on wide screens.

Avoid

Do not show private numbers such as card or bank details in facts.
Do not mark a step as Now when nothing is happening.
Do not add long text to facts. Link to the full page instead.
Do not use the panel for things people must tick off themselves.

On a phone

The panel has no frame or fixed width and fills its container, with long values breaking onto the next line.
On a phone, put it in GlanceSheet, which shows it in a bottom Sheet that opens from a button in the page header.
Each fact label and value wrap onto two lines when they do not fit side by side.

Properties

Prop	Type	Default	Description
title	string	"Case file"	Names the panel as a landmark and shows at the top.
headline	ReactNode	none	The first and biggest thing, usually a Countdown.
facts	{ label: string; value: ReactNode; edited?: boolean }[]	none	Shown as a labelled list under What I know. A fact with edited gets a small Edited tag.
rule	{ title: string; cite?: string; href?: string }	none	The rule the case rests on. With href the title is a link.
steps	{ id: string; label: string; state: "done" \| "now" \| "next"; detail?: string }[]	none	The whole journey, numbered, under Where it's at. Done shows a check, Now shows a ring that breathes, and all three are also written for screen readers.
headings	{ facts?: string; rule?: string; steps?: string }	none	Renames the section headings. Defaults are What I know, The rule and Where it's at.
hideTitle	boolean	false	Hides the visible title but keeps it as the landmark name.
headingLevel	2 \| 3 \| 4	2	Heading level of the section headings.
scrollable	boolean	false	Set when the panel scrolls, so the keyboard can reach its content.
className	string	none	Classes for the panel. It has no border or background of its own, so add them here.
GlanceSheet openrequired	boolean	none	Whether the sheet is showing. Fully controlled.
GlanceSheet onCloserequired	() => void	none	Called when the sheet asks to close. Set open to false in response.
GlanceSheet (other props)	GlancePanelProps	none	title, headline, facts, rule, steps, headings, headingLevel and className go to the panel inside. The sheet uses the title as its heading.

"Show code under the preview gives the code for the example on the stage."

In Figma

In Figma, one GlancePanel switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.

GlancePanel in Figma: each property and the React prop it sets
Figma property	React	Values
Hide title	`hideTitle`	On or off
Title	`title`	Any text

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

empty section: A section whose data is missing or empty is left out, so the panel can start with only a headline or only steps.
step: done: The step shows a check and the words Done for screen readers.
step: now: The step shows its number inside a ring that breathes, is set as the current step, and is bold. The ring stays still with reduced motion.
step: next: The step shows its number in muted text.
edited fact: A fact with edited true shows a small Edited tag before its value.
link focus: When the rule has an href, the title is a link with a visible focus ring and an underline that goes on hover.
sheet closed or open: GlanceSheet draws nothing while closed. When open, the page behind is inert and focus returns to the opener on close.

Tokens

Change one of these and every part that uses it follows.

--surface
--border
--border-strong
--accent
--success
--success-soft
--success-fg
--fg-muted
--fg-subtle