Layout & Spacing

The rule

useVyre components — Button, Card, Input, and the rest — do not accept spacing props. This is intentional. Internal spacing is fixed by each component's design tokens so a Button always looks like a Button, on every page, in every codebase. That consistency is the whole point of a design system, and it is what keeps AI agents from hallucinating one-off spacing.

Where spacing lives instead

Not this

// ❌ NOT how useVyre works — components have no spacing props
<Button margin="lg">Save</Button>
<Card padding="xl">…</Card>
<Input marginTop="md" />

This

// ✅ Spacing lives in layout primitives, by composition
import { Stack, Box } from "@usevyre/react";

// Space BETWEEN components → Stack/Grid gap
<Stack direction="row" gap="md">
  <Button variant="ghost">Cancel</Button>
  <Button variant="primary">Save</Button>
</Stack>

// Space AROUND a block → wrap it in a Box
<Box marginTop="lg">
  <Card>…</Card>
</Box>

You still have full control over spacing — through composition, not by leaking padding/margin into every component. AI only needs to learn one spacing pattern (Stack/Box), not memorize spacing props across every component.

The escape hatch

For the rare value the design system genuinely cannot express, every component accepts className and style. On Box this is the documented escape hatch — and the ESLint plugin flags it so it stays a deliberate exception, never the default.

// Last resort only — flagged as an anti-pattern by the ESLint plugin
<Box style={{ marginTop: "13px" }}>
  <ThirdPartyEmbed />
</Box>