UI kit reference

components/Surface

import { … } from 'zidane-ui'ui/src/components/Surface.tsx

Tray > Raised (the depth ladder)

A raised card in a tray

Raised live

Lifted one step while a run streams

track chip, well, fill

12.4k · $0.08

SectionLabel, Meta

Today

3 files · 18ms

EmptyState

No sessions yet

Start one to see it here.

PanelEmpty, warn, loading

Nothing changed

Edits the agent makes show here.

Could not read the folder

Permission denied.

Components#

`CodePanel`Component#

Renders monospace output or input in a pre, set into its surface.

TypeScript

function CodePanel(props: CodePanelProps): Element

Parameters

Parameters
Name	Type	Description
props	`CodePanelProps`	Component props.

Returns

Element

Props

CodePanel props
Name	Type	Default	Description
children	`ReactNode`		The text to show.
className?	`string`		Extra classes on the `pre`.
maxHeight?	`string \| number`		Maximum height of the panel, as a CSS length or a number of pixels. The panel scrolls past it.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
wrap?	`boolean`	`true`	Wrap long lines. When off, the panel scrolls horizontally instead.

ui/src/components/Surface.tsx:80

`EmptyState`Component#

Renders the one empty or placeholder block: an optional icon, a title, a hint and an action, centred, usually in a tray.

TypeScript

function EmptyState(props: EmptyStateProps): Element

Parameters

Parameters
Name	Type	Description
props	`EmptyStateProps`	Component props.

Returns

Element

Props

EmptyState props
Name	Type	Description
action?	`ReactNode`	Control under the hint, such as a button.
className?	`string`	Extra classes on the wrapping element.
compact?	`boolean`	Less vertical room, for a panel tab.
framed?	`boolean`	Set in a tray. Off inside a surface that is already tray-toned (the side panel): no tray on a tray.
hint?	`ReactNode`	Secondary text under the title.
icon?	`string`	Icon class shown above the title.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
title	`ReactNode`	Main message.
titleAs?	`'div' \| 'h1' \| 'h2' \| 'h3'`	The title's element: a heading where the empty state is the page (a 404).

ui/src/components/Surface.tsx:121

`Meta`Component#

The technical voice: mono, tabular, small, muted.

TypeScript

function Meta(props: MetaProps): Element

Parameters

Parameters
Name	Type	Description
props	`MetaProps`	Component props.

Returns

Element

Props

Meta props
Name	Type	Description
children	`ReactNode`	The value to show.
className?	`string`	Extra classes on the text.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
title?	`string`	Native tooltip.

ui/src/components/Surface.tsx:185

`Raised`Component#

Renders a card or control lifted off its tray, with a border and the raised shadow. Accepts the attributes of a div.

TypeScript

function Raised(props: RaisedProps): Element

Parameters

Parameters
Name	Type	Description
props	`RaisedProps`	A `radius`, `live` and the attributes of a `div`.

Returns

Element

Props

Raised props
Name	Type	Default	Description
live?	`boolean`		Lift the card one step with the live shadow, for something that is active right now.
radius?from `TrayProps`	`Radius`	`'lg'`	Corner radius: `sm`, `md`, `lg` or `xl`.

ui/src/components/Surface.tsx:50

`SectionLabel`Component#

Uppercase label for a section of a panel, menu or form.

TypeScript

function SectionLabel(props: SectionLabelProps): Element

Parameters

Parameters
Name	Type	Description
props	`SectionLabelProps`	Component props.

Returns

Element

Props

SectionLabel props
Name	Type	Description
children	`ReactNode`	The label text.
className?	`string`	Extra classes on the label.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Surface.tsx:160

`Tray`Component#

Renders the bed of the surface ladder: sections, wells for grouped rows, code and quiet cards. Accepts the attributes of a div.

TypeScript

function Tray(props: TrayProps): Element

Parameters

Parameters
Name	Type	Description
props	`TrayProps`	A `radius` and the attributes of a `div`.

Returns

Element

Props

Tray props
Name	Type	Default	Description
radius?	`Radius`	`'lg'`	Corner radius: `sm`, `md`, `lg` or `xl`.

ui/src/components/Surface.tsx:34

Interfaces#

`CodePanelProps`Interface#

Props for CodePanel.

TypeScript

interface CodePanelProps

Properties

CodePanelProps properties
Name	Type	Default	Description
children	`ReactNode`		The text to show.
className?	`string`		Extra classes on the `pre`.
maxHeight?	`string \| number`		Maximum height of the panel, as a CSS length or a number of pixels. The panel scrolls past it.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
wrap?	`boolean`	`true`	Wrap long lines. When off, the panel scrolls horizontally instead.

ui/src/components/Surface.tsx:57

`EmptyStateProps`Interface#

Props for EmptyState.

TypeScript

interface EmptyStateProps

Properties

EmptyStateProps properties
Name	Type	Description
action?	`ReactNode`	Control under the hint, such as a button.
className?	`string`	Extra classes on the wrapping element.
compact?	`boolean`	Less vertical room, for a panel tab.
framed?	`boolean`	Set in a tray. Off inside a surface that is already tray-toned (the side panel): no tray on a tray.
hint?	`ReactNode`	Secondary text under the title.
icon?	`string`	Icon class shown above the title.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
title	`ReactNode`	Main message.
titleAs?	`'div' \| 'h1' \| 'h2' \| 'h3'`	The title's element: a heading where the empty state is the page (a 404).

ui/src/components/Surface.tsx:94

`MetaProps`Interface#

Props for Meta.

TypeScript

interface MetaProps

Properties

MetaProps properties
Name	Type	Description
children	`ReactNode`	The value to show.
className?	`string`	Extra classes on the text.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
title?	`string`	Native tooltip.

ui/src/components/Surface.tsx:169

`RaisedProps`Interface#

Props for Raised: TrayProps plus live.

TypeScript

interface RaisedProps extends TrayProps

Properties

RaisedProps properties
Name	Type	Default	Description
live?	`boolean`		Lift the card one step with the live shadow, for something that is active right now.
radius?from `TrayProps`	`Radius`	`'lg'`	Corner radius: `sm`, `md`, `lg` or `xl`.

ui/src/components/Surface.tsx:39

`SectionLabelProps`Interface#

Props for SectionLabel.

TypeScript

interface SectionLabelProps

Properties

SectionLabelProps properties
Name	Type	Description
children	`ReactNode`	The label text.
className?	`string`	Extra classes on the label.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Surface.tsx:146

`TrayProps`Interface#

Props for Tray: a radius and the attributes of a div.

TypeScript

interface TrayProps extends HTMLAttributes<HTMLDivElement>

Properties

TrayProps properties
Name	Type	Default	Description
radius?	`Radius`	`'lg'`	Corner radius: `sm`, `md`, `lg` or `xl`.

ui/src/components/Surface.tsx:20

Components#

CodePanelComponent#

Parameters

Returns

Props

EmptyStateComponent#

Parameters

Returns

Props

MetaComponent#

Parameters

Returns

Props

RaisedComponent#

Parameters

Returns

Props

SectionLabelComponent#

Parameters

Returns

Props

TrayComponent#

Parameters

Returns

Props

Interfaces#

CodePanelPropsInterface#

Properties

EmptyStatePropsInterface#

Properties

MetaPropsInterface#

Properties

RaisedPropsInterface#

Properties

SectionLabelPropsInterface#

Properties

TrayPropsInterface#

Properties

`CodePanel`Component#

`EmptyState`Component#

`Meta`Component#

`Raised`Component#

`SectionLabel`Component#

`Tray`Component#

`CodePanelProps`Interface#

`EmptyStateProps`Interface#

`MetaProps`Interface#

`RaisedProps`Interface#

`SectionLabelProps`Interface#

`TrayProps`Interface#