Connect to Sprout

Connect to Sprout your way: install it directly, connect through Figma, or use the MCP server.

Looking for React components? Not yet packaged — see below

Add Sprout to a project.

Sprout tokens ship as an npm package hosted in the Aceve GitLab Package Registry. One config step, then install like any other package.

Step 1 — configure the registry

One-time setup per machine. Tells npm where to find @aceve packages.

Add the following to your global ~/.npmrc (not the project file). Get the deploy token from a Sprout maintainer or from the team's shared vault.

# ~/.npmrc  (global — not committed to your project)
@aceve:registry=https://gitlab.com/api/v4/projects/83881076/packages/npm/
//gitlab.com/api/v4/projects/83881076/packages/npm/:_authToken=<DEPLOY_TOKEN>

Step 2 — install

Works with npm, yarn, and pnpm after the registry is configured.

npm install @aceve/sprout-tokens

What's in the package

Import only what you need.

Import	Contents
@aceve/sprout-tokens/css	CSS variables — colour, spacing, radii, shadows, typography. Light + dark. ~3 kb gzipped.
@aceve/sprout-tokens (JS)	Token values as typed JS/TS constants. Tree-shakeable ESM + CJS.
@aceve/sprout-tokens/json	Raw token data as JSON — for Style Dictionary, Tailwind config, or tooling.
@aceve/sprout-tokens/icons	Icon names + SVG paths as JS — used by Sprout's Icon primitive.

CSS usage

Drop the stylesheet in, override what you need.

/* Import all tokens (light + dark, auto-switches on data-theme) */
import "@aceve/sprout-tokens/css";

/* Then use CSS variables anywhere */
.my-button {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
}

JS / TypeScript usage

Typed token constants for design tooling, config files, or JS-in-CSS.

import { tokens } from "@aceve/sprout-tokens";

// e.g. in a Tailwind config
module.exports = {
  theme: {
    extend: {
      colors: {
        accent: tokens.color.accent.DEFAULT,
      },
    },
  },
};

Theming

Override CSS variables at any level — the whole system updates in place.

/* Global brand override */
:root {
  --accent: #447952;
}

/* Dark mode (set data-theme="dark" on <html> or a wrapper) */
[data-theme="dark"] {
  --canvas: #0E1415;
  --ink-1:  #F5F5F5;
}

React components

Coming in a future release.

The Sprout React primitives (Button, Input, Checkbox, Switch…) currently live in the docs repo and are used by aceve.design itself. A standalone @aceve/sprout-components package is on the roadmap. Until then, copy the primitives from the source repo or use the CSS tokens directly.

← PreviousWhat is your role?Next →Adopting Sprout