Getting Started

Davaux UI is the official component library for Davaux. Every component renders to a plain HTML string — no hydration, no client bundle, just fast server-rendered markup styled with CSS custom properties.

Installation

npm install @davaux/ui

@davaux/ui has a peer dependency on davaux >= 0.8.1.

Add the stylesheet

Import @davaux/ui/styles.css once in your root layout. esbuild collects it automatically into the site's CSS bundle.

// src/routes/_layout.tsx
import '@davaux/ui/styles.css'
import { defineLayout } from 'davaux'

export default defineLayout(({ children, ctx }) => (
  <html>
    <head>
      {ctx.head.stylesheets.map((href) => (
        <link rel='stylesheet' href={href} />
      ))}
    </head>
    <body>{children}</body>
  </html>
))

CSS cascade layers

@davaux/ui/styles.css uses CSS cascade layers so your own styles always take priority without needing !important. The library declares two layers in order:

@layer reset, davaux;

reset — a minimal * { box-sizing: border-box; margin: 0; padding: 0; } reset. No need to add your own.
davaux — all component styles live here.

Any CSS you write outside a layer (the default) automatically wins over both, so overrides are straight-forward:

/* unlayered — wins over @layer davaux automatically */
.my-button.dv-button {
  border-radius: 9999px;
}

If your project already has a CSS reset, either remove it (the library covers it) or wrap it in @layer reset so it stays at the lowest priority tier:

@layer reset, davaux;

@layer reset {
  /* your existing reset here */
}

Use a component

Every component is a plain async function — import it and call it like any other JSX element.

import { Button } from '@davaux/ui'

export default definePage(async (ctx) => (
  <div>
    <Button variant='filled' color='violet'>Get started</Button>
    <Button variant='outline'>Learn more</Button>
  </div>
))

Optional: prose layer

Add @davaux/ui/prose.css and wrap any MDX or markdown output in class='dv-prose' to style raw HTML headings, paragraphs, code blocks, tables, and blockquotes automatically.

import '@davaux/ui/prose.css'

<article class='dv-prose'>{children}</article>

Islands (interactive components)

Components that require client JavaScript — Modal, Drawer, Menu, Select, and others — are provided as island source files under @davaux/ui/islands/. Copy the island you need into your project's src/islands/ directory and Davaux will handle the rest.

cp node_modules/@davaux/ui/dist/islands/Modal.tsx src/islands/Modal.tsx

The island file imports client primitives from davaux/client and can be customised before bundling.

TypeScript

Set jsxImportSource to davaux/oml in tsconfig.json so the type checker agrees with the runtime used by the Davaux dev/build pipeline.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "davaux/oml"
  }
}