Build in the light.

Installation

Add any block straight into your repo with the shadcn CLI. Dependencies come with it.

1. 1
   Run shadcn init
   Set up components.json and the cn utility in your project.
2. 2
   Add a Lumo block
   The source and its dependencies land in your repo.
3. 3
   Wire your data
   Map your backend onto the normalized model and ship.

Configuration

Point Tailwind at the source, then tune the theme tokens.

export default {
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
  ],
}

:root {
  --background: 48 100% 98%;
  --foreground: 44 29% 18%;
  --primary: 39 100% 56%;
  --radius: 1rem;
}

Basic usage

Import the block you installed and compose it.

import { ProductCard } from '@/components/lumo/product-card'

export function App({ product }) {
  return (
    <ProductCard
      product={product}
      onAddToCart={(p, variant) => addLine(p, variant)}
    />
  )
}

Why Lumo