@federa/ui

A lightweight, themeable UI component library for Nuxt applications.

Features

• 🎨 Themeable: Built-in light/dark mode with CSS variables
• 🚀 Lightweight: Only ~20KB minified
• 🔧 Auto-imports: Components are automatically imported
• 🌳 Tree-shakeable: Only bundle what you use
• 📝 TypeScript: Full TypeScript support
• ⚡ Fast: Minimal runtime overhead

Installation

npm install @federa/ui
# or
pnpm add @federa/ui
# or
yarn add @federa/ui

Setup

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@federa/ui'],
  
  // Optional configuration
  federaUI: {
    prefix: 'F',         // Component prefix (default: 'F')
    css: true,          // Include default CSS (default: true)
    themes: ['light', 'dark']  // Available themes
  }
})

Usage

Once installed, all components are auto-imported with the configured prefix:

<template>
  <div>
    <FButton variant="primary" @click="handleClick">
      Click me
    </FButton>
    
    <FInput v-model="text" placeholder="Enter text..." />
    
    <FBadge variant="secondary">New</FBadge>
  </div>
</template>

<script setup>
const text = ref('')
const handleClick = () => {
  console.log('Button clicked!')
}
</script>

Available Components

• FButton: Versatile button component with multiple variants
• FInput: Text input with consistent styling
• FBadge: Small badge for labels and statuses
• FSelect: Dropdown select component
• FCheckbox: Checkbox with label support
• FSwitch: Toggle switch component
• FTabs: Tab navigation component
• FTextarea: Multi-line text input
• FLabel: Form label component

Theming

The library uses CSS variables for theming. You can override any variable:

:root {
  --primary: 220 80% 50%;
  --secondary: 220 20% 80%;
  --background: 0 0% 100%;
  --foreground: 220 20% 10%;
  /* ... more variables */
}

Using the theme composable

<script setup>
import { useTheme } from '@federa/ui'

const { theme, setTheme, toggleTheme } = useTheme()

// Set theme to 'light', 'dark', or 'system'
setTheme('dark')

// Toggle between light and dark
toggleTheme()
</script>

Component Props

Button

interface ButtonProps {
  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
  size?: 'default' | 'sm' | 'lg' | 'icon' | 'xs'
  disabled?: boolean
  type?: 'button' | 'submit' | 'reset'
}

Input

interface InputProps {
  modelValue?: string | number
  type?: string
  placeholder?: string
  disabled?: boolean
  readonly?: boolean
}

Badge

interface BadgeProps {
  variant?: 'default' | 'secondary' | 'destructive' | 'outline'
}

Development

# Install dependencies
pnpm install

# Start playground
pnpm dev

# Build module
pnpm build

# Run tests
pnpm test

License

AGPL-3.0