Using Components

To use a Sprout component:

1. Copy and paste the component snippet
   • For HTML files, use the HTML snippet
   • For React or Next.js files, use the JSX snippet

<button class="btn">😎</button>

2. Add optional classes if nessecary

<button class="btn rounded md darker">😎</button>

Options

Clicking on an optional class variation, ex. variation1 or square in the below example, will copy it to your clipboard for easy pasting.

Example Component

component-name <optional class> <shape>

optional class

shape

Preview

HTML

<button class="btn rounded md darker">HTML</button>

JSX

<button className="btn rounded md darker">REACT</button>

Primary Color

• If a color option is not specified, components will be set to the primary color. In the documentation examples, primary is light blue.
• Set your own primary hex color with the command

npx sproutcss --primary #6daebe