Getting started

Installation.

One command sets up your project. Another adds components.

Quick start#

Set up the project
Run this in a new folder to create a Next.js app, or in an existing React project with Tailwind CSS v4.
```
$npx lanterncn init
```
This runs shadcn init with Radix, which Lantern UI is built on, then adds the Lantern theme: colors, radius, block shadows, the bg-grid utility and the pulse and blink animations. Pick any preset when it asks; the theme replaces its colors.

Load the fonts

Lantern uses DM Sans for text and Space Grotesk for headings. The theme reads them from these two CSS variables.

app/layout.tsx

import { DM_Sans, Space_Grotesk } from "next/font/google";

const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-dm-sans" });
const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-space-grotesk" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${dmSans.variable} ${spaceGrotesk.variable}`}>
      <body>{children}</body>
    </html>
  );
}

Add components

$npx lanterncn add button card terminal

Use any names from the components list, or add all. Then import them from your components folder.

import { Button } from "@/components/ui/button";

export default function Page() {
  return <Button>Make yourself at home</Button>;
}

Commands#

lanterncn initSet up shadcn with Radix and add the Lantern theme.

lanterncn add <name...>Add one or more components and whatever they depend on.

lanterncn add allAdd every component.

lanterncn listPrint every component with a short description.

Flags such as --overwrite, --path and -y pass straight through to the shadcn CLI. If you already have shadcn/ui components with the same names, add --overwrite to replace them with the Lantern versions.

Using the shadcn CLI directly#

lanterncn is a thin front for the shadcn CLI, so you can skip it. Start the project on Radix, since the default Base UI setup rewrites Radix props in ways that break some components:

$npx shadcn@latest init --base radix

$npx shadcn@latest add httptim/lantern-ui/button

The httptim/lantern-ui/button address reads from the GitHub repo. The full URL, https://ui.thultz.dev/r/button.json, works too, or register a namespace in components.json:

components.json

{
  "registries": {
    "@lantern": "https://ui.thultz.dev/r/{name}.json"
  }
}

$npx shadcn@latest add @lantern/button @lantern/card

Other frameworks#