Finished, accessible React components built on
@flowstack-ui/atom.
Brick provides static CSS, semantic design tokens, light and dark appearances, responsive defaults, and documented customization hooks. Components are ready to use without requiring an application-level CSS processor.
npm install @flowstack-ui/brickBrick installs its compatible Atom version automatically. The consuming application must provide React and React DOM 18 or newer.
Import the complete stylesheet once in the application root:
import "@flowstack-ui/brick/styles.css";New applications may opt into Brick's separate reset:
import "@flowstack-ui/brick/reset.css";
import "@flowstack-ui/brick/styles.css";Use the token entry point when only Brick's semantic variables are needed:
import "@flowstack-ui/brick/tokens.css";Do not import tokens.css together with styles.css; the complete stylesheet
already includes the tokens.
Route-aware applications may opt into modular CSS instead of styles.css:
import "@flowstack-ui/brick/styles/core.css";
import "@flowstack-ui/brick/styles/button.css";
import "@flowstack-ui/brick/styles/card.css";Import core.css once before any component styles, then import the stylesheet
matching each Brick JavaScript subpath the route renders. A component
stylesheet includes every shared visual recipe that component renders
internally, so checkbox-group.css, for example, does not require a separate
checkbox.css import. Component styles do not repeat tokens or foundations.
Do not combine this modular path with styles.css or tokens.css. The complete
stylesheet remains the recommended default unless measured route CSS makes the
additional import ownership worthwhile.
import {
Button,
Card,
Field,
HStack,
Input,
Text,
VStack,
} from "@flowstack-ui/brick";
export function AccountCard() {
return (
<Card.Root>
<Card.Content>
<VStack gap="4">
<Text as="h2" variant="title-md">
Account settings
</Text>
<Field.Root id="account-email">
<Field.Label>Email</Field.Label>
<Input name="email" type="email" />
</Field.Root>
<HStack gap="2" wrap>
<Button>Save changes</Button>
<Button tone="neutral" variant="outline">
Cancel
</Button>
</HStack>
</VStack>
</Card.Content>
</Card.Root>
);
}Components can also be imported through documented subpaths:
import { Button } from "@flowstack-ui/brick/button";With no explicit appearance, Brick follows prefers-color-scheme. Set an
appearance on the document or any subtree:
<html data-brick-appearance="dark">Override public semantic variables with ordinary CSS:
.brand-theme {
--brick-color-accent-solid: #5b5bd6;
--brick-color-accent-on-solid: #ffffff;
--brick-radius-control: 0.75rem;
}See Appearance and tokens for the full contract.
The complete component guides live with the source repository:
| Family | Components |
|---|---|
| Actions and selection | Button, Icon Button, Toggle, Toggle Group, Toolbar, Pagination |
| Accessibility | Skip Link, Visually Hidden |
| Data display | Aspect Ratio, Data Grid, Tree Grid, Tree, Feed, Swipeable Item |
| Forms and choices | Form, Field, Fieldset, Input, Number Input, OTP Field, Password Toggle Field, Textarea, Select, Combobox, Multi Select, File Upload, Checkbox, Checkbox Group, Radio Group, Switch, Slider, Rating |
| Content and status | Text, Icon, Image, Code, Code Block, Avatar, Badge, Chip, Notification Badge, Card, List, Table, Divider, Collapsible, Accordion, Skeleton, Progress, Progress Circle, Toast |
| Contextual overlays | Tooltip, Hover Card, Popover, Dropdown Menu, Context Menu, Menubar |
| Modal surfaces | Dialog, Alert Dialog, Drawer |
| Navigation and layout | Breadcrumb, Tabs, Navigation Menu, Bottom Navigation, Link, Nav List, Sidebar, App Bar, Stack, Grid, Container, Show, Hide, Surface, Scroll Area |
@flowstack-ui/atom owns reusable behavior, state, semantics, focus, keyboard
interaction, portals, positioning, and accessibility. Brick owns the finished
visual components, static CSS, semantic tokens, and public customization
contract. Application data, routing, persistence, and business workflows stay
outside the package.
MIT