Getting started

Install Brick

Brick is distributed as a normal npm package. React and React DOM 18 or newer are peers; Brick installs its compatible Atom foundation automatically.

npm install @flowstack-ui/brick

Load the visual foundation

Import the reset when your application wants Brick's opt-in baseline, then import the complete component stylesheet once at the application root.

import "@flowstack-ui/brick/reset.css";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet is the recommended default and the reset remains optional. When production measurement shows that all-component CSS is material, replace styles.css with the shared foundation plus every Brick component stylesheet the route renders.

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/button.css";
import "@flowstack-ui/brick/styles/card.css";
import "@flowstack-ui/brick/styles/field.css";
import "@flowstack-ui/brick/styles/input.css";
import "@flowstack-ui/brick/styles/stack.css";

Do not combine the modular path with styles.css or tokens.css. Each component page lists its matching stylesheet.

Compose a finished surface

import { Button, Card, Field, Input, VStack } from "@flowstack-ui/brick";

export function ContactCard() {
  return (
    <Card.Root>
      <Card.Header>
        <Card.Title>Start a project</Card.Title>
        <Card.Description>Tell us where you want to go.</Card.Description>
      </Card.Header>
      <Card.Content>
        <VStack gap="4">
          <Field.Root id="email">
            <Field.Label>Email</Field.Label>
            <Input name="email" type="email" />
          </Field.Root>
          <Button>Continue</Button>
        </VStack>
      </Card.Content>
    </Card.Root>
  );
}

Confirm your setup

Before customizing anything, confirm three things:

• the component stylesheet is loaded once at the application root;
• keyboard focus is visible when you move through the surface; and
• the same component remains readable in light and dark appearance.

If those are true, your Brick foundation is working and you can move on to content, layout, and theme decisions.

Choose the right layer

Use Brick when you want finished components. Use Atom directly when you want headless behavior and intend to own every visual decision. Applications own routing, data, persistence, content, and business workflows.