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.

My Sections

Pro LTDMy Sections is a personal section vault in your dashboard. Import Bricks Builder JSON from any source, organize it in collections, and transform everything to match your project.

Importing

Open My Sections from the dashboard sidebar and click Import. You can paste JSON directly, drag and drop a file, or paste from your clipboard. Bricksfusion accepts three formats:

On import, Bricksfusion detects the CSS framework used in the JSON (Vanilla, ACSS, Core Framework, AT Framework, or Bricks Builder) and assigns a category based on the section name and content. Both can be changed manually before confirming.

Each section can be up to 500 KB. The vault holds up to 200 sections and 20 collections.

Collections

Collections group sections by project, client, or any criteria you choose. Each collection has a name, an optional description, and a color. Sections can be moved between collections at any time, or left without a collection.

Inside a collection you can search, filter by category or framework, sort by date, name, or complexity, and reorder sections with drag and drop.

Status, tags, and notes

Every section has a status: Draft, Ready, or Archived. Draft and Ready sections appear in the grid by default. Archived sections are hidden unless you activate the Archived filter. Use this to keep your workspace clean without deleting anything.

Bricksfusion generates auto-tags based on the JSON structure (dark, minimal, complex, grid, image, icons, form, gradient, and more). You can also add custom tags to any section for your own organization. Tags are searchable and visible on every section card.

Each section has a notes field for free-text context. Use it to record decisions, version notes, or client feedback.

Transforms

Open any section to access four transform actions:

Batch actions

Inside a collection or the All Sections view, open Batch Actions to apply a transform to every section at once. Convert an entire collection to a different framework, apply your palette across all sections, strip classes, or reset everything. A progress bar shows the status as each section is processed.

Every batch action asks for confirmation before starting. Changes are saved immediately and cannot be undone, but you can always reset individual sections to their original state.

Copy and download

Open any section and use Copy to Clipboard to paste it directly into Bricks Builder, or Download to save the JSON as a file. The JSON reflects all transforms you have applied, so if you converted to ACSS and applied your palette, the copied output includes those changes.

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.