SAM Styles

@gsa-sam/sam-styles is a SASS/CSS component library for SAM.gov, built on USWDS.

Install

npm install --save @gsa-sam/sam-styles

The package ships uncompiled SCSS. @use the entry point from your project's Sass (USWDS must be on your Sass load path — the entry point @forwards it):

@use "@gsa-sam/sam-styles";

See docs/02-for-developers/01-installation.md for full setup.

Storybook

We use Storybook to generate an interactive component library for sam-styles. After npm install, run it locally with:

npm start

To build the static Storybook site (as CI does):

npm run build:storybook

To run the Storybook smoke-style regression tests locally:

npx playwright install chromium
npm run test:storybook

The smoke tests build Storybook, serve the static _site/ output, and verify expected computed styles against rendered stories.