danx-ui
v0.6.5
Published
Zero-dependency Vue 3 + Tailwind CSS v4 component library with three-tier theming
Maintainers
flytedanReadme
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
.darkclass - 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-uiQuick 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