Style variants
Minimal and modern generated styles for SimpleAuth React components (docs previews).
The CLI copies a style variant when you run npx @simpleauthjs/react add <feature> --style <slug>. This site currently documents minimal and modern with live previews. Run npx @simpleauthjs/react add --help for every --style value the CLI accepts.
Live previews
Each section uses the sign-in form preview with that variant selected by default. Use the variant buttons to switch between minimal and modern.
Minimal minimal
Plain black-and-white styling with minimal visual treatment. Utility-free .sa-* class names. Best when you want a neutral base to restyle.
Interactive preview requires JavaScript.
Modern modern
Rounded surfaces, subtle shadows, and gradient accents while keeping the same component markup. Best when you want a polished starter look.
Interactive preview requires JavaScript.
Choosing a variant
- Neutral hand-off:
minimalwhen you plan to own most of the styling yourself. - Polished default:
modernwhen you want a slightly richer starter look.
See also the add command reference for --style usage with presets.