# Installation

Start a new project from the official starter. It sets up Vite, TypeScript, Lit, Tailwind and Concorde in one command.

## Use the starter

<sonic-code language="shell">
  <template>
npx @supersoniks/create-concorde-ts-starter my-app
cd my-app
yarn install
yarn dev --host
  </template>
</sonic-code>

The project includes:

- an example component to copy from
- `npx concorde enable-short-paths` for short import paths
- `yarn ai:sync` for [AI agent skills](/docs/getting-started/ai-agents)

Package: [create-concorde-ts-starter](https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter).

## Stack

| Tool | Role |
|------|------|
| [Lit](https://lit.dev) | Base class, templates and reactive properties for web components |
| [TypeScript](https://www.typescriptlang.org) | Decorators and typed store paths |
| [Vite](https://vite.dev) | Dev server and build |
| [Tailwind](https://tailwindcss.com) | Optional, layout in your components. Concorde components ship their own styles, driven by [theme](/docs/getting-started/theming) variables |

## Gotchas

- `yarn dev` does not type-check. Run `tsc --noEmit` or a production build to catch type errors.
- Scripts that query the global document (`document.querySelector`, jQuery plugins, icon replacers) cannot see inside a shadow root. Query from the component's `renderRoot`, or pass the element as slotted content.