Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Installation

A step-by-step installation guide to quickly set up XiodUI.

Quick Start

Install XiodUI alongside React 19.3 or later within React 19 and matching React DOM. Base UI and XiodIcons are installed automatically as dependencies.

bun add xiod-ui react react-dom

You will also need tailwindcss and @tailwindcss/postcss as dev dependencies. XiodUI requires Tailwind CSS 4.3 or later and Node.js 20 or later.

Using icons

XiodUI includes its built-in icons. If you also import icons in your own components, add XiodIcons as a direct dependency.

bun add xiod-icons

1import { PlusSign } from "xiod-icons";2import { Button } from "xiod-ui/button";34export function Example() {5  return <Button><PlusSign aria-hidden />Add item</Button>;6}

Configure your CSS

Import the stylesheet after Tailwind in your global CSS. This is the only setup step — there is no config file and no plugin.

1@import "tailwindcss";2@import "xiod-ui/styles";

That single import provides the design tokens, the class-based dark variant, and registers XiodUI's components as a Tailwind source so their utility classes are generated in your build. Skip it and components render unstyled.

Using components

Every component is imported from its own path. There is no root barrel, so you only ever ship the components you actually import.

1import { Button } from "xiod-ui/button";23export function Example() {4  return <Button variant="destructive">Delete</Button>;5}

The path is the component's name in kebab-case — xiod-ui/alert-dialog, xiod-ui/input-otp. Note that import { Button } from "xiod-ui" is not supported.