Introduction

Beautifully designed Lightning Web Components built with Tailwind CSS. Accessible. Customizable. Open Source.

appollo/ui is a collection of beautifully designed, accessible Lightning Web Components (LWC) built with Tailwind CSS. Inspired by shadcn/ui, these components work seamlessly in both Salesforce orgs and as standalone web components.

Philosophy

This is not a traditional component library. Instead of installing a dependency, you copy the components you need directly into your project.

Why Copy & Paste?

  • Full ownership - The code lives in your project. Modify it however you need.
  • No black boxes - See exactly how components work. Learn from the patterns.
  • Style freedom - Customize designs without fighting a framework.
  • Zero dependencies - No npm packages to maintain or update (beyond your build tools).

Pick what you need. Paste it into your codebase. Make it yours.

Technology Stack

  • Lightning Web Components (LWC) - Salesforce's modern web component framework
  • Tailwind CSS v4 - Utility-first CSS with custom design tokens
  • TypeScript - Type-safe component development
  • shadcn/ui Design System - OKLCH color palette and accessible patterns
  • Class Variance Authority (CVA) - Variant-based component styling

Design System

Components use a comprehensive design token system with support for light and dark modes:

  • Colors: background, foreground, primary, secondary, muted, accent, destructive, border, input, ring
  • Layout: Consistent spacing, typography, and border radius
  • Accessibility: ARIA labels, keyboard navigation, screen reader support
  • Dark Mode: Automatic theme detection with manual override

All colors are defined in the OKLCH color space for consistent, perceptually uniform colors across themes.

What's Included

  • Production Components - Ready-to-deploy LWC modules in force-app/main/lwc/
  • Documentation Site - Interactive examples and API references
  • Base Classes - BaseElement with dark mode support and utility functions
  • Icon System - Automatic Lucide icon integration
  • Utilities - cn() for class merging, cva() for variants

When to Use

appollo/ui is perfect for:

  • Salesforce Lightning - Building modern UIs in your org
  • LWR Apps - Creating standalone Lightning Web Runtime applications
  • Component Libraries - Starting point for your own design system
  • Learning - Understanding modern LWC patterns and Tailwind CSS

What's Next

Ready to get started? Check out the components in the sidebar or explore the Getting Started guides to learn more about the architecture and patterns.