Creating new components

In this lesson, you will learn how to create a simple Button component. Following these steps to ensures consistency with the shadcn/ui.

Instructions

Create a new frame and give it an appropriate name following the naming conventions.
Enable auto layout for the frame and set the correct constraints and resizing properties.
Add padding values, radius, and a color fill to the frame to test the component's size and shape.
Inside the frame, add text elements using the existing text styles.
Apply color variables from the mode collection to the text and background.
Use spacing, sizing, and radius tokens from the Tailwind CSS collection to ensure consistency.
Click the Create Component icon to convert the frame into a reusable element.
Create component variants for different states such as default, hover, focus, and disabled.
Run the Propstar plugin to organize the layout and generate a component table.
Document how the component works, including its properties and the variants it includes. Include any relevant notes or guidelines for using the component within the design system.