import { Button } from "@/components/ui/button";
export default function HelloWorld() {  return (    <div className="flex gap-2">      <Button>Default</Button>      <Button variant="destructive" size="sm">        Delete      </Button>      <Button variant="outline" isPending>        Loading...      </Button>    </div>  );}

import { Button } from "@/components/ui/button"
// Basic variants<Button variant="default">Primary</Button><Button variant="destructive">Delete</Button><Button variant="outline">Cancel</Button><Button variant="secondary">Secondary</Button><Button variant="ghost">Ghost</Button><Button variant="link">Link</Button>
// Sizes: xs, sm, default, lg, icon-xs, icon-sm, icon, icon-lg<Button size="sm">Small</Button><Button size="icon"><SearchIcon /></Button>
// Loading state — disables interaction, keeps visual<Button isPending>Saving...</Button>
// Render as link — render= replaces asChild from Radix<Button render={<a href="/about" />}>About</Button>

import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field"import { Input } from "@/components/ui/textfield"
// Field wraps ANY input with label, description, error<Field>  <FieldLabel>Email</FieldLabel>  <FieldDescription>We'll never share your email.</FieldDescription>  <Input placeholder="you@example.com" />  <FieldError>Please enter a valid email address.</FieldError></Field>
// With validation (invalid prop on Field)<Field invalid={!!errors.email}>  <FieldLabel>Email</FieldLabel>  <Input type="email" required />  <FieldError>{errors.email}</FieldError></Field>
// TextArea variantimport { TextArea } from "@/components/ui/textfield"
<Field>  <FieldLabel>Message</FieldLabel>  <TextArea rows={4} placeholder="Your message..." /></Field>

import {  Popover,  PopoverTrigger,  PopoverContent,  PopoverHeader,  PopoverTitle,  PopoverDescription,} from "@/components/ui/popover";import { Button } from "@/components/ui/button";
<Popover>  <PopoverTrigger render={<Button variant="outline" />}>    Open Popover  </PopoverTrigger>  <PopoverContent side="bottom" align="center" sideOffset={4}>    <PopoverHeader>      <PopoverTitle>Settings</PopoverTitle>      <PopoverDescription>Configure your preferences.</PopoverDescription>    </PopoverHeader>    {/* your content */}  </PopoverContent></Popover>;

import {  DropdownMenu,  DropdownMenuTrigger,  DropdownMenuContent,  DropdownMenuItem,  DropdownMenuSeparator,  DropdownMenuShortcut,} from "@/components/ui/menu";
<DropdownMenu>  <DropdownMenuTrigger render={<Button variant="outline" />}>    Actions  </DropdownMenuTrigger>  <DropdownMenuContent>    <DropdownMenuItem>      Edit <DropdownMenuShortcut>Cmd+E</DropdownMenuShortcut>    </DropdownMenuItem>    <DropdownMenuItem>Duplicate</DropdownMenuItem>    <DropdownMenuSeparator />    <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>  </DropdownMenuContent></DropdownMenu>;

import {  Slider, SliderControl, SliderTrack,  SliderIndicator, SliderThumb, SliderOutput,} from "@/components/ui/slider"
<Slider defaultValue={50} min={0} max={100}>  <SliderOutput />  <SliderControl>    <SliderTrack>      <SliderIndicator />      <SliderThumb />    </SliderTrack>  </SliderControl></Slider>
// Multi-thumb range slider<Slider defaultValue={[25, 75]}>  <SliderControl>    <SliderTrack>      <SliderIndicator />      <SliderThumb />  {/* automatically creates one per value */}      <SliderThumb />    </SliderTrack>  </SliderControl></Slider>

import { Field, FieldLabel, FieldError } from "@/components/ui/field";import {  Select,  SelectTrigger,  SelectValue,  SelectContent,  SelectGroup,  SelectLabel,  SelectItem,  SelectSeparator,} from "@/components/ui/select";
<Field>  <FieldLabel>Country</FieldLabel>  <Select>    <SelectTrigger size="default">      <SelectValue placeholder="Select a country" />    </SelectTrigger>    <SelectContent>      <SelectGroup>        <SelectLabel>North America</SelectLabel>        <SelectItem value="us">United States</SelectItem>        <SelectItem value="ca">Canada</SelectItem>      </SelectGroup>      <SelectSeparator />      <SelectGroup>        <SelectLabel>Europe</SelectLabel>        <SelectItem value="uk">United Kingdom</SelectItem>        <SelectItem value="de">Germany</SelectItem>      </SelectGroup>    </SelectContent>  </Select>  <FieldError>Please select a country.</FieldError></Field>;

import {  Dialog, DialogTrigger, DialogContent,  DialogHeader, DialogTitle, DialogDescription,  DialogFooter, DialogClose,} from "@/components/ui/dialog"import { Button } from "@/components/ui/button"
// Standard center dialog<Dialog>  <DialogTrigger render={<Button />}>Edit Profile</DialogTrigger>  <DialogContent>    <DialogHeader>      <DialogTitle>Edit Profile</DialogTitle>      <DialogDescription>Make changes to your profile.</DialogDescription>    </DialogHeader>    {/* form content */}    <DialogFooter>      <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>      <Button type="submit">Save</Button>    </DialogFooter>  </DialogContent></Dialog>
// Sheet variant — just add side= prop<Dialog>  <DialogTrigger render={<Button variant="outline" />}>Open Sheet</DialogTrigger>  <DialogContent side="right">  {/* "top" | "bottom" | "left" | "right" */}    <DialogHeader>      <DialogTitle>Navigation</DialogTitle>    </DialogHeader>    {/* sheet content */}  </DialogContent></Dialog>

"use client"; // Always first line
import * as React from "react"; // Only when neededimport { Component as ComponentPrimitive } from "@base-ui/react/component-name";import { cva, type VariantProps } from "class-variance-authority";import { SomeIcon } from "lucide-react"; // Icons
import { cn } from "@/lib/utils"; // Internal utilities last

// Simple componentfunction Button({  className, variant, size, isPending, render, ...props}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & {  isPending?: boolean}) { ... }
// Overlay content — merge Popup + Positioner positioning propsfunction PopoverContent({  className, side = "bottom", sideOffset = 4, align = "center", ...props}: PopoverPrimitive.Popup.Props &  Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) { ... }

// Render trigger as a Button<DialogTrigger render={<Button variant="outline" />}>  Open Dialog</DialogTrigger>
// Render close as a Button<DialogClose render={<Button variant="ghost" />}>  Cancel</DialogClose>
// Render as a link<Button render={<a href="/about" />}>About Us</Button>

<button data-slot="button" /><div data-slot="dialog-header" /><div data-slot="select-content" />

<Button className="w-full rounded-full">Full Width Pill</Button>

import { buttonVariants } from "@/components/ui/button";
<a href="/about" className={buttonVariants({ variant: "outline", size: "sm" })}>  About</a>;

// Only apply hover on devices that support it (prevents sticky hover on touch)"hover-only:hover:bg-accent";
// Only animate for users who haven't requested reduced motion"motion-safe:active:scale-[0.97]";
// Disable animation for users who prefer reduced motion"motion-reduce:transition-none";"motion-reduce:animate-none";