@thehammer/danx-ui

v0.8.17

Published

21 days ago

Zero-dependency Vue 3 + Tailwind CSS v4 component library with three-tier theming

0High
0Medium
0Low

newms877

vue vue3 components tailwind tailwindcss ui button dialog modal

danx-ui

Zero-dependency Vue 3 + Tailwind CSS v4 component library with three-tier theming.

Features

Zero Runtime Dependencies - Only Vue 3 as peer dependency
Tree-Shakeable - Import only what you need
Three-Tier Theming - Primitive → Semantic → Component token system
Dark Mode Built-in - Just add .dark class
100% Declarative - v-model controlled, no imperative APIs
Native Elements - Uses <dialog> for accessibility
Styles Optional - Components work without CSS imports

Installation

npm install danx-ui
# or
yarn add danx-ui
# or
pnpm add danx-ui

Quick Start

Import Everything

import { DanxDialog, useDialog } from 'danx-ui';
import 'danx-ui/styles';

Import Just What You Need

// Just the dialog component
import { DanxDialog } from 'danx-ui/components/dialog';
import 'danx-ui/components/dialog/styles';

// Just the composable (no component)
import { useDialog } from 'danx-ui/components/dialog/useDialog';

// Just the tokens (for custom themes)
import 'danx-ui/shared/tokens';

Usage

Basic Dialog

<template>
  <button @click="showDialog = true">Open Dialog</button>

  <DanxDialog
    v-model="showDialog"
    title="Hello World"
    close-button
  >
    <p>Dialog content goes here.</p>
  </DanxDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DanxDialog } from 'danx-ui';

const showDialog = ref(false);
</script>

Confirm Dialog

<DanxDialog
  v-model="showConfirm"
  title="Confirm Action"
  close-button="Cancel"
  confirm-button="Delete"
  :is-saving="isDeleting"
  @confirm="handleDelete"
>
  <p>Are you sure you want to delete this item?</p>
</DanxDialog>

Custom Sizing

<!-- 80vw × 60vh -->
<DanxDialog v-model="show" :width="80" :height="60" />

<!-- Fixed size -->
<DanxDialog v-model="show" width="400px" height="300px" />

<!-- Full screen -->
<DanxDialog v-model="show" :width="100" :height="100" />

Theming

danx-ui uses a three-tier CSS token system:

Primitives - Raw color palette, spacing, etc.
Semantics - Contextual meaning (surface, text, interactive)
Component - Per-component tokens

Customization Levels

Tweak a component:

.my-dialog {
  --dialog-bg: #f0f0f0;
}

Change system-wide behavior:

:root {
  --color-surface: #fafafa;
  --color-interactive: #0066cc;
}

Dark mode:

/* Built-in - just add .dark class to html or body */
<html class="dark">

See Theming Guide for details.

Documentation

Browser Support

Chrome (last 2 versions)
Firefox (last 2 versions)
Safari (last 2 versions)
Edge (last 2 versions)

Requires native <dialog> element support.

Contributing

Contributions are welcome! Please read:

Contributing Guide - Development setup and PR process
CLAUDE.md - Detailed development rules and patterns

License

MIT