Components

Variables in Components

Like the shadcn/ui code components, this UI kit uses TailwindCSS classes (in our case, variables) and theme variables to construct components. Below is an example comparing the code component and its Figma counterpart.

Editing Components

1. Open the component's page (e.g., Button).
2. Select the components you wish to edit.
3. Access the Auto Layout panel.
4. Choose different size/space/border radius/color variables in the main component group.
5. Document your changes on the component page for developers so they can identify which components require code modifications.

Creating New Components

When crafting new components, ensure you:

1. Utilize color variables from the "3. Mode" collection.
2. Apply typography and border radius variables from the "2. Theme" collection.
3. Implement space and size variables from the "1. TailwindCSS" collection.

This approach will ensure your components align with the default UI kit's components and shadcn/ui guidelines.