Foundations

Shape.

Give geometry a role.

Semantic silhouettes connect controls and containers. Decorative artwork keeps clear of content and focus.

Geometry and artwork have different jobs

Semantic shapes reuse the radius scale. Pills round controls while panels keep readable corners. Decorative SVG silhouettes sit beside content; they never clip labels, hit areas, or focus rings.

A shape with room for content.

Artwork stays separate. Labels, hit areas, and focus rings remain intact.

import "@dixy-ui/react/styles.css";
import { Theme } from "@dixy-ui/react";
import {
  Box,
  Button,
  Heading,
  Inline,
  Shape,
  Stack,
  Text,
  Theme as ShapeScope,
} from "@dixy-ui/react";
import type { DecorativeShape, ShapePreset } from "@dixy-ui/tokens";

interface ShapeExampleProps {

Semantic geometry

Preset	Control	Container	Feature
`rounded`	`10`	`12`	`24`
`pill`	`full`	`16`	`24`
`square`	`0`	`0`	`0`

Rounded geometry follows the current contextual radius roles; the rounded row shows the default primitives. Per-component overrides preserve a stable rectangular interaction area. Shape is decorative SVG artwork, hidden from assistive technology unless a label is supplied.

Property	Type	Default
`kind`	`"flower" \| "clover" \| "arch" \| "cut" \| undefined`	`flower`
`label`	`string \| undefined`	`—`

Loading foundation lab…