Documentation

You can find the Mainstack-Design-System documentation here.

Examples

We have several examples on the storybook doc. Here is the first one to get you started:

import {
  SelectRoot,
  SelectPortal,
  SelectOptions,
  SelectOptionItem,
} from "mainstack-design-system";

export default () => (
  <FormItem>
    <FormLabel>Label</FormLabel>
    <Select {...args}>
      <SelectOptions>
        {({ options }) =>
          options.map((option) => (
            <SelectOptionItem key={option.value} value={option.value}>
              {option.label}
            </SelectOptionItem>
          ))
        }
      </SelectOptions>
    </Select>
    <FormSuccessStatus>Success message</FormSuccessStatus>
  </FormItem>
);

Contributing

Read our Contributing Guide.

This project’s Contributing Guide also acts as our Design System Development Guide.
It outlines the standards, workflows, naming conventions, and component principles that keep the Design System consistent, scalable, and easy for everyone to build on. Before you begin, please take a moment to read through it so your work aligns with our shared practices.