Get started
Four steps to your first Sprout screen.
Quick start gets you up and running in under 30 minutes. The four optional steps cover brand, voice, Figma and the changelog — worth reading once, then keep around as reference. Progress saves locally so you can come back to it.
Your progress · 0 of 8 done
0%
Quick start
4 essentials · ~30 min1
Install the package
Pull tokens, components and fonts into your project. One npm package, framework-agnostic CSS variables underneath. Import the foundation in the same step.
npm install @aceve/sprout /* app.css — pull tokens + components, dark mode opt-in */ @import "@aceve/sprout/tokens.css"; @import "@aceve/sprout/components.css";
2
Add Manrope + Helvetica Now Display
Manrope is the primary face for body and UI. Helvetica Now Display is reserved for hero copy and page-title headlines.
<!-- Manrope from Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <!-- Helvetica Now Display: ship .otf files locally and register via @font-face -->
3
Add Lineicons
Sprout uses Lineicons (96-icon curated set, 2px stroke, round caps) as the canonical icon system. Free for commercial use.
# React (recommended for product apps) npm install lineicons-react # Or via CDN webfont for non-React surfaces <link rel="stylesheet" href="https://cdn.lineicons.com/5.0/lineicons.css">
4
Drop in your first component
Start with a Button — it exercises colour, type, spacing and motion at once and is the cheapest sanity-check.
import { Button } from "@aceve/sprout";
<Button variant="primary" icon="plus">
Add cost category
</Button>