Website Project (Lesson 3)

Be sure to open the "Website Project - ShadcnDesign Academy" file you created in Practice Lesson 1.

Tasks

Task 1. Button component

1. Navigate to the Button page.
2. Select the dashed Button component frame containing all buttons.
3. In the Component Properties panel, open the Size property.
4. Select all default size variants.
5. In the Auto Layout panel, change the button’s height variable from ⁠h-9 to ⁠h-11.
6. In the Appearance panel, change the button’s radius variable from ⁠rounded-md to ⁠rounded-xs.

Task 2. Input component

1. Navigate to the Input page.
2. In the Input component, find and select the Input frame inside the Input Wrapper.
3. Press “Q” on your keyboard to select all Input frames in all Input components.
4. In the Auto Layout panel, change the frame’s height variable from ⁠h-9 to ⁠h-11.
5. In the Appearance panel, change the frame’s border radius from ⁠rounded-md to ⁠rounded-xs.

Task 3. Textarea component

1. Navigate to the Textarea page.
2. In the Textarea component, find and select the Input frame.
3. Press “Q” on your keyboard to select all Input frames in all Textarea components.
4. In the Appearance panel, change the frame’s border radius from ⁠rounded-md to ⁠rounded-xs.

Great job! Now we have necessary component changes and we can proceed to the next chapter. In the next practice lesson we will start building our website with Pro Blocks.