Skip to content

README.md

Latest commit

 

History

History
103 lines (70 loc) · 2.79 KB

README.md

File metadata and controls

103 lines (70 loc) · 2.79 KB

Nuxt UI Elements

npm version npm downloads License Nuxt

A growing collection of components and utilities that extend @nuxt/ui with enhanced functionality.

Early Development Notice: This project is in early development. APIs, component interfaces, and utilities are subject to change in future releases. Please use with caution in production environments.

Features

  • 🧩 Additional Components - Extended component library built on top of Nuxt UI
  • 🎨 Themeable - Seamlessly extends Nuxt UI's theme system with color variants
  • 📦 Tree-shakeable Utilities - Standard utilities via #std for common tasks
  • 🔄 Auto-import - Components and composables are automatically available
  • 🎯 TypeScript - Full type safety out of the box
  • 🌙 Dark Mode - Automatic theme switching compatible with Nuxt UI

Requirements

This module requires @nuxt/ui v4.0.0 or higher.

Quick Setup

Install the module:

pnpm add nuxt-ui-elements

Add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-ui-elements']
})

Import the module's CSS in your main CSS file (e.g., assets/css/main.css):

@import "tailwindcss";
@import "@nuxt/ui";
@import "nuxt-ui-elements";

That's it! Components and composables are automatically available in your Nuxt app.

Note: The CSS import is required for Tailwind v4 to properly scan and generate styles from the component themes.

Contribution

Local development 
# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
pnpm run release

License

MIT

Repository

https://github.com/genu/nuxt-ui-elements