Skip to main content
⌘K
Last modified: 4/Oct/2024

Using Stratus

Using Stratus is pretty simple and hopefully quite familiar if you have used a component library before.

Still, there are some rules and facts to keep in your mind.

#Some technical background

Under the hood Stratus consists multiple packages.

They are all semantically versioned, and can be used standalone as well. For example, you can install @kinsta/a11y if you need only a part of the functionality.

If you use multiple components that build on each other, we discourage this approach, as you may end up in a situation where you cannot use some features of a new component. So unless if you are fully aware of what exactly you do, use the @kinsta/stratus package latest version. It's basically a transmitter package which dependent on all the other packages.

We distribute source code

We do not provide pre-compiled bundles with our packages, in fact we use TypeScript-only components and functions, so you need to set up a compilation step in your build. This could be an inconvenience, but we have a couple of good reasons for that. You can read more about this here.

Stratus is strict

We use strong typing in our codebase. You won't find a single any in the whole repository. This is because we want to be 100% sure that we deliver the developer experience we imagined. In correlation to that, our components APIs are also really strict and well-thought-out. We don't want to provide a lots of possibilities, we want to keep our components as clean as possible, and we don't want to allow to customize them.

#Using the components

You can import every component from the @kinsta/stratus package. E. g.: import { Button } from '@kinsta/stratus'. We always use named exports in order to avoid collisions, and keep the convention.

What components do we have?

You just need to check out on the sidebar, under the "Components" section. You can also consult our storybook documentation.

What features do components have?

We are committed to document every feature and prop. You can consult the documentation, it's always up-to-date. The most simple way to find out a component's API to search it. You can use the ⌘+k combination for quick search.