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/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.

Button

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

ActionIcon

Square icon-only sibling of Button.

Badge

Compact inline label / status chip.

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.

Card

Bordered surface for grouped content.

Stack

Flex layout primitive. Vertical by default.

Grid

CSS-grid layout primitive with static class lookups.

Container

Centered, max-width content wrapper.

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" 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 isn't published yet — it lives in this monorepo at packages/react and is consumed via workspace links.

import { Button } from '@42/ui-react/button';
import { Badge } from '@42/ui-react/badge';
import { Stack } from '@42/ui-react/stack';

Pull the stylesheet into your app entry once:

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

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

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