Design-system Packages

A design system for Appscode websites and dashboards made using Bulma

The Spectrum CSS well component

Customizable design system with react • styled-components • styled-system and ariakit.

Customizable design system with react • styled-components • styled-system and ariakit.

The `<sp-search>` element delivers a single input field with a "reset" button as well as a mangifying glass icon with which to power search interactions.

An `<sp-card>` represents a rectangular card that contains a variety of text and image layouts. Cards are typically used to encapsulate units of a data set, such as a gallery of image/caption pairs.

Customizable design system with react • styled-components • styled-system and ariakit.

Customizable design system with react • styled-components • styled-system and ariakit.

An extensible theming system for building UI component library with Styled System

`<sp-tooltip>` allow users to get contextual help or information about specific components when hovering or focusing on them.

Customizable design system with react • styled-components • styled-system and ariakit.

Tiket.com React UI component library

Create, document and evolve your design system collaboratively.

React UI components built with Emotion and Styled System

welcome-ui: Core utils

An `<sp-action-button>` represents an action a user can take.

The Spectrum CSS action button component

Customizable design system with react • styled-components • styled-system and ariakit.

Customizable design system with react • styled-components • styled-system and ariakit.

An `<sp-field-label>` provides accessible labelling for form elements. Use the `for` attribute to outline the `id` of an element in the same DOM tree to which it should associate itself. Field labels give context to information that a user needs to input