Saved Components
Save reusable components and full-page designs from the Explorer Canvas. Browse them in the Studio's Source Panel and reuse them across your organisation.
Features
| Feature | Description |
|---|---|
| Save from Explorer | Click "Add to Library" on any Explorer variant to save it as a reusable component or full page. |
| Component / Page types | Choose whether a saved variant is a component (reusable UI element) or a full page design. |
| Metadata | Add name, category, description, and tags to each saved variant for easy discovery. |
| Browse in Source Panel | The "Saved" tab in the Studio Source Panel shows all saved components and pages, grouped by category. |
| Filter by type | Toggle between All, Components, and Pages to find what you need quickly. |
| Organisation-scoped | Saved components belong to an organisation. All team members can view and use them. |
How to Use
1. Generate Variants
Use the Explorer to generate component variants from your design system. Describe what you need, attach reference images, and iterate until the result looks right.
2. Save to Library
Click Add to Libraryon any variant card. Choose whether it's a component or full page, add a name, category, description, and tags, then save.
3. Browse Saved Components
Open the Saved tab in the Studio Source Panel. Components and pages are grouped by category. Use the filter pills to show All, Components only, or Pages only. Click any item to copy its code.
Save from Explorer
The Explorer generates component variants from your extracted design system. When you find a variant worth keeping, click Add to Library. Fill in the name, type (component or page), category, and tags, then save. The variant's code is stored with your design tokens already applied.
Tips
- Components saved from the Explorer already have design tokens applied, so you rarely need to edit the token references manually.
- Use categories to group related components (Cards, Navigation, Forms, etc.) so the Saved tab stays navigable as your library grows.
- Separate components from full-page designs using the type toggle when saving. This makes filtering easier later.
- All team members in your organisation share the same library. Agree on a naming convention early to avoid duplicates.