Components

The StrataKit component catalog comes in three tiers:

1. Generic components are taken from the third-party Material UI (MUI) library.
2. Specialized components are developed separately in @stratakit packages.
3. Composite components build upon other types of components and are distributed as examples.

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.

Composite components

Composite components combine other components to enable more specific interactions. They may be built using any combination of MUI components, StrataKit components, or third-party libraries.

These components are not exported directly, and instead distributed primarily through example code snippets. The underlying APIs used will be listed under the “API reference” subheading.

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?
• API reference: Links to the technical documentation for each API that this component exposes or uses.

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.