Komponenten-Preview

Alle UI-Primitives im Überblick

Jede Kachel erklärt die Aufgabe der Komponente und zeigt einen Copy-&-Paste-Codeausschnitt für die Einbindung in andere Projekte.

Accordion VR Vorschau

Demonstriert das mehrstufige Akkordeon mit vollständig übersetzten Texten.

Szene öffnen →

Das Akkordeon bündelt FAQs oder Abschnitte hinter Triggern und sorgt für ruhige Layouts im XR-Panel.

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/app/components/default/accordion";

export function FaqAccordion() {
  return (
    <Accordion>
      <AccordionItem value="ein">
        <AccordionTrigger>Frage?</AccordionTrigger>
        <AccordionContent>Antwort.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Alert Dialog Vorschau

Zeigt den deutschen Bestätigungsdialog inklusive Trigger, Inhalt und Aktionen.

Szene öffnen →

Der Alert Dialog öffnet ein modales Panel über DialogAnchor, ideal für irreversible Aktionen.

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from "@/app/components/default/alert-dialog";
import { Button } from "@/app/components/default/button";

export function DangerPrompt() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>
        <Button variant="destructive">Löschen</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Alles löschen?</AlertDialogTitle>
          <AlertDialogDescription>
            Dies kann nicht rückgängig gemacht werden.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Abbrechen</AlertDialogCancel>
          <AlertDialogAction>Bestätigen</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Alert Vorschau

Präsentiert die Hinweis-Komponente mit Icon, Titel und Beschreibung.

Szene öffnen →

Alerts markieren Statusmeldungen wie Erfolg oder Fehler und lassen sich über Varianten einfärben.

import {
  Alert,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from "@/app/components/default/alert";
import { Text } from "@react-three/uikit";
import { Terminal } from "@react-three/uikit-lucide";

export function InfoAlert() {
  return (
    <Alert>
      <AlertIcon>
        <Terminal width={16} height={16} />
      </AlertIcon>
      <AlertTitle>
        <Text>Hinweis</Text>
      </AlertTitle>
      <AlertDescription>
        <Text>Import erfolgreich abgeschlossen.</Text>
      </AlertDescription>
    </Alert>
  );
}

Avatar Vorschau

Zeigt runde Profilbilder mit Beispieltext für Namen und Rollen.

Szene öffnen →

Avatare zeigen Benutzerfotos im quadratischen oder runden Format und sichern konsistente Größen.

import { Avatar } from "@/app/components/default/avatar";
import { Container, Text } from "@react-three/uikit";

export function ProfileBadge() {
  return (
    <Container flexDirection="row" gap={8} alignItems="center">
      <Avatar src="https://picsum.photos/200" />
      <Text>Andrea Schneider</Text>
    </Container>
  );
}

Badge Vorschau

Stellt alle Abzeichen-Varianten für Statusanzeigen dar.

Szene öffnen →

Badges visualisieren Stati wie Neu, Beta oder Warnung und besitzen Hover-Zustände pro Variante.

import { Badge } from "@/app/components/default/badge";

export function StatusRow() {
  return (
    <>
      <Badge>Neu</Badge>
      <Badge variant="secondary">Bald</Badge>
      <Badge variant="destructive">Warnung</Badge>
    </>
  );
}

Button Vorschau

Vergleicht mehrere Schaltflächenvarianten und -größen.

Szene öffnen →

Buttons basieren auf Container + DefaultProperties und bieten Varianten, Größen sowie Hover-Styles.

import { Button } from "@/app/components/default/button";
import { Text } from "@react-three/uikit";

export function Actions() {
  return (
    <>
      <Button>
        <Text>Speichern</Text>
      </Button>
      <Button variant="secondary">
        <Text>Entwurf</Text>
      </Button>
      <Button variant="outline">
        <Text>Abbrechen</Text>
      </Button>
    </>
  );
}

Card Vorschau

Zeigt das Benachrichtigungskarten-Layout mit übersetzten Inhalten.

Szene öffnen →

Cards gruppieren Inhalte in Header, Content und Footer – perfekt für Dashboards.

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/app/components/default/card";
import { Text } from "@react-three/uikit";
import { Button } from "@/app/components/default/button";

export function NotificationsCard() {
  return (
    <Card width={360}>
      <CardHeader>
        <CardTitle>
          <Text>Benachrichtigungen</Text>
        </CardTitle>
        <CardDescription>
          <Text>3 neue Updates</Text>
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Text>Alle Details hier...</Text>
      </CardContent>
      <CardFooter>
        <Button>
          <Text>Alles gelesen</Text>
        </Button>
      </CardFooter>
    </Card>
  );
}

Checkbox Vorschau

Veranschaulicht auswählbare Kontrollkästchen mit Beschriftungen.

Szene öffnen →

Checkboxes liefern gesteuerte/ungesteuerte Zustände und geben Änderungen über Callbacks zurück.

import { Checkbox } from "@/app/components/default/checkbox";
import { Container, Text } from "@react-three/uikit";

export function NewsletterOptIn() {
  return (
    <Container flexDirection="row" gap={8} alignItems="center">
      <Checkbox defaultChecked />
      <Text>Updates per Mail erhalten</Text>
    </Container>
  );
}

Dialog Vorschau

Demonstriert den generischen Dialog mit Trigger, Inhalt und Aktionen.

Szene öffnen →

Dialoge rendern über den Anchor außerhalb des normalen Layouts und fallen zurück auf XR-Overlays.

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/app/components/default/dialog";
import { Button } from "@/app/components/default/button";

export function SettingsDialog() {
  return (
    <Dialog>
      <DialogTrigger>
        <Button>Dialog öffnen</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Einstellungen</DialogTitle>
          <DialogDescription>Passt Layout und Farben an.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="secondary">Schließen</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Label Vorschau

Zeigt Formularettiketten mit einem Beispiel-Eingabefeld.

Szene öffnen →

Labels sind DefaultProperties, die Textstyle und Disabled-State an Inputs koppeln.

import { Label } from "@/app/components/default/label";
import { Container, Text } from "@react-three/uikit";

export function FieldLabel() {
  return (
    <Container gap={4}>
      <Label>Projektname</Label>
      <Container borderWidth={1} borderRadius={8} padding={6}>
        <Text>XR Toolbox</Text>
      </Container>
    </Container>
  );
}

Pagination Vorschau

Veranschaulicht Navigationspfeile und Seitenlinks auf Deutsch.

Szene öffnen →

Pagination Links lassen sich aktiv/inaktiv stylen und per Icon-Buttons erweitern.

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
} from "@/app/components/default/pagination";

export function Pager() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink isActive>1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Progress Vorschau

Visualisiert Fortschrittsbalken in unterschiedlichen Werten.

Szene öffnen →

Progressbar nimmt Prozent oder Signals entgegen und animiert Breite über Container.

import { Progress } from "@/app/components/default/progress";
import { Container, Text } from "@react-three/uikit";

export function UploadStatus() {
  return (
    <Container gap={4}>
      <Text>Upload</Text>
      <Progress value={64} />
    </Container>
  );
}

Radio Group Vorschau

Zeigt auswählbare Radiofelder mit deutschen Optionen.

Szene öffnen →

Radio Group verwaltet Auswahl intern oder kontrolliert und reicht Klicks nach außen durch.

import {
  RadioGroup,
  RadioGroupItem,
} from "@/app/components/default/radio-group";
import { Container, Text } from "@react-three/uikit";

export function ShippingOptions() {
  return (
    <RadioGroup defaultValue="standard">
      <Container flexDirection="row" gap={8}>
        <RadioGroupItem value="standard" />
        <Text>Standard</Text>
      </Container>
      <Container flexDirection="row" gap={8}>
        <RadioGroupItem value="express" />
        <Text>Express</Text>
      </Container>
    </RadioGroup>
  );
}

Separator Vorschau

Stellt horizontale und vertikale Trennlinien dar.

Szene öffnen →

Separatoren nutzen Container und lassen sich vertikal/horizontal konfigurieren.

import { Separator } from "@/app/components/default/separator";
import { Container, Text } from "@react-three/uikit";

export function SectionSplit() {
  return (
    <Container gap={8}>
      <Text>Intro</Text>
      <Separator />
      <Text>Details</Text>
    </Container>
  );
}

Skeleton Vorschau

Präsentiert animierte Platzhalter zur Ladeanzeige.

Szene öffnen →

Skeletons animieren per useFrame zwischen 0.5 und 1 Opacity und passen sich beliebiger Größe an.

import { Skeleton } from "@/app/components/default/skeleton";
import { Container } from "@react-three/uikit";

export function LoadingCard() {
  return (
    <Container gap={8}>
      <Skeleton height={32} width="80%" />
      <Skeleton height={18} width="60%" />
    </Container>
  );
}

Slider Vorschau

Erlaubt das Verschieben eines Reglers inklusive numerischem Wert.

Szene öffnen →

Slider arbeitet mit Pointer Events und Signalen, Unterstützt min/max/step und controlled state.

import { Slider } from "@/app/components/default/slider";
import { Container, Text } from "@react-three/uikit";
import { useState } from "react";

export function VolumeControl() {
  const [value, setValue] = useState(40);
  return (
    <Container gap={8}>
      <Text>Lautstärke: {value}%</Text>
      <Slider value={value} onValueChange={setValue} />
    </Container>
  );
}

Switch Vorschau

Zeigt Umschalter mit aktivem und inaktivem Zustand.

Szene öffnen →

Switches kombinieren Container + Cursor Handling und können controlled oder uncontrolled sein.

import { Switch } from "@/app/components/default/switch";
import { Container, Text } from "@react-three/uikit";

export function LiveToggle() {
  return (
    <Container flexDirection="row" gap={8} alignItems="center">
      <Switch defaultChecked />
      <Text>Live-Modus</Text>
    </Container>
  );
}

Tabs Vorschau

Präsentiert Registerkarten mit passendem Inhalt.

Szene öffnen →

Tabs kapseln Zustand via Kontext und rendern Content nur für die aktive ID.

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@/app/components/default/tabs";
import { Text } from "@react-three/uikit";

export function SettingsTabs() {
  return (
    <Tabs defaultValue="profil">
      <TabsList>
        <TabsTrigger value="profil">Profil</TabsTrigger>
        <TabsTrigger value="team">Team</TabsTrigger>
      </TabsList>
      <TabsContent value="profil">
        <Text>Profilinformationen bearbeiten</Text>
      </TabsContent>
      <TabsContent value="team">
        <Text>Teamrollen verwalten</Text>
      </TabsContent>
    </Tabs>
  );
}

Theme Vorschau

Zeigt die Grundfarben des UI-Themes als kleine Swatches.

Szene öffnen →

Das Theme exportiert HSL-basierte Farben für Light/Dark Mode plus Defaults Wrapper.

import { colors, Defaults } from "@/app/components/default/theme";
import { Container } from "@react-three/uikit";

export function ThemeSwatches() {
  return (
    <Defaults>
      <Container backgroundColor={colors.background} />
    </Defaults>
  );
}

Toggle Group Vorschau

Demonstriert gruppierte Schalter zur Mehrfachauswahl verschiedener Stile.

Szene öffnen →

ToggleGroup verteilt Size/Variant via Kontext und verwaltet mehrere ToggleItems.

import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/app/components/default/toggle-group";

export function TextFormatting() {
  return (
    <ToggleGroup>
      <ToggleGroupItem defaultChecked>Fett</ToggleGroupItem>
      <ToggleGroupItem>Kursiv</ToggleGroupItem>
      <ToggleGroupItem>Unterstrichen</ToggleGroupItem>
    </ToggleGroup>
  );
}

Toggle Vorschau

Zeigt einzelne Toggle-Buttons in unterschiedlichen Varianten.

Szene öffnen →

Toggle ist der Einzelbutton – ebenfalls mit Varianten & Größen kombinierbar.

import { Toggle } from "@/app/components/default/toggle";

export function ModeToggle() {
  return <Toggle defaultChecked>Aktiv</Toggle>;
}

Tooltip Vorschau

Demonstriert Trigger mit schwebendem Hinweistext.

Szene öffnen →

Tooltip verhindert Pointer Events im Container und öffnet Content nach Delay.

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/app/components/default/tooltip";
import { Button } from "@/app/components/default/button";

export function InfoTooltip() {
  return (
    <Tooltip>
      <TooltipTrigger>
        <Button variant="ghost">?</Button>
      </TooltipTrigger>
      <TooltipContent>Kontextinfo</TooltipContent>
    </Tooltip>
  );
}