sx Prop
An escape-hatch style prop on every component — accepts any Box style prop including token values, responsive objects, and $-breakpoint groups.
Overview
Every component in @stareezy-ui/components — including Box itself — accepts an sx prop. It works like Tamagui or Chakra's sx: pass any style prop you'd put directly on Box and it gets applied on top of the component's own styles.
sx values win on collision with top-level props — it is always applied last.
sx for one-off adjustments. If you're setting the same styles across many instances, consider extracting them into a wrapper component or a custom token shorthand via createUi({ shorthands }).Basic usage
import { Box, Button, Card } from "@stareezy-ui/components";
// Plain values
<Box sx={{ mt: 16, p: 20, bg: "#f5f5f5" }} />
// Token references — use .value accessor
import { colors, radius, spacing } from "@stareezy-ui/tokens";
<Card sx={{ rounded: radius.xl, bg: colors.celurenBlue[25] }} />
// ThemeToken references — resolve to current theme at render time
import { createUi } from "@stareezy-ui/tokens";
const ui = createUi({ ... });
<Box sx={{ bg: ui.t.backgrounds.primary, color: ui.t.text.primary }} />Responsive values
sx accepts the same responsive object syntax as all other Box props — a plain value or a breakpoint map with base plus any breakpoint keys from your createUi({ media }) config.
// Mobile-first responsive padding
<Box sx={{ p: { base: 12, md: 24, lg: 40 } }} />
// Responsive flex direction
<Box sx={{ flexDirection: { base: "column", md: "row" }, gap: 16 }} />
// Responsive visibility
<Box sx={{ display: { base: "none", lg: "flex" } }}>Desktop only</Box>$-breakpoint group syntax
The $md, $lg etc. group syntax is also supported inside sx:
<Button
text="Submit"
sx={{
mt: 8,
$md: { mt: 16, px: 32 },
$lg: { mt: 24, px: 48 },
}}
/>On any component
sx is part of BoxLayoutProps which every component extends. It works on all of them:
import {
Box, Button, Card, Input, Badge, Spinner,
Tabs, Table, Modal, Drawer, Toast,
} from "@stareezy-ui/components";
<Button text="Save" sx={{ alignSelf: "flex-end", mt: 24 }} />
<Card sx={{ maxWidth: 480, mx: "auto" }}>…</Card>
<Input label="Email" sx={{ mb: 16 }} />
<Badge label="New" sx={{ position: "absolute", top: -8, right: -8 }} />
<Spinner sx={{ opacity: 0.6 }} />
<Modal open={open} onClose={close} sx={{ borderRadius: 0 }} />On Box directly
Box supports sx too. Since Box already accepts all style props directly, sx is most useful on Box when you want a clear visual separation between structural props and override styles, or when building utility wrappers:
// Equivalent — both produce the same output
<Box p={16} bg="var(--surface)" rounded={12} />
<Box sx={{ p: 16, bg: "var(--surface)", rounded: 12 }} />
// Mix: structural intent as top-level props, overrides in sx
<Box display="flex" flexDirection="column" gap={8}
sx={{ $md: { flexDirection: "row" }, maxWidth: 640 }}
/>What sx accepts
sx is typed as SxProp — a subset of BoxProps with all style-related keys. Interaction handlers, accessibility props, and children are excluded.
import type { SxProp } from "@stareezy-ui/components";
// Everything you can pass to Box as a style prop also works in sx:
type SxProp = {
// Spacing
p?, px?, py?, pt?, pb?, pl?, pr?,
m?, mx?, my?, mt?, mb?, ml?, mr?,
// Sizing
width?, height?, minWidth?, maxWidth?, minHeight?, maxHeight?,
// Flex
flex?, flexDirection?, alignItems?, justifyContent?, gap?, ...
// Colors
bg?, color?, borderColor?, backgroundColor?, opacity?,
// Borders
rounded?, borderWidth?, borderStyle?, borderRadius?, ...
// Position
position?, top?, right?, bottom?, left?, zIndex?, overflow?,
// Visual
cursor?, transform?, userSelect?, boxSizing?,
// Responsive objects
p?: { base?: number, sm?: number, md?: number, ... },
// $-breakpoint groups
$sm?, $md?, $lg?, $xl?, "$2xl"?,
// Custom shorthands from createUi({ shorthands })
bg?, br?, w?, h?, ...
}Priority
When the same property is set both as a direct prop and in sx, sx wins:
// ── sx overrides direct prop ── rendered background is "blue" ── ◀ sx wins
<Box bg="red" sx={{ bg: "blue" }} />sx is processed by Box's full resolver pipeline — token references, ThemeTokens, responsive objects, and $-groups all work exactly the same as top-level Box props.