Creating Global CSS¶

Global CSS is a centralized stylesheet where you can define and manage site-wide styles and design tokens. By defining design tokens, such as colors, typography, and spacing in one place, you ensure consistency across all your pages. When you make a change to the design tokens or styles in the Global CSS, those changes are automatically reflected throughout your site. This reduces the need to make repetitive style adjustments on individual components and streamlines the design process.

1. In the Experience Builder Code Editor, click the Global CSS tab.
2. Define your design tokens and core styles, such as colors and fonts, using CSS.

Creating Components¶

Components are modular units of design and functionality that can be reused across multiple pages. Components can be created through React, Tailwind 4, and CSS. You can provide the settings to content creators to allow them to insert content such as text and images.

1. Open the Experience Builder.
2. In the left side bar, click the Library tab.
3. Click Add new.
4. Provide a name, such as Testimonial Block or Product Card.
5. Implement the component using React, Tailwind 4, and CSS.

6. Add the component to the Component Library and test it by adding it to the page.

   Note

   Currently, you cannot change props or slots for components that are added to the Component Library. To make changes to the props and slots of a component, you must delete all users of the component and remove it from the library by right-clicking the component in the Component Library, and selecting Remove from components.

7. To implement and iterate:
   • Use your Design System components when building pages.
   • Gather feedback and refine your Design System over time.