Components

The components of @contour-ui/react are the parts of any interface, and the controls of audio-plugin UIs (Audio). The stylesheet of the package is built on tokens, so every component follows the theme with no extra code. A component with behavior, such as a popover or a dialog, is a headless component plus that stylesheet: its page has a Headless tab for the unstyled parts of @contour-ui/headless-react. Components without behavior, such as buttons, cards and alerts, exist only in the styled package.

Setup

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

import '@contour-ui/tokens/tokens.css';
import '@contour-ui/fonts/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.

Knob

A rotary control for the parameters of a plugin, turned by a drag, the wheel or the keys.

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.