Introduction
Installation
Next.jsViteLaravelReact RouterRemixAstroTanStack StartTanStack RouterManual InstallationMCP
All componentsTheme
FieldFormInputText FieldTextareaSearch FieldInput OTPNumber FieldNumber FormatSliderCheckboxSwitchRadioSelectCombo BoxList BoxChoice BoxMulti SelectToken FieldNewTag FieldTag GroupCalendarDate FieldDate PickerDate Range PickerRange CalendarTime FieldColor PickerColor FieldColor AreaColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrop ZoneFile Trigger
ButtonButton GroupToggleToggle GroupPreskok Auth Button
EditorHeadingLinkTextKeyboard
CardContainerGrid ListResizableTableTreeSeparatorDescription ListScroll AreaShow MoreToolbar
BreadcrumbsNavbarPaginationTabsSidebar
DialogModalDrawerPopoverPreview TriggerNewSheetTooltipContext MenuDropdownCommandCommand MenuDisclosureMenu
ToastProgress BarProgress CircleMeterLoaderSkeletonNoteBadge
Chart (helpers)Area ChartBar ChartLine ChartPie ChartExperimental ChartsNewExperimental Radial ChartNewExperimental Radar ChartNewBar ListTracker
Async ImageAvatarCarouselPreskok Icon
Layout

Grid List

Browse and select items arranged in a grid with optional drag-and-drop and multi-select.

View as MarkdownAsk ChatGPT

Installation

npx shadcn@latest add @preskok/grid-list

Usage

import { GridList, GridListItem } from "@/components/ui/preskok-ui/grid-list"

export function Example() {
  return (
    <GridList aria-label="Items">
      <GridListItem id="a">A</GridListItem>
      <GridListItem id="b">B</GridListItem>
    </GridList>
  )
}

Container

Responsive container with optional constrained padding.

Resizable

Draggable splitters for horizontal and vertical panel layouts.

On this page

Installation
Usage
Release checklist
Sync staging dataRefresh anonymized customer records
Data
Review accessibilityKeyboard pass for checkout overlays
Design
Enable feature flagsRamp release cohort to 20%
Growth
Publish changelogUpdate release notes before deploy
Docs

Selected tasks: sync, review

Drag to reorder
Sync staging dataData
Review accessibilityDesign
Enable feature flagsGrowth
Publish changelogDocs