Stack

Flexbox container. Composes vertical and horizontal layouts using Fibonacci spacing tokens.

Vertical (default)

Horizontal + justify between

Horizontal + align center

<Stack gap="4">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</Stack>

<Stack direction="horizontal" justify="between">
  <Text>Left</Text>
  <Text>Right</Text>
</Stack>

{/* Flex wrap via style prop */}
<Stack direction="horizontal" gap="3" style={{ flexWrap: "wrap" }}>
  <Badge>one</Badge>
  <Badge>two</Badge>
  <Badge>three</Badge>
</Stack>

Grid

CSS grid container with Fibonacci gap tokens. Accepts a number of equal columns or a custom template string.

3-column equal grid

Golden ratio split (1fr 1.618fr)

<Grid columns={3} gap="3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</Grid>

{/* Custom template — e.g. golden ratio split */}
<Grid columns="1fr 1.618fr" gap="4">
  <div>Narrow</div>
  <div>Wide (φ)</div>
</Grid>

{/* Per-axis gaps */}
<Grid columns={2} gapX="5" gapY="3">
  ...
</Grid>

Section

Page section wrapper with max-width constraint and automatic horizontal centering.

Centered with md max-width

<Section maxWidth="lg" paddingY="8" paddingX="5">
  <Heading>Page content</Heading>
  <Text>Body copy sits inside the max-width container.</Text>
</Section>

{/* Full-bleed with internal constraint */}
<div style={{ background: "var(--renge-color-bg-subtle)" }}>
  <Section maxWidth="xl" paddingY="7">
    <Heading>Wide section</Heading>
  </Section>
</div>

Container

Centered max-width wrapper. Max-widths follow Fibonacci-proportioned breakpoints: 520, 768, 1024, 1440. Horizontal padding defaults to space-5 (32px = Fibonacci×8×4).

Sizes (shown at reduced scale)

{/* Default: lg (1024px), px=5 */}
<Container>
  <Heading>Page content</Heading>
</Container>

{/* Narrow — article width */}
<Container size="sm" px="4">
  <Text>Prose text with narrow measure.</Text>
</Container>

{/* Custom padding */}
<Container size="xl" px="6">
  <Grid columns={3} gap="5">…</Grid>
</Container>

AspectRatio

Ratio-maintaining container. Default ratio = φ (1.618…) — the golden ratio. Any content inside fills the proportioned box. Uses padding-bottom technique for universal support.

Common ratios

import { PHI } from "@renge-ui/tokens";

{/* Default: PHI (golden ratio) */}
<AspectRatio>
  <img src="/photo.jpg" alt="…" style={{ objectFit: "cover" }} />
</AspectRatio>

{/* 16:9 video */}
<AspectRatio ratio={16/9}>
  <video src="/demo.mp4" controls />
</AspectRatio>

{/* Square */}
<AspectRatio ratio={1}>
  <div>…</div>
</AspectRatio>

Spacer

Explicit whitespace element. All sizes map directly to Fibonacci spacing tokens — the visible grammar of the space between things.

Vertical spacers (rendered with borders for visibility)

<Heading>Section title</Heading>
<Spacer size="5" />
<Text>The proportion between the heading and the body text is deliberate.</Text>

{/* Horizontal spacer in flex layouts */}
<Stack direction="horizontal">
  <Text>Left</Text>
  <Spacer size="4" axis="horizontal" />
  <Text>Right</Text>
</Stack>

Heading

Semantic heading using the PHI-derived type scale. Level maps to h1–h6 and sets a proportional default size.

Levels 1–4 with default sizing

Color variants

<Heading level={1}>The golden ratio.</Heading>
<Heading level={2} color="accent">Section title</Heading>

{/* Override the default size for a level */}
<Heading level={3} size="2xl">Larger h3</Heading>

{/* PHI-derived line heights apply automatically */}
{/* h1/h2 → display (1.236), h3/h4 → heading (1.382) */}

Text

Inline or block text element with full access to the PHI type scale, color tokens, and weight options.

Size scale

Colors + weights

<Text size="lg" color="fg-subtle">Natural proportion.</Text>
<Text as="p" weight="medium" size="base">
  Fibonacci spacing.
</Text>
<Text size="sm" color="accent" weight="semibold">
  PHI = 1.618033...
</Text>

{/* Block-level text */}
<Text as="p" size="base" color="fg-subtle">
  Paragraph text using the base size — 16px, line-height 1.618 (φ).
</Text>

Divider

Horizontal or vertical rule rendered as an <hr>. Uses border color tokens for consistent visual weight.

Horizontal variants

Vertical

<Divider />
<Divider color="border" spacing="2" />
<Divider orientation="vertical" spacing="4" />

Anchor

Styled anchor element. Three variants for different contexts. Named Anchor (not Link) to avoid collision with Next.js's Link component.

Variants

<Anchor href="/docs">Read the docs</Anchor>
<Anchor href="/github" variant="subtle">GitHub →</Anchor>

{/* Always underlined */}
<Anchor href="/privacy" underline>
  Privacy policy
</Anchor>

{/* In prose — inherits parent text color */}
<p>
  Built on <Anchor href="/phi" variant="plain">natural mathematics</Anchor>.
</p>

Button

Action element. Every variant, size, and color combination resolves to a CSS variable — no hardcoded values.

Variants

Sizes

Color schemes

Full width + disabled

<Button variant="solid" size="md" colorScheme="accent">
  Continue
</Button>

<Button variant="outline" colorScheme="danger" size="sm">
  Delete
</Button>

<Button variant="ghost" colorScheme="success">
  Confirm
</Button>

{/* Disabled state — native HTML attribute */}
<Button disabled style={{ opacity: 0.4, cursor: "not-allowed" }}>
  Unavailable
</Button>

{/* Extends all native button props */}
<Button onClick={handleSubmit} type="submit" fullWidth>
  Submit form
</Button>

IconButton

Circular icon-only button. Sizes follow the fractal scale (Fibonacci × baseUnit): 20→32→40→52→84px. Each step is self-similar — a precise mathematical miniature or magnification of the base.

Sizes

Variants + color schemes

{/* Basic icon button */}
<IconButton aria-label="Close" onClick={onClose}>
  ✕
</IconButton>

{/* With SVG icon */}
<IconButton
  aria-label="Settings"
  size="md"
  variant="ghost"
>
  <SettingsIcon />
</IconButton>

{/* Danger action */}
<IconButton
  aria-label="Delete item"
  colorScheme="danger"
  variant="outline"
>
  <TrashIcon />
</IconButton>

ButtonGroup

Groups related buttons into a single visual unit. Use ButtonGroupItem to flatten border radii on touching edges — only outermost corners keep their curvature.

Attached group

<ButtonGroup>
  <Button
    variant="outline"
    style={{
      borderRadius: "var(--renge-radius-2) 0 0 var(--renge-radius-2)",
      borderRight: "none",
    }}
  >
    Left
  </Button>
  <Button variant="outline" style={{ borderRadius: 0 }}>
    Middle
  </Button>
  <Button
    variant="outline"
    style={{ borderRadius: "0 var(--renge-radius-2) var(--renge-radius-2) 0" }}
  >
    Right
  </Button>
</ButtonGroup>

CopyButton

Clipboard copy with visual feedback. Success state persists for 2100ms (duration-7 — a Fibonacci duration, long enough to read, short enough not to linger).

Copy values

In a code block

<CopyButton value="text to copy" />
<CopyButton
  value={cssVar}
  label="Copy"
  successLabel="Copied!"
  timeout={2100}
  onCopy={(value) => console.log("Copied:", value)}
/>

Input

Text input with Renge sizing and validation state styling. Focus ring is handled with inline event handlers to stay in-system.

States

Sizes

<Input placeholder="Enter value" size="md" />
<Input state="error" placeholder="Invalid input" fullWidth />
<Input state="success" defaultValue="Confirmed" fullWidth />

{/* Controlled */}
<Input
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Controlled input"
  fullWidth
/>

Select

Styled native select element. Chevron rendered as a background SVG — no extra DOM nodes. Sizing and state tokens match Input exactly.

Sizes

States + placeholder

<Select placeholder="Choose a profile…" fullWidth>
  <option value="ocean">Ocean</option>
  <option value="earth">Earth</option>
</Select>

<Select state="error" fullWidth>
  <option>Invalid</option>
</Select>

{/* Controlled */}
<Select value={profile} onChange={(e) => setProfile(e.target.value)}>
  <option value="ocean">Ocean</option>
  <option value="twilight">Twilight</option>
</Select>

Checkbox

Custom-styled checkbox. The box and check geometry derive from Fibonacci spacing. The checkmark animates in with spring easing via a stroke-dashoffset draw.

States

Sizes

Controlled

<Checkbox label="Accept terms" />
<Checkbox label="Remember me" defaultChecked />
<Checkbox label="Partially selected" indeterminate />

{/* Controlled */}
<Checkbox
  checked={agreed}
  onChange={(e) => setAgreed(e.target.checked)}
  label="I agree to the terms"
/>

Radio + RadioGroup

Radio button group. The inner dot is sized at outer / φ — the golden proportion is visible in every interaction. RadioGroup manages shared name and value state.

Basic group

Horizontal + sizes

Disabled

<RadioGroup
  name="theme"
  defaultValue="ocean"
  onChange={(value) => setTheme(value)}
>
  <Radio value="ocean" label="Ocean" />
  <Radio value="earth" label="Earth" />
  <Radio value="twilight" label="Twilight" />
</RadioGroup>

{/* Horizontal */}
<RadioGroup name="size" direction="horizontal" gap="4">
  <Radio value="sm" label="Small" />
  <Radio value="lg" label="Large" />
</RadioGroup>

Switch

Toggle switch. Track width:height ≈ φ:1 — the golden proportion. Thumb slides with spring easing. Works as a styled checkbox under the hood for full accessibility.

Sizes

Label positions + controlled

<Switch label="Dark mode" />
<Switch label="Notifications" defaultChecked />

{/* Controlled */}
<Switch
  label="Feature flag"
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
/>

{/* Label on left */}
<Switch label="Auto-save" labelPosition="left" />

Textarea

Multi-line text input. Min-height steps follow Fibonacci line counts — 3, 5, and 8 lines at sm/md/lg respectively.

Sizes

States + resize

<Textarea placeholder="Describe your system…" fullWidth />

<Textarea
  size="lg"
  state="error"
  placeholder="Too long — 500 characters max"
  fullWidth
/>

{/* Controlled */}
<Textarea
  value={bio}
  onChange={(e) => setBio(e.target.value)}
  resize="none"
  fullWidth
/>

Slider

Range slider with optional φ markers. The golden section points (0.382 and 0.618 of the range) are marked as optional visual guides — the phi ratio embedded in every use.

Default + controlled

φ markers at 0.382 and 0.618

<Slider label="Variance" showValue defaultValue={0} />

{/* PHI markers — shows golden section at 0.382 and 0.618 */}
<Slider
  label="Scale ratio"
  showPhiMarkers
  showValue
  min={1}
  max={2}
  step={0.001}
  defaultValue={1.618}
/>

{/* Controlled */}
<Slider
  value={scale}
  onChange={(e) => setScale(parseFloat(e.target.value))}
/>

FormField

Wraps any input with a label, optional helper text, and error text. Error overrides helper when both are present.

States

<FormField
  label="Email"
  htmlFor="email"
  helperText="We'll never share this."
>
  <Input id="email" type="email" fullWidth />
</FormField>

<FormField
  label="Username"
  htmlFor="username"
  required
  errorText="Username already taken."
>
  <Input id="username" state="error" fullWidth />
</FormField>

Card

Surface container with three visual variants. Padding and radius are token-driven.

Variants

Padding scale

<Card variant="elevated" padding="5" radius="3">
  <Heading level={3}>Card title</Heading>
  <Text color="fg-subtle">Supporting copy goes here.</Text>
</Card>

<Card variant="outlined" padding="4">
  <Stack gap="3">
    <Badge variant="success">Active</Badge>
    <Heading level={3}>Status card</Heading>
  </Stack>
</Card>

Badge

Compact inline label for status, category, or count. Six semantic variants map directly to the color token system.

Variants

Sizes

<Badge variant="success">Published</Badge>
<Badge variant="warning" size="sm">Beta</Badge>
<Badge variant="danger">Deprecated</Badge>
<Badge variant="info">New</Badge>
<Badge variant="accent" size="lg">Featured</Badge>

Chip

Dismissible tag with the same semantic color variants as Badge. Provide onDismiss to render a close button.

Variants

Dismissible (live demo)

{/* Static */}
<Chip variant="accent">Design system</Chip>

{/* Dismissible */}
<Chip variant="neutral" onDismiss={() => removeTag(id)}>
  Removable
</Chip>

{/* Dynamic tag list */}
{tags.map(tag => (
  <Chip
    key={tag.id}
    variant="accent"
    onDismiss={() => removeTag(tag.id)}
  >
    {tag.label}
  </Chip>
))}

Avatar

User avatar with image or initials fallback. Sizes follow the Fibonacci sequence × 4px.

Sizes — Fibonacci × 4px

Shapes + image

PH

circle

FB

square

image

{/* Initials fallback */}
<Avatar initials="RG" size="3" />

{/* Image with initials fallback */}
<Avatar
  src="/user.jpg"
  alt="Profile photo"
  initials="RG"
  size="4"
/>

{/* Square shape */}
<Avatar initials="FB" shape="square" size="3" />

Stat

Key metric display. Trend badges are color-coded via success/danger tokens. Value renders at 3xl — designed to be read at a glance.

Metrics

<Stat value="φ" label="Golden ratio" />

<Stat
  value="89"
  label="Fibonacci step"
  trend="up"
  trendValue="+34"
  caption="from step 9"
/>

<Stat
  value="0ms"
  label="Build time delta"
  trend="neutral"
  trendValue="no change"
/>

Tooltip

Hover tooltip with spring entry animation. Offset uses space-1 (4px = Fibonacci×1) so the gap is always proportioned. Four placements available.

Placements

Rich content

<Tooltip content="This is a tooltip" placement="top">
  <Button>Hover me</Button>
</Tooltip>

{/* Rich content */}
<Tooltip
  content={
    <Stack gap="1">
      <Text>PHI = 1.618…</Text>
      <Text size="sm" color="fg-subtle">The golden ratio</Text>
    </Stack>
  }
  placement="right"
>
  <Badge>φ</Badge>
</Tooltip>

{/* With delay */}
<Tooltip content="Appears after 500ms" delay={500}>
  <span>Hover</span>
</Tooltip>

Skeleton

Animated loading placeholder. Shimmer sweeps at duration-6 (1300ms — Fibonacci). Text variant: the last line is 61.8% wide (1/φ), creating a natural paragraph silhouette.

Variants

Card skeleton pattern

{/* Text — last line at 61.8% (1/φ) */}
<Skeleton variant="text" lines={3} />

{/* Rectangular */}
<Skeleton variant="rectangular" height={80} />

{/* Circular — avatar placeholder */}
<Skeleton variant="circular" width={52} height={52} />

{/* Custom dimensions */}
<Skeleton width="200px" height="120px" />

{/* No animation */}
<Skeleton animated={false} height={40} />

Table

Data table primitives: Table, TableHead, TableBody, TableFoot, TableRow, TableHeader, TableCell. Row padding follows Fibonacci spacing. Header uses semantic uppercase styling.

Full table

<Table bordered>
  <TableHead>
    <TableRow>
      <TableHeader>Name</TableHeader>
      <TableHeader>Value</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    {rows.map((row, i) => (
      <TableRow key={row.id} index={i}>
        <TableCell>{row.name}</TableCell>
        <TableCell muted>{row.value}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Accordion

Expandable sections. Height animates with ease-in-out at duration-4 (500ms). The chevron rotates 180° on open. Accordion manages which items are open; AccordionItem is a single row.

Single (default)

Multiple open allowed

<Accordion defaultOpen="phi">
  <AccordionItem id="phi" title="What is PHI?">
    The golden ratio — 1.618033…
  </AccordionItem>
  <AccordionItem id="fibonacci" title="Fibonacci sequence">
    1, 1, 2, 3, 5, 8, 13…
  </AccordionItem>
</Accordion>

{/* Multiple simultaneously open */}
<Accordion multiple>
  <AccordionItem id="one" title="Section 1">Content</AccordionItem>
  <AccordionItem id="two" title="Section 2">Content</AccordionItem>
</Accordion>

Timeline

Vertical event list. Dots are sized at space-3 (12px = Fibonacci×3). The connector gradient transitions from the item's status color to border-subtle — events flow forward in time.

Build history

<Timeline>
  <TimelineItem
    title="v1.0 released"
    description="First stable token system."
    timestamp="Jan 2025"
    status="completed"
  />
  <TimelineItem
    title="React components"
    description="21 components added."
    timestamp="Feb 2025"
    status="active"
  />
  <TimelineItem
    title="Vue port"
    description="Coming soon."
    timestamp="TBD"
    status="pending"
  />
</Timeline>

Alert

Contextual banner with left-border accent and semantic status. Renders with role="alert" for screen reader compatibility.

All statuses

Without title

<Alert status="info" title="Note">
  Informational context.
</Alert>

<Alert status="success" title="Deployed">
  Production build complete.
</Alert>

<Alert status="danger" title="Error">
  Something went wrong.
</Alert>

{/* No title — body only */}
<Alert status="warning">
  Approaching rate limit.
</Alert>

Spinner

Animated loading indicator. The CSS keyframe (rengeSpinnerSpin) is injected once at module load — no runtime overhead per instance.

Sizes

Colors

<Spinner size="md" color="accent" label="Loading tokens" />
<Spinner size="sm" color="fg-subtle" />

{/* In a button */}
<Button variant="outline" disabled>
  <Stack direction="horizontal" gap="2" align="center">
    <Spinner size="sm" color="accent" />
    <span>Saving...</span>
  </Stack>
</Button>

Progress

Linear progress bar. Value is clamped 0–100. Track and fill colors reference semantic tokens.

PHI-derived values

<Progress value={61.8} color="accent" />
<Progress value={100} color="success" size="lg" />
<Progress value={30} color="danger" radius="none" />

{/* Controlled */}
<Progress
  value={uploadProgress}
  color="accent"
  size="md"
  label="Upload progress"
/>

Toast

Portal-based notification system. Max 5 toasts visible (Fibonacci). Entries use spring easing; exits use ease-in. Wrap your app in ToastProvider and call useToast() anywhere.

Trigger toasts

// 1. Wrap app (or page) in ToastProvider
import { ToastProvider } from "@renge-ui/react";

export default function Layout({ children }) {
  return (
    <ToastProvider>
      {children}
    </ToastProvider>
  );
}

// 2. Use the hook anywhere inside
import { useToast } from "@renge-ui/react";

function SaveButton() {
  const { toast } = useToast();
  return (
    <Button onClick={() => {
      await save();
      toast({
        title: "Saved",
        description: "Your changes are live.",
        status: "success",
        duration: 3000,  // ms — default 5000
      });
    }}>
      Save
    </Button>
  );
}

Modal

Portal-based dialog. Overlay fades in; dialog opens with bloom spring easing. Closes on Escape key and overlay click by default. Focus is trapped inside while open.

Sizes

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open modal</Button>

<Modal open={open} onClose={() => setOpen(false)} size="md">
  <ModalHeader>
    <Heading level={3}>Title</Heading>
    <Button variant="ghost" onClick={() => setOpen(false)}>×</Button>
  </ModalHeader>
  <ModalBody>
    <Text>Modal content goes here.</Text>
  </ModalBody>
  <ModalFooter>
    <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
    <Button variant="solid" onClick={handleConfirm}>Confirm</Button>
  </ModalFooter>
</Modal>

Navbar

Navigation container. Composes with Stack to build any nav layout. Pass sticky to get fixed-top positioning.

Basic navigation

With border off

{/* Basic */}
<Navbar>
  <Stack direction="horizontal" justify="between" style={{ width: "100%" }}>
    <Text weight="semibold">Brand</Text>
    <Stack direction="horizontal" gap="4">
      <a href="/docs">Docs</a>
      <a href="/github">GitHub</a>
    </Stack>
  </Stack>
</Navbar>

{/* Sticky top */}
<Navbar sticky>
  <Stack direction="horizontal" justify="between" style={{ width: "100%" }}>
    <Text weight="semibold">Brand</Text>
    <ProfileToggle />
  </Stack>
</Navbar>

Tabs

Tab navigation with spring-eased active underline. Tabs manages open state; Tab registers a value; TabPanel renders conditionally.

Basic tabs

<Tabs defaultTab="overview">
  <TabList>
    <Tab value="overview">Overview</Tab>
    <Tab value="props">Props</Tab>
    <Tab value="examples">Examples</Tab>
  </TabList>
  <TabPanel value="overview">
    <Text>Overview content</Text>
  </TabPanel>
  <TabPanel value="props">
    <PropsTable>…</PropsTable>
  </TabPanel>
  <TabPanel value="examples">
    <Demo>…</Demo>
  </TabPanel>
</Tabs>

{/* Controlled */}
<Tabs value={activeTab} onChange={setActiveTab}>
  …
</Tabs>

Breadcrumb

Path navigation. Items are separated by a chevron. The current page is rendered in fg (not a link). All spacing uses space-1 (4px = Fibonacci×1).

Navigation path

Longer path

<Breadcrumb>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
  <BreadcrumbItem current>Current page</BreadcrumbItem>
</Breadcrumb>

{/* Custom separator */}
<Breadcrumb separator="/">
  <BreadcrumbItem href="/">usr</BreadcrumbItem>
  <BreadcrumbItem href="/local">local</BreadcrumbItem>
  <BreadcrumbItem current>bin</BreadcrumbItem>
</Breadcrumb>

Pagination

Page navigation. Shows at most siblings×2+5 pages — default sibling=1 (Fibonacci). Active page uses accent. Ellipsis replaces gaps greater than 2 pages.

Interactive

Siblings = 2

const [page, setPage] = useState(1);

<Pagination
  total={20}
  page={page}
  onChange={setPage}
/>

{/* More siblings visible */}
<Pagination
  total={100}
  page={50}
  onChange={setPage}
  siblings={2}
/>

EnergyRing

Circular SVG ring showing an energy or progress level. Stroke width and label scale by PHI with the ring size — self-similar at every size.

Sizes

Colors

Pulse rates

<EnergyRing value={72} />
<EnergyRing value={72} size="xl" color="success" />
<EnergyRing value={50} size="lg" pulse rate="active" />
<EnergyRing value={88} size="xl" label="88%" color="warning" />

Pulse

A breathing dot — the minimal alive indicator. Scales to φ at peak. Rate maps to energy states with Fibonacci-derived durations.

Sizes

Colors + rates

With ripple

Inline status indicator

<Pulse />
<Pulse size="lg" color="success" rate="fire" />
<Pulse size="lg" color="accent" ripple />

{/* Status indicator */}
<Stack direction="horizontal" gap="2" align="center">
  <Pulse color="success" size="sm" />
  <Text size="sm">System online</Text>
</Stack>

FlowField

A living phyllotaxis dot field. Each dot is placed at a golden-angle position and pulses with a delay derived from its spiral index — energy flows outward along the golden spiral.

Energy levels

Colors

<FlowField />
<FlowField energy="fire" size={300} count={144} />
<FlowField energy="rest" color="fg-subtle" size={200} />

{/* As a decorative background element */}
<div style={{ position: "relative" }}>
  <FlowField energy="void" style={{ position: "absolute", inset: 0, opacity: 0.4 }} />
  <YourContent />
</div>

Token API

@renge-ui/tokens exports two ways to consume tokens: createRengeTheme() for generating CSS, and rengeVars for typed CSS variable references.

createRengeTheme(config?)

Generates a complete token set from mathematical first principles. Returns CSS ready to inject and a JS vars map.

import { createRengeTheme } from "@renge-ui/tokens";

const theme = createRengeTheme({
  profile:    "ocean",   // 'ocean' | 'earth' | 'twilight' | 'fire' | 'void' | 'leaf'
  mode:       "light",   // 'light' | 'dark'
  baseUnit:   4,         // Spacing multiplier in px — try 6 for denser UIs
  typeBase:   16,        // Root font size in px
  scaleRatio: 1.618,     // Typography scale ratio (φ = golden ratio)
  variance:   0,         // 0–1 tolerance drift (0 = exact math, deterministic)
  selector:   ":root",   // CSS selector to wrap the variables in
});

// theme.css   — full :root { --renge-* ... } string, ready to inject
// theme.vars  — Record<string, string> of every --renge-* variable
// theme.config — resolved config with all defaults applied

rengeVars

A statically typed object of CSS variable references. No runtime dependency — use it anywhere you need a var(--renge-*) string with IDE autocomplete.

import { rengeVars } from "@renge-ui/tokens";

// Color (22 semantic tokens, profile-reactive)
rengeVars.color.bg            // "var(--renge-color-bg)"
rengeVars.color.bgSubtle      // "var(--renge-color-bg-subtle)"
rengeVars.color.fg            // "var(--renge-color-fg)"
rengeVars.color.accent        // "var(--renge-color-accent)"
rengeVars.color.danger        // "var(--renge-color-danger)"
rengeVars.color.borderFocus   // "var(--renge-color-border-focus)"

// Spacing (Fibonacci × baseUnit, steps 0–10)
rengeVars.space[0]   // "var(--renge-space-0)"  → 0px
rengeVars.space[3]   // "var(--renge-space-3)"  → 12px (Fib[3] × 4)
rengeVars.space[5]   // "var(--renge-space-5)"  → 32px

// Typography (PHI scale, 8 steps)
rengeVars.fontSize.base  // "var(--renge-font-size-base)"
rengeVars.fontSize.lg    // "var(--renge-font-size-lg)"
rengeVars.lineHeight.base // "var(--renge-line-height-base)"

// Motion (Fibonacci × 100ms, steps 0–9)
rengeVars.duration[2]    // "var(--renge-duration-2)"  → 200ms
rengeVars.duration[5]    // "var(--renge-duration-5)"  → 800ms
rengeVars.easing.out     // "var(--renge-easing-ease-out)"
rengeVars.easing.spring  // "var(--renge-easing-spring)"

// Radius (Fibonacci × baseUnit, steps none/1–5/full)
rengeVars.radius[2]      // "var(--renge-radius-2)"   → 8px
rengeVars.radius.full    // "var(--renge-radius-full)" → pill

Integrating with another system

Use rengeVars to map Renge tokens to your own CSS variable names. This is the recommended pattern for adopting Renge alongside an existing design system.

import { createRengeTheme, rengeVars } from "@renge-ui/tokens";

const theme = createRengeTheme({ profile: "earth", mode: "light" });

// Map semantic Renge tokens → your system's variable names
const aliases: [string, string][] = [
  // Backgrounds
  ["--color-bg-primary",   rengeVars.color.bg],
  ["--color-bg-secondary", rengeVars.color.bgSubtle],
  ["--color-surface",      rengeVars.color.bgMuted],
  // Foreground
  ["--color-text",         rengeVars.color.fg],
  ["--color-text-muted",   rengeVars.color.fgSubtle],
  // Interactive
  ["--color-primary",      rengeVars.color.accent],
  ["--color-primary-hover",rengeVars.color.accentHover],
  // Status
  ["--color-error",        rengeVars.color.danger],
  ["--color-success",      rengeVars.color.success],
  ["--color-warning",      rengeVars.color.warning],
  // Spacing bridge
  ["--space-sm",           rengeVars.space[2]],
  ["--space-md",           rengeVars.space[4]],
  ["--space-lg",           rengeVars.space[5]],
];

const aliasCSS = `:root {
${aliases.map(([k, v]) => `  ${k}: ${v};`).join("\n")}
}`;

// Inject Renge base vars first, then your aliases on top
document.head.insertAdjacentHTML("beforeend",
  `<style>${theme.css}\n${aliasCSS}</style>`
);

All 22 semantic color tokens

Animations

15 named animations derived from the token system. Apply via the animation prop on any component that accepts it.

Available tokens

Live examples

{/* On any component that accepts animation prop */}
<Heading level={2} animation="breathe">
  Living proportion.
</Heading>

<Badge variant="accent" animation="pulse">
  New
</Badge>

<Card animation="bloom">
  <Text>Enters with bloom effect</Text>
</Card>

{/* Via CSS variable directly */}
<div style={{ animation: "var(--renge-animation-float)" }}>
  Floats gently.
</div>

Patterns

Common composition patterns using @renge-ui/react components.

Status card

Form with validation

Metric grid

{/* Every component uses only CSS custom properties */}
{/* Switch profiles and all colors update instantly */}
import { createRengeTheme } from "@renge-ui/tokens";

const theme = createRengeTheme({ profile: "twilight" });
// Inject theme.css and all components adapt — no re-render.