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

Quick start

4 essentials · ~30 min

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";

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 -->

Add Lineicons

Sprout ships 297 Lineicons Pro icons (perpetual license) synced directly from Figma. 24×24, 2px round-cap stroke, currentColor.

# 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">

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>

Deep dive

← PreviousWhat is your role?Next →Install