Components

import { Button } from 'topclassui/button'

<Button>Save</Button>

import { Tag } from 'topclassui/tag'

<Tag>Design systems</Tag>

import { SegmentedControlItem, SegmentedControlRoot } from 'topclassui/segmented-control'

<SegmentedControlRoot aria-label="View" defaultValue="board">
  <SegmentedControlItem value="board">Board</SegmentedControlItem>
  <SegmentedControlItem value="table">Table</SegmentedControlItem>
  <SegmentedControlItem value="calendar">Calendar</SegmentedControlItem>
</SegmentedControlRoot>

import { Input } from 'topclassui/input'

<div className="grid max-w-sm gap-1">
  <label htmlFor="input-playground" className="text-sm font-medium text-body">Email</label>
  <Input id="input-playground" name="email" type="email" autoComplete="email" />
</div>

import { Textarea } from 'topclassui/textarea'

<div className="grid max-w-sm gap-1">
  <label htmlFor="textarea-playground" className="text-sm font-medium text-body">About you</label>
  <Textarea id="textarea-playground" name="bio" placeholder="Write a short paragraph" />
</div>

import { Select } from 'topclassui/select'

<div className="grid justify-items-start gap-1.5">
  <label htmlFor="select-playground" className="text-sm text-body">Country</label>
  <Select id="select-playground" items={COUNTRIES} defaultValue="jo" />
</div>

import { Combobox } from 'topclassui/combobox'

<div className="grid justify-items-start gap-1">
  <label htmlFor="combobox-playground" className="text-sm font-medium text-body">Framework</label>
  <Combobox id="combobox-playground" items={FRAMEWORKS} placeholder="Search frameworks" />
</div>

import { Checkbox } from 'topclassui/checkbox'

<div className="flex items-center gap-2">
  <Checkbox id="checkbox-playground" defaultChecked />
  <label htmlFor="checkbox-playground" className="text-sm text-body">I accept the terms</label>
</div>

import { RadioGroupItem, RadioGroupRoot } from 'topclassui/radio-group'

<div className="grid justify-items-start gap-2">
  <span id="radio-group-playground-label" className="text-sm text-body">Billing</span>
  <RadioGroupRoot aria-labelledby="radio-group-playground-label" defaultValue="yearly">
    <RadioGroupItem value="monthly">Monthly</RadioGroupItem>
    <RadioGroupItem value="yearly">Yearly</RadioGroupItem>
    <RadioGroupItem value="lifetime">Lifetime</RadioGroupItem>
  </RadioGroupRoot>
</div>

import { Switch } from 'topclassui/switch'

<div className="flex items-center gap-2">
  <Switch id="switch-playground" defaultChecked />
  <label htmlFor="switch-playground" className="text-sm text-body">Weekly digest</label>
</div>

import { Slider } from 'topclassui/slider'

<div className="grid justify-items-start gap-2">
  <span id="slider-playground-label" className="text-sm text-body">Volume</span>
  <Slider aria-labelledby="slider-playground-label" defaultValue={60} />
</div>

import { NumberField } from 'topclassui/number-field'

<div className="grid justify-items-start gap-2">
  <label htmlFor="number-field-playground-guests" className="text-sm text-body">Guests</label>
  <NumberField id="number-field-playground-guests" defaultValue={2} />
</div>

import { OTPField } from 'topclassui/otp-field'

<div className="grid justify-items-start gap-2">
  <label htmlFor="otp-playground-code" className="text-sm text-body">Verification code</label>
  <OTPField id="otp-playground-code" />
</div>

import { DatePicker } from 'topclassui/date-picker'

<div className="grid justify-items-start gap-1.5">
  <label htmlFor="date-picker-playground" className="text-sm text-body">Check-in</label>
  <DatePicker id="date-picker-playground" defaultValue="2026-09-22" />
</div>

import { FileUpload } from 'topclassui/file-upload'

<div className="grid gap-1.5">
  <label htmlFor="file-upload-playground" className="text-sm font-medium text-body">Attachment</label>
  <FileUpload id="file-upload-playground" name="attachment" accept=".png,.jpg,.jpeg,.pdf">
    PNG, JPG or PDF
  </FileUpload>
</div>

import { Rating } from 'topclassui/rating'
import type { RatingDesignProps } from 'topclassui/rating'

/** The site's Try it stage: each schema prop arrives from a control, and an absent one keeps its default. */
export default function Demo(props: RatingDesignProps = {}) {
  const { readOnly, defaultValue, disabled, ...shown } = props
  if (readOnly === false) {
    return <Rating defaultValue={defaultValue ?? 3} disabled={disabled} {...shown} readOnly={false} aria-label="Rate this course" />
  }
  return <Rating value={3.5} {...shown} />
}

import { Badge } from 'topclassui/badge'

<Badge>Paid</Badge>

import { AvatarFallback, AvatarImage, AvatarRoot } from 'topclassui/avatar'

<AvatarRoot>
  <AvatarImage src={PORTRAIT} alt="Omar Abed" />
  <AvatarFallback>OA</AvatarFallback>
</AvatarRoot>

import { AvatarFallback, AvatarRoot } from 'topclassui/avatar'
import { AvatarGroup } from 'topclassui/avatar-group'

<AvatarGroup aria-label="Project team">
  {TEAM.map(([initials, name]) => (
    <AvatarRoot key={initials} size={props.size} role="img" aria-label={name}>
      <AvatarFallback>{initials}</AvatarFallback>
    </AvatarRoot>
  ))}
</AvatarGroup>

import { Separator } from 'topclassui/separator'

<div className="flex min-h-5 flex-wrap items-center gap-3 text-sm text-body">
  <span>Profile</span>
  <Separator />
  <span>Billing</span>
</div>

import { Skeleton } from 'topclassui/skeleton'

<div className="max-w-sm">
  <Skeleton />
</div>

import type { CodeBlockDesignProps } from 'topclassui/code-block'
import { CodeBlock } from 'topclassui/code-block'

/** The docs stage: the Try it controls hand their values in as props. One line is long, so wrap shows. */
export default function Demo(props: CodeBlockDesignProps) {
  return (
    <CodeBlock lang="tsx" title="app/invoices/page.tsx" {...props}>
      {`export default async function Page() {
  const invoices = await getInvoices({ status: 'overdue', sortBy: 'dueDate', order: 'descending' })
  return <InvoiceTable items={invoices} />
}`}
    </CodeBlock>
  )
}

import { Table, type TableDesignProps } from 'topclassui/table'

<Table

  caption="Quarterly revenue by region"
  items={regions}
  getKey={(region) => region.name}
  columns={[
    { key: 'name', header: 'Region', rowHeader: true, cell: (region) => region.name },
    { key: 'q1', header: 'Q1', align: 'end', cell: (region) => region.q1 },
    { key: 'q2', header: 'Q2', align: 'end', cell: (region) => region.q2 },
    { key: 'q3', header: 'Q3', align: 'end', cell: (region) => region.q3 },
    { key: 'q4', header: 'Q4', align: 'end', cell: (region) => region.q4 },
    { key: 'total', header: 'Full year', align: 'end', cell: (region) => region.total },
  ]}
/>

import { fileText } from 'topclassui/icons/file-text'
import { folder } from 'topclassui/icons/folder'
import { Svg } from 'topclassui/svg'
import { TreeView, type TreeViewDesignProps } from 'topclassui/tree-view'

<TreeView aria-label="Files" items={ITEMS} defaultExpanded={['src', 'app']} />

import { Stepper, type StepperDesignProps } from 'topclassui/stepper'

<Stepper items={STEPS} value="profile" aria-label="Sign-up" />

import { Alert } from 'topclassui/alert'

<Alert title="Your trial ends in three days">
  Deploys pause when it does. Adding a payment method turns them back on.
</Alert>

'use client'

import { Button } from 'topclassui/button'
import { toast } from 'topclassui/toast'
import type { ToastDesignProps } from 'topclassui/toast'

/** The docs stage: the Try it controls set the options of the toast the press adds. */
export default function Demo(props: ToastDesignProps = {}) {
  return (
    <Button
      variant="outline"
      onClick={() => { toast.add({ ...props, title: 'Project created', description: 'It is ready for its first deploy.' }) }}
    >
      Show a toast
    </Button>
  )
}

import { bell } from 'topclassui/icons/bell'
import { Button } from 'topclassui/button'
import { Svg } from 'topclassui/svg'
import { Banner } from 'topclassui/banner'

<Banner
  id="banner-playground"
  aria-label="Version 2 announcement"
  icon={<Svg icon={bell} size="xs" />}
  action={<Button size="sm" variant="outline" tone="neutral" render={<a href="/changelog" />}>Read the changelog</Button>}
>
  Version 2 is out, with faster builds and a new theme editor.
</Banner>

import { Progress } from 'topclassui/progress'

<div className="grid max-w-sm">
  <Progress aria-label="Upload" />
</div>

import { Spinner } from 'topclassui/spinner'

<Spinner />

import { Button } from 'topclassui/button'
import {

<DialogRoot>
  <DialogTrigger render={<Button>Publish</Button>} />
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Publish changes</DialogTitle>
      <DialogDescription>Your changes go live right away.</DialogDescription>
    </DialogHeader>
    <DialogBody>11 files changed since the last publish.</DialogBody>
    <DialogFooter>
      <DialogClose render={<Button variant="outline">Cancel</Button>} />
      <DialogClose render={<Button>Publish now</Button>} />
    </DialogFooter>
  </DialogPopup>
</DialogRoot>

import { Button } from 'topclassui/button'
import {

<DrawerRoot>
  <DrawerTrigger render={<Button variant="outline">Filters</Button>} />
  <DrawerPopup>
    <DrawerHeader>
      <DrawerTitle>Filters</DrawerTitle>
      <DrawerDescription>Narrow the list of projects.</DrawerDescription>
    </DrawerHeader>
    <DrawerBody className="grid content-start gap-2.5">
      <p>Status</p>
      <p>Owner</p>
      <p>Updated</p>
    </DrawerBody>
    <DrawerFooter>
      <DrawerClose render={<Button variant="outline">Reset</Button>} />
      <DrawerClose render={<Button>Apply</Button>} />
    </DrawerFooter>
  </DrawerPopup>
</DrawerRoot>

import { Button } from 'topclassui/button'
import { PopoverDescription, PopoverPopup, PopoverRoot, PopoverTitle, PopoverTrigger } from 'topclassui/popover'

<PopoverRoot>
  <PopoverTrigger openOnHover render={<Button variant="outline">Share</Button>} />
  <PopoverPopup>
    <PopoverTitle>Share this page</PopoverTitle>
    <PopoverDescription>Anyone with the link can read it. Only your team can edit.</PopoverDescription>
    <Button size="sm" className="self-start">Copy link</Button>
  </PopoverPopup>
</PopoverRoot>

import { linkSimple } from 'topclassui/icons/link-simple'
import { Button } from 'topclassui/button'
import { Svg } from 'topclassui/svg'
import { TooltipPopup, TooltipRoot, TooltipTrigger } from 'topclassui/tooltip'

<TooltipRoot>
  <TooltipTrigger
    render={
      <Button variant="ghost" aria-label="Copy link">
        <Svg icon={linkSimple} />
      </Button>
    }
  />
  <TooltipPopup>Copy link</TooltipPopup>
</TooltipRoot>

import { copy } from 'topclassui/icons/copy'
import { gear } from 'topclassui/icons/gear'
import { trash } from 'topclassui/icons/trash'
import { user } from 'topclassui/icons/user'
import { Button } from 'topclassui/button'
import { Svg } from 'topclassui/svg'
import { DropdownItem, DropdownPopup, DropdownRoot, DropdownSeparator, DropdownTrigger } from 'topclassui/dropdown'

<DropdownRoot>
  <DropdownTrigger openOnHover render={<Button variant="outline">Actions</Button>} />
  <DropdownPopup>
    <DropdownItem icon={<Svg icon={user} />} shortcut="Ctrl P">Profile</DropdownItem>
    <DropdownItem icon={<Svg icon={gear} />}>Settings</DropdownItem>
    <DropdownItem icon={<Svg icon={copy} />}>Duplicate</DropdownItem>
    <DropdownSeparator />
    <DropdownItem icon={<Svg icon={trash} />}>Delete</DropdownItem>
  </DropdownPopup>
</DropdownRoot>