LotruDocsComponents
BlocksComing soon

Docs

Manual Installation

Manual Installation

How to install dependencies and structure your app.

Add Pigment CSS

Components are styled using Pigment CSS and you need to install it in your project.

Follow the Pigment CSS installation instructions to get started.

Add dependencies

Add the following dependencies to your project:

npm install lucide-react

Configure path aliases

Configure the path aliases in your tsconfig.json file.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Create a theme.ts file

Create a theme.ts file in the root of your project and add the following code:

const theme = {
  borderRadius: {
    "2xs": "0.0625rem",
    xs: "0.125rem",
    sm: "0.25rem",
    md: "0.375rem",
    lg: "0.5rem",
    xl: "0.75rem",
    "2xl": "1rem",
    "3xl": "1.5rem",
    full: "9999px",
  },
  duration: {
    fastest: "50ms",
    faster: "100ms",
    fast: "150ms",
    normal: "200ms",
    slow: "300ms",
    slower: "400ms",
    slowest: "500ms",
  },
  easing: {
    pulse: "cubic-bezier(0.4, 0.0, 0.6, 1.0)",
    default: "cubic-bezier(0.2, 0.0, 0, 1.0)",
    emphasizedIn: "cubic-bezier(0.05, 0.7, 0.1, 1.0)",
    emphasizedOut: "cubic-bezier(0.3, 0.0, 0.8, 0.15)",
  },
  fontFamily: {
    sans: "var(--font-geist-sans), sans-serif",
    mono: "var(--font-geist-mono), monospace",
  },
  fontSize: {
    "2xs": "0.5rem",
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
    "5xl": "3rem",
    "6xl": "3.75rem",
    "7xl": "4.5rem",
    "8xl": "6rem",
    "9xl": "8rem",
  },
  fontWeight: {
    light: "300",
    regular: "400",
    medium: "500",
    semibold: "600",
    bold: "700",
  },
  letterSpacing: {
    tighter: "-0.05em",
    tight: "-0.025em",
    normal: "0em",
    wide: "0.025em",
    wider: "0.05em",
    widest: "0.1em",
  },
  lineHeight: {
    none: "1",
    tighter: "1.125",
    tight: "1.25",
    normal: "1.5",
    relaxed: "1.75",
    loose: "2",
  },
  size: {
    unit: ".25rem",
    full: "100%",
    min: "min-content",
    max: "max-content",
    fit: "fit-content",
  },
  spacing: {
    unit: ".25rem",
  },
  zIndex: {
    hide: "-1",
    base: "0",
    docked: "10",
    dropdown: "1000",
    sticky: "1100",
    banner: "1200",
    overlay: "1300",
    modal: "1400",
    popover: "1500",
    skipLink: "1600",
    toast: "1700",
    tooltip: "1800",
  },
  colorSchemes: {
    light: {
      color: {
        background: "0 0% 100%",
        foreground: "240 5% 10%",
        border: "240 5% 90%",
        ring: "240 5% 65%",
        overlay: "224 71% 4% / 40%",
        surface: "0 0% 100%",
        primary: "240 4% 16%",
        primaryForeground: "0 0% 100%",
        danger: "347 77% 50%",
        dangerForeground: "0 0% 100%",
        muted: "0 0% 98%",
        mutedForeground: "240 5% 35%",
      },
    },
    dark: {
      color: {
        background: "0 0% 7%",
        foreground: "220 9% 94%",
        border: "223 7% 19%",
        ring: "240 5% 16%",
        overlay: "240 4% 10% / 70%",
        surface: "0 0% 7%",
        primary: "220 9% 94%",
        primaryForeground: "0 0% 7%",
        danger: "347 77% 50%",
        dangerForeground: "0 0% 100%",
        muted: "0 0% 10%",
        mutedForeground: "218 7% 70%",
      },
    },
  },
};
 
export default theme;

Create a pigment.config.ts file

Create a pigment.config.ts file in the root of your project.

import { extendTheme } from "@pigment-css/nextjs-plugin";
 
import theme from "./theme";
 
const config = {
  theme: extendTheme(theme),
};
 
export default config;

Import Pigment CSS configuration

Import the Pigment CSS configuration in your next.config.ts file.

import type { NextConfig } from "next";
import { withContentCollections } from "@content-collections/next";
import { withPigment } from "@pigment-css/nextjs-plugin";
 
import pigmentConfig from "./pigment.config";
 
const nextConfig: NextConfig = {
  // Your Next.js configuration.
};
 
export default withPigment(nextConfig, pigmentConfig);

If you are using Vite, import the Pigment CSS configuration in your vite.config.ts file.

import { pigment } from "@pigment-css/vite-plugin";
 
import pigmentConfig from "./pigment.config";
 
export default defineConfig({
  plugins: [
    pigment(pigmentConfig),
    // ... Your other plugins.
  ],
});

Change "@pigment-css/nextjs-plugin" with "@pigment-css/vite-plugin" if you are using Vite.

Create a lotru.config.json file

Create a lotru.config.json file in the root of your project.

{
  "$schema": "https://lotru-ui.com/registry/alpha/schema.json",
  "framework": "nextjs",
  "color": "neutral",
  "srcDir": true,
  "tsx": true,
  "aliases": {
    "lib": "@/lib",
    "hooks": "@/hooks",
    "components": "@/components"
  }
}

Change "framework": "nextjs" with "framework": "vite" if you are using Vite.

Add your first component

You can now add components to your project:

npx lotru@latest add ui/button

Previous

Vite

Next

Accordion