Concorde guide — Introduction. Based on lit.dev, Concorde is a collection of web components for shared apps and websites. Doc ID: docs/getting-started/start. Keywords: Concorde, supersoniks, docs/getting-started/start, start, Introduction, guide, get, set, formDataProvider, yarn ai:sync. URL: https://concorde.supersoniks.org/docs/getting-started/start.

Introduction

What is Concorde?

Based on lit.dev, Concorde is a collection of web components for shared apps and websites.
Build UIs without tying components to a specific host stack, while keeping visual consistency through the smallest set of CSS variables needed to define a theme.

Why and use case

In 2022, Supersoniks needed a new ticketing stack for nearly 100 sites — mobile apps, modern sites, and legacy PHP without bundlers.
One composable web-component library replaced many one-off apps. Lit was chosen for broad runtime compatibility.

Stack

• Lit
• TypeScript
• Vite
• Tailwind (starter kit, not required in the core package)

Functional features

• DataProvider store (decorators, get / set)
• Forms (formDataProvider)
• Lists, queues, lazy loading
• Router, states, UI kit with status variants

Start a new project

npx @supersoniks/create-concorde-ts-starter "project_name"

The starter runs yarn ai:sync for you. Details: AI agents (skills).