• React and React DOM 19.3 or later
• Tailwind CSS 4.3 or later, already set up in the project (Tailwind's installation guide)
• Node.js 20 or later

bun add xiod-ui

Base UI and XiodIcons are dependencies of xiod-ui and install with it. Don't install @base-ui/react yourself: a second copy breaks popups and portals.

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

This adds the colour tokens and the dark variant, and tells Tailwind to generate the classes the components use. Without it, components render unstyled. There is no config file or plugin to add.

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

There is no root import: import { Button } from "xiod-ui" doesn't resolve. Components that need the browser already carry "use client", so you can render them from a server component.

bun add xiod-icons

1import { PlusSign } from "xiod-icons";2import { Button } from "xiod-ui/button";34export function AddButton() {5  return (6    <Button>7      <PlusSign aria-hidden />8      Add item9    </Button>10  );11}

To replace the icons components draw themselves, see Icons. To translate the text they write, see Localization.

useCopyToClipboard copies text and reports it. copyToClipboard resolves to whether the copy succeeded, and isCopied stays true for timeout milliseconds (2000 by default; 0 keeps it). It works on plain http pages, where navigator.clipboard doesn't exist. onCopy receives the value once it reaches the clipboard. When there is nothing to copy or the browser refuses the copy, onError receives the error; without it, the error is logged. copyToClipboard keeps the same identity across renders, so it is safe in effect dependencies.

1"use client";23import { Button } from "xiod-ui/button";4import { useCopyToClipboard } from "xiod-ui/hooks/use-copy-to-clipboard";56export function CopyCommand({ command }: { command: string }) {7  const { isCopied, copyToClipboard } = useCopyToClipboard({8    onError: () => alert("Couldn't copy. Select the text instead."),9  });1011  return (12    <Button variant="outline" onClick={() => copyToClipboard(command)}>13      {isCopied ? "Copied" : "Copy"}14    </Button>15  );16}

useMediaQuery returns whether a media query matches, and follows it as it changes. Pass a breakpoint name ("lg", "max-md", "sm:max-lg"), an object ({ min: "md", pointer: "coarse" }), or any CSS media query. useIsMobile() is useMediaQuery("max-md"). The named breakpoints are Tailwind's, except md, which is 800px rather than 768px.

1import { useIsMobile, useMediaQuery } from "xiod-ui/hooks/use-media-query";23const isMobile = useIsMobile();4const isWide = useMediaQuery("xl");

On the server there is no viewport, so both return false there, and a server-rendered page switches to the real value as it hydrates. Anything that must be right on the first paint belongs in responsive classes instead.

1npx skills add ImKKingshuk/XiodUI

See Agent Skill for what it covers, including guides for migrating from shadcn/ui, HeroUI, MUI, Ant Design, Mantine and Chakra UI.