devup-ui

Devup UI

Build-time CSS extraction. No runtime JS for styling.

Critical: Components Are Compile-Time Only

All @devup-ui/react components throw Error('Cannot run on the runtime'). They are placeholders that build plugins transform to native HTML elements with classNames.

// BEFORE BUILD (what you write):
<Box bg="red" p={4} _hover={{ bg: "blue" }} />

// AFTER BUILD (what runs in browser):
<div className="a b c" />  // + CSS: .a{background:red} .b{padding:16px} .c:hover{background:blue}

Components

@devup-ui/react (Layout Primitives)

All are polymorphic (accept as prop). Default element is <div> unless noted.

Component	Default Element	Purpose
Box	div	Base layout primitive, accepts all style props
Flex	div	Flexbox container (shorthand for display: flex)
Grid	div	CSS Grid container
VStack	div	Vertical stack (flex column)
Center	div	Centered content
Text	p	Text/typography
Image	img	Image element
Input	input	Input element
Button	button	Button element
ThemeScript	--	SSR theme hydration (add to <head>)

@devup-ui/components (Pre-built UI)

Higher-level components with built-in behavior. These are runtime components (not compile-time only).

Component	Key Props
Button	variant (primary/default), size (sm/md/lg), loading, danger, icon, colors
Checkbox	children (label), onChange(checked), colors
Input	error, errorMessage, allowClear, icon, typography, colors
Textarea	error, errorMessage, typography, colors
Radio	variant (default/button), colors
RadioGroup	options[], direction (row/column), variant, value, onChange
Toggle	variant (default/switch), value, onChange(boolean), colors
Select	type (default/radio/checkbox), options[], value, onChange, colors
Stepper	min, max, type (input/text), value, onValueChange

Select compound: SelectTrigger, SelectContainer, SelectOption, SelectDivider Stepper compound: StepperContainer, StepperDecreaseButton, StepperIncreaseButton, StepperInput Hooks: useSelect(), useStepper()

All components accept a colors prop object for runtime color customization via CSS variables.

Style Prop Syntax

Shorthand Props (ALWAYS prefer these)

Spacing (unitless number x 4 = px)

Shorthand	CSS Property
m, mt, mr, mb, ml, mx, my	margin-*
p, pt, pr, pb, pl, px, py	padding-*

Sizing

Shorthand	CSS Property
w	width
h	height
minW, maxW	min-width, max-width
minH, maxH	min-height, max-height
boxSize	width + height (same value)

Background

Shorthand	CSS Property
bg	background
bgColor	background-color
bgImage, bgImg, backgroundImg	background-image
bgSize	background-size
bgPosition, bgPos	background-position
bgPositionX, bgPosX	background-position-x
bgPositionY, bgPosY	background-position-y
bgRepeat	background-repeat
bgAttachment	background-attachment
bgClip	background-clip
bgOrigin	background-origin
bgBlendMode	background-blend-mode

Border

Shorthand	CSS Property
borderTopRadius	border-top-left-radius + border-top-right-radius
borderBottomRadius	border-bottom-left-radius + border-bottom-right-radius
borderLeftRadius	border-top-left-radius + border-bottom-left-radius
borderRightRadius	border-top-right-radius + border-bottom-right-radius

Layout & Position

Shorthand	CSS Property
flexDir	flex-direction
pos	position
positioning	Helper: "top", "bottom-right", etc. (sets edges to 0)
objectPos	object-position
offsetPos	offset-position
maskPos	mask-position
maskImg	mask-image

Typography

Shorthand	Effect
typography	Applies theme typography token (fontFamily, fontSize, fontWeight, lineHeight, letterSpacing)

All standard CSS properties from csstype are also accepted directly (e.g., display, gap, opacity, transform, animation, etc.).

Spacing Scale (unitless number x 4 = px)

<Box p={1} />    // padding: 4px
<Box p={4} />    // padding: 16px
<Box p="4" />    // padding: 16px (unitless string also x 4)
<Box p="20px" /> // padding: 20px (with unit = exact value)

Unitless CSS properties keep the number as written: lineHeight, zIndex, opacity, fontWeight, flexGrow, order, aspectRatio, columnCount, strokeWidth, zoom, counterReset/counterIncrement/counterSet, and the rest of the unitless list vanilla-extract uses. Times are milliseconds, never scaled: transitionDuration={300}, transitionDelay, animationDuration and animationDelay give 300ms.

Styles from other libraries keep that library's number meaning instead of the scale: in .css.ts files, in vanilla-extract style(), globalStyle() and keyframes() calls inside ordinary modules, in Emotion and styled-components object styles, and in stylex.create(), fontSize: 16 is 16px. Devup UI shorthands (p, bg, ...) keep the scale everywhere.

Responsive Arrays (5 breakpoints)

// [mobile, mid, tablet, mid, PC] - 5 levels
// Use indices 0, 2, 4 most frequently. Use null to skip.

<Box bg={["red", null, "blue", null, "yellow"]} />  // mobile=red, tablet=blue, PC=yellow
<Box p={[2, null, 4, null, 6]} />                   // mobile=8px, tablet=16px, PC=24px
<Box w={["100%", null, "50%"]} />                   // mobile=100%, tablet+=50%

Pseudo-Selectors (underscore prefix)

<Box
  _hover={{ bg: "blue" }}
  _focus={{ outline: "2px solid blue" }}
  _focusVisible={{ outlineColor: "$primary" }}
  _active={{ bg: "darkblue" }}
  _disabled={{ opacity: 0.5 }}
  _before={{ content: '""' }}
  _after={{ content: '""' }}
  _firstChild={{ mt: 0 }}
  _lastChild={{ mb: 0 }}
  _placeholder={{ color: "gray" }}
/>

All CSS pseudo-classes and pseudo-elements from csstype are supported with _camelCase naming.

Group Selectors

Mark a parent with the data-group attribute, then children can react to that parent's state:

<Box data-group>
  <Text _groupHover={{ color: "blue" }}>Changes when parent hovered</Text>
  <Box _groupFocus={{ outline: "2px solid" }} />
  <Box _groupActive={{ bg: "darkblue" }} />
</Box>

Available: _groupHover, _groupFocus, _groupActive, _groupDisabled.

The legacy role="group" parent marker is still matched for backward compatibility but will be removed in v2. Use data-group for new code so role="group" stays reserved for genuine ARIA grouping semantics.

Theme Selectors

<Box _themeDark={{ bg: "gray.900" }} />
<Box _themeLight={{ bg: "white" }} />

At-Rules (Media, Container, Supports)

// Underscore prefix syntax
<Box _print={{ display: "none" }} />
<Box _screen={{ display: "block" }} />
<Box _media={{ "(min-width: 768px)": { w: "50%" } }} />
<Box _container={{ "(min-width: 400px)": { p: 4 } }} />
<Box _supports={{ "(display: grid)": { display: "grid" } }} />

// @ prefix syntax (equivalent)
<Box {...{ "@media": { "(min-width: 768px)": { w: "50%" } } }} />

// Query in the key (Emotion style), also inside `selectors` and css()/styled()
<Box selectors={{ "@media print": { display: "none" } }} />

Media shorthands wrap styles in a fixed query and nest in either direction with selectors: _print, _screen, _all, _portrait, _landscape, _motionReduce (prefers-reduced-motion: reduce), _motionSafe (no-preference), _contrastMore, _contrastLess, _forcedColors.

<Box transition={["opacity .2s", null, "all .3s"]} _motionReduce={{ transition: "none" }} />
<Box _motionSafe={{ _hover: { transform: "scale(1.05)" } }} />
globalCss({ _motionReduce: { "*, *::before, *::after": { transition: "none" } } })

• Conditions beat breakpoint values: at-rule styles are emitted after every responsive rule.
• Nested @media rules merge into one query (print and (prefers-reduced-motion:reduce)); ones that can never match together (_print inside _screen) are dropped.

Custom Selectors

<Box selectors={{
  "&:hover": { color: "red" },
  "&::before": { content: '">"' },
  "&:nth-child(2n)": { bg: "gray" },
}} />

Dynamic Values = CSS Variables

// Static value -> class
<Box bg="red" />  // className="a" + .a{background:red}

// Dynamic value -> CSS variable
<Box bg={props.color} />  // className="a" style={{"--a":props.color}} + .a{background:var(--a)}

// Conditional -> preserved
<Box bg={isActive ? "blue" : "gray"} />  // className={isActive ? "a" : "b"}

// Imported const -> static (resolved like the bundler: relative paths, tsconfig paths, packages; ESM or CommonJS)
import { PRIMARY } from "./tokens"  // export const PRIMARY = "red"
<Box bg={PRIMARY} />  // className="a"; a `let`, call or package import stays a variable

A .css.ts file may import other stylesheets and modules (import cycles behave as in ES modules); an imported stylesheet exports the same names its own CSS uses. styled-components .attrs() (objects and functions) and .withConfig() compile, and css(base, cond && { ... }) / styled.div(base, cond ? a : b) / value || { ... } / value ?? { ... } merge per property. A style argument that cannot be known at build time is a build error. StyleX defineVars / defineConsts / createTheme values imported from a .stylex.ts file resolve to the names that file generates, an

---

Content truncated.