60+ component primitives.

Horizontal / Vertical

<Stack direction="horizontal" gap="3">
  <Badge>A</Badge>
  <Badge>B</Badge>
</Stack>

<Stack direction="vertical" gap="2" align="flex-start">
  <Button>Primary</Button>
  <Button variant="outline">Secondary</Button>
</Stack>

3-column grid

<Grid columns={3} gap="4">
  <Card>One</Card>
  <Card>Two</Card>
  <Card>Three</Card>
</Grid>

PHI ratio / 16:9

<AspectRatio>          {/* defaults to PHI = 1.618 */}
  <img src="..." />
</AspectRatio>

<AspectRatio ratio={16/9}>
  <video src="..." />
</AspectRatio>

All sizes

<Heading level={1} size="4xl">Display heading</Heading>
<Heading level={2} size="xl">Section title</Heading>
<Heading level={3} size="lg">Subsection</Heading>

Sizes & colors

<Text size="lg" color="fg">Primary text</Text>
<Text size="sm" color="fg-subtle">Secondary text</Text>
<Text as="p" size="base">Block paragraph</Text>

Variants

<Anchor href="/docs">Read the docs</Anchor>
<Anchor href="https://..." target="_blank" rel="noopener noreferrer">Open in new tab</Anchor>
<Anchor href="#section" variant="subtle">Subtle</Anchor>

Variants

<Card variant="elevated" padding="4" radius="3">
  <Heading level={3} size="lg">Title</Heading>
  <Text color="fg-subtle">Description text here.</Text>
</Card>

Variants

Sizes

Color schemes

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

<Button variant="outline" size="sm">
  Cancel
</Button>

<Button variant="solid" colorScheme="danger" onClick={handleDelete}>
  Delete
</Button>

Keyboard

Sizes

Variants

<IconButton aria-label="Close dialog" size="md" variant="ghost">
  ✕
</IconButton>

Keyboard

Example

<CopyButton
  value="pnpm add @renge-ui/react"
  label="Copy"
  successLabel="Copied!"
  timeout={2100}
/>

Keyboard

Attached

Detached

<ButtonGroup attached>
  <Button variant="outline">Day</Button>
  <Button variant="outline">Week</Button>
  <Button variant="solid">Month</Button>
</ButtonGroup>

Sizes

States

<FormField label="Email" htmlFor="email" required>
  <Input id="email" type="email" placeholder="you@example.com" />
</FormField>

<FormField label="Username" htmlFor="user" errorText="Username is taken">
  <Input id="user" state="error" value="taken_name" />
</FormField>

Keyboard

Sizes

<FormField label="Country" htmlFor="country">
  <Select id="country">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
  </Select>
</FormField>

Keyboard

Example

<FormField label="Message" htmlFor="msg">
  <Textarea id="msg" placeholder="Write something…" rows={4} />
</FormField>

States

const [agreed, setAgreed] = useState(false);

<Checkbox
  label="I agree to the terms"
  checked={agreed}
  onChange={() => setAgreed(p => !p)}
/>

{/* Indeterminate (partial selection) */}
<Checkbox
  label="Select all"
  checked={false}
  indeterminate
  onChange={handleSelectAll}
/>

Keyboard

States

const [enabled, setEnabled] = useState(false);

<Switch
  label="Enable notifications"
  checked={enabled}
  onChange={() => setEnabled(p => !p)}
/>

Keyboard

Vertical group

const [plan, setPlan] = useState("starter");

<RadioGroup value={plan} onChange={setPlan} name="plan">
  <Radio value="starter" label="Starter — Free" />
  <Radio value="pro" label="Pro — $12/mo" />
  <Radio value="enterprise" label="Enterprise — Custom" />
</RadioGroup>

Keyboard

Controlled

const [value, setValue] = useState(50);

<Slider
  min={0}
  max={100}
  step={1}
  value={value}
  onChange={(e) => setValue(Number(e.target.value))}
/>

Keyboard

With helper / error

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

<FormField label="Username" htmlFor="user" errorText="Already taken">
  <Input id="user" state="error" />
</FormField>

Controlled

const [qty, setQty] = useState(1);

<NumberInput
  value={qty}
  min={1}
  max={99}
  step={1}
  onChange={setQty}
/>

Keyboard

Controlled

const [tags, setTags] = useState(["design", "system"]);

<TagInput
  tags={tags}
  onChange={setTags}
  placeholder="Add a tag…"
/>

Keyboard

Controlled / Readonly

const [stars, setStars] = useState(0);

<Rating value={stars} max={5} onChange={setStars} />

{/* Read-only display */}
<Rating value={4.0} max={5} readonly />

Keyboard

Variants (color)

Sizes

<Badge variant="success">Verified</Badge>
<Badge variant="warning">Pending review</Badge>
<Badge variant="danger">Rejected</Badge>
<Badge variant="neutral" size="sm">Draft</Badge>

Sizes & fallback

VM

VM

VM

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

{/* With image */}
<Avatar src="/avatar.png" alt="Vanessa Martin" size="4" />

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

Examples

<Stat
  label="Monthly Revenue"
  value="$84,240"
  trend="up"
  trendValue="+12% this month"
/>

Status variants

<Alert status="success" title="Published">
  Your post is now live.
</Alert>

<Alert status="danger" title="Failed to save">
  Please check your connection and try again.
</Alert>

Example

<Table bordered striped>
  <TableHead>
    <TableRow>
      <TableHeader>Name</TableHeader>
      <TableHeader>Status</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow index={0}>
      <TableCell>Alpha</TableCell>
      <TableCell><Badge variant="success">Active</Badge></TableCell>
    </TableRow>
  </TableBody>
</Table>

Example

<Accordion multiple>
  <AccordionItem id="q1" title="What is Renge?">
    A design system built on natural mathematics.
  </AccordionItem>
  <AccordionItem id="q2" title="How do I install?">
    pnpm add @renge-ui/react
  </AccordionItem>
</Accordion>

Keyboard

Shapes

{/* Text placeholder */}
<Skeleton variant="text" lines={3} />

{/* Avatar placeholder (circular) */}
<Skeleton variant="circular" height="48px" width="48px" />

{/* Card / image placeholder */}
<Skeleton variant="rectangular" height="200px" />

Example

<Navbar sticky border height="56px">
  <Stack direction="horizontal" justify="space-between" style={{ width: "100%" }}>
    <Logo />
    <Stack direction="horizontal" gap="4">
      <Anchor href="/docs">Docs</Anchor>
      <Button size="sm">Get Started</Button>
    </Stack>
  </Stack>
</Navbar>

Example

<Tabs defaultTab="overview">
  <TabList>
    <Tab value="overview">Overview</Tab>
    <Tab value="api">API</Tab>
  </TabList>
  <TabPanel value="overview">
    Content for Overview tab.
  </TabPanel>
  <TabPanel value="api">
    Content for API tab.
  </TabPanel>
</Tabs>

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

Keyboard

Example

<Breadcrumb>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
  <BreadcrumbItem current>Getting Started</BreadcrumbItem>
</Breadcrumb>

Controlled

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

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

Keyboard

Sizes

<Spinner size="md" />

{/* With loading state */}
<Button disabled={isLoading}>
  {isLoading ? <Spinner size="sm" /> : "Submit"}
</Button>

Values

<Progress value={61.8} color="accent" />
<Progress value={100} color="success" aria-label="Upload complete" />

Example

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

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

<Modal open={open} onClose={() => setOpen(false)} size="md">
  <ModalHeader>
    <Heading level={2} size="lg">Confirm deletion</Heading>
  </ModalHeader>
  <ModalBody>
    <Text>This action cannot be undone.</Text>
  </ModalBody>
  <ModalFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    <Button colorScheme="danger" onClick={handleDelete}>Delete</Button>
  </ModalFooter>
</Modal>

Keyboard

Examples

Press <KBD>⌘</KBD> + <KBD>K</KBD> to open search.

Variants

<Chip variant="accent">React</Chip>
<Chip variant="neutral" onDismiss={() => removeTag("design")}>Design</Chip>

<button aria-label="Close">
  <VisuallyHidden>Close dialog</VisuallyHidden>
  ✕
</button>

{/* Place at the very top of your layout */}
<SkipLink href="#main">Skip to main content</SkipLink>

<Navbar>…</Navbar>
<main id="main">…</main>