Skip to content
Arise UI

Pick your theme, then take the components.

84 React components to browse, restyle with your own colors, radius and font, and copy into your app. Built on the Arise UI design system with Sen type, Hugeicons, motion/react animation and React Three Fiber 3D, in light and dark.

Categories

Every component runs live on its page, with its motion spec.

Three layers of motion

  1. Layer 1

    CSS transitions

    Hover, focus, color and small state changes

    Tokens --motion-fast (150ms) and --ease-standard, written as Tailwind classes like duration-150 ease-standard.

  2. Layer 2

    motion/react

    Enter and exit, layout changes, gestures and springs

    Tokens from src/lib/motion.ts: duration, ease, spring and transition presets. MotionConfig respects reduced motion.

  3. Layer 3

    React Three Fiber

    3D scenes that explain something

    Scenes read the live theme colors, pause when off screen, and load three.js only on pages that use them.

Using the tokens
import { motion } from "motion/react";import { spring, transition } from "@/lib/motion"; // Enter with the shared preset, settle with a spring<motion.div  initial={{ opacity: 0, y: 10 }}  animate={{ opacity: 1, y: 0 }}  transition={transition.moderate}/><motion.span layoutId="indicator" transition={spring.snappy} />

Built with

  • Next.js 16.4
  • React 19.3
  • React Compiler
  • Tailwind CSS 4.3
  • motion 14
  • three.js 0.186
  • React Three Fiber 9.8
  • Hugeicons
  • Biome