Essentials

Essentials are the everyday components of @contour-ui/react, the parts of any interface. The stylesheet of the package is built on tokens, so every component follows the theme with no extra code. Components with behavior, such as popovers and dialogs, are Headless components plus that stylesheet; components without behavior, such as buttons, cards and alerts, exist only here. The controls of audio-plugin UIs ship in the same package: see Audio.

Setup

pnpm add @contour-ui/react @contour-ui/tokens

import '@contour-ui/tokens/tokens.css';
import '@contour-ui/tokens/fonts.css';
import '@contour-ui/react/styles.css';

Details and the reasons for the order: Installation.

Usage

A component made of one element is a plain component, such as Button; a component with several parts is a namespace of parts, such as Card. Each part renders one element and passes its props through:

import { Button, Card } from '@contour-ui/react';

export function Welcome() {
  return (
    <Card.Root>
      <Card.Body>
        <Card.Title>Welcome</Card.Title>
        <Card.Description>Start with the guide.</Card.Description>
      </Card.Body>
      <Card.Footer>
        <Button>Open the guide</Button>
      </Card.Footer>
    </Card.Root>
  );
}

Customizing

Classes. Each component has a class, contour-<component>, and each of its other parts contour-<component>__<part>. Your className is added next to them, so you can extend the styles with your own CSS. Variants and sizes are attributes, as in .contour-button[data-variant='ghost'].
Tokens. Write overrides with token variables, and they keep following the theme:
```
.status {
  padding: var(--ct-space-panel-inset);
}
```
Another look. If these styles are in the way, use the same component from Headless: same parts, same props, no CSS. Components without behavior have no Headless version: build your own from Primitive, the elements every part renders through.

Components

Alert

A message set apart from the text around it, with an icon for its status.

Button

A button in four variants and three sizes, with icon-only and close buttons.

Card

A surface for a title, a description and related content, or a link to a page.

Clipboard

A value to copy, such as an install command, in a bordered row with a copy button at its end.

CodeBlock

Code highlighted by Shiki, with an optional title, in the syntax colors of the theme.

Collapsible

A trigger with a chevron that shows and hides a region, which grows to its height as it opens.

Dialog

A window over the page, in the middle or near the top, with a header, a body and a footer.

Drawer

A dialog that slides in from an edge of the screen, such as the navigation on a phone.

Icon

An icon from the contour-ui set that takes the size and color of the text around it.

Kbd

A keyboard key for shortcuts, in text and on controls.

Link

A link in the accent color, underlined on hover or always, or muted in navigation lists, that can render a router's link.

Listbox

A list of options to highlight and select, with groups, typeahead and a search input.

Placeholder

Stand-in that shows the shape of every styled component.

Popover

A small raised panel next to its trigger, for a short form, a choice from a list or details.

SegmentGroup

A row of options of which one is checked, the checked one raised, with text or icons.

Table

Rows and columns of data, with a scroll area for tables wider than the page.

Tabs

Sections of content shown one at a time, picked from a row of tabs, in three variants.

ThemeProvider

The theme of the page: the system's until the user chooses one, stored and restored without a flash.

Toc

A table of contents for the headings of a page, with the sections in view marked.