UI ComponentsTailwindCSS Modules
Button
Nine variants, five sizes, icon slots, and loading states on one accessible primitive.
Read the docsv1.0.685 components · 9 categoriesPremium interfaces.
Premium interfaces.
Built your way.
Reusable React components, interactive animations and backgrounds, developer utilities, and customizable UI building blocks. Install the package once, or copy the source straight into your project and own every line.
npm install @coloxo/ui- React 18 & 19 · TypeScript
- CSS Modules or Tailwind — your choice
- No Tailwind config to install
Buttons
People & status
+1
SyncedBetav1.0.6
WebGL
Surfaces that react to you
Ray-marched in a fragment shader. Cursor pressure deforms the oil-film flow.
Holographic Liquid OrbShader surface
Controls
Data display
Components
85
Across 9 categories
Component showcase
Real components, not screenshots
Every preview below renders the actual @coloxo/ui component, including the WebGL backgrounds. Components install from the CLI in CSS Modules, Tailwind, or both — the badges show which, and the filter narrows the grid to a single style.
Style
Showing 23 of 23 components
- coloxo.dev/UI ComponentsTailwindCSS Modules
Input
Labels, hints, validation, inline leading text, and password reveal in one field.
Read the docs - Livev1.0NewPendingUI ComponentsTailwindCSS Modules
Badge & Tag
Pill, colored, and modern shapes for status, counts, and metadata.
Read the docs - +1+3 collaboratorsUI ComponentsTailwindCSS Modules
Avatar Group
Stacked identities with overflow counts, statuses, and profile variants.
Read the docs Monthly
$2,480
UI ComponentsTailwindCSS ModulesCard
Twenty-one surface styles from flat to holographic, all built on one composable shell.
Read the docsTokens and spacing for this component.
UI ComponentsTailwindCSS ModulesTabs
Keyboard-accessible panels with arrow-key navigation out of the box.
Read the docs- UI ComponentsTailwindCSS Modules
Pagination
Paging with record summaries, page-size control, and full keyboard support.
Read the docs - Animated ComponentsTailwindCSS Modules
Accordion
Disclosure groups with smooth open/close motion and semantic headings.
Read the docs - Animated ComponentsTailwindCSS Modules
Skeleton
Pulsing placeholders for text, avatars, and panels with reduced-motion support.
Read the docs - Animated ComponentsTailwindCSS Modules
Form Controls
Checkbox, switch, radio, toggle, and slider animated by state, not decoration.
Read the docs - BackgroundsCSS Modules
Wave Background
Interactive WebGL wave mesh with pointer ripples. No Three.js dependency.
Read the docs - BackgroundsCSS Modules
Vortex
Spiral particle field with persistence trails, rendered in native WebGL.
Read the docs - Move the pointerBackgroundsCSS Modules
Fluid Background
Pointer-driven liquid trails on Canvas 2D for heroes, cards, and banners.
Read the docs - BackgroundsCSS Modules
Orbiting Planets
Orbital system with soft bloom and additive ribbons on native WebGL.
Read the docs - Visual EffectsCSS Modules
Holographic Liquid Orb
A ray-marched sphere with a shader-generated oil-film surface. Iridescence comes from two interfering flow fields, so the colour banding never tiles. The pointer presses into the surface.
Read the docs - Visual EffectsCSS Modules
Aurora Mesh Gradient
Three weight-normalised colour fields drifting on separate orbits, with film grain and a pointer-following blob.
Read the docs - Visual EffectsCSS Modules
Kinetic Grid Warp
A perspective grid displaced by travelling waves, with a gravity well that follows the cursor.
Read the docs - Visual EffectsCSS Modules
Particle Typography
Live text rasterised at runtime and reassembled from thousands of particles that scatter away from the pointer.
Read the docs - Visual EffectsCSS Modules
Soft Body Physics
A Verlet-integrated cloth membrane you can push, drag, and release. Constraint solving runs against a fixed timestep.
Read the docs - toolbar.tsx
import { Button } from "@coloxo/ui";export function Toolbar() { return <Button variant="primary">Deploy</Button>;}Developer ToolsTailwindCSS ModulesCode Block
Syntax highlighting, line numbers, and copy-to-clipboard for docs and demos.
Read the docs npx coloxo add button+ button/button.module.css+ button/button.tsxDeveloper ToolsTailwindCSS ModulesTerminal
Shell-accurate command windows with prompts, statuses, and one-click copy.
Read the docs- Developer ToolsTailwindCSS Modules
Color Picker
Spectrum, alpha, eyedropper, and brand swatches for theme authoring.
Read the docs Simple pricing that scales with your team
Every plan includes the full component set. Upgrade only when you need governance, SSO, or seat volume.
MonthlyAnnualSave 20%StarterUp to 3 seats
$15/seat/monthBilled annually · $180/seat/year
For side projects and early prototypes.
- Components · All 60
- Blocks · 5
- SSO / SAML
- Audit log
GrowthRecommendedUp to 20 seats
$39/seat/monthBilled annually · $468/seat/year
For teams shipping to production.
- Components · All 60
- Blocks · All 15
- SSO / SAML
- Audit log
ScaleUnlimited seats
$79/seat/monthBilled annually · $948/seat/year
For orgs that need governance and SSO.
- Components · All 60
- Blocks · All 15
- SSO / SAML
- Audit log
BlocksPricing Plans
A real block from the collection: three tiers, a working monthly/annual switch, and copyable source.
Read the docs
22 of these 23 previews install through the CLI and carry a style badge. The visual effects are documented on this site but are not in the published registry yet, so they have no style to show.
Visual effects
30 effects, rendered on the GPU
Shader surfaces, particle systems, and physics simulations that ship as ordinary React components. Every preview below is live, and every effect disposes its context when it unmounts.
- Shader
Holographic Liquid Orb
Iridescent oil-film sphere with cursor-reactive refraction.
Read the docs
Developer experience
Four steps from install to production
Coloxo UI stays out of your build pipeline. There is no compiler plugin and no config file to learn. Pick CSS Modules for zero setup, or Tailwind for flat source with the classes inlined — the component API is identical either way.
Code
terminal
# package manager installnpm install @coloxo/ui# or copy the source into your reponpx coloxo init --style tailwindnpx coloxo add buttonThe copy-source CLI writes components into your project so you can edit them freely. --style picks CSS Modules or Tailwind; the API is the same.
Live preview
@coloxo/uiv1.0.6
DependenciesRadix · TanStack
Stylescss | tailwind
Components, blocks, templates
Three levels, one system
Start with a single control, lift a whole section, or start from a complete page. Each level reuses the same primitives and token layer, so anything you add later already matches — and each keeps whatever style you chose at install time.
85 across 9 categories
Components
Individual interface elements: controls, form fields, data display, charts, navigation, animated effects, backgrounds, and developer utilities.
- Buttons, inputs, selects, and form controls
- Tables, charts, statistics, and empty states
- Animated components and WebGL backgrounds
- Developer tools: code block, terminal, color picker
Of the 97 installable entries: 61 ship Tailwind, 97 ship CSS Modules, 61 ship both.
15 published
Blocks
Complete, reusable interface sections assembled from components. Every block previews live on the page and ships with its full source, so you can paste it into your project and change anything.
- Hero, pricing, and feature sections
- Dashboards, tables, and CRM pipelines
- Composed only from published components
- Live preview plus copyable source
Copy-source, not an install. Blocks import from @coloxo/ui, so they render in whichever style you installed.
In progress
Templates
Full page layouts and starter designs that combine several blocks. Templates are the next layer of the ecosystem, built on the same component source — nothing here is published yet.
- Complete page shells and dashboards
- Composed from published blocks
- Same tokens, same conventions
- Announced in the changelog when they land
No style choice to make yet — templates reuse the blocks above once they ship.
Live visual effects
Animated backgrounds are visual components. Each card mounts the real effect and opens its documentation. They are documented here but are not in the published registry yet, so there is no --style choice for them.
Fluid Background
Pointer-driven liquid trails on Canvas 2D, no WebGL required.
Hover to drawVortex
Spiral particle field with persistence trails on native WebGL.
Wave Background
Interactive wave mesh with pointer ripples and ambient motion.
Orbiting Planets
Orbital system with soft bloom and additive ribbons.
Expanding New blocks and templates land in the same collection — the homepage layout is built to absorb them without a redesign.
Customization
You own the source, not a locked system
Components are typed React either way: Coloxo CSS reads --cx-* tokens, and the Tailwind style puts its classes in the file. Change props for everyday variants, override tokens for brand colours, or edit the copied file when you need something bespoke.
Accent token#2348FF
Button variant
Sizemd
Corner radius10px
Animation speed0.35
Same tokens, inverted semantic ramp.
Actions
Accent applied
Progress
Animation speed · 0.35
The panel above only sets CSS variables — no component code changes. Radius is driven by a single inline borderRadius; in a real project you would set --cx-radius-* once.
Prefer to fork instead? npx coloxo add badge writes the component and its CSS module into your repo, so variants, spacing, and motion are yours to edit.
Community
Built in the open, shaped by contributors
Coloxo UI is developed in the open. The roadmap is to grow the component ecosystem together — including wider style coverage, so a component that ships in one style today can gain the other through the same review process.
Repository
Source, registry manifests, CLI, and this documentation playground live in one monorepo. Read the code before you install it — every style variant is in the same tree.
Coloxo-Labs/coloxo-uimainv1.0.6
Contribute a component
Contributions follow the same path as our internal work: canonical source first, then the registry entry that makes it installable.
- Implement the component in packages/ui/src/components, or as a flat TSX file for the Tailwind style.
- Add a registry manifest declaring every source file, its install path, and its registry dependencies.
- If the component ships in both styles, declare both — the style matrix is generated from the manifest, so docs cannot promise a style the CLI would reject.
- Run pnpm registry:build, pnpm registry:validate, and pnpm styles:build before opening a PR.
- Add Vitest coverage for behaviour that is not purely visual.
Looking for real-world composition patterns first? Browse example layouts
Actively developed