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.
An open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. | |
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 is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. | |
A powerful React framework that provides server-side rendering, static site generation, and optimized performance out of the box. | |
Vercel provides the developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web. | |
An open source component library optimized for fast development, easy maintenance, and accessibility. | |
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. | |
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 is an all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager. |