@davaux/ui
v0.9.0
Published
Davaux UI component library
Readme
@davaux/ui
UI component library for Davaux. Server-rendered, zero client JS by default, theme-aware via CSS custom properties.
Installation
npm install @davaux/uiSetup
Import the stylesheet in your layout and set data-dv-color-scheme on the <html> element. Davaux bundles and serves the CSS automatically.
import '@davaux/ui/styles.css'
export default defineLayout(({ children, ctx }) => (
<html lang="en" data-dv-color-scheme="light">
<head>
<title>{ctx.head.title}</title>
{ctx.head.stylesheets?.map((href) => (
<link rel="stylesheet" href={href} />
))}
</head>
<body>
{children}
{ctx.head.scripts?.map((src) => (
<script type="module" src={src} />
))}
</body>
</html>
))For dark mode support, call uiScript() in <head> to inject a theme-detection script that runs before first paint, preventing a flash of the wrong theme:
import { uiScripts } from '@davaux/ui'
// In your layout <head>:
{uiScripts()}data-dv-color-scheme accepts "light" or "dark". Place it on <html> so it applies to the entire document including scrollbars and background.
Usage
import { Button, Group, Text, Title } from '@davaux/ui'
export default definePage(() => (
<div>
<Title order={2}>Welcome</Title>
<Text c="dimmed">Get started below.</Text>
<Group mt="md">
<Button variant="filled" color="blue">Primary</Button>
<Button variant="outline">Secondary</Button>
</Group>
</div>
))Components
Components marked † require client-side JavaScript — register uiPlugin() to enable them (see Plugin).
Layout — AppShell, AspectRatio, BackgroundImage, Box, Center, Container, Flex, Grid, GridCol, Group, SimpleGrid, Space, Stack
Typography — Anchor, Blockquote, Code, Highlight, Kbd, List, ListItem, Mark, NumberFormatter, RelativeTime, Text, Title
Buttons & Actions — ActionIcon, Button, ButtonGroup, ButtonGroupSection, CloseButton, CopyButton†, UnstyledButton
Data display — Accordion, Alert, Avatar, Badge, Card, CardSection, DataTable†, DataView, Divider, Image, Indicator, Overlay, Paper, Pill, Progress, RingProgress, Skeleton, Table, TableCaption, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr, ThemeIcon, Timeline
Navigation — Breadcrumbs, NavLink, NavMenu, Pagination, Stepper, Tabs
Forms — Checkbox, CheckboxGroup, Combobox†, DateInput†, DatePicker†, Fieldset, FileInput, MultiSelect†, NativeSelect, NumberInput, PasswordInput†, PinInput†, Radio, RadioGroup, RangeSlider†, Rating, SegmentedControl, Select†, Slider†, Switch, TagsInput†, Textarea, TextInput
Feedback — Loader, Notification†, Spotlight†, Toast†
Overlays — Drawer†, Menu†, Modal†, Tooltip, Transition
Disclosure — Burger, Collapse, ScrollArea, Spoiler†
Theming — ColorPicker†, ColorSchemePicker†, ColorSwatch, ThemeToggle†
Utilities — VisuallyHidden
Theming
Pass a theme to UiProvider to customize CSS variables at runtime:
<UiProvider theme={{ primaryColor: '#4f46e5', fontFamily: 'Inter, sans-serif' }}>
{children}
</UiProvider>Color scheme
To set the color scheme on the <html> element directly instead of using a UiProvider wrapper, use uiAttrs:
import { uiAttrs } from '@davaux/ui'
// In your layout:
<html {uiAttrs('dark')}>...</html>
// Renders: <html data-dv-color-scheme="dark">uiAttrs(colorScheme?) accepts 'light' (default), 'dark', or 'auto' and returns the attribute string to embed.
Plugin
To enable interactive components (those marked † above), register the UI plugin in your Davaux config:
import { uiPlugin } from '@davaux/ui/plugin'
export default defineConfig({
plugins: [uiPlugin()],
})Documentation
Acknowledgements
@davaux/ui is heavily inspired by Mantine — an excellent React component library by Vitalie Rotaru and contributors. The component API shapes, prop naming conventions, CSS variable architecture, and visual design language are all modelled after Mantine's work.
Mantine is MIT-licensed. @davaux/ui is an independent reimplementation for Davaux's SSR-first, server-rendered model and shares no runtime code with Mantine.