Gallery Masonry Grid
Column-flow masonry layout with captions revealed on hover.
Gallerymasonrygrid2
Every section is token-drivenSections you can theme,
Sections you can theme,
then actually paste
A library of React sections where every colour, radius, shadow and font comes from a CSS custom property. Set your theme once and the copy button gives you something that looks identical in your own project.
Try a preset:
Radius 8px · Inter headings · Inter body — copied output uses exactly these values
- 110
- Sections
- 21
- Categories
- 5
- Theme presets
- 0
- Hardcoded colours
One token set, everything
Thirteen colour tokens, a radius, a shadow scale and two fonts. No component hardcodes a value, so a theme change reaches every screen at once.
Copy means copy
The clipboard payload is the same source you see previewed, plus the exact stylesheet it was previewed with. Nothing is inlined, nothing is lost.
Enforced, not encouraged
A linter blocks any hex code, Tailwind palette class or un-allowlisted import from being published, and the same rules run in CI.
Browse by category
Fifteen kinds of section, every one of them themeable.
- 10
Navbar
Top-level navigation: marketing bars, app headers, mega menus and mobile drawers.
- 12
Hero
Above-the-fold sections: centered launches, split screens, gradients and product shots.
- 8
Features
Ways to explain what a product does: icon grids, alternating rows, tabs and comparisons.
- 7
Pricing
Plan tables, billing toggles, usage calculators and single-price panels.
- 6
FAQ
Question and answer sections: accordions, two-column lists and categorised help.
- 6
Testimonials
Social proof: quote walls, carousels, single features and rating summaries.
- 6
CTA
Closing sections that ask for the click: panels, bands, split offers and sign-up strips.
- 9
Footer
Page endings: link columns, newsletter footers, minimal bars and sitemap blocks.
- 4
Stats
Number-led sections: metric strips, KPI cards and impact summaries.
- 3
Logo Cloud
Customer and partner wordmark strips, grids and marquees.
- 3
Team
People sections: portrait grids, leadership rows and hiring prompts.
- 3
Contact
Enquiry forms, contact detail panels and support routing sections.
- 3
Blog
Article listings: card grids, featured layouts and compact index lists.
- 3
Auth Forms
Sign-in, sign-up and recovery screens, centered or split with artwork.
- 3
Banners
Announcement bars, cookie notices and inline alerts.
- 4
Steps
Process explainers: numbered steps, timelines, onboarding checklists and roadmaps.
- 4
Gallery
Image-led sections: masonry grids, filterable galleries, comparisons and video features.
- 4
Newsletter
Email capture: inline bars, split cards, waitlists and footer panels.
- 4
Careers
Hiring sections: open roles, perks, interview process and culture splits.
- 4
Portfolio
Proof of work: project grids, case-study highlights and outcome metrics.
- 4
Comparison
Side-by-side sections: feature matrices, alternatives and specification tables.
Most viewed this week
Previews below use your current theme.
Navbar Mega Menu
Hoverable trigger that opens a full-width panel of grouped links.
NavbarInteractivemega-menuinteractive2
Steps Numbered Row
Three numbered steps in a row, joined by a connecting rule.
Stepsnumberedrow1
Hero Centered CTA
Eyebrow pill, oversized headline and a pair of buttons, all centered.
Herocenteredsaas1
Set your theme, then take what you need
No account, no install, no build step to try it. Copy a section and a stylesheet and you are done.