Collection of Components

A complete set of ready-to-use UI components built for SXO . Every piece works perfectly with Tailwind CSS and meets accessibility standards.

Technology Stack

What You'll Find

Complete component implementations
Interactive examples and demos
Accessibility-focused design patterns
Copy-paste ready code snippets and installation

Installation

Dependencies

Install the core dependencies for SXO and Reactive Component. SXO provides the JSX transformation and server-side rendering capabilities, while Reactive Component enables client-side interactivity through the islands architecture pattern.

pnpm add sxo @qery/reactive-component

npm install sxo @qery/reactive-component

yarn add sxo @qery/reactive-component

bun add sxo @qery/reactive-component

DevDependencies

Install Tailwind CSS and its CLI as development dependencies. The CLI is used to process your stylesheets and generate the final CSS output with all the utility classes used in your components.

pnpm add -D tailwindcss @tailwindcss/cli basecoat-css@0.3.3

npm install -D tailwindcss @tailwindcss/cli basecoat-css@0.3.3

yarn add -D tailwindcss @tailwindcss/cli basecoat-css@0.3.3

bun add -D tailwindcss @tailwindcss/cli basecoat-css@0.3.3

After installing the dependencies, import Tailwind and Basecoat CSS into your main stylesheet:

@import "tailwindcss";
@import "basecoat-css";

Components

Run the following command from your project root to install a component and its associated assets (styles, JSX components, and the client script).

pnpx sxo add <component>

npx sxo add <component>

yarn sxo add <component>

bunx sxo add <component>

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

Is it styled?

Yes. It comes styled to match the rest of the components.

Is it animated?

Yes. It's animated by default.

<Accordion type="single">
    <AccordionItem>
        <AccordionHeader>Is it accessible?</AccordionHeader>
        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
    </AccordionItem>
    <AccordionItem>
        <AccordionHeader>Is it styled?</AccordionHeader>
        <AccordionContent>Yes. It comes styled to match the rest of the components.</AccordionContent>
    </AccordionItem>
    <AccordionItem>
        <AccordionHeader>Is it animated?</AccordionHeader>
        <AccordionContent>Yes. It's animated by default.</AccordionContent>
    </AccordionItem>
</Accordion>

Usage

Use the following primitives to build an accordion:

<Accordion>: Root container that configures behavior via the type prop ( single or multiple).
<AccordionItem>: Wrap each item. Renders a native details element. Add the open attribute to default an item as expanded.
<AccordionHeader>: Clickable header. Renders a summary with a heading and optional chevron icon; hide the icon with hideIcon.
<AccordionContent>: Panel content. Renders a section by default; override the element with the as prop.

Installation

pnpx sxo add accordion

npx sxo add accordion

yarn sxo add accordion

bunx --bun sxo add accordion

Alert

Displays a callout for user attention.

This is an alert with only a title.

This is an alert with icon, description and no title.

Alert Title

This is an alert with both a title and a description.

This one has a description only. No title. No icon.

Success! Your changes have been saved

This is an alert with icon, title and description.

Something went wrong!

Please verify your billing information and try again.

Check your card details
Ensure sufficient funds
Verify billing address

Plot Twist: This Alert is Actually Amber!

This one has custom colors for light and dark mode.

<div class="grid gap-3">
    {/* Case 1: Title only */}
    <Alert>
        <AlertTitle level={3}>This is an alert with only a title.</AlertTitle>
    </Alert>

    {/* Case 2: Icon and description, no title */}
    <Alert>
        <IconGift />
        <AlertDescription>
            <p>This is an alert with icon, description and no title.</p>
        </AlertDescription>
    </Alert>

    {/* Case 3: Icon, title, and description */}
    <Alert>
        <IconShieldExclamation />
        <AlertTitle level={3}>Alert Title</AlertTitle>
        <AlertDescription>
            <p class="text-muted-foreground">This is an alert with both a title and a description.</p>
        </AlertDescription>
    </Alert>

    {/* Case 4: Description only with custom sky blue styling */}
    <Alert className="bg-sky-50 border-sky-500 text-sky-700 dark:bg-sky-900 dark:border-sky-700 dark:text-sky-50">
        <AlertDescription>
            <p>This one has a description only. No title. No icon.</p>
        </AlertDescription>
    </Alert>

    {/* Case 5: Success state with green styling, icon, title, and description */}
    <Alert class="bg-green-50 border-green-500 text-green-700 dark:bg-green-900 dark:border-green-700 dark:text-green-50">
        <IconCircleCheck />
        <AlertTitle level={3}>Success! Your changes have been saved</AlertTitle>
        <AlertDescription>
            <p class="text-green-900 dark:text-green-50">This is an alert with icon, title and description.</p>
        </AlertDescription>
    </Alert>

    {/* Case 6: Error state with red styling, icon, title, and complex description with list */}
    <Alert className="bg-red-50 border-red-500 text-red-700 dark:bg-red-900 dark:border-red-700 dark:text-red-50">
        <IconCircleExclamation />
        <AlertTitle level={3}>Something went wrong!</AlertTitle>
        <AlertDescription class="text-red-900 dark:text-red-50">
            <p>Please verify your billing information and try again.</p>
            <ul class="list-disc list-inside">
                <li>Check your card details</li>
                <li>Ensure sufficient funds</li>
                <li>Verify billing address</li>
            </ul>
        </AlertDescription>
    </Alert>

    {/* Case 7: Warning state with amber styling and dark mode support */}
    <Alert className="bg-amber-50 border-amber-500 text-amber-700 dark:bg-amber-900 dark:border-amber-700 dark:text-amber-50">
        <IconShieldExclamation />
        <AlertTitle level={3}>Plot Twist: This Alert is Actually Amber!</AlertTitle>
        <AlertDescription>
            <p class="text-amber-900 dark:text-amber-50">This one has custom colors for light and dark mode.</p>
        </AlertDescription>
    </Alert>
</div>

Usage

Use the following primitives to build an alert:

Alert: The main container for the alert message, supporting optional className for styling.
AlertTitle: Displays the title of the alert, with a level prop for semantic heading.
AlertDescription: Contains the description text, which can include paragraphs, lists, etc.
Icon components: Optional icons like IconCircleCheck, IconCircleExclamation, etc., placed before the title or description for visual emphasis.

Installation

pnpx sxo add alert

npx sxo add alert

yarn sxo add alert

bunx --bun sxo add alert

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

<AlertDialog>
    <AlertDialogTrigger variant="outline">Open dialog</AlertDialogTrigger>
    <AlertDialogWindow>
        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
        <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your account and remove your data from our servers.
        </AlertDialogDescription>
        <AlertDialogFooter>
            <Button variant="outline" $onclick="closeDialog">
                Cancel
            </Button>
            <Button>Continue</Button>
        </AlertDialogFooter>
    </AlertDialogWindow>
</AlertDialog>

Usage

Use the following primitives to build an alert dialog:

<AlertDialog>: The root container for the alert dialog.
<AlertDialogTrigger>: A button that opens the dialog.
<AlertDialogWindow>: The modal window containing the dialog content.
<AlertDialogTitle>: The title of the dialog.
<AlertDialogDescription>: The description text explaining the action.
<AlertDialogFooter>: The footer with action buttons.

Installation

pnpx sxo add alert-dialog

npx sxo add alert-dialog

yarn sxo add alert-dialog

bunx --bun sxo add alert-dialog

Avatar

An image element with a fallback for representing the user.

ALCN

<div class="flex items-center gap-3">
    {/* Case 1: Avatar with image */}
    <Avatar src="https://github.com/hunvreus.png" srcset="https://github.com/hunvreus.png" alt="C Newton" size="lg" />
    {/* Case 2: Avatar with name fallback */}
    <Avatar name="Ada Lovelace" />
    {/* Case 3: Avatar with initials and shape */}
    <Avatar initials="CN" shape="rounded" />
    {/* Case 4: AvatarGroup with hover spread */}
    <AvatarGroup hoverSpread={true}>
        <Avatar src="https://github.com/hunvreus.png" srcset="https://github.com/hunvreus.png" alt="A" size="sm" />
        <Avatar src="https://github.com/shadcn.png" srcset="https://github.com/shadcn.png" alt="B" size="sm" />
        <Avatar src="https://github.com/adamwathan.png" srcset="https://github.com/adamwathan.png" alt="C" size="sm" />
        <Avatar initials="XY" size="sm" />
    </AvatarGroup>
</div>

Usage

Use the following primitives to build an example:

<Avatar>: Displays a user image or fallback initials/name. Supports src, name, initials, size, and shape props.
<AvatarGroup>: Groups multiple avatars with optional hover spread using hoverSpread prop.

Installation

pnpx sxo add avatar

npx sxo add avatar

yarn sxo add avatar

bunx --bun sxo add avatar

Badge

Displays a badge or a component that looks like a badge.

PrimarySecondaryOutlineDestructive899+

<div class="flex flex-wrap items-center gap-2">
    <Badge>Primary</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="outline">
        <IconArrowRight aria-hidden="true" />
    </Badge>
    <Badge variant="destructive">Destructive</Badge>
    <Badge pill count={8} aria-label="8 notifications" />
    <Badge pill count="99+" aria-label="99+ notifications" />
</div>

Usage

Use the following primitive to build badges:

<Badge>: Displays status indicators, labels, or counts with variants (primary, secondary, outline, destructive) and a pill variant for numeric indicators.

Installation

pnpx sxo add badge

npx sxo add badge

yarn sxo add badge

bunx --bun sxo add badge

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

<Breadcrumb>
    <BreadcrumbList>
        <BreadcrumbItem>
            <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
            <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
    </BreadcrumbList>
</Breadcrumb>

Usage

Use the following primitives to build breadcrumbs:

<Breadcrumb>: The root component for breadcrumbs.
<BreadcrumbList>: Contains the breadcrumb items.
<BreadcrumbItem>: Individual breadcrumb item.
<BreadcrumbLink>: Link for navigable breadcrumb items.
<BreadcrumbPage>: Text for the current page.
<BreadcrumbSeparator>: Separator between items.

Installation

Button

Displays a button or a component that looks like a button.

Large

Default

With Icons (Default)

With Icons (Small)

Small

Icon Only

{/* Case 1: Large size variants */}
<div>
    <h3 class="mb-4 text-md font-medium">Large</h3>
    <div class="flex flex-wrap items-center gap-2">
        <Button size="lg">Primary</Button>
        <Button size="lg" variant="outline">
            Outline
        </Button>
        <Button size="lg" variant="ghost">
            Ghost
        </Button>
        <Button size="lg" variant="destructive">
            Danger
        </Button>
        <Button size="lg" variant="secondary">
            Secondary
        </Button>
        <Button size="lg" variant="link">
            Link
        </Button>
    </div>
</div>

{/* Case 2: Default size variants */}
<div>
    <h3 class="mb-4 text-md font-medium">Default</h3>
    <div class="flex flex-wrap items-center gap-2">
        <Button>Primary</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="destructive">Danger</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="link">Link</Button>
    </div>
</div>

{/* Case 3: With icons (default size) */}
<div>
    <h3 class="mb-4 text-md font-medium">With Icons (Default)</h3>
    <div class="flex flex-wrap items-center gap-2">
        <Button variant="outline">
            <IconSend />
            Send
        </Button>
        <Button variant="outline">
            Learn more
            <IconArrowRight />
        </Button>
        <Button loadingText="Loading…" variant="outline">
            <IconSpinner class="animate-spin" />
        </Button>
        <Button aria-label="More options" variant="ghost">
            <IconDotsHorizontal />
        </Button>
    </div>
</div>

{/* Case 4: With icons (small size) */}
<div>
    <h3 class="mb-4 text-md font-medium">With Icons (Small)</h3>
    <div class="flex flex-wrap items-center gap-2">
        <Button size="sm" variant="outline">
            <IconSend />
            Send
        </Button>
        <Button size="sm" variant="outline">
            Learn more
            <IconArrowRight />
        </Button>
        <Button size="sm" loadingText="Loading…" variant="outline">
            <IconSpinner class="animate-spin" />
        </Button>
        <Button size="sm" aria-label="More options" variant="ghost">
            <IconDotsHorizontal />
        </Button>
    </div>
</div>

{/* Case 5: Small size variants */}
<div>
    <h3 class="mb-4 text-md font-medium">Small</h3>
    <div class="flex flex-wrap items-center gap-2">
        <Button size="sm">Primary</Button>
        <Button size="sm" variant="outline">
            Outline
        </Button>
        <Button size="sm" variant="ghost">
            Ghost
        </Button>
        <Button size="sm" variant="destructive">
            Danger
        </Button>
        <Button size="sm" variant="secondary">
            Secondary
        </Button>
        <Button size="sm" variant="link">
            Link
        </Button>
    </div>
</div>

{/* Case 6: Icon only buttons */}
<div>
    <h3 class="mb-4 text-md font-medium">Icon Only</h3>
    <div class="flex flex-wrap items-center gap-2">
        <Button aria-label="Send message">
            <IconSend />
        </Button>
        <Button variant="outline" aria-label="More options">
            <IconDotsHorizontal />
        </Button>
        <Button variant="ghost" aria-label="Gift">
            <IconGift />
        </Button>
        <Button variant="destructive" aria-label="Shield warning">
            <IconShieldExclamation />
        </Button>
        <Button variant="secondary" aria-label="Check circle">
            <IconCircleCheck />
        </Button>
        <Button size="sm" aria-label="Arrow right">
            <IconArrowRight />
        </Button>
        <Button size="sm" variant="outline" aria-label="Loading">
            <IconSpinner class="animate-spin" />
        </Button>
        <Button size="sm" variant="ghost" aria-label="Circle exclamation">
            <IconCircleExclamation />
        </Button>
    </div>
</div>

Usage

Use the following primitives to build buttons:

<Button>: The button component with variants (primary, outline, ghost, destructive, secondary, link), sizes (lg, default, sm), and support for icons and loading states.

Installation

pnpx sxo add button

npx sxo add button

yarn sxo add button

bunx --bun sxo add button

Card

Displays a card with header, content, and footer.

Login to your account

Enter your details below to login to your account

Is this an image?

This is a card with an image.

A modern house with large windows and contemporary architecture

<div class="grid gap-6 md:grid-cols-2">
    {/* Case 1: Login card */}
    <Card class="card">
        <CardHeader>
            <CardHeaderTitle level={2}>Login to your account</CardHeaderTitle>
            <CardHeaderDescription>Enter your details below to login to your account</CardHeaderDescription>
        </CardHeader>
        <CardSection>
            <form class="form grid gap-6">
                <div class="grid gap-2">
                    <label for="email1">Email</label>
                    <input id="email1" class="input" type="email" placeholder="you@example.com" />
                </div>
                <div class="grid gap-2">
                    <label for="pass1">Password</label>
                    <input id="pass1" class="input" type="password" placeholder="••••••••" />
                </div>
                <div class="flex items-center justify-between">
                    <label class="label gap-3">
                        <input class="input" type="checkbox" />
                        <span>Remember me</span>
                    </label>
                    <span class="text-sm underline opacity-80" aria-disabled="true">
                        Forgot your password?
                    </span>
                </div>
            </form>
        </CardSection>
        <CardFooter class="flex flex-col gap-2">
            <Button type="submit" class="w-full">
                Login
            </Button>
            <Button variant="outline" type="button" class="w-full">
                Login with Google
            </Button>
        </CardFooter>
    </Card>

    {/* Case 2: Image card */}
    <Card class="card">
        <CardHeader>
            <CardHeaderTitle level={2}>Is this an image?</CardHeaderTitle>
            <CardHeaderDescription>This is a card with an image.</CardHeaderDescription>
        </CardHeader>
        <CardSection class="px-0">
            <img
                alt="A modern house with large windows and contemporary architecture"
                loading="lazy"
                class="aspect-video object-cover"
                src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75"
                style="color: transparent" />
        </CardSection>
        <CardFooter class="flex items-center gap-2">
            <Badge variant="outline">
                <svg
                    aria-hidden="true"
                    class="h-3 w-3 -translate-x-1 animate-pulse fill-green-300 text-green-300"
                    fill="currentColor"
                    viewBox="0 0 8 8"
                >
                    <circle cx={4} cy={4} r={3} />
                </svg>
                Live
            </Badge>
            <p class="text-xs text-muted-foreground">Built with SXO and Tailwind CSS</p>
        </CardFooter>
    </Card>
</div>

Usage

Use the following primitives to build cards:

<Card>: The root card component.
<CardHeader>: The header section of the card.
<CardHeaderTitle>: The title in the header.
<CardHeaderDescription>: The description in the header.
<CardSection>: The main content section.
<CardFooter>: The footer section.

Installation

pnpx sxo add card

npx sxo add card

yarn sxo add card

bunx --bun sxo add card

Checkbox

A control that allows the user to toggle between checked and not checked.

Accept terms and conditionsAccept terms and conditionsBy clicking this checkbox, you agree to the terms and conditions.Disabled checkboxMarketing emailsReceive emails about new products, features, and more.

{/* Case 1: Inline label */}
<Label variant="inline">
    <Checkbox name="terms" />
    <span>Accept terms and conditions</span>
</Label>

{/* Case 2: Align Top label */}
<Label variant="align-top">
    <Checkbox name="terms-stacked" />
    <span class="grid gap-2">
        <span class="block text-sm font-medium leading-none">Accept terms and conditions</span>
        <span class="block text-foreground text-sm opacity-70">
            By clicking this checkbox, you agree to the terms and conditions.
        </span>
    </span>
</Label>

{/* Case 3: Disabled checkbox */}
<Label variant="inline">
    <Checkbox name="disabled-checkbox" disabled />
    <span>Disabled checkbox</span>
</Label>

{/* Case 4: Custom styled checked checkbox */}
<Label
    variant="stacked"
    class="flex items-start gap-3 border p-3 hover:bg-accent/50 rounded-lg has-[input[type='checkbox']:checked]:border-blue-600 has-[input[type='checkbox']:checked]:bg-blue-50 dark:has-[input[type='checkbox']:checked]:border-blue-900 dark:has-[input[type='checkbox']:checked]:bg-blue-950"
>
    <Checkbox
        name="marketing-emails"
        class=" checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-700 dark:checked:border-blue-700 checked:after:bg-white"
        checked />
    <span class="grid gap-2">
        <span class="block text-sm font-medium leading-none">Marketing emails</span>
        <span class="block text-foreground text-sm opacity-70">Receive emails about new products, features, and more.</span>
    </span>
</Label>

Usage

Use the following primitives to build checkboxes:

<Checkbox>: The checkbox input component.

Installation

pnpx sxo add checkbox

npx sxo add checkbox

yarn sxo add checkbox

bunx --bun sxo add checkbox

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

<div class="grid gap-4">
    {/* Example 1: Edit Profile (always open for demo) */}
    <Dialog class="space-y-4">
        <DialogTrigger variant="outline">Edit Profile</DialogTrigger>
        <DialogContent class="relative mx-auto w-full max-w-md rounded-lg border shadow-lg p-0">
            <DialogHeader>
                <DialogTitle>Edit profile</DialogTitle>
                <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
            </DialogHeader>
            <div class="grid gap-3">
                <Label variant="stacked">
                    <span class="text-sm font-medium leading-none">Name</span>
                    <Input id="dialog-name" placeholder="Jane Doe" />
                </Label>
                <Label variant="stacked">
                    <span class="text-sm font-medium leading-none">Username</span>
                    <Input id="dialog-username" placeholder="@jdoe" />
                </Label>
            </div>
            <DialogFooter>
                <Button variant="outline" type="button" $onclick="closeDialog">
                    Cancel
                </Button>
                <Button type="button">Save changes</Button>
            </DialogFooter>
            <DialogClose aria-label="Close dialog" class="absolute top-3 right-3" />
        </DialogContent>
    </Dialog>

    {/* Example 2: Scrollable Content */}
    <Dialog class="space-y-4">
        <DialogTrigger variant="outline">Scrollable Content</DialogTrigger>
        <DialogContent>
            <DialogHeader>
                <DialogTitle>Scrollable Content</DialogTitle>
                <DialogDescription>This is a dialog with scrollable content.</DialogDescription>
            </DialogHeader>
            <div class="flex flex-col gap-3 text-sm leading-relaxed max-h-64 overflow-y-auto">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                    ea commodo consequat.
                </p>
                <p>
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                    laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam.
                </p>
                <p>
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                    laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam.
                </p>
            </div>
            <DialogClose aria-label="Close dialog" />
        </DialogContent>
    </Dialog>
</div>

Usage

Use the following primitives to build dialogs:

<Dialog>: The root container that manages dialog state and provides context for other dialog components.
<DialogTrigger>: The button that opens the dialog, can be any interactive element.
<DialogContent>: The modal content container that renders the dialog overlay and content.
<DialogHeader>: The header section containing title and description.
<DialogTitle>: The title text within the dialog header.
<DialogDescription>: The description text within the dialog header.
<DialogFooter>: The footer section for action buttons.
<DialogClose>: A button that closes the dialog, typically used for close icons or cancel buttons.

Installation

pnpx sxo add dialog

npx sxo add dialog

yarn sxo add dialog

bunx --bun sxo add dialog

Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

<div class="flex flex-wrap gap-4">
    <DropdownMenu>
        <DropdownMenuTrigger class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90">
            Open
        </DropdownMenuTrigger>
        <DropdownMenuContent>
            <DropdownMenuGroup label="My Account">
                <DropdownMenuItem>
                    Profile
                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
                </DropdownMenuItem>
                <DropdownMenuItem>
                    Billing
                    <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
                </DropdownMenuItem>
                <DropdownMenuItem>
                    Settings
                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
                </DropdownMenuItem>
                <DropdownMenuItem>
                    Keyboard shortcuts
                    <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
                </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuLabel>Appearance</DropdownMenuLabel>
            <DropdownMenuItem>Status Bar</DropdownMenuItem>
            <DropdownMenuItem>Activity Bar</DropdownMenuItem>
            <DropdownMenuItem>Panel</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
            <DropdownMenuItem>Left</DropdownMenuItem>
            <DropdownMenuItem>Right</DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>
</div>

Usage

Use the following primitives to build dropdown menus:

<DropdownMenu>: The root dropdown menu component.
<DropdownMenuTrigger>: The button that opens the menu.
<DropdownMenuContent>: The container for menu items.
<DropdownMenuGroup>: Groups menu items with a label.
<DropdownMenuItem>: Individual menu items.
<DropdownMenuLabel>: Labels for sections.
<DropdownMenuSeparator>: Separators between sections.
<DropdownMenuShortcut>: Keyboard shortcut hints.

Installation

Form

Building forms with React Hook Form and Zod.

{/* Case 1: Username field */}
<div class="grid gap-2">
    <FormLabel for="demo-form-text">Username</FormLabel>
    <FormInput type="text" id="demo-form-text" placeholder="hunvreus" />
    <FormDescription class="text-muted-foreground text-sm">This is your public display name.</FormDescription>
</div>

{/* Case 2: Email field */}
<div class="grid gap-2">
    <FormLabel for="demo-form-select">Email</FormLabel>
    <select id="demo-form-select" class="input">
        <option value="m@example.com">m@example.com</option>
        <option value="m@google.com">m@google.com</option>
        <option value="m@support.com">m@support.com</option>
    </select>
    <FormDescription class="text-muted-foreground text-sm">
        You can manage email addresses in your email settings.
    </FormDescription>
</div>

{/* Case 3: Bio field */}
<div class="grid gap-2">
    <FormLabel for="demo-form-textarea">Bio</FormLabel>
    <textarea id="demo-form-textarea" placeholder="I like to..." rows="3" class="textarea"></textarea>
    <FormDescription class="text-muted-foreground text-sm">You can @mention other users and organizations.</FormDescription>
</div>

{/* Case 4: Date of birth */}
<div class="grid gap-2">
    <FormLabel for="demo-form-date">Date of birth</FormLabel>
    <FormInput type="date" id="demo-form-date" />
    <FormDescription class="text-muted-foreground text-sm">
        Your date of birth is used to calculate your age.
    </FormDescription>
</div>

{/* Case 5: Notification preferences */}
<div class="flex flex-col gap-3">
    <FormFieldset class="grid gap-3">
        <FormLegend class="text-sm font-medium">Notify me about...</FormLegend>
        <FormLabel class="font-normal mt-4" for="demo-form-radio-1">
            <FormInput type="radio" name="demo-form-radio" id="demo-form-radio-1" value="1" checked />
            All new messages
        </FormLabel>
        <FormLabel class="font-normal" for="demo-form-radio-2">
            <FormInput type="radio" name="demo-form-radio" id="demo-form-radio-2" value="2" />
            Direct messages and mentions
        </FormLabel>
        <FormLabel class="font-normal" for="demo-form-radio-3">
            <FormInput type="radio" name="demo-form-radio" id="demo-form-radio-3" value="3" />
            Nothing
        </FormLabel>
    </FormFieldset>
</div>

{/* Case 6: Email notifications switches */}
<section class="grid gap-4">
    <h3 class="text-lg font-medium">Email Notifications</h3>
    <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
        <div class="flex flex-col gap-0.5">
            <FormLabel for="demo-form-switch" class="leading-normal">
                Marketing emails
            </FormLabel>
            <FormDescription class="text-muted-foreground text-sm">
                Receive emails about new products, features, and more.
            </FormDescription>
        </div>
        <FormInput type="checkbox" id="demo-form-switch" role="switch" aria-checked="false" class="switch" />
    </div>
    <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
        <div class="flex flex-col gap-0.5 opacity-60">
            <FormLabel for="demo-form-switch-disabled" class="leading-normal">
                Security emails
            </FormLabel>
            <FormDescription class="text-muted-foreground text-sm">
                Receive emails about your account security.
            </FormDescription>
        </div>
        <FormInput
            type="checkbox"
            id="demo-form-switch-disabled"
            role="switch"
            aria-checked="false"
            disabled
            class="switch" />
    </div>
</section>

{/* Case 7: Form actions */}
<div class="flex gap-2">
    <FormSubmit>Submit</FormSubmit>
    <FormReset>Reset</FormReset>
</div>

Usage

Use the following primitives to build forms:

<Form>: The root form component.
<FormLabel>: Labels for form inputs.
<FormInput>: Input fields (text, date, radio, checkbox).
<FormDescription>: Descriptive text for form fields.
<FormFieldset>: Groups related form fields.
<FormLegend>: Legend for fieldsets.
<FormSubmit>: Submit button.
<FormReset>: Reset button.

Installation

pnpx sxo add form

npx sxo add form

yarn sxo add form

bunx --bun sxo add form

Input

Displays a form input field or a component that looks like an input field.

TextEmailPasswordSearchNumberDate

<div class="grid gap-4 sm:grid-cols-2">
    <Label variant="stacked" htmlFor="input-text">
        <span class="text-sm font-medium leading-none">Text</span>
        <Input id="input-text" placeholder="Type here…" />
    </Label>
    <Label variant="stacked" htmlFor="input-email">
        <span class="text-sm font-medium leading-none">Email</span>
        <Input id="input-email" type="email" placeholder="you@example.com" />
    </Label>
    <Label variant="stacked" htmlFor="input-password">
        <span class="text-sm font-medium leading-none">Password</span>
        <Input id="input-password" type="password" placeholder="••••••••" />
    </Label>
    <Label variant="stacked" htmlFor="input-search">
        <span class="text-sm font-medium leading-none">Search</span>
        <Input id="input-search" type="search" placeholder="Search…" />
    </Label>
    <Label variant="stacked" htmlFor="input-number">
        <span class="text-sm font-medium leading-none">Number</span>
        <Input id="input-number" type="number" placeholder="0" />
    </Label>
    <Label variant="stacked" htmlFor="input-date">
        <span class="text-sm font-medium leading-none">Date</span>
        <Input id="input-date" type="date" />
    </Label>
</div>

Usage

Use the following primitive to build form inputs:

<Input>: A form input field that supports various HTML input types (text, email, password, search, number, date) with proper styling and accessibility.

Installation

pnpx sxo add input

npx sxo add input

yarn sxo add input

bunx --bun sxo add input

Label

Renders an accessible label associated with controls.

UsernameMessageType your message and press enter to send.Accept terms and conditionsComment

<div class="grid gap-8">
    <Label variant="stacked" class="grid gap-3">
        <span class="text-sm font-medium leading-none">Username</span>
        <input class="input" type="text" placeholder="username" />
    </Label>
    <Label variant="stacked" class="grid gap-3">
        <span class="text-sm font-medium leading-none">Message</span>
        <textarea class="textarea" rows={3} placeholder="Type your message..."></textarea>
        <span class="text-muted-foreground text-sm">Type your message and press enter to send.</span>
    </Label>
    <Label variant="inline">
        <Checkbox id="demo-terms" />
        <span>Accept terms and conditions</span>
    </Label>
    <Label variant="align-top">
        <span class="text-sm font-medium leading-none">Comment</span>
        <textarea class="textarea" rows={3} placeholder="Leave a comment..."></textarea>
    </Label>
</div>

Usage

Use the following primitive to build form labels:

<Label>: A form label component that properly associates with form controls and supports variants (inline, stacked, align-top) for different layouts.

Installation

pnpx sxo add label

npx sxo add label

yarn sxo add label

bunx --bun sxo add label

Pagination

Pagination with page navigation, next and previous links.

<Pagination totalPages={12} currentPage={6} showPrev={true} showNext={true} showFirst={false} showLast={true} />

Usage

Use the following primitives to build pagination:

<Pagination>: Displays page navigation with customizable props like totalPages, currentPage, and visibility options for prev/next/first/last buttons.

Installation

pnpx sxo add pagination

npx sxo add pagination

yarn sxo add pagination

bunx --bun sxo add pagination

Popover

Displays rich content in a portal, triggered by a button.

<Popover>
    <PopoverTrigger variant="outline" contentId={contentId}>
        Open popover
    </PopoverTrigger>

    <PopoverContent id={contentId}>
        <header class="mb-3">
            <h3 class="text-sm font-medium">Dimensions</h3>
        </header>
        <div class="grid gap-3">
            <Label variant="stacked">
                <span class="text-sm font-medium leading-none">Width</span>
                <Input id="popover-width" placeholder="Auto" />
            </Label>
            <Label variant="stacked">
                <span class="text-sm font-medium leading-none">Max. width</span>
                <Input id="popover-max-width" placeholder="None" />
            </Label>
            <Label variant="stacked">
                <span class="text-sm font-medium leading-none">Height</span>
                <Input id="popover-height" placeholder="Auto" />
            </Label>
            <Label variant="stacked">
                <span class="text-sm font-medium leading-none">Max. height</span>
                <Input id="popover-max-height" placeholder="None" />
            </Label>
        </div>
    </PopoverContent>
</Popover>

Usage

Use the following primitives to build a popover:

<Popover>: The root component for a popover.
<PopoverTrigger>: The button that opens the popover.
<PopoverContent>: The content displayed in the popover.

Installation

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Default

Comfortable

Compact

<RadioGroup direction="row" aria-label="Appearance">
    <div class="flex items-center gap-3">
        <RadioGroupItem id="appearance-default" name="appearance" value="default" checked />
        <Label for="appearance-default">Default</Label>
    </div>
    <div class="flex items-center gap-3">
        <RadioGroupItem id="appearance-comfortable" name="appearance" value="comfortable" />
        <Label for="appearance-comfortable">Comfortable</Label>
    </div>
    <div class="flex items-center gap-3">
        <RadioGroupItem id="appearance-compact" name="appearance" value="compact" />
        <Label for="appearance-compact">Compact</Label>
    </div>
</RadioGroup>

Usage

Use the following primitives to build radio groups:

<RadioGroup>: The container component that manages the radio group state and provides proper form integration.
<RadioGroupItem>: Individual radio button inputs that work together within a RadioGroup.

Installation

pnpx sxo add radio-group

npx sxo add radio-group

yarn sxo add radio-group

bunx --bun sxo add radio-group

Select

Displays a list of options for the user to pick from—triggered by a button.

Fruit

Chart

<div class="flex space-x-4">
    <Select name="fruit">
        <SelectPlaceholder>Fruits</SelectPlaceholder>
        <SelectOption value="apple">Apple</SelectOption>
        <SelectOption value="banana">Banana</SelectOption>
        <SelectOption value="blueberry">Blueberry</SelectOption>
        <SelectOption value="grapes">Grapes</SelectOption>
        <SelectOption value="pineapple">Pineapple</SelectOption>
    </Select>
    <Select name="chart" value="line">
        <SelectGroup label="Charts">
            <SelectOption value="bar">Bar</SelectOption>
            <SelectOption value="line">Line</SelectOption>
            <SelectOption value="pie">Pie</SelectOption>
        </SelectGroup>
    </Select>
</div>

Usage

Use the following primitives to build a select:

<Select>: The root component for a select dropdown.
<SelectPlaceholder>: Placeholder text shown when no option is selected.
<SelectOption>: Individual selectable options.
<SelectGroup>: Groups options with a label.

Installation

pnpx sxo add select

npx sxo add select

yarn sxo add select

bunx --bun sxo add select

Select Menu

Displays a list of options for the user to pick from—triggered by a button.

<div class="grid gap-4 sm:grid-cols-2">
    <SelectMenu id="select-445592" name="select-445592-value" value="apple" class="max-w-[220px]">
        <SelectMenuTrigger
            id="select-445592-trigger"
            aria-controls="select-445592-listbox"
            ariaExpanded="false"
            class="btn-outline justify-between font-normal w-[180px]"
        >
            <span class="truncate">Apple</span>
        </SelectMenuTrigger>
        <SelectMenuPopover id="select-445592-popover">
            <header class="flex h-9 items-center gap-2 border-b px-3 -mx-1 -mt-1 mb-1">
                <IconSearch aria-hidden="true" class="size-4 shrink-0 opacity-50" width="16" height="16" />
                <SelectMenuSearch
                    className="placeholder:text-muted-foreground flex h-10 flex-1 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 min-w-0"
                    placeholder="Search entries..."
                    aria-autocomplete="list"
                    aria-controls="select-445592-listbox"
                    aria-labelledby="select-445592-trigger"
                    role="combobox" />
            </header>
            <SelectMenuList id="select-445592-listbox" ariaLabelledby="select-445592-trigger">
                <SelectMenuGroup label="Fruits">
                    <SelectMenuOption id="select-445592-items-1-1" value="apple" selected>
                        Apple
                    </SelectMenuOption>
                    <SelectMenuOption id="select-445592-items-1-2" value="banana">
                        Banana
                    </SelectMenuOption>
                    <SelectMenuOption id="select-445592-items-1-3" value="blueberry">
                        Blueberry
                    </SelectMenuOption>
                    <SelectMenuOption id="select-445592-items-1-4" value="grapes">
                        Grapes
                    </SelectMenuOption>
                    <SelectMenuOption id="select-445592-items-1-5" value="pineapple">
                        Pineapple
                    </SelectMenuOption>
                </SelectMenuGroup>
            </SelectMenuList>
        </SelectMenuPopover>
    </SelectMenu>
</div>

Usage

Use the following primitives to build a select menu:

<SelectMenu>: The root component that manages selection state and accessibility.
<SelectMenuTrigger>: The button that opens the menu.
<SelectMenuPopover>: The container for the menu options.
<SelectMenuList>: The list of options.
<SelectMenuGroup>: Groups options with a label.
<SelectMenuOption>: Individual selectable options.
<SelectMenuSearch>: Search input within the menu.

Installation

Skeleton

Use to show a placeholder while content is loading.

<div class="grid gap-3">
    <Skeleton widthClass="w-full" heightClass="h-4" />
    <Skeleton widthClass="w-2/3" heightClass="h-4" />
    <Skeleton widthClass="w-1/2" heightClass="h-4" />
    <div class="flex items-center gap-3">
        <Skeleton widthClass="w-12" heightClass="h-12" shape="circle" />
        <div class="flex-1 grid gap-2">
            <Skeleton widthClass="w-1/3" heightClass="h-4" />
            <Skeleton widthClass="w-2/3" heightClass="h-4" />
        </div>
    </div>
</div>

Usage

Use the following primitives to build skeletons:

<Skeleton>: A placeholder component for loading states, with customizable width, height, and shape.

Installation

pnpx sxo add skeleton

npx sxo add skeleton

yarn sxo add skeleton

bunx --bun sxo add skeleton

Slider

An input where the user selects a value from within a given range.

Value

<div class="max-w-md">
    <Slider min={0} max={100} step={1} value="35" />
</div>

Usage

Use the following primitives to build a slider:

<Slider>: An input component for selecting a value within a range, with props like min, max, step, and value.

Installation

pnpx sxo add slider

npx sxo add slider

yarn sxo add slider

bunx --bun sxo add slider

Switch

A control that allows the user to toggle between checked and not checked.

Airplane Mode Bluetooth

<div class="grid gap-3">
    <Label>
        <Switch /> Airplane Mode
    </Label>
    <Label>
        <Switch checked /> Bluetooth
    </Label>
</div>

Usage

Use the following primitives to build a switch:

<Switch>: A toggle control for on/off states.

Installation

pnpx sxo add switch

npx sxo add switch

yarn sxo add switch

bunx --bun sxo add switch

Table

A responsive table component.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	PayPal	$450.00
Total			$1,200.00

<Table>
    <TableCaption>A list of your recent invoices.</TableCaption>
    <TableHeader>
        <TableRow>
            <TableHead>Invoice</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Method</TableHead>
            <TableHead class="text-right">Amount</TableHead>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableCell class="font-medium">INV001</TableCell>
            <TableCell>Paid</TableCell>
            <TableCell>Credit Card</TableCell>
            <TableCell class="text-right">$250.00</TableCell>
        </TableRow>
        <TableRow>
            <TableCell class="font-medium">INV002</TableCell>
            <TableCell>Pending</TableCell>
            <TableCell>PayPal</TableCell>
            <TableCell class="text-right">$150.00</TableCell>
        </TableRow>
        <TableRow>
            <TableCell class="font-medium">INV003</TableCell>
            <TableCell>Unpaid</TableCell>
            <TableCell>Bank Transfer</TableCell>
            <TableCell class="text-right">$350.00</TableCell>
        </TableRow>
        <TableRow>
            <TableCell class="font-medium">INV004</TableCell>
            <TableCell>Paid</TableCell>
            <TableCell>PayPal</TableCell>
            <TableCell class="text-right">$450.00</TableCell>
        </TableRow>
    </TableBody>
    <TableFooter>
        <TableRow>
            <TableCell colspan="3">Total</TableCell>
            <TableCell class="text-right">$1,200.00</TableCell>
        </TableRow>
    </TableFooter>
</Table>

Usage

Use the following primitives to build data tables:

<Table>: The root container for the table structure.
<TableCaption>: An accessible caption for the table.
<TableHeader>: Contains the table header rows with column headings.
<TableBody>: Contains the main table data rows.
<TableFooter>: Contains footer rows, typically for totals or summaries.
<TableRow>: Represents a single row in the table.
<TableHead>: Header cell for column headings.
<TableCell>: Standard data cell for table content.

Installation

pnpx sxo add table

npx sxo add table

yarn sxo add table

bunx --bun sxo add table

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

<Tabs variant="default">
    <TabsList>
        <TabsTrigger name="tab-account" active>Account</TabsTrigger>
        <TabsTrigger name="tab-password">Password</TabsTrigger>
    </TabsList>
    <TabsContent name="tab-account" class="pt-4">
        <div class="grid gap-4 max-w-sm">
            <Label variant="stacked">
                <span class="text-sm font-medium leading-none">Name</span>
                <Input name="tab-account-name" placeholder="Jane Doe" />
            </Label>
            <Label variant="stacked">
                <span class="text-sm font-medium leading-none">Username</span>
                <Input name="tab-account-username" placeholder="@jdoe" />
            </Label>
            <Button>Save changes</Button>
        </div>
    </TabsContent>
    <TabsContent name="tab-password" class="pt-4" active>
        <div class="grid gap-4 max-w-sm">
            <Label variant="stacked">
                <span class="text-sm font-medium leading-none">Current password</span>
                <Input name="tab-password-current" type="password" />
            </Label>
            <Label variant="stacked">
                <span class="text-sm font-medium leading-none">New password</span>
                <Input name="tab-password-new" type="password" />
            </Label>
            <Button>Save Password</Button>
        </div>
    </TabsContent>
</Tabs>

Usage

Use the following primitives to build tabbed interfaces:

<Tabs>: The root container that manages tab state and provides context for other tab components.
<TabsList>: Contains the tab trigger buttons and provides navigation between tab panels.
<TabsTrigger>: Individual tab buttons that activate their corresponding content panels.
<TabsContent>: The content panels that are shown/hidden based on the active tab.

Installation

pnpx sxo add tabs

npx sxo add tabs

yarn sxo add tabs

bunx --bun sxo add tabs

Textarea

Displays a form textarea or a component that looks like a textarea.

Label

Type your message and press enter to send.

Disabled

<div class="grid gap-4">
    <div class="grid gap-3">
        <Label for="textarea-with-label" class="label">
            Label
        </Label>
        <Textarea id="textarea-with-label" placeholder="Type your message here" rows={3} />
        <p class="text-muted-foreground text-sm">Type your message and press enter to send.</p>
    </div>
    <div class="grid gap-3">
        <Label for="textarea-disabled" class="label">
            Disabled
        </Label>
        <Textarea id="textarea-disabled" placeholder="This field is disabled." disabled rows={3} />
    </div>
</div>

Usage

Use the following primitive to build multi-line text inputs:

<Textarea>: A multi-line text input component with auto-resize capability, validation support, and accessibility features.

Installation

pnpx sxo add textarea

npx sxo add textarea

yarn sxo add textarea

bunx --bun sxo add textarea

Toast

A succinct message that is displayed temporarily.

<div class="relative mt-4">
    {/* Case 1: Top-Right  */}
    <Toaster align="end" class="top-0! bottom-auto!">
    <Toast category="top-right">
            <section>
                <ToastTitle />
                <ToastDescription />
            </section>
        </Toast>
    </Toaster>
    {/* Case 2: Bottom-Center */}
    <Toaster align="center">
    <Toast category="bottom-center">
            <section>
                <ToastTitle />
                <ToastDescription />
            </section>
        </Toast>
    </Toaster>
    {/* Case 3: Bottom-Left */}
    <Toaster align="start">
    <Toast category="bottom-left">
            <section>
                <ToastTitle />
                <ToastDescription />
            </section>
        </Toast>
    </Toaster>
    {/* Case 4: Bottom-Right */}
    <Toaster align="end">
    <Toast category="bottom-right">
            <section>
                <ToastTitle />
                <ToastDescription />
            </section>
        </Toast>
    </Toaster>

    {/* Triggers */}
    <div class="flex flex-wrap items-center gap-2 mb-2">
        <Button
            variant="outline"
            onclick="document.dispatchEvent(new CustomEvent('el-toast:top-right', { detail: { title: 'Saved', description: 'Your settings have been saved.' } }))"
        >
            Top-Right
        </Button>
        <Button
            variant="outline"
            onclick="document.dispatchEvent(new CustomEvent('el-toast:bottom-center', { detail: { title: 'New Feature', description: 'Check out the latest updates in your dashboard.' } }))"
        >
            Bottom-Center
        </Button>
        <Button
            variant="outline"
            onclick="document.dispatchEvent(new CustomEvent('el-toast:bottom-left', { detail: { title: 'Error', description: 'Failed to save your changes. Please try again.' } }))"
        >
            Bottom-Left
        </Button>
        <Button
            variant="outline"
            onclick="document.dispatchEvent(new CustomEvent('el-toast:bottom-right', { detail: { title: 'Heads up', description: 'You have unsaved changes.' } }))"
        >
            Bottom-Right
        </Button>
    </div>
</div>

Usage

Use the following primitives to build toast notifications:

<Toaster>: The container that manages toast positioning and stacking with alignment options (start, center, end).
<Toast>: Individual toast notification with category variants (success, info, warning, destructive) and auto-dismiss functionality.
<ToastTitle>: The title text within a toast notification.
<ToastDescription>: The description text within a toast notification.

Installation

pnpx sxo add toast

npx sxo add toast

yarn sxo add toast

bunx --bun sxo add toast

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

{/* Case 1: Left placement */}
<Tooltip placement="left">
    <TooltipTrigger as="button" class="btn-outline">
        Left
    </TooltipTrigger>
    <TooltipContent>Left</TooltipContent>
</Tooltip>

{/* Case 2: Top placement */}
<Tooltip placement="top">
    <TooltipTrigger as="button" class="btn-outline">
        Top
    </TooltipTrigger>
    <TooltipContent>Top</TooltipContent>
</Tooltip>

{/* Case 3: Bottom placement */}
<Tooltip placement="bottom">
    <TooltipTrigger as="button" class="btn-outline">
        Bottom
    </TooltipTrigger>
    <TooltipContent>Bottom</TooltipContent>
</Tooltip>

{/* Case 4: Right placement */}
<Tooltip placement="right">
    <TooltipTrigger as="button" class="btn-outline">
        Right
    </TooltipTrigger>
    <TooltipContent>Right</TooltipContent>
</Tooltip>

Usage

Use the following primitives to build tooltips:

<Tooltip>: The root component that manages tooltip state and positioning.
<TooltipTrigger>: The element that triggers the tooltip (usually a button).
<TooltipContent>: The content displayed in the tooltip.