HTML and JavaScript

Load the stylesheet and runtime, then use the markup from a component example. DAUB initializes interactive components when the document loads.

<link rel="stylesheet" href="https://daub.dev/daub.css">
<script src="https://daub.dev/daub.js" defer></script>

<button class="db-btn db-btn--primary">Save changes</button>

For a bundled app, install the package:

npm install daub-ui

import 'daub-ui/daub.css';
import 'daub-ui';

After inserting new markup, call DAUB.init(container) on its parent. Use the HTML tab to copy an example and Anatomy to inspect its classes.

React

Use React and React DOM 19 or later with your app's bundler.

npm install daub-react daub-ui

import 'daub-ui/daub.css';
import { Button } from 'daub-react';

export function SaveButton() {
  return <Button variant="primary">Save changes</Button>;
}

The React package includes @shadcn/react as a dependency for chat scrolling. For local package development, install dependencies in react/, then run:

npm --prefix react run typecheck
npm --prefix react run build

Chat

Combine MessageScroller, Message, and ChatComposer. Your app handles model requests, uploads, and persistence.

Load daub.js before creating a composer. Use DAUB.createChatComposer(root, options) to configure it and handle db:chat-send on its root. React composers use the same runtime.

Open the chat demo or read the integration contract.

Themes

DAUB follows your system color scheme until you choose an override. Set a theme with DAUB.setTheme('nord-light') or return to the system scheme with DAUB.setScheme('auto').

Browse theme families. Each component reference also includes a theme selector for its preview.