@moodinary/ui

The React components and design tokens behind Moodinary. Calm, light, built on Tailwind CSS 4.

Docs and live examples: design.moodinary.com

Install

npm install @moodinary/ui

Peer dependencies: react 19, react-dom 19 and tailwindcss 4.

Setup

Import the styles once in your global CSS:

@import "tailwindcss";
@import "@moodinary/ui/styles.css";

Only need the variables? Use @moodinary/ui/tokens.css or @moodinary/ui/tokens.json.

Fonts

Fonts are not bundled. To self-host Geist, Newsreader and Geist Mono:

npm install @fontsource-variable/geist @fontsource/newsreader @fontsource-variable/geist-mono

Import them once in your app entry:

import "@fontsource-variable/geist";
import "@fontsource/newsreader/400.css";
import "@fontsource/newsreader/400-italic.css";
import "@fontsource-variable/geist-mono";

The styles use these font families automatically, with system fallbacks.

Usage

import { Button } from "@moodinary/ui/components/button";

export function Example() {
  return <Button>Continuar</Button>;
}

Animated components need a MotionProvider higher in the tree. Each component's page on the docs site covers props, variants and accessibility.

With shadcn

Prefer owning the code? Every component is also in our registry:

npx shadcn@latest add https://design.moodinary.com/r/button.json

Related

@moodinary/sprites has the pixel icons, sprites and scenes.

License

Code is MIT. The Moodinary name, logo and brand artwork are not covered by the license.