Lantern Kit

A component library for modern B2B SaaS landing pages, built with React, Next.js, and Tailwind CSS.

Philosophy

Lantern Kit follows a composable, copy-paste approach inspired by shadcn/ui. Components are built as discrete, reusable parts that can be combined to create complex UI patterns without shipping redundant variations. We provide primitives and building blocks rather than every possible combination, enabling developers to compose exactly what they need while maintaining full control over the implementation.

Installation

npm install lantern-kit
# or
yarn add lantern-kit
# or
pnpm add lantern-kit

Prerequisites

• React 18.0+
• React DOM 18.0+
• Tailwind CSS 4.0+

Quick Start

1. Add Lantern Kit styles to your global CSS:

   @import "lantern-kit/styles.css";

2. Configure Tailwind to include Lantern Kit:

   module.exports = {
     content: [
       // ... your other content paths
       "./node_modules/lantern-kit/dist/**/*.{js,mjs,ts}",
     ],
     // ... rest of your config
   };

3. Start using components:

   import { Button, Card, Container } from "lantern-kit";
   
   function MyComponent() {
     return (
       <Container>
         <Card>
           <h1>Welcome to Lantern Kit</h1>
           <Button variant="default">Get Started</Button>
         </Card>
       </Container>
     );
   }

Component Architecture

Lantern Kit is organized into five main component categories:

| Type | Description | Examples | | -------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------- | | UI | Re‑exported shadcn‑ui components and other low‑level UI primitives | Button, Card, Input, Tabs, Accordion, Avatar, Badge | | Layout | Containers and structural primitives for page composition | Container, Section, ContentGrid, BentoGrid, Carousel, Ticker | | Marketing | Content blocks that market a product or frame content | HeadingBlock, PricingCard, TestimonialCard, FeatureGrid, LogosGrid | | Navigation | Global and in‑page navigation components | NavbarDesktop, NavbarMobile, NavbarDropdown, Footer components | | Motion | Animation and interaction components | ScrollReveal, TextReveal, HoverReveal, TypewriterText | | Section | Full-width page sections | Hero (15 variants), FAQ (7 variants), CTA (5 variants), Logos sections |

Development

To work on Lantern Kit locally or contribute new components:

# Clone the repository
git clone https://github.com/lanterndata/lantern-kit.git
cd lantern-kit

# Install dependencies
pnpm install

# Start the development server
pnpm dev

# Build the npm package
pnpm build:lib

The development server includes a live preview system where components are organized by category, each with its own preview page showing the component description, live demo, and source code.

Publishing to npm

First-time Setup

1. Create npm account: https://www.npmjs.com/signup
2. Login: npm login
3. Verify: npm whoami

Publishing Process

# 1. Validate & create installable package
pnpm test && pnpm typecheck && pnpm lint
pnpm build:lib && pnpm test:package     # builds, packs, & installs package in a temp dir

# 2. (optional) Manually smoke-test in a separate project. In your test project's directory, choose one:
npm link lantern-kit                    # Links to your local build. Run `pnpm link --global` in lantern-kit's dir first.
# —or—
npm install /path/to/lantern-kit-*.tgz  # Installs the tarball created by `pnpm pack`.

# 3. Release to npm & push git tags
npm version patch|minor|major              # Bump version in package.json
npm publish [--tag beta]                   # Publish to the npm registry
git tag v$(node -p "require('./package.json').version") && git push --tags # Create & push a git tag

Contributing

We welcome contributions! Please follow our component development flow below.

Background Reading: shadcn component registry

• Getting started
• registry.json
• registry-item.json

Component Development Flow

0. Local requirements

   • Node
   • pnpm

1. Setup

   pnpm i
   pnpm dev

2. Create Component

   • Add component files to registry/. The first file in files should be the main component file.
   • Add entry to registry.json
   • Components should not include placeholder data.
   • Note: Components are imported via path aliases (e.g., @/components/ui/button) which map to the registry folders for cleaner imports in the preview app.

3. Preview

   • Create an example component file in the examples/<component-name>/ directory (e.g., examples/my-component/MyExampleComponent.tsx).
   • Add sample data to the relevant file in the data/ directory (e.g., data/layout.ts, data/marketing.ts). This includes:
     • Importing the example component (e.g., import MyExampleComponent from "@/examples/my-component/MyExampleComponent";).
     • Providing the filePath to the example component's source code (e.g., filePath: "examples/my-component/MyExampleComponent.tsx"). This path is used to load and display the source code in the preview.
   • View component in sidebar under appropriate category
   • Test component on its preview page (/[component])
   • Preview shows:
     • Component description
     • Live demo
     • Source code

4. Test

   • Run pnpm lint, pnpm typecheck locally.
   • If not LLM: Also run pnpm test, pnpm build:registry, and pnpm build:app locally.
   • Note that pnpm build:registry will update the public directory - you do not need to update this directory manually.

5. Publish

   • Create PR if tests pass
   • On merge:
     • The live preview app is updated with the new component
     • The component registry is updated with the new component

LLM instructions:

• Ensure you complete steps 1 - 4 when asked to add a new component. If asked to update a component, there may be changes required from step 2 and 3, and you should run 4 to test your changes.
• For placeholder images / logos, use placehold.co.
• For typography, use the H1, H2, H3, H4, H5, H6 components from the theme/typography.tsx file if heading text is required.
• Do not worry about backwards compatibility. The codebase is still in development and not publicly released.

Component Preview

The component library includes a live preview system:

• Components are organized into categories (Layout, Marketing, Navigation, UI, Motion, Section) in the sidebar
• Each component has its own preview page at /[component]
• Preview pages show:
  • Component description from registry.json
  • Live component demo
  • Source code preview
• To add new components, please refer to the steps outlined in the "Component Development Flow" section above.

Framework Integration

All components use standard <a> tags by default for framework-agnostic compatibility. For optimal performance in your framework:

• Next.js: Replace <a> with <Link> from next/link
• Remix: Replace with <Link> from @remix-run/react
• React Router: Replace with <Link> from react-router-dom

Figma Integration

Lantern Kit supports Figma's Dev Mode MCP (Model Context Protocol) server for converting designs to code:

1. Enable Dev Mode MCP Server in Figma desktop app (Preferences → Enable Dev Mode MCP Server)
2. Configure your MCP client (e.g., Windsurf) to connect to http://127.0.0.1:3845/sse
3. Select a frame in Figma or paste a Figma link to generate components

See Figma's Dev Mode MCP Server guide for details.

Roadmap

• [ ] Additional sections: Feature, Contact, Pricing, Blog, Team
• [ ] Framework-specific link transformation CLI tool
• [ ] Comprehensive test coverage
• [ ] Icon library handling improvements

Documentation

For full documentation and examples, visit https://lantern.dev/kit

License

MIT License