Core values
Accessible
Keystar prioritizes accessibility, ensuring all components are fully compatible with screen readers and navigable via keyboard.
Responsive
Keystar components accommodate mouse, touch, and keyboard interactions. They incorporate responsive design to guarantee an optimal experience across all devices.
Adaptive
Keystar supports light and dark color schemes. Automatically adjusting to the user’s system settings, the color scheme will transition when appropriate for comfortable viewing.
Inclusive
Keystar’s components are engineered to cater to a diverse global audience, including right-to-left language display, date and number formatting, and more.
Design decisions
In many respects Keystar is a typical component library experience. It is a collection of React components that are designed to be used in a variety of applications.
However there are some key design decisions that set Keystar apart from other component libraries.
Opinionated
Keystar is designed to be used in conjunction with Keystatic and KeystoneJS, so its components may not be as flexible or customisable as other component libraries. This is a trade-off that allows us to provide a more consistent and integrated experience.
Bundled styles
Keystar styles are powered by Emotion, a popular CSS-in-JS library. This allows us to ship consistent and maintainable styles, along with the components themselves.
Styles, including resets, are only provided to KeystarUI components. We do this to avoid polluting the global CSS scope, so third-party and consumer styles aren’t unexpectedly affected by our styling opinions (and vice versa).
Typographic rhythm
Keystar’s typography components implement Capsize, a tool that calculates the optimal values to trim the space above and below text while we wait for leading-trim to be widely supported in browsers.
This makes the sizing and layout of text as predictable as every other element on the screen, which ensures a consistent typographic rhythm across the application.
Under the hood
Keystar is built on top of React Aria, a powerful set of components and hooks designed to facilitate the development of accessible and user-friendly interfaces using React. Developed by Adobe, react-aria leverages the latest web technologies and best practices to deliver a seamless user experience across various devices and platforms.