@fantasies/ui

Fantasies

An enhanced UI component library built on top of Nuxt UI, providing additional components and utilities for modern web applications.

Features

• 🎨 Extended component library based on @nuxt/ui
• 🔧 Highly customizable with TailwindCSS
• 📱 Mobile-first responsive design
• 🎯 TypeScript support
• ⚡ Lightning fast with Nuxt 3

Installation

• Install the package

npm install @fantasies/ui

• Add to your Nuxt configuration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@fantasies/ui',
  ]
})

• Configure TailwindCSS and component defaults

// app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      neutral: 'slate'
    }
  },
  fantasies: {
    button: {
      color: 'primary',
      variant: 'solid',
      size: 'md',
      rounded: 'md'
    }
  }
})

Development

Prerequisites

• Node.js 18+
• pnpm

Getting Started

• Install dependencies

pnpm i

• Prepare the development environment

pnpx nuxt prepare
pnpm dev:prepare

• Start development server

# For Nuxt playground
pnpm dev

# For Vue playground
pnpm dev:vue

What's Included

Fantasies extends @nuxt/ui with additional components and utilities, providing a comprehensive starter kit for building modern web applications with enhanced UI capabilities.

Roadmap

• JS Driver form component with validation
• JS Driver table component with sorting and filtering
• Paginated table with automatic URL-based requests
• Comprehensive test suite
• Documentation website
• Project homepage

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see the LICENSE.md file for details.