Library & Layouts

How it works

Every wireframe is stored as a framework-agnostic structure. When you click Copy, Bricksfusion converts colors, spacing, typography, and layout values to match the framework you selected in your Design System. The result is production-ready JSON you can paste directly into Bricks Builder.

The conversion happens at copy time, so the same wireframe works for any supported framework without manual adjustments. Set up your framework in Dashboard, Design System before copying wireframes. This ensures every section matches your project from the start.

Browsing the library

From the Wireframes hub you can:

• Browse by category. Each of the 21 categories has its own page with all wireframes in that section type.
• Filter by tags. Narrow results by visual characteristics like dark, minimal, grid, image, gradient, form, and more.
• Sort. Newest first, oldest first, or by element count.
• Search across all wireframes using the global search page.
• Preview any wireframe by clicking the thumbnail to see a live render.

Categories

Wireframes are organized in 21 categories that cover every section type you need to build a complete website:

New categories and wireframes are added regularly. Check the Changelog for the latest additions.

Frameworks

When you copy a wireframe, Bricksfusion converts it to the framework you selected in Dashboard, Design System. All colors, spacing, typography, and grid values are adapted automatically.

ACSS

Core Framework

AT Framework

Bricks Builder Framework

If you do not use a CSS framework, select Vanilla. Sections are output with hex colors and pixel values instead of CSS variables.

You only need to set your framework once. It applies to every wireframe you copy from that point on.

Copy and paste

Every wireframe has a Copy button. Clicking it converts the wireframe to your selected framework and copies the JSON to your clipboard. In Bricks Builder, paste with Ctrl+V or Cmd+V on Mac directly onto the canvas.

If you are not logged in or do not have an active license, copying opens the pricing modal instead.

Once pasted, the section is fully editable in Bricks Builder. Update the text, images, and details to match your project.

Favorites

Click the heart icon on any wireframe card to save it to your favorites. Your favorites are accessible from Wireframes, Favorites and from the Dashboard overview.

The favorites page includes sub-filters by category, so you can find saved wireframes within a specific section type. Favorites work across wireframes, animations, and layouts from a single system.

Layouts

Layouts are complete page designs that include a header, multiple content sections, and a footer. Each one is a production-ready starting point for a full page.

Each layout is divided into three parts for flexibility:

Each layout also shows which Bricksfusion animations are included, so you know what effects are used in the design. Browse all layouts at Layouts.

Layouts follow the same copy and paste workflow as individual wireframes. Your selected CSS framework is applied automatically.

Tags and filtering

Every wireframe has tags based on its visual characteristics and structure. Tags help you find wireframes beyond just the category.

On category pages, tags appear as filter pills below the title. Click any tag to filter the grid. You can combine a tag filter with sorting for precise results.