Introduction

Youj is accessible components, animated icons, illustrations and themes that move together. Use it to build React interfaces. One provider sets the theme, speed and reduced motion for all of them.

#Quick start

You need Node 22 or later and a React 19 app. Don't have one yet? Run npx create-next-app@latest my-app --ts --tailwind --app, then cd my-app (or npm create vite@latest my-app -- --template react-ts for Vite).

1. In your app, run npx @youj/cli init. It installs the packages and wires the provider and the stylesheet.
2. Import a component and render it:

import { Button } from '@youj/react'

export default function Page() {
  return <Button>Save</Button>
}

3. Start your dev server. A Youj button appears on the page.

In the Next.js App Router, a component that takes an event handler or holds state needs 'use client' at the top of its file. A plain <Button> doesn't. Server rendering covers the rest.

Installation has the details, and the manual route.

#One contract

Use useYouj() to read shared durations, curves, springs and stagger steps. Components use these timing tokens and semantic color tokens, so changing a token updates the library consistently.

Set speed and reduced motion through YoujProvider. The speed setting applies to tweens, springs, loops and shaders. Reduced motion replaces animation with a static state. Every preview on this site has both controls.

#Principles

Read Motion principles to see each one side by side with the way it usually goes wrong.

#Two ways in