Components

The StrataKit component catalog comes in two tiers:

1. Generic components are taken from the third-party Material UI (MUI) library.
2. Specialized components are developed separately and called structures.

See Develop with StrataKit for detailed installation instructions.

MUI components

By making an established open-source library responsible for generic components, we are free to focus efforts on developing components that solve more complex and specific tasks.

StrataKit’s MUI theme ensures consistency across all components, incorporating StrataKit’s design tokens and iconography.

The theme includes the following modifications:

1. Styling: The style has been aligned with StrataKit’s visual language.
2. Typography: StrataKit’s principle font is Inter, which needs to be self-hosted.
3. Icons: Component icons are taken exclusively from StrataKit’s own icon collection.
4. API: Some props have been adjusted or removed, and some new props have been added.
5. Structure and behavior: The markup structure and interaction behavior of certain components have been modified to meet StrataKit UX and accessibility requirements.

StrataKit components

Accompanying specialized components are available in separate packages, such as @stratakit/structures.

These components are developed independently, to meet the interface requirements of construction and infrastructure design software.

Component guidance

All components are accompanied by implementation guidance. This adheres to the following structure:

• Demo: What does a typical implementation look like, using common settings?
• Use cases: Is this, or another, component right for my use case? (compares similar components in a table)
• StrataKit MUI modifications: (where applicable): What has been done to bring the MUI component in line with StrataKit?
• Examples: What variants are there, and to which contexts are they suited?
• ✅ Do: What’s needed for an efficient and accessible implementation? What opportunities are there to improve user experience?
• 🚫 Don’t: What are some common pitfalls? What are the bad practices to avoid?

MUI documentation

The entirety of the MUI component docs are not reproduced here. The StrataKit docs exemplify how to implement MUI components according to StrataKit’s standards. Consider this additional guidance a necessary companion to MUI’s documentation.

Component status

Check the status before choosing to use a component in your product. You may be unwilling to undertake certain risks and uncertainties. You can find the status in the metadata at the top of each component’s guidance page. It will have one of the following values:

• Unstable: The component is available for consumption but is not comprehensively tested and may undergo breaking changes. As an early adopter, please provide feedback.
• Stable: The component is established and meets our compatibility and accessibility standards.
• Deprecated: The component is no longer recommended or supported. You should remove or replace it at your earliest convenience.