# 42UI (/docs)





A curated set of primitives for building 42's internal and student-facing UIs. The kit doesn't try to be comprehensive — it ships the components 42 products actually reach for, and stops there.

```tsx
import { Button } from '@42-central/ui-react/button';

<Button color="brand">Get started</Button>
```

## What's in it [#whats-in-it]

The kit is deliberately small. Each component is shipped under its own subpath entry so apps tree-shake at the component-file boundary.

<Cards>
  <Card title="Color system" href="/docs/colors" description="The (variant × color) model that drives every accent-aware component." />

  <Card title="Typography" href="/docs/typography" description="Lato for body and display, Kode Mono for accents and code. How to load both." />

  <Card title="Button" href="/docs/button" description="Interactive primitive. Four variants × eleven colors, slots, loading." />

  <Card title="ActionIcon" href="/docs/action-icon" description="Square icon-only sibling of Button." />

  <Card title="Badge" href="/docs/badge" description="Compact inline label / status chip." />

  <Card title="Slider" href="/docs/slider" description="Single-value range input on top of Ark UI's Slider state machine." />

  <Card title="Spinner" href="/docs/spinner" description="Inline activity indicator. Inherits color + size from its container by default." />

  <Card title="Card" href="/docs/card" description="Bordered surface for grouped content." />

  <Card title="Flex" href="/docs/flex" description="Flex layout primitive. Vertical by default." />

  <Card title="Grid" href="/docs/grid" description="CSS-grid layout primitive with static class lookups." />

  <Card title="Container" href="/docs/container" description="Centered, max-width content wrapper." />

  <Card title="Text" href="/docs/text" description="Styled paragraph. Tight prop surface — size, c, prefix." />

  <Card title="Title" href="/docs/title" description="Heading primitive. order picks the element; size decouples the visual scale." />
</Cards>

## Design principles [#design-principles]

* **Subtract from references** — "inspired by Mantine / Chakra / Other component libraries" means *fewer* options than they ship, not more.
* **Two orthogonal axes for accents** — every colored component splits into a *variant* (shape) and a *color* (palette). Adding a new color is a CSS-only change.
* **RSC-safe by default** — `"use client"` only on interactive leaves. Layout and display primitives stay on the server.
* **Ark UI v5 for the hard parts** — keyboard, focus management, ARIA wiring, RTL coordinate flipping. We supply the styling and a flatter API.
* **React 19 idioms** — ref-as-prop everywhere, no `forwardRef`, no `displayName` boilerplate.

## Install [#install]

The kit is on the public npm registry as `@42-central/ui-react`. No credentials needed:

```npm
npm install @42-central/ui-react @ark-ui/react react react-dom tailwindcss
```

`@ark-ui/react`, `react`, `react-dom` (all React 19) and `tailwindcss` v4 are peer dependencies. Your `tsconfig.json` must use `"moduleResolution": "Bundler"` (or `"NodeNext"`).

<Callout type="info" title="Already on Nexus?">
  Every release is also published to the private Nexus registry as `@42/ui-react`, at the same versions. Keep using the `@42` scope wherever these docs say `@42-central`. Registry, CI and Docker setup are in the [Nexus guide](https://github.com/42staff/kit/blob/main/docs/nexus.md).
</Callout>

Each component has its own subpath:

```tsx
import { Button } from '@42-central/ui-react/button';
import { Badge } from '@42-central/ui-react/badge';
import { Flex } from '@42-central/ui-react/flex';
```

Pull the stylesheet into your app entry once:

```css
@import "@42-central/ui-react/styles.css";
```

Or wire Tailwind v4 yourself (recommended for full control):

```css
@import "tailwindcss";
@import "@42-central/ui-react/theme.css";
@source "../node_modules/@42-central/ui-react/dist/**/*.js";
```