Building a consumer app
Import the Reva theme, Tailwind, and fonts in a consumer application.
Use @reva/ui as both components and theme (tokens + base styling). Wire things up in this order:
Tailwind first
In your global CSS entry (e.g. app/globals.css), start with Tailwind, then any framework-specific CSS (e.g. Fumadocs or your app shell).
@import "tailwindcss";Reva theme bundle
Import the bundled theme so you get design tokens, colour modes, shadcn/Radix animation helpers, and base layer defaults (background, foreground, typography, etc.).
@import "@reva/ui/theme.css";Fonts
In your root layout, load fonts once via JS so the bundler resolves Fontsource packages reliably (CSS @import of font packages is often flaky in app toolchains).
import "@reva/ui/fonts";Advanced: If you only need variables and Tailwind token mappings without the bundled base styles and animation helpers, import @reva/ui/tokens.css instead and supply your own base layer. Because tokens.css does not include the package-wide @source that ships with @reva/ui/theme.css, add your own @source pointing at node_modules/@reva/ui (or the workspace path) so Tailwind still scans component classes.
Motion: Use Motion as the primary library for interactive UI animation in product apps. The theme CSS still includes small CSS keyframes (e.g. for Accordion height) used by shadcn/Radix patterns until those components are built with Motion.