Lantern UI

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

Structure

The library 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

Usage

Installation

pnpm add lanternui

Importing Components

import { Navbar, Footer1 } from 'lanternui';
import 'lanternui/styles';

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"
        incorporationName="Acme, Inc."
        columns={
          [
            /* ... */
          ]
        }
      />
    </>
  );
}

Importing Component List

You can also import the complete component list for programmatic usage:

import { libraryComponentList } from 'lanternui';

// Example: Access components by type
const navbarComponents =
  libraryComponentList.find(group => group.type === 'Navbar')?.components || [];
const footerComponents =
  libraryComponentList.find(group => group.type === 'Footer')?.components || [];

// Access component metadata
console.log(navbarComponents[0].name); // "Navbar"
console.log(navbarComponents[0].description); // Description of the navbar

// Get the component itself
const NavbarComponent = navbarComponents[0].component;

Development

Running the Component Preview Locally

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

pnpm install
pnpm dev

Visit http://localhost:3000 to view the component preview.

Building and Deploying

Building the Component Library

To build just the component library for publishing:

pnpm build:lib

The compiled output will be in the dist directory.

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 library 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.).

Publishing to npm

Ensure you have an npm access token with publish permissions in your .npmrc file:

//registry.npmjs.org/:_authToken=NPM_ACCESS_TOKEN

Before publishing, increment the version field in package.json.

Then you can build and publish in one step:

pnpm login
pnpm publish-lib

Or manually:

pnpm login
pnpm build:lib
pnpm publish --access public