Chakra UI vs shadcn 2026: Style Props oder Tailwind?

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 (opens in a new tab) und aus der npm-Registry, die zu shadcn/ui von ui.shadcn.com (opens in a new tab), 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.

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

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:

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:

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 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:

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 von Wingo UI bekommt sein Aussehen über Props:

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:

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:

: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:

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 (opens in a new tab) 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 (opens in a new tab) 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:

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, geht ins Detail.

Wingo UI baut den Wechsel in die Komponente ein. Der 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:

"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>
        </>
      }
    />
  );
}

Der 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.

Der 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:

// 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" />
    </>
  );
}

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 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 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.

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.

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).