# Gallery

Browse the categorized component catalog and find the building block you need.

## Form Controls

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <GalleryItem file="check-field">
    <CheckField />
  </GalleryItem>

  <GalleryItem file="date-field">
    <DateField />
  </GalleryItem>

  <GalleryItem file="file-field">
    <FileField />
  </GalleryItem>

  <GalleryItem file="number-field">
    <NumberField />
  </GalleryItem>

  <GalleryItem file="select-field">
    <SelectField />
  </GalleryItem>

  <GalleryItem file="tags-input-field">
    <TagsInputField />
  </GalleryItem>

  <GalleryItem file="text-field">
    <TextField />
  </GalleryItem>

  <GalleryItem file="toggle-group-field">
    <ToggleGroupField />
  </GalleryItem>
</div>

## Inputs

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <GalleryItem file="calendar">
    <Calendar />
  </GalleryItem>

  <GalleryItem file="color-picker">
    <ColorPicker />
  </GalleryItem>

  <GalleryItem file="combo-box">
    <ComboBox />
  </GalleryItem>

  <GalleryItem file="date-input">
    <DateInput />
  </GalleryItem>

  <GalleryItem file="file-input">
    <FileInput />
  </GalleryItem>

  <GalleryItem file="hotkey-capture">
    <HotkeyCapture />
  </GalleryItem>

  <GalleryItem file="month-picker">
    <MonthPicker />
  </GalleryItem>

  <GalleryItem file="number-input">
    <NumberInput />
  </GalleryItem>

  <GalleryItem file="slider">
    <Slider />
  </GalleryItem>

  <GalleryItem file="tags-input">
    <TagsInput />
  </GalleryItem>

  <GalleryItem file="toggle">
    <Toggle />
  </GalleryItem>

  <GalleryItem file="toggle-group">
    <ToggleGroup />
  </GalleryItem>

  <GalleryItem file="wheel-picker">
    <WheelPicker />
  </GalleryItem>
</div>

## Overlays

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <GalleryItem file="context-menu">
    <ContextMenu />
  </GalleryItem>

  <GalleryItem file="drawer">
    <Drawer />
  </GalleryItem>

  <GalleryItem file="modal">
    <Modal />
  </GalleryItem>

  <GalleryItem file="popover">
    <Popover />
  </GalleryItem>

  <GalleryItem file="toast">
    <Toast />
  </GalleryItem>

  <GalleryItem file="tooltip">
    <Tooltip />
  </GalleryItem>
</div>

## Menu & Navigation

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <GalleryItem file="menu-group">
    <MenuGroup />
  </GalleryItem>

  <GalleryItem file="menu-item">
    <MenuItem />
  </GalleryItem>

  <GalleryItem file="menu-list">
    <MenuList />
  </GalleryItem>

  <GalleryItem file="menu-separator">
    <MenuSeparator />
  </GalleryItem>

  <GalleryItem file="menu-sub">
    <MenuSub />
  </GalleryItem>

  <GalleryItem file="pagination">
    <Pagination />
  </GalleryItem>

  <GalleryItem file="tabs">
    <Tabs />
  </GalleryItem>
</div>

## Layout & Display

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <GalleryItem file="accordion">
    <Accordion />
  </GalleryItem>

  <GalleryItem file="button">
    <Button />
  </GalleryItem>

  <GalleryItem file="dark-toggle">
    <DarkToggle />
  </GalleryItem>

  <GalleryItem file="disclosure">
    <Disclosure />
  </GalleryItem>

  <GalleryItem file="image">
    <Image />
  </GalleryItem>

  <GalleryItem file="progress-tracker">
    <ProgressTracker />
  </GalleryItem>

  <GalleryItem file="sortable">
    <Sortable />
  </GalleryItem>

  <GalleryItem file="sortable-group">
    <SortableGroup />
  </GalleryItem>

  <GalleryItem file="splitter">
    <Splitter />
  </GalleryItem>
</div>