104Los geht’s

Avatar: HextaUI und shadcn/ui

Avatar von HextaUI behält die Namen und Theme-Tokens von shadcn/ui und wird mit derselben CLI installiert. Diese Seite listet die Unterschiede auf, aus dem Code beider gelesen. Die shadcn/ui-Seite ist das base-vega-Registry mit Stand 2026-10-16.

Auf einen Blick

KennzahlHextaUIshadcn/ui
Exportierte Teile66
Props, die der Wrapper verarbeitet111
Codezeilen432108
npm-Abhängigkeiten@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycncn
Aufgebaut austheme–

Mehr Code ist für sich genommen nicht besser. Die meisten zusätzlichen Zeilen in HextaUI behandeln Zustände, Bewegung und Randfälle, die du sonst selbst schreiben würdest.

Varianten

PropIn beidenNur HextaUINur shadcn/ui
shapeAvatar–circlesquare–
statusAvatarBadge–noneonlineawaybusyoffline–
sizeAvatarGroup–xssmdefaultlgxl–

Die HextaUI-Version

ALGH
ALATGH2 more
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from "@/components/ui/avatar"

export function AvatarDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-8">
      <Avatar size="xl">
        <AvatarImage src="/preview/landscape.svg" alt="" />
        <AvatarFallback>AL</AvatarFallback>
        <AvatarBadge status="online" />
      </Avatar>
      <Avatar size="xl" shape="square">
        <AvatarFallback>GH</AvatarFallback>
      </Avatar>
      <AvatarGroup size="lg" max={4}>
        <Avatar>
          <AvatarImage src="/preview/landscape.svg" alt="" />
          <AvatarFallback>AL</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>AT</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>GH</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>KJ</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>LT</AvatarFallback>
        </Avatar>
      </AvatarGroup>
    </div>
  )
}

Alle Zustände, die Tastaturbelegung und die API-Referenz stehen auf der Komponentenseite.

8 seiner Beispiele haben auch eine eigene Seite.

Eine Komponente wechseln

Führe den add-Befehl mit --overwrite aus, um die shadcn/ui-Datei in @/components/ui zu ersetzen, und prüfe den Diff in git, bevor du ihn behältst. Die Imports bleiben gleich, und Komponenten, die du nicht ersetzt, funktionieren weiter.

pnpm dlx shadcn@latest add https://hextaui.com/r/avatar.json --overwrite
  • Jede Prop in der Tabelle oben ist neu, daher übergeben Aufrufe, die für shadcn/ui geschrieben wurden, sie noch nicht.
  • Prüfe vor dem Wechsel jeden Teil und jede Variante, die nur bei shadcn/ui steht, und ordne sie dem nächsten HextaUI-Gegenstück zu.

Weitere verglichene Komponenten

Weitere Vergleiche