Box

Presets

Token presets: padding, background, border and rounding.

Content

tsx

import { Box } from "~/components/ui/base/box";

<Box padding="md" margin="none" background="raised" border rounded="lg">
  Content
</Box>

Extending via class

Custom layout and appearance with a single class via class.

Width and other styles via class

tsx

import { Box } from "~/components/ui/base/box";

<Box class="w-64 p-6 bg-surface-overlay rounded-xl border border-separator-opaque">
  Width and other styles via class
</Box>

Metadata

Source: meta.generated.json (see npm run generate)

File base/box/meta.generated.json not found or path not allowed.