When you select any element on the canvas, the Property Panel (usually docked on the right side) becomes your styling control center. This panel lets you adjust visual properties and layout settings for the chosen element, all through an intuitive GUI – and every change you make translates to Tailwind CSS classes or style attributes in real time. Key sections of the Property Panel include:
  • Layout & Position: Set an element’s positioning (e.g. whether it’s inside a flex container or absolutely positioned). You can adjust width, height, padding, and margin here. For container elements, you can also toggle layout direction (horizontal/vertical stack) and alignment (using flex properties) to quickly achieve common layouts.
  • Style & Background: Modify backgrounds (solid colors, gradients, or images), borders (color, width, radius), and opacity. For example, give a container a background color from your design tokens (like a brand color) or set an image to fill its container.
  • Typography: For text elements (or any element with text), adjust font family, size, weight, line height, alignment, and color. Shaper integrates with Google Fonts via a plugin, so you can browse a wide range of fonts in the dropdown. Choose from predefined font size tokens or set custom sizes.
  • Effects: Add shadows, glows, or blurs to elements. For instance, you can apply a subtle box-shadow to a card component for elevation.
  • Interactions (Coming Soon): If interactive behavior is supported (like on-click actions or hover states), this section would let you configure them. (Note: Depending on the current version of Shaper, interactive behavior might be limited, but the vision is to handle common UI states visually.)
As you tweak these properties, Shaper is updating the code in the background. For example, setting a padding on a container might apply a Tailwind class like p-4, and changing a text color might use a class like text-primary (if “primary” is one of your token colors). You can see a breadcrumb of the element’s CSS classes or component name at the top of the panel, and even edit the class list directly if you’re comfortable. (Screenshot of the property panel highlighting layout, style, and typography controls goes here.)
Tip: Use design tokens (see next section) for styling whenever possible. Instead of picking arbitrary colors or pixel values, choose from your predefined token values in the Property Panel’s dropdowns. This ensures consistency and makes it easy to update styles across the whole project.