# Chakra UI vs shadcn 2026: Style Props oder Tailwind?

> Chakra UI vs shadcn im Oktober 2026: Style Props auf Emotion oder Tailwind-Code, der dir gehört. Theming, Turbopack, RSC und Smartphones, mit Codebeispielen.

- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 16. Okt. 2026
- Kategorie: [Vergleiche und Alternativen](https://wingo-ui.com/de/blog/category/comparisons)
- Lesezeit: 10 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/chakra-ui-vs-shadcn
- Englische Fassung: https://wingo-ui.com/blog/chakra-ui-vs-shadcn

## Kurz gesagt

Nimm Chakra UI, wenn du Style Props und ein typisiertes Theme in einem npm-Paket magst, das jemand anderes pflegt, und Emotion als Styling-Runtime in Kauf nimmst. Nimm shadcn/ui, wenn du Tailwind CSS willst, den Code der Komponenten in deinem Repo und eine Next.js-16-App, die bei Turbopack bleibt (Chakras Guide verlangt derzeit, Turbopack abzuschalten). Wingo UI folgt dem shadcn-Modell und macht Dialoge, Drawer und Menüs unter 768px ohne zusätzlichen Code zu ziehbaren Bottom Sheets.

Bei Chakra UI vs shadcn wählst du zwischen zwei Arten, React zu stylen. Chakra UI v3 ist ein npm-Paket: Du schreibst `<Box p="4" bg="bg.muted">`, und Emotion macht aus diesen Style Props zur Laufzeit CSS. shadcn/ui kopiert Komponenten-Dateien in dein Projekt und stylt sie mit Klassen von Tailwind CSS, der Code gehört also dir. Theming, Server Components, die Unterstützung für Next.js 16 und das Verhalten auf dem Smartphone folgen alle aus dieser Trennung, und genau diese Punkte geht dieser Vergleich durch.

Wir bauen Wingo UI, eine kostenpflichtige Bibliothek nach dem shadcn-Modell. Sie taucht unten deshalb als dritte Spalte auf. Die Fakten zu Chakra stammen von [chakra-ui.com](https://www.chakra-ui.com/docs/get-started/frameworks/next-app) und aus der npm-Registry, die zu shadcn/ui von [ui.shadcn.com](https://ui.shadcn.com/docs/changelog), alles geprüft am 16. Oktober 2026. Wo Chakra die bessere Wahl ist, sagen wir das. Den Überblick über alle Optionen findest du in unserem [Guide zu shadcn-Alternativen](https://wingo-ui.com/de/blog/shadcn-alternatives).

## Wie schneiden Chakra UI und shadcn/ui 2026 im Vergleich ab?

| | Chakra UI 3.37 | shadcn/ui | Wingo UI |
| --- | --- | --- | --- |
| Modell | npm-Paket `@chakra-ui/react`; die CLI ergänzt optionale Snippets | CLI kopiert den Code in dein Projekt | CLI kopiert den Code; kompatibel mit der shadcn-Registry |
| Styling | Style Props, die Emotion zur Laufzeit kompiliert | Tailwind CSS, CSS-Variablen | Tailwind CSS v4, Tokens als CSS-Variablen |
| Primitives | [Ark UI](https://ark-ui.com) (vom selben Team) | Seit Juli 2026 standardmäßig Base UI, alternativ Radix oder React Aria | Radix, vaul, Motion |
| Theming | `createSystem` mit Tokens, semantischen Tokens und Recipes | CSS-Variablen in deinem globalen Stylesheet | CSS-Variablen, jeder visuelle Aspekt ein Prop, Standardwerte über `UIProvider` |
| Next.js 16 | Unterstützt; der Guide verlangt `--webpack` wegen eines Hydration-Fehlers von Emotion unter Turbopack | Läuft mit Turbopack | Läuft mit Turbopack |
| Overlays auf dem Smartphone | Drawer und Dialog nehmen responsive Werte für `placement` und `size` | Drawer, plus ein Rezept für Dialog und Drawer | Dialog, Drawer, Popover, Select und Menüs werden unter 768px zu Bottom Sheets |
| Lizenz | MIT | MIT | Lizenz pro Entwickler; 75 von 352 Einträgen kostenlos |
| Preis | Kostenlos; Blocks von [Chakra UI Pro](https://pro.chakra-ui.com/pricing) für $299 (Einzelperson) oder $899 (Team), einmalig | Kostenlos | Kostenloser Tarif; Pro $8 im Monat, $80 im Jahr oder $150 einmalig auf Lebenszeit |
| KI-Agenten | [MCP-Server](https://www.chakra-ui.com/blog/announcing-chakra-ui-mcp-server) `@chakra-ui/react-mcp` für Doku und Props | MCP-Server, der aus Registries installiert | [MCP-Server](https://wingo-ui.com/docs/mcp) mit Props, Design-Regeln und Update-Checks |

Chakra UI 3.37.0 erschien am 28. August 2026 auf npm, shadcn 4.22.0 am 16. Oktober 2026. Beide Projekte veröffentlichen oft, vergleich die Datumsangaben also mit dem heutigen Stand.

## Wie installierst du die Bibliotheken, und wem gehört danach der Code?

Chakra installierst du wie jede andere Dependency:

```bash
npm i @chakra-ui/react @emotion/react
npx @chakra-ui/cli snippet add
```

Der zweite Befehl ist wichtiger, als er aussieht. Ohne Argumente schreibt Chakras CLI die empfohlenen Snippets nach `components/ui`: `provider.tsx` (verbindet `ChakraProvider` über `color-mode.tsx` mit `next-themes`), `toaster.tsx` und `tooltip.tsx`. Auch ein Chakra-Projekt hat also kopierte Dateien. Der Unterschied liegt in der Tiefe: Diese Snippets sind dünne Wrapper, und Dialog, Drawer und Button, die sie nutzen, bleiben in `node_modules/@chakra-ui/react`. Du aktualisierst sie mit `npm update` und änderst sie über Props, Recipes und das Theme.

shadcn/ui und Wingo UI kopieren die ganze Komponente:

```bash
npx shadcn@latest add dialog
npx wingo-ui@latest add dialog
```

Jede Zeile des Dialogs liegt jetzt in deinem Repo. Ein neues Major-Release einer Dependency kann deine UI nicht mehr hinter deinem Rücken ändern, und einen Fehler behebst du noch am selben Nachmittag. Der Preis: Upstream-Fixes kommen nicht mehr von selbst. Die shadcn-CLI zeigt die Unterschiede mit `add --diff` und überlässt dir das Zusammenführen; `npx wingo-ui@latest update` führt einen 3-Way-Merge in die Datei aus, die du bearbeitet hast, wie die [Installations-Doku](https://wingo-ui.com/docs/installation) erklärt.

## Style Props oder Tailwind-Klassen: Wie unterscheidet sich der Code?

In Chakra sind Layout und Farbe Props an Komponenten, in shadcn/ui und Wingo UI sind sie Tailwind-Klassen. Diesem Unterschied begegnest du in jeder Zeile jedes Screens. Schreibt dein Team schon Tailwind und suchst du eine Chakra UI Alternative, entscheidet dieser Abschnitt also das meiste. In Chakra sind responsive Werte Objekte und Farben Theme-Tokens:

```tsx
import { Box, Button, Heading, Text } from "@chakra-ui/react";

export function PlanCard() {
  return (
    <Box bg="bg.muted" p={{ base: "4", md: "6" }} rounded="xl">
      <Heading size="md">Team-Tarif</Heading>
      <Text color="fg.muted" mt="1">
        Fünf Plätze, gemeinsame Projekte und bevorzugter Support.
      </Text>
      <Button colorPalette="teal" variant="surface" mt="4">
        Upgraden
      </Button>
    </Box>
  );
}
```

Mit Tailwind ist dieselbe Karte eine Reihe von Klassen auf einfachen Elementen, und der [Button](https://wingo-ui.com/components/button) von Wingo UI bekommt sein Aussehen über Props:

```tsx
import { Button } from "@/components/ui/button";

export function PlanCard() {
  return (
    <div className="rounded-2xl bg-surface p-4 shadow-raised md:p-6">
      <h3 className="text-lg font-semibold">Team-Tarif</h3>
      <p className="mt-1 text-sm text-muted-foreground">Fünf Plätze, gemeinsame Projekte und bevorzugter Support.</p>
      <Button variant="soft" className="mt-4">
        Upgraden
      </Button>
    </div>
  );
}
```

Keine der beiden Varianten ist nennenswert kürzer. Chakra hält das Styling in TypeScript: Nachdem du das Theme angepasst hast, erzeugt `npx @chakra-ui/cli typegen ./theme.ts` die Typen für deine Tokens neu, und mit dem Flag `--strict` wird eine unbekannte `variant` oder `size` zum Typfehler. Tailwind hält alles in einer Sprache, die jedes Tailwind-Projekt, jede Vorlage und jeder KI-Assistent schon spricht. Schreibt dein Team anderswo Tailwind, hast du mit Style Props zwei Wege, `padding: 1rem` auszudrücken.

## Wie unterscheidet sich das Theming bei Chakra UI und shadcn/ui?

Chakra v3 definiert das Theme in TypeScript, shadcn/ui in CSS-Variablen. In Chakra erweiterst du die Standardkonfiguration mit `defineConfig`, baust mit `createSystem` ein System und übergibst es an den Provider:

```tsx
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react";

const config = defineConfig({
  theme: {
    tokens: {
      colors: { brand: { 500: { value: "#d63f00" } } },
    },
    semanticTokens: {
      colors: { brand: { solid: { value: "{colors.brand.500}" } } },
    },
  },
});

export const system = createSystem(defaultConfig, config);
```

Aus den Tokens werden CSS-Variablen wie `--chakra-colors-red-200`, semantische Tokens können mit dem Farbmodus wechseln, und Recipes (`defineRecipe`) sowie Slot Recipes (`defineSlotRecipe`) definieren Varianten für einteilige und mehrteilige Komponenten. Das ist ein vollständiges System für Design Tokens, und es ist die größte Stärke von Chakra.

shadcn/ui und Wingo UI definieren das Theme in CSS. Die Tokens sind Variablen in deinem globalen Stylesheet, mit einem zweiten Satz unter `.dark`, und `@theme inline` macht daraus Tailwind-Utilities:

```css
:root {
  --brand: #d63f00;
  --brand-foreground: #ffffff;
}

@theme inline {
  --color-brand: var(--brand);
}
```

Wingo UI legt eine Ebene darüber: Jeder visuelle Aspekt einer Komponente ist ein Prop mit Standardwert, und `UIProvider` setzt app-weite Standardwerte. Einen anderen Radius stellst du so mit einer Zeile im Root-Layout ein:

```tsx
import { UIProvider } from "@/lib/ui-config";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <UIProvider defaults={{ button: { radius: "full" }, dialog: { size: "sm" } }}>{children}</UIProvider>
      </body>
    </html>
  );
}
```

Willst du typisierte Tokens und Varianten-Recipes, die der Compiler prüft, liegt Chakras System vorn. Willst du Tokens, die jede CSS-Datei, jede Tailwind-Klasse und jeder Block von Drittanbietern ohne Provider lesen kann, sind CSS-Variablen einfacher.

## Chakra oder shadcn für Next.js: Was passt zu Server Components und Turbopack?

Beide laufen im App Router, aber nur die Tailwind-Kits laufen ohne Workaround mit Turbopack. Chakra braucht außerdem eine Emotion-Registry, sobald du UI streamst.

Laut Chakras [Next.js-Guide](https://www.chakra-ui.com/docs/get-started/frameworks/next-app) funktioniert es mit Next.js 15 und 16. Im Abschnitt zur Fehlersuche steht aber, dass Turbopack das CSS von Emotion falsch hydriert, und du sollst `--webpack` in deine Skripte `dev` und `build` schreiben, bis das Next.js-Team das behebt. Da Turbopack in Next.js 16 der Standard-Bundler ist, verzichtest du damit für die ganze App auf den Standard. Streamst du Chakra-Komponenten über `<Suspense>`, ergänzt der Guide eine Emotion-Registry mit `useServerInsertedHTML` und weist darauf hin, dass das der Normalfall wird, sobald Cache Components aktiv sind.

Zu Server Components sagt Chakras [Doku](https://chakra-ui.com/docs/components/concepts/server-components) zweierlei: Du kannst die Komponenten ohne `'use client'` aus einer Server-Datei rendern, und sie sind trotzdem Client-Komponenten, weil sie auf `useState`, `useRef` und `useContext` setzen. Beides stimmt. Das Paket markiert seine eigenen Dateien mit `"use client"`, deine Seite bleibt also eine Server-Komponente, und die Chakra-Teile hydrieren auf dem Client. Dateien, die `chakra()` aufrufen, Chakra-Hooks importieren oder Render Props verwenden, brauchen die Direktive selbst.

Bei shadcn/ui und Wingo UI sind die Styles Tailwind-Klassen, die beim Build kompiliert werden. Es gibt keine Styling-Runtime, keine Registry fürs Streaming und kein Bundler-Flag. Interaktive Komponenten wie ein Dialog beginnen trotzdem mit `"use client"`, und deine Seiten rendern sie genauso aus Server-Komponenten. Bundle-Größen haben wir für diesen Artikel nicht gemessen, also nennen wir keine Kilobytes. Strukturell gilt: Chakra liefert die Runtime von Emotion neben seinen Komponenten aus, die Tailwind-Kits nur die kopierten Dateien plus ihre Primitives.

## Wie verhalten sich Dialoge, Drawer und Toasts auf dem Smartphone?

Chakra und shadcn/ui geben dir die Teile, um ein Smartphone-Layout selbst zu bauen; Wingo UI wechselt unter 768px von selbst zu einem ziehbaren Bottom Sheet. In Chakra nimmt jedes Prop einer Komponente Objekte mit Breakpoints entgegen. Ein Drawer kann also auf dem Smartphone von unten und auf dem Desktop von der Seite kommen. Das ist Chakras eigenes Beispiel, gekürzt:

```tsx
import { Button, CloseButton, Drawer, Portal } from "@chakra-ui/react";

export function Filters() {
  return (
    <Drawer.Root placement={{ mdDown: "bottom", md: "end" }}>
      <Drawer.Trigger asChild>
        <Button variant="outline">Filter</Button>
      </Drawer.Trigger>
      <Portal>
        <Drawer.Backdrop />
        <Drawer.Positioner>
          <Drawer.Content>
            <Drawer.Header>
              <Drawer.Title>Filter</Drawer.Title>
            </Drawer.Header>
            <Drawer.Body>Preis, Zustand und Kategorien</Drawer.Body>
            <Drawer.CloseTrigger asChild>
              <CloseButton size="sm" />
            </Drawer.CloseTrigger>
          </Drawer.Content>
        </Drawer.Positioner>
      </Portal>
    </Drawer.Root>
  );
}
```

Der Dialog funktioniert genauso, mit `size={{ mdDown: "full", md: "lg" }}`. Was fehlt, ist eine Geste: In 3.37.0 baut Chakras Drawer auf dem Dialog-Primitive von Ark UI auf, und in der Doku haben wir keine Option zum Schließen per Ziehen gefunden. Der Drawer unten schließt also über einen Button, Escape oder einen Tipp daneben. Das Toaster-Snippet streckt Toasts unter `md` auf die volle Breite mit 16px Abstand zum Rand und pausiert die Timer, wenn die Seite inaktiv ist.

shadcn/ui hat einen Drawer (in Base-UI-Projekten auf dem Drawer von Base UI, in Radix-Projekten auf Vaul) und dokumentiert ein Rezept, das auf dem Desktop einen Dialog und auf dem Smartphone einen Drawer rendert. Diesen Wechsel schreibst du einmal pro Overlay; unser Artikel dazu, [wie ein shadcn-Dialog auf dem Smartphone funktioniert](https://wingo-ui.com/de/blog/shadcn-responsive-dialog-on-mobile), geht ins Detail.

Wingo UI baut den Wechsel in die Komponente ein. Der [Dialog](https://wingo-ui.com/components/dialog) ist auf dem Desktop eine Karte, die mit einer Spring-Animation hereinskaliert. Unter 768px wird er über sein Prop `responsive` (Standard `true`) zu einem Bottom Sheet mit Safe-Area-Abstand, das du zum Schließen nach unten ziehst:

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { Dialog, DialogClose } from "@/components/ui/dialog";

export function CancelPlan({ saving, onConfirm }: { saving: boolean; onConfirm: () => void }) {
  return (
    <Dialog
      trigger={<Button variant="soft">Tarif kündigen</Button>}
      title="Tarif wirklich kündigen?"
      description="Du behältst den Zugang bis zum Ende des Abrechnungszeitraums."
      footer={
        <>
          <DialogClose asChild>
            <Button variant="soft">Tarif behalten</Button>
          </DialogClose>
          <Button tone="danger" loading={saving} loadingText="Wird gekündigt" onClick={onConfirm}>
            Tarif kündigen
          </Button>
        </>
      }
    />
  );
}
```

> Live-Demo (Dialog): Öffne den Dialog: Auf einem breiten Bildschirm skaliert er als Karte herein, in einem Rahmen mit Smartphone-Breite gleitet er als Sheet hoch, das du zum Schließen nach unten ziehst. Probier sie unter [Dialog](https://wingo-ui.com/components/dialog) aus und installier sie mit `npx wingo-ui@latest add dialog`.

Der [Drawer](https://wingo-ui.com/components/drawer) ist auf dem Smartphone dasselbe Sheet, und sein Prop `desktop` legt fest, was er ab 768px wird: das Sheet mit begrenzter Breite und zentriert, ein Seitenpanel oder ein zentrierter Dialog.

> Live-Demo (Drawer): Tipp auf „Filters“: Auf dem Smartphone gleitet das Sheet hoch und schließt beim Herunterziehen, auf einem breiten Bildschirm öffnet dieselbe Komponente ein Seitenpanel. Probier sie unter [Drawer](https://wingo-ui.com/components/drawer) aus und installier sie mit `npx wingo-ui@latest add drawer`.

Der [Toast](https://wingo-ui.com/components/toast) folgt der API von Sonner. Du bindest einen `Toaster` ein und rufst `toast()` von überall auf; auf dem Smartphone nehmen Toasts die volle Breite mit 16px Rand ein, und du wischst sie weg:

```tsx
// app/providers.tsx
"use client";

import type { ReactNode } from "react";
import { Toaster } from "@/components/ui/toast";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <>
      {children}
      <Toaster richColors mobilePosition="top" />
    </>
  );
}
```

> Live-Demo (Toast): Löse ein paar Toasts aus, fahr mit der Maus über den Stapel oder tipp darauf, um ihn aufzufächern, und wisch dann einen zum Rand, um ihn zu schließen. Probier sie unter [Toast](https://wingo-ui.com/components/toast) aus und installier sie mit `npx wingo-ui@latest add toast`.

In Chakra entspricht das `toaster.success({ title, description, action: { label: "Rückgängig", onClick } })` aus dem Toaster-Snippet. Unser [Vergleich von Toast-Bibliotheken für React](https://wingo-ui.com/de/blog/sonner-alternative-react-toast) vergleicht bei allen Kandidaten Timer, Wischgesten und Barrierefreiheit. In der mittleren Größe wächst der Wingo-UI-Button auf Touchscreens außerdem von 40px auf 44px. So treffen Tipps, ohne dass du eine eigene Mobil-Variante brauchst.

## Wie gut kommen Coding-Agenten mit den drei Bibliotheken zurecht?

Alle drei liefern einen MCP-Server, aber sie beantworten unterschiedliche Fragen. Chakras MCP-Server (`npx -y @chakra-ui/react-mcp`, angekündigt am 30. Juli 2025) beantwortet Fragen zu Props, Beispielen, Tokens und zur Migration von v2 auf v3, und npm installiert das Paket. Der MCP-Server von shadcn durchsucht Einträge aus jeder Registry in `components.json` und installiert sie. Der Server von Wingo UI liefert Props mit Standardwerten, Design-Regeln und Theme-Tokens und prüft installierte Versionen auf Updates, und `npx wingo-ui@latest agents install` schreibt Regeldateien für Claude Code, Codex, Gemini CLI, Grok und Cursor.

Für KI-Agenten zählt vor allem, wo der Code liegt. Bei einem Paket scheitert ein geratenes Prop an der Typprüfung, und der Agent korrigiert es. Bei kopiertem Code kann der Agent auch die Komponenten-Datei selbst bearbeiten. Er braucht also die echten Props und deine Regeln, bevor er loslegt.

## Wann ist Chakra UI die bessere Wahl?

In diesen Fällen ist Chakra die bessere Wahl, und wir würden es selbst nehmen:

- **Dein Team mag Style Props.** Fühlt sich `p={{ base: "4", md: "6" }}` natürlich an und Tailwinds Klassen-Strings nicht, ist Chakra die vollständigste Bibliothek, die um diese Idee herum gebaut ist.
- **Du willst typisierte Tokens und Recipes.** `createSystem`, semantische Tokens und `typegen` geben dir ein Design System, das der Compiler prüft.
- **Du willst die Komponenten nicht selbst pflegen.** Bugfixes und Fixes für die Barrierefreiheit kommen mit `npm update`, und dein Diff bleibt klein.
- **Du nutzt schon Chakra v2.** Der Umstieg auf v3 innerhalb von Chakra, mit dem offiziellen Migrations-Guide und der Migrationshilfe des MCP-Servers, ist weniger Arbeit, als jeden Screen in Tailwind neu zu schreiben.
- **Du nutzt Turbopack sowieso nicht.** Der Hinweis zur Hydration in Chakras Guide betrifft Turbopack. Eine Vite-App oder eine Next.js-App, die schon mit webpack baut, verliert also nichts.

## Chakra UI v3 vs shadcn: Was solltest du nehmen?

- **Eine Next.js-16-App auf Turbopack, gestylt mit Tailwind:** shadcn/ui. Kein Bundler-Flag, keine Styling-Runtime, und der Code gehört dir.
- **Ein Produktteam, das Props lieber mag als Klassen und ein typisiertes Theme will:** Chakra UI.
- **Eine Web-App, die auf Smartphones so oft genutzt wird wie auf dem Desktop:** Wingo UI, allein oder neben shadcn/ui, weil seine Overlays zu ziehbaren Sheets werden und seine Bedienelemente auf Touchscreens 44px große Touch-Ziele bekommen, ohne ein Rezept pro Screen.
- **Ein internes Tool mit aufwendigen Data Grids:** Keine der beiden passt hier am besten; unser [Vergleich shadcn vs MUI](https://wingo-ui.com/de/blog/shadcn-vs-mui) behandelt das MUI X Data Grid und seine Alternativen.
- **Ein Design System, das dir komplett gehört:** shadcn/ui, oder direkt seine Primitives (Base UI, Radix oder React Aria).

Weitere direkte Vergleiche findest du unter [Vergleiche und Alternativen](https://wingo-ui.com/de/blog/category/comparisons).

Am schnellsten klärst du shadcn vs Chakra UI für deine App, wenn du ein Overlay auf deinem eigenen Smartphone öffnest. Installier den kostenlosen Dialog mit `npx wingo-ui@latest add dialog`, render ihn neben deinem Dialog aus Chakra oder shadcn/ui und vergleich beide bei 390px.

## Komponenten in diesem Artikel

- [Button](https://wingo-ui.com/components/button) (Free): The React button component every screen starts with: five variants, six tones, all sizes, and a loading state that never jumps. Installation: `npx wingo-ui@latest add button`
- [Dialog](https://wingo-ui.com/components/dialog) (Free): A React modal dialog for focused tasks: a spring-scaled card on desktop and a bottom sheet on phones, with nesting and scrolling. Installation: `npx wingo-ui@latest add dialog`
- [Toast](https://wingo-ui.com/components/toast) (Free): React toast notifications: mount one Toaster and call toast() from anywhere, with stacking, swipe to dismiss and a pause while you read. Installation: `npx wingo-ui@latest add toast`
- [Drawer](https://wingo-ui.com/components/drawer) (Free): A React drawer and bottom sheet built on vaul: drag to dismiss, snap points, nesting, and a side panel or dialog on desktop. Installation: `npx wingo-ui@latest add drawer`

## Häufige Fragen

### Ist Chakra UI besser als shadcn/ui?

Keine der beiden gewinnt überall. Chakra UI gibt dir Style Props, ein typisiertes Theme und Updates über npm; shadcn/ui gibt dir Tailwind CSS und Quelldateien, die du Zeile für Zeile ändern kannst, ganz ohne Styling-Runtime.

### Kann ich Chakra UI mit Tailwind CSS nutzen?

Du kannst beides installieren, betreibst dann aber zwei Styling-Systeme: Chakra stylt über Style Props und Emotion, Tailwind über Utility-Klassen. Ist Tailwind dein Hauptwerkzeug, ist ein Tailwind-natives Kit wie shadcn/ui oder Wingo UI die einfachere Chakra UI Alternative.

### Funktioniert Chakra UI v3 mit dem Next.js App Router?

Ja. Laut Chakras Guide funktioniert es mit Next.js 15 und 16, Stand Oktober 2026 sollst du aber --webpack in die Skripte dev und build schreiben, weil Turbopack das CSS von Emotion falsch hydriert.

### Funktionieren Chakra-UI-Komponenten in React Server Components?

Du kannst sie aus einer Server-Komponente rendern, ohne 'use client' hinzuzufügen, weil das Paket seine eigenen Dateien als Client-Komponenten markiert. Dateien, die chakra() aufrufen, Chakra-Hooks nutzen oder Render Props verwenden, brauchen die Direktive trotzdem.

### Ist Chakra UI kostenlos?

Ja, @chakra-ui/react steht unter der MIT-Lizenz. Chakra UI Pro verkauft fertige Blocks für v3, einmalig $299 für eine Person oder $899 für ein Team (Stand 16. Oktober 2026).

---

Quelle: https://wingo-ui.com/de/blog/chakra-ui-vs-shadcn