Installation

Appollo UI is not a traditional dependency that you install via npm. Instead, it's a collection of reusable Lightning Web Components (LWC) that you copy and paste into your own apps.

You have two main ways to use Appollo UI:

Option 1: Use as a Starter Template (Recommended)

If you are starting a new LWC project or LWR (Lightning Web Runtime) application, the easiest way is to clone this repository and build on top of it.

# 1. Clone the repository
git clone https://github.com/appollo-ui/appollo-ui.git my-app

# 2. Navigate into the project
cd my-app

# 3. Install dependencies
npm install

# 4. Start the development server
npm run dev

You now have a fully configured environment with Tailwind CSS v4, TypeScript, and all 30+ components ready to use or modify.

Option 2: Add to an Existing Project

If you already have a Salesforce SFDX project or an LWR app, you can manually copy the components you need.

1. Install Tailwind CSS

First, ensure your project is set up with Tailwind CSS. Since Appollo UI relies heavily on Tailwind utility classes and CSS variables for its design system, this is a strict requirement.

2. Copy the Core Utilities

Before you can use any UI component, you need to copy the base utility components that power the design system.

Copy the following folders from force-app/main/lwc/ into your project's lwc directory:

• baseElement (Handles FOUC and base styling)
• darkModeElement (Handles theme switching)
• utils (Contains cn, cva, DOM traversal helpers, and event constants)

3. Copy Shared Types (TypeScript only)

If you are using TypeScript, copy the types/ directory into your project's root and ensure your tsconfig.json includes it. This provides the necessary ambient type declarations for the components.

4. Copy the Components You Need

Now you can browse the documentation, pick the components you want, and copy their respective folders from force-app/main/lwc/ into your project.

For example, to use the Button component, copy the force-app/main/lwc/button/ directory.

5. Add Design Tokens

Finally, make sure you copy the CSS design tokens from the project's CSS entry point into your own stylesheet. These tokens (like --color-primary, --color-background) are required for the components to look correct.

Next Steps

Now that you have the components in your project:

• Explore the Components documentation to see interactive examples.
• Customize the design tokens in your CSS to match your brand.
• Modify the copied component code directly to fit your specific requirements.