Getting started
From zero to a branded design system in under 10 minutes.
1. Install
Clone the repo and install dependencies. Emily has no runtime dependencies — Node is only needed to generate your CSS.
git clone https://github.com/andyjterry/emilyui.git my-project cd my-project npm install
2. Set up your config
Run the interactive setup wizard to define your brand colours, fonts, and spacing. This creates emily.config.json in your project.
npx emilyui init
3. Generate your CSS
Build generates 11,000+ utility classes scoped to your brand config and outputs them to the dist/ folder.
npx emilyui build
4. Link the stylesheet
Add the generated CSS to your project. Use the full build during development, the purged version in production.
<link rel="stylesheet" href="dist/emily.css"> <!-- or purged (production) --> <link rel="stylesheet" href="dist/emily.purged.css">
5. Reduce file size for production
The purge system scans your HTML and templates, removes every utility class you don't use, and outputs a stripped stylesheet. Typical reduction: 1.1 MB → 30–50 KB.
npx emilyui build --purge ./src
Next step
Head to the component browser to browse components and copy the HTML directly into your project.