Products
Library & Layouts
Copy any of the 390+ wireframes and paste it straight into Bricks Builder, already converted to your CSS framework. Layouts, favorites and a personal section vault turn the library into the fastest way to build complete pages.
How it works
Every wireframe is stored as a framework-agnostic structure. When you hit Copy, Bricksfusion converts colors, spacing, typography and layout values to the framework selected in your Design System and puts production-ready JSON on your clipboard, ready to paste into Bricks Builder.
The conversion happens at copy time, so the same wireframe serves every supported framework without manual adjustments.
Set your framework before you copy
Pick your framework in Dashboard → Design System first. Every section then matches your project from the very first paste.
Browsing the library
Everything starts at the Wireframes hub. From there you can:
From the Wireframes hub
- Browse by category. Each of the 21 categories has its own page with every wireframe of that section type.
- Filter by tags. Narrow results by visual traits like dark, minimal, grid, image, gradient or form.
- Sort. Newest first, oldest first, or by element count.
- Search the whole library from the global search page.
- Preview any wireframe as a live render by clicking its thumbnail.
Categories
Wireframes are organized in 21 categories that cover every section type a complete website needs:
New categories and wireframes land regularly. The Changelog tracks every addition.
Frameworks
Copy a wireframe and Bricksfusion converts it to the framework selected in Dashboard → Design System. All colors, spacing, typography and grid values adapt automatically.
ACSS
Core Framework
AT Framework
Bricks Builder FrameworkNo framework? Pick Vanilla
Sections are output with hex colors and pixel values instead of CSS variables, so they work on any site with zero dependencies.
Set it once, use it everywhere
Your framework choice applies to every wireframe you copy from that point on. No per-copy configuration.
Copy and paste
Copy the section you want
Every wireframe has a Copy button. Clicking it converts the wireframe to your selected framework and places the JSON on your clipboard.
An active license unlocks copying
If you are not logged in or do not have an active license, copying opens the pricing modal instead.
Paste into Bricks Builder
Click directly onto the Bricks canvas and paste:
WindowsCtrl + VMacCmd + V
Make it yours
The pasted section is fully editable in Bricks Builder. Update the text, swap the images and adjust the details to match your project.
Favorites
Click the heart icon on any wireframe card to save it. Your favorites live in Wireframes → Favorites and on the Dashboard overview, always one click away.
The favorites page includes sub-filters by category, so you can find a saved wireframe inside a specific section type. One system covers wireframes, animations and layouts.
Layouts
Layouts are complete page designs. Each of the 11 layouts pairs a header, multiple content sections and a footer into a production-ready starting point for a full page.
Every layout is split into three parts, so you paste exactly what you need:
Header
Navigation bar with logo, menu links and a CTA button.
Content
All body sections combined: hero, features, testimonials, pricing and more.
Footer
Footer with links, social icons and legal information.
Each layout also shows which Bricksfusion animations are included, so you know exactly what effects power the design. Browse them all at Layouts.
Layouts follow the same copy and paste workflow as individual wireframes, with your selected CSS framework 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. Paste JSON directly, drag and drop a file, or paste from your clipboard. Bricksfusion accepts three formats:
Single section
JSON copied from the Bricks Builder editor or from any wireframe library. Imported as one section.
Full template or page
JSON with multiple root sections. Bricksfusion detects each section and splits them automatically. You review the list, rename sections, assign categories, and choose which ones to import.
Bricks template export
Exported template files from Bricks Builder (JSON with templateType, content, and settings). Sections are extracted and split the same way.
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. You can change both manually before confirming.
Vault limits
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. Move sections between collections at any time, or leave them 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 stay hidden unless you activate the Archived filter. Keep your workspace clean without deleting anything.
Bricksfusion generates auto-tags from the JSON structure (dark, minimal, complex, grid, image, icons, form, gradient and more), and you can add custom tags to any section for your own organization. Tags are searchable and visible on every section card.
Each section also 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:
Convert framework
Switch the section between ACSS, Core Framework, AT Framework, and Bricks Builder. The transformer remaps all colors, spacing, typography, and grid values to the target framework. Conversion from a framework back to Vanilla is not supported.
Apply palette
Replace the section colors with your Design System palette. The color classifier analyzes each element in context (background, text, button, card, badge) and assigns the closest matching color from your palette.
Strip global classes
Inline all styles from external global classes into each element and remove the class references. Useful when importing sections from a library whose global classes you do not want in your project.
Reset to original
Revert the section to its original imported state and discard every transform. The original JSON is preserved from the moment of import and never modified.
Batch actions
From 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.
Batch changes save immediately
Every batch action asks for confirmation before starting. Changes cannot be undone in bulk, 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 output reflects every transform you applied: convert to ACSS and apply your palette, and the copied JSON includes both changes.
Tags and filtering
Every wireframe carries tags based on its visual characteristics and structure, so you can find the right section beyond the category level.
On category pages, tags appear as filter pills below the title. Click any tag to filter the grid, and combine it with sorting for precise results.