Customizing

Lerpa UI hands you source files, not a black-box dependency. Once a component is in components/ui, it's your code — rename it, rewrite it, delete the parts you don't need.

Edit freely

There's no node_modules version to override and no upstream API to track. Change the JSX, swap class names, remove an animation — whatever fits your app. The only thing to keep in mind is that update will overwrite a component, so review diffs if you re-pull a file you've edited.

Prefer tokens over hard-coded values

When restyling, reach for the design tokens first. Editing a CSS variable changes every component consistently and keeps light/dark and contrast intact — see Theming.

:root {
  --accent: oklch(0.70 0.18 295); /* recolors all components */
  --radius: 1.25rem;              /* rounder corners everywhere */
}

Add variants

Many components use class-variance-authority for their variants. Adding a new look is just another entry in the variant map:

const button = cva("inline-flex items-center justify-center rounded-md ...", {
  variants: {
    variant: {
      default: "bg-[var(--accent)] text-[var(--bg)]",
      outline: "border border-[var(--edge-2)] text-[var(--text)]",
      // add your own:
      glow: "bg-[var(--accent)] shadow-[var(--shadow-glow-md)]",
    },
  },
  defaultVariants: { variant: "default" },
});

Compose, don't fork the library

Need a one-off? Wrap a component in your own and pass props through, rather than copying it again. Because each component is self-contained, composition stays clean.