Component library organization

A component library is only valuable if you can find what you need quickly. A few minutes spent organizing and naming components correctly pays back every time you start a new page.

Creating folders

1. Open the Components panel and go to the My Components tab.
2. Right-click in an empty area of the panel.
3. Choose New Folder and type a folder name.
4. Drag existing components into the folder to organize them.

A folder structure that mirrors the anatomy of a web page works well for most projects:

• Navigation — Sticky, transparent, sidebar, off-canvas variants.
• Heroes — Full-width, split, minimal, video backgrounds.
• Features — Icon grids, alternating rows, centered text.
• Testimonials — Carousels, grids, single quote formats.
• Pricing — Tables, cards, toggle variants.
• CTAs — Banners, inline strips, newsletter sign-ups.
• Footers — Minimal, multi-column, dark, light.
• Archive — Old versions you are not using but are not ready to delete.

Naming conventions

Consistent names make it easy to scan the library at a glance. A useful pattern:

[Category] - [Descriptor]

Examples:

• Nav - Sticky Dark
• Nav - Centered Logo
• Hero - Split Image Right
• Card - Feature 3-col
• CTA - Newsletter Strip
• Footer - Multi-column Dark

This format sorts cleanly within folders (alphabetically by category prefix) and makes the purpose immediately clear.

Adding descriptions to components

Right-click a component in the panel and choose Edit Description. Add a short note about when to use this component, what content it expects, or what variants exist. Descriptions appear as tooltips when you hover over the component.

Useful descriptions:

• “Use for pages with a large hero image. Swap the placeholder with a 1400×800 px image.”
• “CTA strip for bottom of feature pages. Change the button URL and headline.”
• “Three-column card layout. Duplicate the card element to add more columns.”

Archiving vs. deleting

If you are unsure whether you will need a component again, move it to an Archive folder rather than deleting it. This keeps the panel tidy while preserving the work.

Only delete a component when you are certain it will never be used again. Deletion removes it from the library permanently — existing instances on pages are unaffected, but you cannot re-insert the original.

A well-organized library is a personal UI kit

Over time, a well-maintained component library becomes a UI kit tailored to your design style. When you start a new project, you can build an entire page structure in minutes by dragging in components that already match your aesthetic.