Getting Started

Install lambchop and start building analytics dashboards in minutes.

1. Install the package

$ pnpm add lambchop

Or use your preferred package manager: npm install lambchop or yarn add lambchop

2. Configure Tailwind CSS

Import the lambchop preset in your tailwind.config.ts to get the full design system.

// tailwind.config.ts
import type { Config } from "tailwindcss";
import lambchopPreset from "lambchop/tailwind-preset";

const config: Config = {
content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/lambchop/dist/**/*.js",
  ],
  presets: [lambchopPreset as Config],
};

export default config;

3. Import styles

Add the lambchop base styles to your CSS entry point.

/* globals.css */
@import "lambchop/styles.css";

4. Use a component

import { KpiCard } from "lambchop";

export default function Dashboard() {
return (
    <KpiCard
      label="Total Revenue"
      value="$18,230"
      trend={{ value: 12.4, isPositive: true }}
/>
  );
}

Peer dependencies

Lambchop requires React 18+ or 19+ as a peer dependency. These are not bundled with the library.

Package	Version
`react`	^18.0.0 \|\| ^19.0.0
`react-dom`	^18.0.0 \|\| ^19.0.0

What's included

React components

Custom hooks

Tailwind preset

Ready to build?

Browse the component library or explore the design token system.