VivekUI vs Chakra UI
VivekUI compared with Chakra UI: a static stylesheet and data-attribute variants against style props and a runtime theme. The differences that matter.
How Chakra UI works
Chakra UI is a component library styled through style props (`<Box p={4} bg="gray.100">`) resolved against a theme at runtime. Version 3 moved to a static extraction approach with Panda-style recipes; earlier versions use Emotion.
Side by side
| Aspect | VivekUI | Chakra UI |
|---|---|---|
| Runtime dependencies | None. `package.json` has no `dependencies` field; React and React DOM are peers. | Several @chakra-ui packages plus Emotion (v2) or its own styling runtime (v3). |
| Styling | One static stylesheet, every selector in `:where()` (zero specificity), variants as `data-*` attributes, tokens as `--vk-*` custom properties. | Style props and recipes resolved against a JavaScript theme. |
| Overriding a style | Any one class of yours wins — no `!important`, no specificity war. | Style props, or theme recipes; generated class names. |
| Server Components | Unbundled build; each file keeps its own 'use client'. 50 of 109 components ship no client JavaScript. | Provider-based; components are client components. |
| Accessibility testing | A `vitest-axe` assertion per component, browser axe on composed pages in three viewports, keyboard maps from the WAI-ARIA Authoring Practices. | Documented per component; testing is up to your project. |
| Sections and pages | Hero, Navbar, Pricing, FAQ, CTA, Footer, Stats, Testimonials as components; 62 blocks and 12 whole pages to copy. | Pro templates are a separate paid product. |
Choose Chakra UI when
You like styling with props on every element and want the theme in JavaScript.
You already have a Chakra theme and component recipes.
Choose VivekUI when
You want plain CSS you can read in DevTools, with class names that mean something.
You want variants as `data-*` attributes and tokens as CSS custom properties you can set from any stylesheet.
You want zero runtime dependencies and no style props in your JSX.