Introduction

Welcome to SlabUI

SlabUI is a React component library designed to accelerate the development of modern, consistent, and accessible user interfaces. Every component is crafted with attention to design details, accessibility, and developer experience — without sacrificing the flexibility that real-world projects demand.

The library is built on top of solid, widely-adopted technologies:

• React 19 and Next.js as the application foundation
• Tailwind CSS v4 for consistent utility-first styling
• Base UI as the WAI-ARIA accessibility primitives
• class-variance-authority (CVA) for type-safe component variants
• TypeScript across all components

Why SlabUI?

Accessible by default

Every component is built on top of battle-tested accessibility primitives from Base UI. This ensures WAI-ARIA compliance, keyboard navigation support, and screen reader compatibility with zero additional configuration.

The code is yours

Components are not installed as an npm dependency. When you add a component, its source code is copied directly into your project. This means full ownership: you can read, modify, and adapt any component to meet your application's specific needs.

Consistent design with Tailwind CSS v4

Styles are defined with Tailwind CSS v4 using CSS variables for light and dark themes, ensuring visual consistency throughout your application and making brand customization straightforward.

Fully typed with TypeScript

All props, variants, and sub-components are properly typed, providing autocompletion, compile-time validation, and a safer, more productive development experience.

Compatible with React 19 and Next.js

The library is built and tested against the latest versions of React and Next.js, taking advantage of modern features like Server Components, use client, and the App Router architecture.

How it works

SlabUI is not a traditional npm library. Instead of importing components from an external package, you use the slabui CLI to download component source code directly into your project.

This means:

• You have full ownership of every component's code
• You can customize any detail without overriding styles or monkey-patching
• Updates are opt-in — you decide when and which components to update, and local changes are preserved with a 3-way merge
• There is no lock-in to a specific library version

Each component is versioned: every version is published at https://slabui.com/r/ui/{component-name}/{version}.json and listed in https://slabui.com/r/registry.json, so you always know which version is installed.

Getting started

Install the slabui CLI in your project:

pnpmnpmyarnbun
pnpm add -D slabui
Copy

Then add components with it:

pnpmnpmyarnbun
pnpm slabui add button
Copy

You can also install a specific version:

pnpmnpmyarnbun
pnpm slabui add button@1.0.0
Copy

Next, see how to set up the CLI, the available commands and how to use the registry with AI editors and agents.

License

You can use and modify the components in personal and commercial projects, including paid products, but not resell or redistribute them as a UI kit, library or template. See the License page.