Philosophy & standards

Libraries that stall behind the ecosystem create real risk. SpryInnovation is developed as a monorepo of versioned packages (@spry/tokens, @spry/theme, @spry/ui, @spry/patterns) so APIs and styles can evolve together with clear boundaries and upgrade paths.

TypeScript is first-class across packages. Components are built for React 18+ and work with Next.js App Router and other modern frameworks: client-only APIs (for example theme context) live behind explicit "use client" boundaries so server components stay valid where appropriate.

Accessible UI is not a bolt-on. Primitives follow patterns consistent with WAI-ARIA roles and properties where they apply, with keyboard support and visible focus in line with WCAG-oriented practice. Component docs call out relevant behavior so teams can ship interfaces that work for more people, not only default pointer users.

Brand alignment should be fast. SpryProvider drives semantic tokens as CSS variables, with light and dark modes and density. createSpryTheme / extendSpryTheme let you program a theme definition once and apply it app-wide without forking every component.

Tokens compile to variables; components stay tree-shakeable at the package level. The set of primitives is aimed at real product surfaces (dashboards, forms, data tables) so you are not assembling dozens of one-off wrappers for the same patterns.

A design system is more than a component bag. SpryInnovation pairs semantic tokens with structured documentation (getting started, theming, component reference), plus patterns and recipes for common flows. That supports design-to-development handoff through shared language (tokens and names) and copy-paste-ready examples — whether your designers work in Figma or elsewhere, the code remains the contract for behavior and accessibility.