DAVAUX
Alpha

@davaux/ui

The official UI component library for Davaux. 90+ server-rendered components with a consistent theming system, automatic dark mode support, and style props. Components that require client-side interactivity (menus, modals, drawers, sliders) are reactive islands — the rest are pure SSR.

Full component documentation and interactive demos are available at davaux.ui.

Installation

npm install @davaux/ui

Setup

1. Register the plugin

Add uiPlugin() to davaux.config.ts. This registers the UI package's reactive components for client-side hydration:

// davaux.config.ts
import { defineConfig } from 'davaux/config'
import { uiPlugin } from '@davaux/ui/plugin'

export default defineConfig({
  plugins: [uiPlugin()],
})

2. Import the stylesheet

In your root layout, import the UI styles and set a color scheme on <html>:

// src/routes/_layout.tsx
import '@davaux/ui/styles.css'

export default defineLayout(({ children, ctx }) => {
  return (
    <html lang="en" data-dv-color-scheme="light">
      <head>…</head>
      <body>{children}</body>
    </html>
  )
})

Dark mode

Color scheme is controlled by the data-dv-color-scheme attribute on any ancestor element — typically <html>. Set it to "light", "dark", or detect the system preference:

<!-- Static -->
<html data-dv-color-scheme="dark">

<!-- System preference (inline script to avoid flash) -->
<script>
  (function () {
    var stored = localStorage.getItem('dv-theme')
    var dark = stored === 'dark' || (!stored && matchMedia('(prefers-color-scheme: dark)').matches)
    document.documentElement.setAttribute('data-dv-color-scheme', dark ? 'dark' : 'light')
  })()
</script>

Use the ThemeToggle component to let users switch:

import { ThemeToggle } from '@davaux/ui'

<ThemeToggle />

Using components

Import components by name — tree-shaking removes unused ones at build time:

import { Button, Card, Text } from '@davaux/ui'

export default definePage(() => (
  <Card shadow="sm" p="md">
    <Text fw={600}>Hello from Davaux UI</Text>
    <Button variant="filled" color="blue" mt="sm">Click me</Button>
  </Card>
))

Theming

Override CSS custom properties on :root to change the global theme. The most common override is the primary color:

/* src/theme.css */
:root {
  --dv-color-primary-filled:       var(--dv-color-violet-6);
  --dv-color-primary-filled-hover: var(--dv-color-violet-7);
  --dv-color-primary-filled-color: #fff;
  --dv-color-primary-light:        var(--dv-color-violet-0);
  --dv-color-primary-light-hover:  var(--dv-color-violet-1);
  --dv-color-primary-light-color:  var(--dv-color-violet-7);
  --dv-color-primary-outline:      var(--dv-color-violet-6);
  --dv-color-primary-outline-hover: var(--dv-color-violet-light);
  --dv-color-primary-outline-color: var(--dv-color-violet-6);
}

Font, spacing, and radius tokens can also be overridden:

:root {
  --dv-font-family: 'Inter', sans-serif;
  --dv-radius-md: 0.375rem;
  --dv-spacing-md: 1rem;
}

Style props

Every component accepts shorthand style props for spacing, color, typography, and layout — no utility class system required:

<Text c="dimmed" fz="sm" fw={500} mt="xs">
  Secondary text
</Text>

<Box p="md" bg="surface" bd="1px solid var(--dv-color-border)" bdrs="md">
  Padded surface box
</Box>
PropCSS propertyExample values
m, mt, mb, mx, mymargin'xs' … 'xl', 0.5 (rem), 'auto'
p, pt, pb, px, pypaddingsame as margin
ccolor'dimmed', 'blue', 'blue.6', '#fff'
bgbackground'surface', 'body', 'blue', 'blue.filled'
fzfont-size'sm', 'lg', 1.25 (rem)
fwfont-weight400, 600, 700
bdrsborder-radius'sm', 'md', 0.25 (rem)
w, hwidth / height'100%', 200 (px)

Component categories

CategoryComponents
LayoutAppShell, AspectRatio, Box, Center, Container, Divider, Flex, Grid, Group, SimpleGrid, Space, Stack
TypographyAnchor, Blockquote, Code, Highlight, Kbd, Mark, Text, Title
ButtonsActionIcon, Button, CloseButton, CopyButton, UnstyledButton
Data DisplayAvatar, Badge, Breadcrumbs, Card, Image, Indicator, List, NumberFormatter, Pagination, Paper, Progress, RingProgress, Skeleton, Stepper, Table, Timeline
FeedbackAlert, Burger, Loader, Notification, Overlay, Transition
NavigationAccordion, NavLink, NavMenu, Tabs
InputsCheckbox, CheckboxGroup, Fieldset, FileInput, NativeSelect, NumberInput, PasswordInput, Radio, RadioGroup, RangeSlider, Rating, SegmentedControl, Slider, Switch, Textarea, TextInput
OverlaysCollapse, ColorSchemePicker, ColorSwatch, Drawer, Menu, Modal, Pill, PinInput, Select, ThemeIcon, ThemeToggle, Tooltip
UtilitiesVisuallyHidden