Install
Add Sprout to a project.
Sprout works as a layered system. Pull tokens always; components only as needed. The bundle is tree-shakeable and ships pure CSS variables for non-React stacks.
npm install @aceve/sprout @aceve/sprout-icons
Three layers
Import only what you need.
@aceve/sprout/tokens.cssCSS variables — colour, type, spacing, elevation. ~3kb gzipped.
@aceve/sprout/reset.cssLight reset that locks body font, antialiasing and selection colour.
@aceve/sprout/components.cssAll component styles. Imports tokens.css. ~14kb gzipped.
@aceve/sprout (JS)React 18 components: Button, Input, DataGrid, Ribbon, Drawer, Dialog, …
@aceve/sprout-icons96 inline SVG icons as React components, tree-shakeable.
React entry point
The minimum viable app.
import "@aceve/sprout/tokens.css";
import "@aceve/sprout/components.css";
import { Button, DataGrid, Ribbon } from "@aceve/sprout";
export default function App() {
return (
<main>
<Ribbon defaultTab="start" />
<Button variant="primary" icon="plus">
Add cost category
</Button>
</main>
);
}Theming
Override CSS variables at any level. The system rebuilds itself in place.
/* Override globally */
:root {
--accent: #447952; /* swap brand colour */
--content-max: 1200px; /* wider main */
}
/* Or scope to a section */
[data-theme="dark"] {
--canvas: #0E1415;
--ink-1: #F5F5F5;
}