Introduction

Clutch is a visual builder for headless WordPress that gives professional creators complete design and functional freedom—all while delivering superior performance and security and reducing necessary plugins and services.

Features

Clutch gives professionals complete control over their site's design and functionality, enabling them to create sophisticated layouts and customize every design detail—with or without code.

Visual Builder

Advanced Style Controls	With hundreds of visual styling options, Clutch gives you complete control over your design.
Fonts	Access thousands of Google Fonts or upload custom fonts, with automatic font fallbacks and variable font support.
Typography	Fine-tune every aspect of your typography from letter spacing and line height to font weight and style variations.
Fluid Typography	Set mobile and desktop font sizes, and Clutch will automatically scale between them—optimizing readability across all screen sizes without requiring breakpoints.
Flex/Grid Layouts	Visually create custom flex and grid layouts.
Background layers	Create layered backgrounds that include colors, gradients and images.
Effects	Add shadows, blur, transitions, transforms, filters, masks, backdrop filters, and any other effects supported by modern CSS.
Breakpoints	Visualize how your design looks from desktop to mobile and easily set specific styles for different screen sizes.
States	Define how components look and behave in different interactive states like hover, focus, active, and disabled.
Custom Styles	Go beyond the built-in style controls and visually create any style supported by CSS.
Classes	Apply the same styles to multiple components and update them all at once.
Code Classes	Write your own style code and save it into a reusable class that you can apply to your components.
Design Tokens	Manage colors, spacing, and other style values in one place.
Dark Mode	Set dark values for your design tokens to enable support for dark mode.
Tailwind	Predefined values that help you create accessible designs faster, more consistently, and with less decision fatigue.
Custom Components	Create reusable components by combining other components and styles.
Variants	Create components that have different style and composition options such as a Button with primary, secondary or withIcon variants.
Libraries	Build libraries of components that match your brand to maintain consistency across multiple sites.
Composable Components	Our components are composed of many elements and every nested part can be accessed, styled, and customized.
Real-time collaboration	Multiple people can edit the same project simultaneously, seeing each other's changes in real-time without conflicts or delays.
Visual version control	Go back and view prior revisions. Roll back or copy from the past and paste into the present.

Performance

Clutch creates blazing-fast sites using modern headless architecture without requiring plugins, CDNs, or complex configuration. By separating the frontend from WordPress, we achieve dramatically better performance. No other visual builder or theme comes close.

Extend with Code

With full access to your codebase, you can extend Clutch by adding new components using standard React/TypeScript code.

Components

Primitives

Primitives are the foundational building blocks in Clutch that enable you to design complex pages and layouts and compose your own components.

Block	A block layout component that serves as a simple container for other components.
Row	A flex layout component that creates horizontal arrangements out of child components.
Column	A flex layout component that creates vertical arrangements out of child components.
Grid	A grid layout component that creates grid arrangements out of child components.
Image	Displays images from various sources, including local files, WordPress media, and external URLs. Includes built-in lazy loading with blur placeholders, responsive sizing, and automatic format conversion for optimal performance.
SVG	Displays SVGs with the ability to set their color, size, and styles like any other component.
Text	Displays text content using any valid HTML text tag (p, h1-h6, span) and supports basic inline formatting such as bold, italic, and underline.
Rich Text	Displays text content with support for advanced formatting including headings (h1-h6), lists (bulleted and numbered), links, tables, and inline styles such as bold, italic, and underline. Includes automatic handling of paragraphs and line breaks.
Box
Link	Creates clickable elements for navigation, using various types of links including internal page links, external URLs, and anchor links within pages. Features built-in accessibility attributes and optional styling for hover, visited, and active states.
If	Allows you to show or hide child components based on specific conditions.
Loop	Loops through data collections and renders child components repeatedly and consistently.
Data	Provides access to data from WordPress and other sources with customizable loading states that display while data is being fetched.
CodeEmbed	Lets you embed custom code snippets such as scripts or custom elements directly into your pages.

Elements

Customize every detail of Clutch's minimally-styled, fully-accessible, and ultra-granular base elements.

Accordion	Organizes content into collapsible sections, allowing users to toggle between expanded and collapsed states.
Avatar	Represents a user by displaying a profile image or initials as a fallback.
Button	Used to navigate, trigger actions, or submit forms.
Carousel	Displays a series of slides that users can navigate using various controls.
Collapsible	Expands or collapses content when clicked.
Dialog	A customizable box that opens over the page with an overlay dimming the page underneath.
Dropdown Menu	Display a list of menu items to a user. Useful for navigation, settings, or filtering content.
Form	Container for inputs, provides built-in validation, error handling, and submission actions.
Progress	Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Separator	a visual element used to divide content into distinct sections.
Sheet	A panel that slides in from the edge of the screen, often used for details, settings, or supplemental content.
Tabs	Organizes content into separate panels, where only one panel is visible at a time.

Icons

Access thousands of free, professionally-designed SVG icons that are optimized for performance. Each icon can be fully customized with properties like color, size, and stroke width, giving you complete control over their appearance.

Lucide Icons	An open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects.
Iconoir	A high-quality selection of free icons. Your new alternative to Noun Project, Flaticon, and all Figma resources. Available in SVG, Font, React, React Native, Flutter, Figma and Framer.

Modern Tech Stack

Built on Next.js, React, and other modern web technologies, Clutch delivers exceptional performance, full accessibility, and complete design freedom while maintaining the flexibility that professional creators need.

React	React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript.
Next.js	A powerful React framework that provides server-side rendering, static site generation, and optimized performance out of the box.
Vercel	Vercel provides the developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web.
Radix	An open source component library optimized for fast development, easy maintenance, and accessibility.
Tailwind CSS	A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
npm	The free npm Registry has become the center of JavaScript code sharing, and with more than two million packages, the largest software registry in the world.
Bun	Bun is an all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager.