Layout & Spacing
How useVyre handles spacing — and why components deliberately have nopadding/margin props.
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 aButton, 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
| You need… | Use |
|---|---|
| Space between components | Stack / Grid gap |
| Space around a block | Box padding / margin |
| Spacing inside a component | Already set by its tokens — not adjustable |
| Something the system can't express | Box style / className escape hatch |
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. OnBox this is the documented escape hatch — and theESLint 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>