@duckviz/ui

Lightweight UI primitives and theme system for @duckviz/* packages. Built on Radix UI for accessibility and positioning, styled with CSS custom properties.

Install

npm install @duckviz/ui
# peer dependencies
npm install react react-dom

Quick start

import { Button, Tooltip, Modal } from "@duckviz/ui";
import { IconPlus } from "@duckviz/ui/icons";

// CSS is auto-injected — no manual import needed.

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Tooltip content="Add item" side="bottom">
        <Button onClick={() => setOpen(true)}>
          <IconPlus size={14} /> Add
        </Button>
      </Tooltip>

      <Modal open={open} onOpenChange={setOpen} title="New Item">
        <p>Modal content here.</p>
      </Modal>
    </>
  );
}

Theming

Wrap your app with DuckvizThemeProvider for custom themes:

import { DuckvizThemeProvider } from "@duckviz/ui";

<DuckvizThemeProvider mode="dark">
  <App />
</DuckvizThemeProvider>;

Or use the CSS custom properties directly (--app-background-default, --app-text-default, --app-primary-default, etc.).

Components

Radix-based (compound pattern)

| Component | Radix primitive | Parts | | ----------- | ------------------------------- | --------------------------------------------------------------------------- | | Popover | @radix-ui/react-popover | Popover.Trigger, Popover.Content | | Menu | @radix-ui/react-dropdown-menu | Menu.Trigger, Menu.Content, Menu.Item, Menu.Label, Menu.Separator | | Modal | @radix-ui/react-dialog | Modal.Title, Modal.Description, Modal.Close | | Accordion | @radix-ui/react-accordion | Accordion.Item, Accordion.Trigger, Accordion.Content | | Tabs | @radix-ui/react-tabs | Tabs.List, Tabs.Trigger, Tabs.Content | | Tooltip | @radix-ui/react-tooltip | Convenience wrapper (no compound parts needed) |

Standalone

Button, ActionIcon, Badge, TextInput, Textarea, Checkbox, ScrollArea, NavLink, Alert, Drawer, Stepper, Pagination, Dropzone, Flex, Text, Loader

Exports

| Subpath | Contents | | ------------------------ | --------------------------------- | | @duckviz/ui | All components + theme provider | | @duckviz/ui/icons | Inline SVG icon components | | @duckviz/ui/styles.css | CSS (auto-injected, escape hatch) |