In Shaper, any set of elements can be turned into a Reusable Component.
Button
or NavBar
). Shaper will convert that selection into a component element. On the design canvas, it might move into a Components library panel, and any instances of it on your canvas become linked. Under the hood, Shaper generates a new file in the project (e.g., Button.tsx
with the JSX for that component). This file is stored in the Git repo and can be edited by developers if needed.NavBar
component, every page using NavBar
will reflect those changes (just like in design tools). This ensures global consistency.UserCard
, PricingTable
, MainFooter
. Avoid spaces or special characters. A good name is descriptive of the component’s role. If a component is specific to a context, include that (e.g., DashboardSidebar
vs. Sidebar
if you will have multiple sidebars). Consistent naming makes it easier for developers to find the corresponding files in the repo. Also, maintain consistency between design and code naming – Shaper will usually keep the same name in the code export.components/auth/LoginForm.tsx
). While Shaper likely handles file creation automatically, work with your devs if you need to reorganize component files – moving files in code could potentially break the link to the design, so follow Shaper’s recommended method for renaming or moving components (often renaming in the Shaper UI will also rename the file).Primary Color
token for its background. Initially, the token is a blue. Your design system evolves and you want to adopt a new branding color (say a green). Instead of updating dozens of buttons manually, you simply change the Primary Color
token in Shaper’s token editor. Instantly, every Button instance updates to the new green, and Shaper commits the token change to Git. Developers see a commit like “Update primary color token to green” and know the UI changed. The design remains consistent everywhere – including in code – and the change is traceable. This tight integration of tokens and components, all under version control, is what makes iterating in Shaper so powerful.
Tip: Use the Live Preview as you adjust tokens or components. Shaper’s real-time sync means you can have the app preview running (or open the published link) and see updates instantly as you tweak your design system values. This helps catch any contrast or spacing issues early.