Brick UI

React components for React 19 and Next.js: Text, Flex, Button, Card, Chip, Skeleton, IconButton, CircularLoading and ProgressBar.

Development

npm install
npm run typecheck
npm run build
npm run storybook

Usage

import { Button, Flex, Text } from "@divayth/brick-ui";
import "@divayth/brick-ui/styles.css";

<Flex alignItems="center">
  <Text weight="medium">Brick UI</Text>
  <Button>Continue</Button>
</Flex>;

The package ships compiled CSS; consumers do not need Tailwind. No global CSS reset is included. Colors can be overridden via CSS variables. Interactive Button preserves its 'use client' directive; Text and Flex remain server-compatible.

Input and Textarea

Use Input for a single-line field and Textarea for multiline text. Replace <Input multiline rows={5} /> with <Textarea rows={5} />. Both components keep the same field styling, labels, errors, icons, and sizes. Their native props, events, and refs match their respective HTML elements. Textarea grows with its content: use minRows and maxRows to set the limits. Above maxRows, the content scrolls inside the field. rows is used as the minimum when minRows is not provided.

Select and Autocomplete

The value type is inferred from options; explicit JSX type arguments are not needed. SelectProps and AutocompleteProps describe single selection by default. Use SelectProps<number, true> or AutocompleteProps<number, true> for multiple-selection wrappers. multiple and clearable are off by default. Add clearable to allow clearing; clearing a single selection returns undefined. multiple returns an array.

<Autocomplete
  options={[{ value: 1, label: "Alice" }]}
  onChange={(id) => console.log(id)} // number
/>

SelectProps describes selection controls. AutocompleteProps additionally includes onSearchChange, searchPlaceholder, and filterOptions. SelectCommonProps contains the shared props, options, and loading state.

Options are not filtered by default. Pass filterOptions to enable local search, or use onSearchChange to fetch options from a server. Replace the old <Select searchable /> API with <Autocomplete />.

Themes

Provider includes light and dark palettes. It restores the theme from the theme cookie when no initial or controlled theme is supplied.

import { Provider, useProvider } from "@divayth/brick-ui";

function ToggleTheme() {
  const { theme, onChangeTheme } = useProvider();
  return (
    <button onClick={() => onChangeTheme(theme === "dark" ? "light" : "dark")}>
      Toggle theme
    </button>
  );
}

<Provider locale="en">
  <ToggleTheme />
</Provider>;

For SSR, read the cookie on the server and pass its validated value as defaultTheme. Apply getThemeStyle(theme) and data-theme={theme} to html to avoid a light flash before hydration. Next.js is not a dependency. For custom palettes, pass themes to both Provider and getThemeStyle. The optional defaultTheme prop sets the initial theme and takes precedence over the cookie. Mount one global Provider: theme styles and portals share the document root.

For Tailwind v4 applications, register the library tokens in your global CSS:

@import "tailwindcss";
@import "@divayth/brick-ui/theme.css";

Keep importing @divayth/brick-ui/styles.css for component styles.

Structure

• src/ui — components, CSS Modules and Storybook stories.
• src/lib — shared size scale, types and tokens.

Size: xs | sm | md | lg | xl. Button supports all five sizes (heights 24 / 32 / 40 / 48 / 56 px). Flex gap supports the same scale (4 / 8 / 16 / 24 / 32 px). Text uses the same names and defaults to md. Text also supports inherit, 2xl, 3xl and 4xl.

Control heights and horizontal padding can be overridden with --height-* and --padding-* CSS variables.