Ionbit UI

A React UI component system with a distinctive digital visual language and an integrated motion/interaction system.

Build interfaces that feel alive without having to design every interaction from scratch.

What this is

Ionbit UI is not:

• a collection of copied Magic UI components;
• a collection of flashy landing-page effects;
• generic "neon cyberpunk" UI;
• animation for animation's sake.

It is:

• a set of accessible React primitives;
• a coherent motion system with shared timing, easing, intensity, and reduced-motion tokens;
• a restrained, dark, technical visual identity built on hierarchy, typography, surface depth, and controlled accent light;
• source-owned — you own the components you install, inspired by the shadcn/ui source-ownership model.

Packages

Package	Description
ionbit-ui	CLI + CSS — source-owned components, motion primitives, tokens

Components

UI (43): Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Card, Checkbox, Collapsible, Combobox, Command, ContextMenu, Dialog, DropdownMenu, Empty, Field, HoverCard, Input, InputGroup, Label, ModeSwitcher, NativeSelect, Pagination, Popover, Progress, RadioGroup, ScrollArea, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Table, Tabs, Textarea, Toast, Toggle, ToggleGroup, Tooltip.

Motion (14): Caret, Counter, Glow, Magnetic, Marquee, Pulse, Reveal, Ripple, Scramble, SplitFlap, Spotlight, Tilt, Trace, Typewriter.

Quick start

Source-owned installation (CLI)

Install components as source files into your project — you own the code:

npx ionbit-ui@latest init
npx ionbit-ui@latest add button
npx ionbit-ui@latest add accordion
npx ionbit-ui@latest list

This copies the component source into src/components/ui/, resolves registry dependencies, and installs the required npm packages using your project's package manager (detected from its lockfile: npm, pnpm, yarn, or bun).

Motion primitives

import { Glow, Magnetic, Pulse, Reveal, Ripple, Spotlight, Tilt } from "@/components/motion";

// Spotlight — cursor-following radial light on hover
<Spotlight>
  <Card>...</Card>
</Spotlight>

// Glow — accent-colored box-shadow / text-shadow halo
<Glow variant="text">
  <h1>Ionbit UI</h1>
</Glow>

// Magnetic — element subtly translates toward the cursor
<Magnetic>
  <Button>Click me</Button>
</Magnetic>

// Ripple — radial circle expands from the press point
<Ripple>
  <Button>Press</Button>
</Ripple>

// Tilt — card tilts toward the cursor while hovering
<Tilt>
  <Card>...</Card>
</Tilt>

All motion primitives respect prefers-reduced-motion automatically.

Design tokens

Ionbit UI uses a semantic token system mapped to Tailwind v4 utilities:

--background    --surface    --surface-elevated    --surface-hover
--foreground    --foreground-muted    --foreground-subtle
--border        --border-strong       --border-accent
--accent        --accent-hover        --accent-muted
--success       --warning             --error        --info
--radius-sm/md/lg/xl/full    --shadow-xs/sm/md/lg/focus/glow
--duration-fast/normal/slow    --ease-standard/emphasized/exit

Override any token in your :root or .dark / .light selectors to retheme. Both dark and light themes are shipped — add the ModeSwitcher component for a toggle with a radial View Transition reveal animation:

npx ionbit-ui@latest add mode-switcher

Themes

Ionbit UI ships 20 preset themes and a CLI command to install any of them (or a fully custom theme) into your project:

# Install a preset theme
npx ionbit-ui@latest theme nord
npx ionbit-ui@latest theme banana-cake

# Install a custom theme generated by the docs theme editor
npx ionbit-ui@latest theme --custom '<theme-json>'

# Replace an existing theme.css
npx ionbit-ui@latest theme nord --overwrite

The command writes styles/theme.css and adds the import to your configured global CSS file. Browse and customize themes live in the docs theme editor, then copy the generated CLI command or CSS output.

Requirements

• React 18 or 19
• Tailwind CSS v4
• Node.js >= 20 (for development and CLI)

Repository

apps/docs/        Vite + React documentation app
packages/tokens/  Design tokens as CSS (shipped via ionbit-ui)
packages/motion/  Motion primitives (shipped via ionbit-ui)
packages/ui/      Component library (shipped via ionbit-ui)
packages/cli/     Ionbit UI CLI + CSS (ionbit-ui)
registry/         Source registry build scripts
docs/             Project spec, architecture, design system docs

Development

yarn install
yarn build          # build all packages
yarn dev            # start the docs app (http://localhost:5173)
yarn test           # run vitest
yarn typecheck      # tsc --noEmit across all packages
yarn lint           # eslint across the monorepo
yarn format         # prettier write
yarn registry:build # build the source registry

See CONTRIBUTING.md for the full development workflow.

Documentation

• Architecture
• Design System
• Product Spec
• Competitive Research
• Agent Rules

Acknowledgments

Ionbit UI stands on the shoulders of several excellent projects:

• shadcn/ui — the source-ownership model and component composition patterns that inspired this project.
• Base UI — the unstyled React components from the MUI team that power most of our interactive primitives.
• Radix UI — the headless, accessible primitives that still power the remaining overlay and form components.
• cmdk — the command menu primitive behind Command.
• Tailwind CSS — the utility-first styling layer, via Tailwind v4.

License

MIT