Docs · Getting started

Introduction

What Arise UI is, the stack it runs on, and where to start.

Arise UI is two things: a library of 84 React components built on its own design system, and these docs on how to set up the tools they're built with. Browse a component, switch its demo to Code, and copy it into your app. The guides below get your app ready for it.

The stack

These are the versions Arise UI runs on. The guides show the settings it uses for each one.

Tool	Version	Used for
Next.js	16.4	App Router, Cache Components, React Compiler
React	19.3	UI, with the React Compiler doing the memoizing
TypeScript	5.9	Strict mode, @/ path alias
Tailwind CSS	4.3	Utilities generated from the Arise UI tokens
motion	14.3	Enter/exit, layout, gestures and springs
Hugeicons	4.3 icons · 1.1 React	Every icon, through one Icon wrapper
Sen	5.3	The typeface, self-hosted through next/font
three + React Three Fiber	0.186 · 9.8	3D scenes, loaded on demand
Biome	2.4	Lint, format and import sorting
pnpm	10.28	Package manager

Where to start

New app? Follow Installation from top to bottom: it sets up everything at once. Already have a Next.js app? Read Using components, then the guide for anything you're missing.

InstallationSet up a new Next.js app with the same stack, step by step.Using componentsCopy a component into your app and give it what it needs.Next.jsApp Router, Cache Components, React Compiler and the config we use.ReactReact 19 features the components rely on.TypeScriptStrict mode, the @/ path alias and typed routes.Tailwind CSSTailwind 4 with the Arise UI tokens and no config file.FontsSen, self-hosted with next/font, and how to swap it.ThemingLight and dark, plus custom colors, radius and font.Motionmotion/react with shared duration, easing and spring tokens.HugeiconsThe icon set, the Icon wrapper and how to find icons.React Three Fiberthree.js scenes that load only when they're on screen.BiomeOne tool for linting, formatting and import sorting.

Conventions

Commands are shown for pnpm, npm, yarn and bun; pick one and every command on the site follows. File paths assume a src/ folder and the @/ import alias, which create-next-app sets up for you.