ThemBox UI Library

A premium, highly customizable Vue 3 UI component library built with Tailwind CSS and Headless UI patterns.

Features

• 💎 Premium Design: Modern, glassmorphism, and vibrant aesthetics.
• 📦 70+ Components: A comprehensive set of building blocks for any web application.
• 🎨 Dynamic Themes: Built-in support for multiple color schemes and dark mode.
• 🔌 Easy Integration: Use as a global Vue plugin or import individual components.
• 📘 TypeScript Ready: Full type definitions for a superior developer experience.

Installation

pnpm add thembox
# or
npm install thembox

Setup

1. Register the Plugin (Nuxt 3 Example)

Create a plugin file in your Nuxt project (e.g., plugins/thembox.ts):

import { defineNuxtPlugin } from '#app'
import ThemBox from 'thembox'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(ThemBox)
})

2. Import CSS

Add the library's CSS to your main configuration (e.g., nuxt.config.ts):

export default defineNuxtConfig({
  css: [
    'thembox/style.css'
  ]
})

Development

Scripts

• pnpm dev: Start the development server (Nuxt).
• pnpm build:lib: Build the library for production (outputs to lib-dist).
• pnpm release: Interactive script to bump version, tag, and publish to NPM.

How to Commit and Release

1. Make your changes: Add or modify components in app/components/ui.
2. Sort and generate index: The build process automatically handles this via scripts/generate-index.ts.
3. Commit your changes:

   git add .
   git commit -m "feat: your new feature"

4. Publish to NPM:

   pnpm release

   Follow the prompts to select the version bump (patch/minor/major) and provide authentication.

Built with ❤️ by ODS Group.