Build better
product interfaces.
StaqUI gives you accessible components for settings, forms, and data-heavy screens. Use them in React or HTML projects.
Your next Staq, one install away.
React components, TypeScript declarations, styles, and fonts. All in @staqforce-studio/staqui.
npm install @staqforce-studio/staquiThe pieces behind
your next big thing.
Choose a collection and get hands-on. These are the same components, styles, and states that ship in the library.
Browse all 51 componentsMake the next step obvious.
A clear hierarchy for the things people do. Try the primary action to open a real dialog.
Button · ButtonGroup · ModalPurpose in
every pixel.
Made for dashboards, workspaces, and the tools that get things done.
Consistent spacing.
Shared spacing tokens keep forms and tables aligned.
Behavior is part of the design.
Keyboard paths, visible focus, labels, and useful feedback. The details that turn a collection into a system.
Opinionated. Open to you.
Geist typography, a 4px rhythm, and semantic tokens. A distinct starting point with room for your own identity.
From a component
to your next product.
Explore three working interfaces built from the same public components you’ll use. Search, sort, select, and make yourself at home.
Explore the compositionsCollections
Sample records. Real interactions.
| Status | |||
|---|---|---|---|
| Essentials collection | Published | 24 | |
| Studio favorites | Draft | 12 | |
| Spring collection | In review | 36 |
Your identity.
In every state.
Change a token and the system follows. Bring your colors, tune the corners. Keep the consistency.
:root {
--sq-accent: #0a2eb5;
--sq-accent-hover: #08238a;
--sq-font: "Geist", sans-serif;
--sq-radius-medium: 12px;
}
/* One system. Every surface. */
[data-staq-theme="dark"] {
--sq-accent: #8da3ff;
--sq-accent-ink: #101b52;
}