Lantern

Appearance

Accessing Storybook — Quick Guide for Stakeholders ​

This guide is for designers, product managers, and stakeholders who want to view and interact with Lantern's component library.

What is Storybook? ​

Storybook is an interactive component library where you can:

  • Browse all UI components used in the Lantern app
  • See component variations (different states, sizes, colors)
  • Interact with components (click buttons, fill forms, etc.)
  • View documentation for each component
  • Copy code examples for developers

Think of it as a living style guide and component showcase.

How to Access Storybook ​

Production (Stable) ​

URL: https://storybook.ourlantern.app

This version shows components from the main branch (production-ready).

Development (Latest Features) ​

URL: https://storybook.dev.ourlantern.app

This version shows the latest components being developed (may have work-in-progress features).

Feature Preview (Branch-Specific) ​

When reviewing a specific feature branch, you'll get a preview URL like:

https://[branch-name].lantern-storybook-dev.pages.dev

Your developer or designer will share this URL in pull requests, Slack, or design handoffs.

The left sidebar shows all components organized by category:

📁 Style
  ├── Colors
  └── Icons
📁 Components
  ├── Button
  ├── Icon
  ├── LanternBadge
  └── ... more components
📁 Screens
  ├── Dashboard
  ├── Profile
  └── ... more screens

Click any component to view it.

Component View ​

Each component page has two tabs:

  1. Canvas — Interactive view

    • See the component in action
    • Use the "Controls" panel (bottom) to change props
    • Try different states and variations

  2. Docs — Documentation view

    • Component description
    • Usage examples
    • Props/API reference
    • Code snippets

Using the Controls Panel ​

The Controls panel lets you interact with components in real-time.

Example: Viewing a Button component

  1. Click "Components/Button" in the sidebar
  2. Look at the bottom panel labeled "Controls"
  3. You'll see options like:
    • variant: primary, secondary, outline, ghost
    • size: small, medium, large
    • disabled: toggle on/off
  4. Change any control to see the button update instantly

This is great for:

  • Seeing all possible variations
  • Testing edge cases
  • Getting design feedback

Sharing Specific Components ​

To share a specific component:

  1. Navigate to the component in Storybook
  2. Copy the URL from your browser
  3. Share it with your team

Example URLs:

https://storybook.ourlantern.app/?path=/story/components-button--default
https://storybook.ourlantern.app/?path=/docs/components-lanternbadge--docs

Canvas-Only View (Clean Embed) ​

To show just the component without the sidebar/panels:

  1. Click the "Open canvas in new tab" button (top-right)
  2. Or add /iframe.html to the URL:
    https://storybook.ourlantern.app/iframe.html?id=components-button--default

This is useful for:

  • Design presentations
  • Embedding in documents
  • Clean screenshots

Common Use Cases ​

For Designers ​

Reviewing component variations:

  1. Go to the component in Storybook
  2. Use Controls to try different props
  3. Take screenshots or notes
  4. Provide feedback in your design tool or Slack

Checking design tokens (colors, spacing):

  1. Go to "Style/Colors" in the sidebar
  2. See all color variables used in the app
  3. Verify consistency with your design system

For Product Managers ​

Understanding available components:

  1. Browse the "Components" section
  2. Read the Docs tab for each component
  3. See what's already built (reuse before requesting new)

Previewing new features:

  1. Open the feature branch preview URL (shared by developer)
  2. Review the new components or changes
  3. Provide feedback in the pull request

For Developers ​

Finding components to reuse:

  1. Search for similar components in the sidebar
  2. Check the Docs tab for usage examples
  3. Copy code snippets to use in your work

Sharing work-in-progress:

  1. Push your branch with new stories
  2. Share the auto-generated preview URL
  3. Get feedback before merging

Tips & Tricks ​

Keyboard Shortcuts ​

  • s — Focus search
  • f — Toggle fullscreen
  • a — Toggle addons panel (bottom)
  • d — Toggle dark mode (if available)

Click the search bar (top-left) or press s to search for components by name.

Zoom ​

Most stories include zoom controls or you can use your browser's zoom (Cmd/Ctrl + +/-).

Mobile View ​

Some stories support mobile viewport. Look for viewport controls in the toolbar (top).

Troubleshooting ​

Storybook Won't Load ​

Check your URL:

  • Production: storybook.ourlantern.app (no www)
  • Development: storybook.dev.ourlantern.app

Check access:

  • Storybook is public by default (no login needed)
  • If you see a login screen, contact your team lead for credentials

Component Looks Wrong ​

Environment mismatch:

  • Make sure you're viewing the right version (prod vs dev)
  • Feature branches may have work-in-progress styling

Browser compatibility:

  • Use a modern browser (Chrome, Firefox, Safari, Edge)
  • Clear cache if components look outdated

Can't Find a Component ​

Search:

  • Use the search bar (press s)
  • Components may be organized under different categories

Not yet in Storybook:

  • Some components may exist in the app but not have stories yet
  • Ask your developer to add a story for it

Requesting Changes or New Components ​

Found a bug or inconsistency? ​

  1. Take a screenshot
  2. Note the URL of the specific story
  3. Share in Slack, Jira, or your issue tracker
  4. Tag the responsible developer or designer

Need a new component? ​

  1. Check if a similar component exists in Storybook
  2. Document your requirements (purpose, variations, states)
  3. Create a ticket or design spec
  4. Work with your developer to add it

Getting Help ​

  • Developer documentation: See docs/storybook/STORYBOOK.md for technical details
  • Deployment guide: See docs/engineering/deployment/STORYBOOK_DEPLOYMENT.md
  • Team Slack: Ask in your #design or #engineering channel

Summary ​

WhatWhere
View stable componentsstorybook.ourlantern.app
View latest componentsstorybook.dev.ourlantern.app
Interact with componentsUse the Controls panel (bottom)
Read documentationClick the "Docs" tab on any component
Share a componentCopy the URL from your browser
View clean (no UI)Use /iframe.html URLs or "Open canvas" button

Questions? Reach out to your engineering or design team!

Built with VitePress

Copyright © 2026 Lantern