Design systems are often based on popular component libraries. This is also the case for component-based implementations. Unlike traditional component libraries, a component-based solution does not take the form of a single package, published from a centralized repository. Instead, it is a collection of independent components that are hosted and collaborated on, using the 'design' scope.
Since each component is independent, consumers of your components have the freedom to pick and choose specific component versions, and receive updates only for those components they choose to use.
Moreover, using Bit, product-specific scopes are able to extend this basic collection of components with their own UI components (which adhere to the same theme schema), and to maintain their own custom themes.
A design scope based on Material UI includes:
- A theme provider, which determines your theme schema and makes your themes available to all themeable components
- One or more custom themes that override all or some of MUI's default styling
- Independent UI components that expose a custom API
A 'design' scope based on headless UI includes UI components that are composed of headless components, and tailwind icon components. Since headless UI uses tailwind, a custom React env is included as well, to support the previewing of tailwind components.
A 'design' scope based on Chakra UI is composed of a theme-provider, themes and independent UI components.