42UI

A small, opinionated React component library for 42 products. Built on Ark UI v5, Tailwind v4, and React 19.

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.

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

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

What's 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.

Color system

The (variant × color) model that drives every accent-aware component.

Typography

Lato for body and display, Kode Mono for accents and code. How to load both.

Button

Interactive primitive. Four variants × eleven colors, slots, loading.

Slider

Single-value range input on top of Ark UI's Slider state machine.

Spinner

Inline activity indicator. Inherits color + size from its container by default.

Flex

Flex layout primitive. Vertical by default.

Grid

CSS-grid layout primitive with static class lookups.

Text

Styled paragraph. Tight prop surface — size, c, prefix.

Title

Heading primitive. order picks the element; size decouples the visual scale.

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

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

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

pnpm add @42-central/ui-react @ark-ui/react react react-dom tailwindcss

yarn add @42-central/ui-react @ark-ui/react react react-dom tailwindcss

bun add @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").

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.

Each component has its own subpath:

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:

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

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

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