Smartness UI 🤝🏼 Nuxt UI

A customizable Nuxt Layer built on top of Nuxt UI v4, featuring the Smartness design system with custom color palette, typography, and component variants.

✨ Features

• Custom Design System - Pre-configured with Smartness brand colors and typography
• Nuxt Layer Architecture - Easy to integrate into any Nuxt 4 project
• Compatible - Fully compatile with the original Smartness UI design system
• Custom Component Variants - Component styles with gradient effects
• TypeScript Ready - Full TypeScript support out of the box
• Rich Color Palette - Primary, secondary, support colors plus specialized variants
• Responsive Design - Mobile-first approach with TailwindCSS v4
• Performance Optimized - Built for the modern web with Nuxt 4 and Vite
• Interactive Playground - Development environment with live preview
• Highly Customizable - Override any component style or behavior
• Modern Dependencies - Based on Reka UI, VueUse, and latest ecosystem tools

🚀 Quick Start

Installation (standalone)

If your project does not use @dev.smartpricing/smartness-ui, add the layer as a dependency in your package.json:

{
	"dependencies": {
		"nuxt-ui-layer": "github:smartpricing/smartness-nuxt-ui#v0.1.21"
	}
}

Then extend the layer in your nuxt.config.ts:

export default defineNuxtConfig({
	extends: [
		["nuxt-ui-layer"]
	],
	css: ["@/assets/css/custom.css"]
});

Create your assets/css/custom.css to import Tailwind and add project-specific styles:

@import "tailwindcss";

@theme {
	--font-sans: "Saans", "sans-serif";
}

Installation with Smartness UI

This layer has full compatibility with the Smartness UI design system.

If your project already uses @dev.smartpricing/smartness-ui, do not add the layer to package.json. Instead, extend it directly in your nuxt.config.ts with install: true:

export default defineNuxtConfig({
	extends: [
		["github:smartpricing/smartness-nuxt-ui#v0.1.21", { install: true }]
	],
	css: ["@/assets/css/custom.css"]
});

In your custom.css, import Smartness UI before Tailwind:

@import "@dev.smartpricing/smartness-ui/dist/tailwind";
@import "@dev.smartpricing/smartness-ui/dist/smartness-ui";
@import "tailwindcss";

Need something more? Head to the Nuxt Layer configuration guide or Nuxt UI documentation

🎨 Design System

Color Palette

The layer comes with a comprehensive color system:

{
  primary: 'petrol-blue'     // Main brand color
  secondary: 'sky',           // Secondary actions
  support: 'warm-gray',       // Secondary brand elements
  burgundy: 'burgundy',       // Accent color
  lemon: 'lemon',            // Highlight color
  info: 'info',              // Information states
  success: 'success',        // Success states
  warning: 'warning',        // Warning states
  error: 'error',            // Error states
  offblack: 'off-black',     // Custom dark color
  learning: 'learning',      // Highlight context
  ai: 'ai'                   // AI features
}

Typography

Built with the custom Saans font family:

--font-sans: "Saans", "sans-serif";

Includes both regular and italic variants with variable font weights (100-900) with the help of `@nuxt/fonts``

Prose and typography components from NuxtUI are made available for easier text styling and customization out-of-the-box.

Usage of custom components

AI Button

<UButton color="ai">
  AI Feature
</UButton>

Learning Button

<UButton color="learning">
  Learning Content
</UButton>

Caveats

Without Smartness UI

When installed standalone, all layer dependencies (zod, @vueuse/core, etc.) can be imported directly from their packages:

import { z } from "zod";
import { useLocalStorage } from "@vueuse/core";
import type { AvatarProps } from "#ui/types";

With Smartness UI

When used alongside @dev.smartpricing/smartness-ui, dependency resolution conflicts may arise. In this case, use the layer runtime alias to import dependencies:

// Zod
import { z } from "#layers/smartness-nuxt-ui";

// VueUse
import { useLocalStorage } from "#imports";

// NuxtUI
import type { AvatarProps } from "#ui/types";

This ensures type safety without installing the modules directly in your project.

Development Setup

Clone and set up for development:

git clone https://github.com/smartpricing/smartness-nuxt-ui
cd smartness-nuxt-ui
pnpm install
pnpm dev

🛠 Tech Stack

• Nuxt 4 - The Intuitive Vue Framework
• Nuxt UI v4 - Fully styled and customizable components
• TailwindCSS v4 - Utility-first CSS framework
• Reka UI - Unstyled, accessible components for Vue
• VueUse - Collection of essential Vue composition utilities
• TypeScript - Type-safety
• ESLint - Code linting with customized Anthony Fu's config

📁 Project Structure

smartness-nuxt-ui/
├── .playground/         # Development playground
├── app/                 # Layer application
│   ├── assets/
│   │   ├── css/         # Stylesheets and variables
│   │   └── fonts/       # Custom font files
│   └── app.config.ts    # UI configuration
├── runtime/             # Custom exports folder
│   └── index.ts         # Custom exports
├── nuxt.config.ts       # Nuxt layer configuration
└── package.json

⚙️ Configuration

App Config

To extend and customize the UI, update the layer app.config.ts:

export default defineAppConfig({
	ui: {
		colors: {
			primary: "petrol-blue",
			secondary: "sky"
			// ...
		},
		button: {
			// Create custom button variants
			compoundVariants: [
				{
					color: "ai",
					variant: "solid",
					class: "btn-ai"
				}
			]
		}
	}
});

And reflect color changes in the nuxt.config.ts:

export default defineNuxtConfig({
	ui: {
		mdc: true, // Allow NuxtUI typography components to be used
		content: true, // Allow NuxtUI typography components to be used
		colorMode: false, // Disable auto dark mode in early stages of development
		theme: {
			colors: [
				"primary",
				"secondary",
				"support",
				"burgundy",
				"lemon",
				"info",
				"success",
				"warning",
				"error",
				"offblack",
				"learning",
				"ai"
			],
			defaultVariants: {
				color: "secondary"
			}
		}
	}
});

Every project that uses the new Smartness Nuxt UI can extend and/or override colors, variants, defaults, fonts, configurations, etc. if needed.

Lockfile

If any layer dependencies get updated, the lockfile must be recreated in order to provide the same version on Netlify during build, otherwise it will throw ERR_PNPM_OUTDATED_LOCKFILE and block the build.

Nuxt Config

The layer automatically configures:

• Nuxt UI with prose (typography) components support
• ESLint with modern configuration
• Font optimization with Nuxt Fonts

🎪 Playground

The included playground provides a development environment:

# Start development server
pnpm dev

# Build playground
pnpm build

# Generate static site
pnpm generate

# Preview built site
pnpm preview

🔧 Customization

Override Styles

Create your own CSS variables:

@theme {
  --color-primary: #your-color;
  --ui-radius: 0.5rem;
}

Extend Components

Add your own component variants:

// app.config.ts
export default defineAppConfig({
	ui: {
		button: {
			compoundVariants: [
				{
					color: "custom",
					variant: "solid",
					class: "bg-custom-500 text-white"
				}
			]
		}
	}
});

📦 Dependencies

Core Dependencies

• @nuxt/ui - UI components and styling
• reka-ui - Headless UI primitives
• @vueuse/core & @vueuse/nuxt - Composition utilities
• @nuxt/fonts - Font optimization
• tailwindcss & @tailwindcss/vite - Styling framework
• zod - Schema validation

Development

• @antfu/eslint-config - ESLint configuration
• @nuxt/eslint - Nuxt ESLint integration
• nuxt - Framework
• typescript - Type checking

🚦 Requirements

• Node.js >= 23
• Package Manager: pnpm (recommended)

---

📚 Documentation

For comprehensive component documentation and examples, visit the Nuxt UI v4 Documentation.

Built with ❤️ by the Smartness team