Lunia DS

Getting started

Lunia DS

A motion-first design system for Next.js and Nuxt. Each component moves to explain what changed, and stays still when the user asks for less motion.

Install Lunia DSSee a component

What you get

  • React components for Next.js and Vue components for Nuxt, with the same classes and the same motion.
  • Tailwind CSS v4 classes on Lunia tokens, generated from the Figma variables. Light and dark modes.
  • Motion in plain CSS: transitions, keyframes and tokens for duration and easing. No animation library.
  • A spec for every component: props, motion table and accessibility notes.
  • You own the code. The CLI copies the files into your app, and you can change them.

76 components are ready now. More arrive in batches.

Quick start

In a Next.js or Nuxt app that uses Tailwind CSS v4, set up Lunia DS once:

$ npx @ganisigit/lunia-ds init

Then add components by name:

$ npx @ganisigit/lunia-ds add button

Motion rules

All components follow the same seven rules.

  1. Opacity settles before movement.
  2. Exits take about half the time of the entrance and use ease-exit.
  3. Content waits for its container, 60 to 120ms.
  4. Things grow from the place the user touched.
  5. Nothing scales from 0, and distances stay small.
  6. State changes use transitions, so they can stop halfway. Keyframes are only for enter, leave and loops.
  7. Every motion has a reduced-motion result: the state changes, nothing moves.