Guide
Introduction
Welcome to Liminal UI - A modern React component library you own and control
Introduction
Liminal UI is a modern React component library built with Ark UI and Tailwind CSS. Instead of installing a closed dependency, you add components by copying their source code into your project. You own the code, you control the styles, and you can change anything.
Why Liminal UI?
Traditional libraries ship as npm packages: you get compiled components and a public API, but the implementation stays inside node_modules. Customization often means fighting props, CSS variables, or forking the package. Liminal UI inverts this: the CLI copies the source code of each component into your app. There is no black box.
- Full control: Edit components directly to match your design system or product needs.
- No lock-in: No dependency on a runtime from us; only React, Ark UI, and Tailwind.
- Type-safe: Components are written in TypeScript with clear types.
- Accessible: Built on Ark UI primitives with ARIA and keyboard support.
How it works
Liminal UI follows the same idea as shadcn/ui: copy-paste over install-and-import.
- You run the CLI (
liminal add button) in your project. - The CLI copies the component files (e.g.
button.tsx) and any utilities into your repo. - You import from your own paths (e.g.
@/components/ui/button) and use them like any React component. - You can edit, refactor, or delete the code at any time.
There is no “Liminal UI runtime”. Once the code is in your project, it’s just your code.
Liminal UI vs traditional libraries
| Aspect | Liminal UI | Traditional (e.g. MUI, Chakra) |
|---|---|---|
| Code location | Lives in your repo | Lives in node_modules |
| Customization | Edit source directly | Override via props/themes or fork |
| Bundle size | Only what you add | Often whole library or large chunks |
| Updates | You choose when to re-run CLI and merge | Upgrade dependency, hope nothing breaks |
| Styling | Tailwind, your design tokens | Library’s design system or CSS-in-JS |
Tech stack
- Ark UI: Headless, accessible primitives (accordion, dialog, tabs, etc.). Liminal UI builds on these and adds styling and composition.
- Tailwind CSS: Utility-first CSS. All components are styled with Tailwind classes, so you can tweak or extend with your config.
- TypeScript: Components are written in TypeScript. You get full type safety and editor support.
Framework compatibility
Liminal UI works in any React 18+ environment:
- Next.js (App Router or Pages Router)
- Vite (React template)
- Remix
- Create React App (or similar)
You only need React, Tailwind, and a way to resolve the path alias you configure (e.g. @/components/ui). The Installation guide covers setup per framework.
Quick example
After adding the Button component, you use it like this:
import { Button } from "@/components/ui/button";
export default function Example() {
return <Button>Click me</Button>;
}No special provider or theme wrapper is required. Install the CLI, run liminal init, then add components as you need them. See the Installation guide for step-by-step setup and the Components section for usage and variants.