Skip to content
NuvoUI

Guides

Set up NuvoUI core in your framework, then build common interface parts with it, each twice: with utility classes and with apply(). Every recipe has a live preview and opens in the playground.

Setup

  • Vite

    React

    CSS modules with apply(), one global stylesheet.

  • App Router

    Next.js

    Root layout stylesheet, CSS modules, Turbopack or webpack.

  • Vite

    Vue

    Scoped SCSS blocks with apply(), one global stylesheet.

  • Vite

    Svelte

    vitePreprocess, SCSS style blocks with apply().

  • Static or server

    Astro

    Layout stylesheet, scoped SCSS blocks with apply().

  • Sass CLI or prebuilt CSS

    Plain HTML

    Prebuilt CSS, a bundler import, or the sass CLI.

  • PurgeCSS

    Ship only the classes you use

    PurgeCSS with a NuvoUI extractor, measured sizes.

Recipes

  • Card

    A content card with a title, a status badge, a short description and two actions.

  • Navbar

    A top navigation bar with a wordmark, four page links and an account link. Below 768px the links move to their own row.

  • Form field

    Three labeled form fields: an email input with a hint, a select, and an input showing an error message.

  • Dark mode toggle

    A toggle button that switches the page between light and dark themes, remembers the choice and follows the operating system until a choice is made.

  • Dashboard layout

    A dashboard shell with a side navigation, a page header, three stat tiles and a recent orders list. The navigation sits above the content below 768px.

  • Pricing table

    A pricing table with three plans, one highlighted, each with a price, a feature list and a call to action. The plans stack below 768px.