How to Tell If a Website Uses Chakra UI
Chakra UI is a popular accessible React component library. Detect it via chakra- prefixed class names, --chakra- CSS custom properties and Emotion css-<hash> classes in the DOM.
Chakra UI is a popular, accessibility-focused React component library known for its clean, composable components and a design-token system exposed as CSS custom properties. It leaves a distinctive footprint in the rendered DOM, so detecting it is straightforward: inspect any element and look for chakra- prefixed classes or --chakra- CSS variables. This guide covers every reliable signal, the styling architecture behind them, the look-alikes to rule out, and what a Chakra UI build tells you about the team.
What is Chakra UI?
Chakra UI, first released in 2019, is a React component library built around three principles: accessibility (components follow WAI-ARIA practices out of the box), composability (small, flexible primitives and a style-props API), and theming (a first-class design-token system). It gives developers a clean, modern set of components and layout primitives — Box, Stack, Flex, Button, Modal, and many more — that are easy to compose and customise. It became a favourite of modern startups and SaaS teams, particularly those who value accessibility and a developer-friendly styling API, and it is frequently used with Next.js.
For detection, the key context mirrors other React UI libraries: Chakra is a React library, so finding it tells you the site uses React, and it generates a recognisable class-name and CSS-variable footprint that survives into the rendered HTML. Its presence signals a contemporary, design-conscious team that prioritised accessibility and a clean component system — often an application or product rather than a marketing brochure. Because Chakra exposes its entire design system as CSS custom properties, it is one of the easier libraries to confirm with certainty.
How Chakra UI renders and styles components
Chakra components render with chakra- prefixed class names — chakra-button, chakra-stack, chakra-text, chakra-heading, chakra-input and so on — applied alongside the styling classes. Like Material UI, Chakra styles with Emotion (CSS-in-JS), so you will also see hashed css-<hash> class names and <style data-emotion> tags in the document head. The most distinctive Chakra signal, though, is its design tokens exposed as CSS custom properties: Chakra defines a large block of --chakra- variables — --chakra-colors-blue-500, --chakra-space-4, --chakra-fontSizes-md, --chakra-shadows-md and many more — on the :root element (or a theme-provider wrapper). That block of --chakra- variables is unmistakable.
So a typical Chakra element carries a chakra- semantic class and an Emotion css-<hash> class, while the document defines dozens of --chakra- custom properties. The combination is highly specific. Knowing this — the chakra- class prefix, the --chakra- CSS variables, and the Emotion styling — makes detection both quick and certain. There is little reason for a site to obscure these, since they are a natural by-product of using the library.
How to tell if a website uses Chakra UI
Confirm at least two of the following.
1. Inspect a component. Right-click a button, stack or text element and choose Inspect. A chakra- prefixed class (chakra-button, chakra-stack) is a direct signal.
2. Check the CSS variables. Inspect the :root element (or search the styles) for --chakra- custom properties. A large block of --chakra-colors-, --chakra-space- and similar variables is conclusive.
3. Look for Emotion classes and style tags. css-<hash> classes and <style data-emotion> tags appear alongside the chakra- classes.
4. Search the DOM. In the Elements panel, search for chakra- — many matches confirm Chakra UI.
5. Confirm React. Because Chakra is a React library, verify React is present; Chakra plus React (often with Next.js) is the expected pairing.
What the Chakra UI signals look like
<button class="chakra-button css-1q2w3e">…</button>
<div class="chakra-stack css-0">…</div>
<head><style>:root{--chakra-colors-blue-500:#3182ce;--chakra-space-4:1rem; …}</style></head>
The combination of chakra- prefixed classes and --chakra- CSS custom properties (with Emotion css-<hash> classes) is conclusive.
Chakra UI versus other component libraries — avoiding false positives
Match the prefix to keep React component libraries distinct. Chakra UI uses chakra- classes and --chakra- CSS variables; Material UI uses the Mui- prefix and Material Design styling; Ant Design uses ant-; Mantine uses mantine- and --mantine- variables; Tailwind uses utility classes (no library-specific prefix) and no component classes. The chakra- prefix combined with the --chakra- variable block is unique to Chakra UI. The Emotion css-<hash> classes are shared with MUI and other Emotion libraries, so do not rely on them alone — pair them with the chakra- prefix or the --chakra- variables. Distinguish Chakra (a React component library) from plain CSS frameworks, which do not produce React components or --chakra- tokens.
How reliable is each Chakra UI signal?
The chakra- class prefix and the --chakra- CSS custom properties are both definitive — they are specific to Chakra UI. The block of --chakra- design tokens on :root is especially conclusive because no other library produces it. The Emotion css-<hash> classes are corroborating but shared, so pair them with a Chakra-specific signal. The presence of React reliably accompanies Chakra. There is essentially no false-positive risk once you see the chakra- prefix or the --chakra- variables. As a rule, either of those settles it immediately.
What a Chakra UI build reveals about a site
Finding Chakra UI signals a modern, design- and accessibility-conscious React team. Chakra's emphasis on accessible-by-default components and a clean theming API attracts contemporary startups, SaaS products and design-aware engineering teams, so its presence usually indicates a recent, well-considered front-end build. It also tells you the team values accessibility (a meaningful signal, since Chakra bakes in ARIA practices) and a composable, token-driven design system. If you sell developer tooling, design systems, accessibility services, or products aimed at React teams, a Chakra site marks a technical, design-conscious buyer. The degree of theme customisation in the --chakra- variables hints at how much the team has tailored the system versus using defaults.
What finding Chakra UI means for sales, agencies and competitive research
For sales and prospecting, Chakra marks a modern React product team that values accessibility and clean design — a fit for developer tools, design systems, accessibility products, and front-end infrastructure. Its startup-and-SaaS skew makes it a useful signal for products targeting contemporary engineering teams.
For agencies and consultants, finding Chakra tells you the client runs a modern, accessible React app, so engagements can focus on theming, advanced accessibility, performance, or component work. The accessibility emphasis suggests a client receptive to inclusive-design services.
For competitive and market research, Chakra adoption indicates a competitor's front-end is modern and accessibility-aware. Spotting it (versus an older or custom approach) suggests a recent, design-conscious build, useful when benchmarking product quality and engineering currency.
Chakra UI in the wider front-end stack
Chakra sits at the centre of a modern React stack. It implies React, very often with Next.js, plus a build tool, data fetching and state management. Because Chakra uses Emotion, the stack usually does not also rely on a separate utility-CSS framework, though some teams combine approaches. On the application you will commonly find product analytics, an error tracker, authentication, and modern hosting (Vercel, Netlify). For an auditor, the valuable details are the degree of --chakra- theme customisation, the underlying framework (plain React versus Next.js), whether accessibility practices extend beyond Chakra's defaults, and the surrounding application tooling; together these reveal a modern, design-and-accessibility-conscious React team.
A quick Chakra UI confirmation walkthrough
Open the site with developer tools on the Elements panel and inspect a button or layout element; look for a chakra- prefixed class such as chakra-button. Then inspect the :root element (or search the Styles) for --chakra- custom properties — a large block of --chakra-colors-/--chakra-space- variables is conclusive. Check the head for <style data-emotion> tags. Use Ctrl+F in Elements to confirm many chakra- matches, and optionally confirm React via React DevTools. Either the chakra- prefix or the --chakra- variables is enough to confirm Chakra UI.
A quick Chakra UI detection checklist
- Inspect components for
chakra-prefixed classes (chakra-button,chakra-stack) — conclusive. - Check
:rootfor a block of--chakra-CSS custom properties — conclusive. - Look for Emotion
css-<hash>classes and<style data-emotion>tags. - Search the Elements panel for
chakra-to confirm widespread usage. - Confirm React (often with Next.js) is present.
- Distinguish Chakra (
chakra-/--chakra-) from MUI (Mui-) and Ant Design (ant-).
Detecting Chakra UI at scale
Checking one site is quick, but mapping component-library adoption across many domains — to find modern React product teams — calls for automation. StackOptic detects Chakra UI and thousands of other technologies from a real browser, reading the rendered DOM and CSS so it catches CSS-in-JS libraries that static scanners miss. For related reading, see our guide to checking if a website uses React, Vue or Angular and the full Chakra UI technology profile.
Frequently asked questions
What is the fastest way to tell if a site uses Chakra UI?
Inspect an element and look for chakra- prefixed class names such as chakra-button, chakra-stack or chakra-text. You can also check the :root element for --chakra- CSS custom properties. Either the chakra- class prefix or the --chakra- variables confirms Chakra UI.
What are the --chakra- CSS variables?
Chakra UI exposes its design tokens — colours, spacing, fonts, shadows — as CSS custom properties prefixed --chakra-, defined on the :root or a theme provider element. A large block of --chakra-colors-, --chakra-space- and similar variables is a strong, characteristic Chakra signal.
Does Chakra UI mean the site uses React?
Yes. Chakra UI is a React component library, so finding it means the site is built with React. It is therefore also a reliable indicator that React is in the stack, which you can confirm with the usual React signals.
How is Chakra UI different from Material UI?
Both are Emotion-based React component libraries, but their class prefixes differ: Chakra uses chakra- and --chakra- CSS variables, while Material UI uses the Mui- prefix and Material Design styling. Chakra is known for its accessible, unstyled-by-default, highly composable approach, versus MUI's opinionated Material Design.
What does it mean if a site uses Chakra UI?
Chakra UI is a modern, accessibility-focused React component library popular with startups and SaaS teams. Finding it signals a React application built by a team that values accessibility, composability and a clean, themeable design system, often a contemporary, design-conscious product.
Analyse any website with StackOptic
Get the full technology stack, performance, security and SEO report in seconds — free.
Analyse a websiteRelated articles
How to Tell If a Website Uses Heap
Heap (Heap Analytics) autocaptures product events. Detect it via the cdn.heapanalytics.com script, the global heap object, heapanalytics.com beacons and _hp2 cookies.
How to Tell If a Website Uses Foundation
Foundation (by Zurb) is a responsive front-end framework. Detect it via its grid classes (row/columns, grid-x/cell), data-* component attributes and the foundation.css/js files.
How to Tell If a Website Uses Crisp
Crisp is a developer-friendly, affordable live-chat and messaging tool. Detect it via the client.crisp.chat/l.js script, the window.$crisp object and the CRISP_WEBSITE_ID value.