labsUI

labsUI

labsUI is a clean, composable React component library with one smooth spring for every motion. You copy components into your project and own the code. Built for Next.js 16 and Tailwind CSS v4; install with npm, pnpm, yarn or Bun (recommended).

Featuringone spring physics system
npx @kznlabs/labsui init
read the 5-step setup
  • Next.js 16
  • React 19
  • Tailwind CSS 4
  • motion 14
  • lucide-react
  • Bun

Built with labsUI

Compositions where several components work together. Each one opens its page with the code, the props and the install command.

Get started

labsUI isn't a dependency you import from a package. The CLI copies each component's source into your project, so you own it and can change anything.

  1. Check the requirements

    React 19, Tailwind CSS v4 and a path alias in tsconfig.json ("@/*": ["./src/*"], the Next.js default). Any React framework works; the examples use the Next.js App Router. The CLI needs Node.js 22 or newer, or Deno.

  2. Run init once

    npx @kznlabs/labsui init

    Adds styles/labsui.css (colors, accents, animations) and imports it right after Tailwind, plus the theme helpers and the motion provider. Any package manager works: bunx, pnpm dlx, yarn dlx or deno run -A jsr:@kznlabs/labsui. Bun is recommended; labsUI is built with it.

  3. Wire the root layout

    The theme script picks light or dark before the first paint; the motion provider gives every animation the same spring and honors reduced motion.

    import type { ReactNode } from "react";import { MotionProvider } from "@/components/motion-provider";import { themeScript } from "@/lib/theme";import "./globals.css";export default function RootLayout({ children }: { children: ReactNode }) {  return (    <html lang="en" suppressHydrationWarning>      <head>        {/* Sets light/dark and the accent before paint: no flash. */}        <script dangerouslySetInnerHTML={{ __html: themeScript }} />      </head>      <body>        <MotionProvider>{children}</MotionProvider>      </body>    </html>  );}

  4. Add components

    npx @kznlabs/labsui add button data-table

    Each component brings what it imports (other components, helpers, npm packages). Every section below shows its own command, a live demo, the code and its props.

    import { Button } from "@/components/ui/button";export function Save() {  return <Button successLabel="Saved!">Save</Button>;}

  5. Make it yours

    Colors are CSS variables in labsui.css; set an accent on <html data-accent="purple"> or at runtime. Every component accepts className for one-off changes.

    import { setAccent, setTheme } from "@/lib/theme";setTheme("dark"); // or "light"; follows the OS until set, then rememberedsetAccent("purple"); // red, orange, yellow, green, blue, purple, pink, slate

All components 82

Each has its own page: a live demo, the code, the props and what it installs. Search them from anywhere with the palette in the header.

Actions & inputs

Data display