effus-ui
v0.1.1
Published
Effus UI — design tokens and Vue components
Downloads
332
Readme
Effus UI
Design tokens (CSS variables) and Vue components.
Demo — component playground.
Usage
npm install effus-ui// main.ts — import theme
import 'effus-ui/theme'<script setup>
import { Button, Card, Input } from 'effus-ui'
</script>
<template>
<Button>Click me</Button>
</template>Components
| Component | Description |
|-----------|-------------|
| Block | Container with title and variants |
| Button | Variants: default, destructive, success, outline, secondary, ghost, link, active, outlined |
| Card / CardContent / CardDescription / CardFooter / CardHeader / CardTitle | Card layout |
| Checkbox / CheckboxGroup | Checkbox input |
| Columns | CSS grid with configurable columns |
| Container / ContainerNarrow / ContainerFull | Responsive containers |
| Dropdown | Generic dropdown menu |
| FileInput | Drag-and-drop file upload |
| Header | Heading levels 1–6 |
| Hero | Hero section |
| Input | Text input with error state |
| InputGroup | Input with pre/post addons |
| Label | Form label |
| LeftDrawer | Sliding side panel |
| Modal | Dialog overlay |
| Navbar | Top navigation bar |
| Notification | Alert with variants and close button |
| Pagination | Page navigation |
| ProgressBar | Progress bar with variants |
| RadioButton / RadioGroup | Radio input |
| Select | Custom select dropdown |
| Table | Data table with striped rows |
| Tabs | Tab navigation |
| Tag | Badge/chip with variants |
| Textarea | Multi-line text input |
| Title | Page/section title with subtitle |
Theming
Toggle dark mode by adding/removing .dark class on <html>.
All colors defined as CSS custom properties in :root and .dark.
Build
npm run build # produces dist/index.js + dist/index.cjs + dist/effus-ui.cssDevelopment
npm run dev # Vite playground with HMR at localhost:5173
docker compose up # same inside Docker