@vuer-ai/dashboard-ui
v0.1.3
Published
Vuer Dashboard UI — shared React component library for the Dreamlake / ML-Dash design system. Tailwind v4, design-token driven, dark-mode aware.
Readme
@vuer-ai/dashboard-ui
Shared React component library for the Vuer AI ecosystem (Dreamlake, ML-Dash). Built on Tailwind CSS v4, driven by a small CSS-variable design-token system, dark-mode aware via [data-theme].
Install
pnpm add @vuer-ai/dashboard-ui lucide-react
# Tailwind v4 if you don't already have it
pnpm add -D tailwindcss@^4Setup — four steps
1. Import the stylesheet
Add to your global CSS — Tailwind first, then the library tokens (--bg, --ink, --accent, --radius, --f-ui, …):
@import "tailwindcss";
@import "@vuer-ai/dashboard-ui/styles";2. Tell Tailwind where the components live
Components ship as compiled JS with utility class names baked in as strings. Tailwind v4 must scan them to emit the matching CSS:
@source "../node_modules/@vuer-ai/dashboard-ui/dist/**/*.{js,mjs}";Adjust the relative path so it resolves from your CSS file.
3. Pick a theme (optional)
The library reacts to data-theme on <html>:
| <html data-theme="…"> | Result |
|---|---|
| "light" | always light |
| "dark" | always dark |
| absent | follows the user's prefers-color-scheme |
4. Use a component
import { useState } from 'react'
import { Tabs } from '@vuer-ai/dashboard-ui'
export default function App() {
const [tab, setTab] = useState('overview')
return (
<Tabs
tabs={[
{ value: 'overview', label: 'Overview' },
{ value: 'activity', label: 'Activity' },
]}
value={tab}
onChange={setTab}
/>
)
}Components shipped
Layout: SideNav, ResizableLayout, ProfileLayout
Display: Tabs, VirtualList, ProfileCard, Avatar, Tag
Input & navigation: FilterBar, Select, Menu, BreadcrumbTree
Overlay: Dialog
Customizing tokens
The CSS variables are public API. Override them in your own CSS to re-skin the whole library:
:root { --accent: #ff6b35; --radius: 6px; }
html[data-theme="dark"] { --bg: #0f0f12; }Documentation
Full docs (live demos + props tables + copyable code examples) at the docs site.
License
MIT © Vuer AI