XiodUI v1.0.0

Xcutable Interface
Optimized for Developers

89 precision components on Base UI primitives, with native CSS animations. One npm package, imported one component at a time.

~bun add xiod-ui
The Foundation
01
Base UIHeadless Primitives
02
Tailwind CSS 4Utility-First Styling
03
XiodIconsModern Icons
04
Design SystemGood Taste in UI/UX
Features Matrix

Everything you need.Built in.

A comprehensive, high-performance UI framework powered by pure CSS and Base UI primitives.

Base UI Layering

Headless primitives crafted for extreme web accessibility.

Tailwind 4 Engine

Native CSS theme tokens compiled directly to utilities.

@theme
tokens
bg-primary
--radius
shadow-xs

Native Animations

Zero Framer-Motion. Pure CSS power.

NPM Package Architecture

Distributed as a versioned npm package. Instant upgrades with zero copy-paste code drift.

package.json
$ bun add xiod-ui
v1.0.0
Installed xiod-ui + Base UI primitives
Registered Tailwind CSS v4 source
import { Button } from "xiod-ui/button";0 copy-paste debt

Variant Engine

One shape vocabulary across the set. Typed, closed, no stray class strings.

Default
Expressive
Classic
Sharp

Zero Style Runtime

Tailwind compiles the styles ahead of time. Nothing computes them in the browser.

89 Components

Each one its own module — import one, ship one.

89

Modern Typography

One Text component owns the scale — headings render as real h1–h4, sizes step down from touch to desktop.

Aa

Responsive by Default

Sized for touch first. Coarse pointers get a 44px hit area (WCAG 2.5.5) without the control looking any bigger.

Theme Engine

Ships a neutral base theme. Redefine the CSS tokens and every component — light and dark — follows.

88 UI Components

Precision-Crafted Components

Accessible, typed, and ready to drop into any React 19 app — Next.js or otherwise.

Architecture

Precision Layering.

XiodUI is built on a precise architectural foundation. By strictly separating logic (Base UI) from presentation (Tailwind 4), you get total control without the abstraction tax.

Headless Composable
No default styles attached.
CSS Variables
Theme globally via simple vars.
Tailwind V4
Tokens compile straight to utilities.
No Style Runtime
Static CSS, compiled ahead of time.
Layer 1: The Foundation
Base UI Primitives
Layer 2: The Styling Engine
Tailwind CSS 4 Core
Layer 3: The Component
XiodUI Primitive
Comparison

XiodUI vs The Rest

Others ship bloated packages. We ship performance.

FeatureXiodUIOthers
Native CSS Motion In the Box — No tw-animate-css / framer-motion
Controls Animate Their Own State — Not Just Enter / Exit
Nothing Extra to Install Beyond React
Tailwind CSS v4 Native
20 Ready-Made Palettes Imported by Name, Not Pasted In
44px Touch Targets on Coarse Pointers (WCAG 2.5.5)
Versioned npm Package (No Copy-Paste Drift)
Import One Component, Ship One Component
Primitives Bundled — No Peer Dep to Keep in Sync
Command, Carousel & Drawer Built In — No cmdk / embla / vaul
One Version Number for the Whole Library
89Components
20Color Palettes
0Extra Installs
100%CSS-Only Animations