Lantern UI

A registry of reusable UI sections and components for rapid website development. Includes both a deployable component preview app and a publishable component registry.

Structure

The registry contains:

• Sections: Reusable page sections like navbars and footers
• Styles: A common CSS file for styling the components
• Preview App: A Next.js app for browsing and testing components

Available Components

This registry ships with ready‑to‑use templates for common website sections — FAQ, Footer, Hero, Logos, Navbar, and Testimonials. For layouts that need extra flexibility, reach for the generic Block and Blocks components, which you can compose into virtually any section. Hero, Block, and Blocks accept MediaItems's as props, which can display images, video, Calendly embeds, code samples, logo grids, or simple forms.

Usage

Installation

pnpm dlx shadcn@latest add https://github.com/lanterndata/regist/raw/refs/heads/main/registry/navbar.json https://github.com/lanterndata/regist/raw/refs/heads/main/registry/footer1.json

Importing Components

import Navbar from '@/components/sections/navbar/navbar';
import Footer1 from '@/components/sections/footer/footer-1';

function MyPage() {
  return (
    <>
      <Navbar
        companyName="Acme Inc"
        logo="/logo.png"
        links={[{ href: '/features', label: 'Features' }]}
        buttons={[{ href: '/signup', label: 'Sign Up', variant: 'default' }]}
      />

      <main>{/* Your page content */}</main>

      <Footer1
        logo="/logo.png"
        companyName="Acme Inc"
        columns={
          [
            /* ... */
          ]
        }
      />
    </>
  );
}

Importing Component List

You can also view the complete component list for programmatic usage using this url:

https://raw.githubusercontent.com/lanterndata/component-library/refs/heads/main/registry/index.json

Development

Using the library locally

The project can also be used as component library, to link it locally you should run:

pnpm i && pnpm build:lib

Then go to project where you want to use the library and run

pnpm link ~/path-to-component-library

Running the Component Preview + Dev Registry Locally

The project includes a built-in component preview tool for easy development:

pnpm install
pnpm dev

This enables the component preview at http://localhost:3031 and the registry at http://localhost:3030.

Running Dev Registry Locally

pnpm registry:dev

Now you can use:

pnpm dlx shadcn@latest add http://localhost:3030/navbar.json http://localhost:3030/footer1.json

Building

Building the registry

pnpm build:registry

The compiled output will be in the registry directory. Run this to update the generated registry files after changes to the registry or running a local registry.

Building the Preview App

To build the preview app for deployment:

pnpm build:app

This creates a production build of the Next.js app.

Building Both

To build both the component registry and preview app:

pnpm build

Deploying the Preview App

After building, you can start the preview app with:

pnpm start

The preview app can also be deployed to any platform that supports Next.js applications (Vercel, Netlify, etc.).

Adding new components

1. Add component code under src/components

2. Add component in registry.ts file

   • Under registryDependencies[] array specify shadcn and local registry dependencies:
     • For shadcn just use the component name like button
     • For local dependencies use $registryBase/editable-link this syntax
   • Under files[] array specify all local files needed for component like:

   {
     "path": "components/sections/faq/faq-3.tsx",
     "type": "registry:block"
   }

   • Under name specify component name which will be used for pnpm shadcn add command
   • Under componentName specify the component name which will be used in code like: <FAQ1 />
   • Under previewProps add sample props for component to be used on preview app
   • You can omit types.ts and ui.css dependencies, they will be automatically added for all component in build script

3. Test registry

   • Run pnpm dev to start the dev registry and component preview
   • Check the component preview at http://localhost:3031 to ensure it looks right
   • Use the registry at http://localhost:3030 to add components to your project
   • Run pnpm build:registry to build the registry for commit
   • Run pnpm format to format all code, including the registry