Launchpad UI Framework

A modern, themeable component library built with SCSS + Vanilla JS. No frameworks required. Use the sidebar to explore live demos of every component.

download Installation

1. Clone & Build from Source

git clone https://github.com/your-org/launchpad.git
cd launchpad/frontend
npm install
npm run build

Build output in frontend/dist/:

CSS

launchpad.css — 109 KB (17 KB gzip)

JS (ESM)

launchpad.js — 93 KB (23 KB gzip)

JS (UMD)

launchpad.umd.cjs — 69 KB (18 KB gzip)

2. Use the Dist Files

Copy dist/launchpad.css and dist/launchpad.js into your project:

code Via Script Tag

<!-- Add to <head> -->
<link rel="stylesheet" href="launchpad.css">

<!-- Add before </body> -->
<script src="launchpad.umd.cjs"></script>

<!-- Components auto-init via data attributes -->
<div data-lp-component="tabs">
  ...
</div>

package_2 Via ES Module

import {
  Modal, Toast, Dropdown,
  DataTable, FormController
} from './launchpad.js';

// Programmatic usage
Toast.show({
  title: 'Saved!',
  variant: 'success',
  duration: 3000
});

widgets Using a Component

Every component works with simple HTML classes and optional data-lp-* attributes for behavior:

HTML

<!-- Dropdown -->
<div class="lp-dropdown"
     data-lp-component="dropdown">
  <button class="lp-btn lp-btn--primary
    lp-dropdown-toggle">Menu</button>
  <div class="lp-dropdown-menu">
    <a class="lp-dropdown-item">Edit</a>
    <a class="lp-dropdown-item">Delete</a>
  </div>
</div>

Result

palette Theming

Set the theme via HTML attribute. Override brand colors with CSS custom properties:

<!-- Set theme mode -->
<html data-lp-theme="dark">

<!-- Or use JS -->
<script>
  document.documentElement
    .setAttribute('data-lp-theme', 'dark');
</script>

/* Override brand colors */
:root {
  --lp-primary: #6366f1;
  --lp-primary-hover: #4f46e5;
  --lp-primary-active: #4338ca;
  --lp-primary-bg: #eef2ff;
  --lp-primary-text: #3730a3;
}

terminal Development

Frontend (Vite)

cd frontend
npm run dev      # HMR dev server at :3000
npm run build    # Production build
npm run lint     # ESLint + Stylelint

Backend (PHP)

cd backend
composer install
php bin/launchpad serve   # Dev server at :8000
php bin/launchpad route:list

keyboard Keyboard Shortcuts

Ctrl + K Search

Ctrl + B Toggle Sidebar

Ctrl + Shift + D Cycle Theme