Zid MUI

Storybook

Visit Zid MUI Storybook for more details

Recommended Use Case

If you are building an Embedded Apps inside Zid Dashboard, use one of the available Zid MUI options to ensure UI consistency and seamless integration with Zid’s design system.

What is Zid MUI?

Zid MUI is a UI library library built on the MUI design system, adhering to Zid's brand guidelines. It provides shared components, icons, hooks, and theme utilities for building consistent UIs across Zid products.

Why it matters

Consistent Zid look & feel across all partner integrations

Pre-built components following Zid's brand guidelines

Faster UI development, no need to build common patterns from scratch

RTL support out of the box

How to use it?

React Stack

Full React component library with MUI integration.

Install

Theme setup

Usage

CSS-Only Stack

For non-React projects (Vue, Angular, vanilla JS, etc.). Pure CSS with design tokens and component classes.

Recommended Use Case

What is Zid MUI?

Why it matters

How to use it?

React Stack

Install

Theme setup

Usage

CSS-Only Stack

Install

Import the stylesheet

Font setup

Usage Example

Button

Input

Alert

Zid MUI

Recommended Use Case#

What is Zid MUI?#

Why it matters#

How to use it?#

React Stack#

Install#

Theme setup#

Usage#

CSS-Only Stack#

Install#

Import the stylesheet#

Font setup#

Usage Example#

Button#

Input#

Alert#

Recommended Use Case

What is Zid MUI?

Why it matters

How to use it?

React Stack

Install

Theme setup

Usage

CSS-Only Stack

Install

Import the stylesheet

Font setup

Usage Example

Button

Input

Alert