# Playstack Design System

> Playstack Design System is an opinionated collection of components, patterns, and guidelines for building modern digital products.

Playstack Design System is a React 19 component library built with TypeScript and Tailwind CSS v4. It provides production-ready UI primitives, reusable hooks, utility functions, and higher-level components — designed to be copied into your project and adapted to your needs.

Each page listed includes full documentation and source code.

## introduction

- [About](https://ui.playstack.com.au/about/llms.txt): A production-ready component library built for teams shipping across every industry.
- [Roadmap](https://ui.playstack.com.au/roadmap/llms.txt): What we are building next in the Playstack Design System.
- [Setup](https://ui.playstack.com.au/setup/llms.txt): How to setup your project to use Foundations.

## UI

- [App Shell](https://ui.playstack.com.au/ui/app-shell/llms.txt): A composable application shell with sidebar, header, main, and aside
- [Auto Grid](https://ui.playstack.com.au/ui/auto-grid/llms.txt): A self-adjusting grid that fits as many tracks as the container allows
- [Avatar](https://ui.playstack.com.au/ui/avatar/llms.txt): A visual representation of a user that displays initials when an image is unavailable
- [Badge](https://ui.playstack.com.au/ui/badge/llms.txt): A Badge component with the possibility of adding an icon and a status
- [Breadcrumb](https://ui.playstack.com.au/ui/breadcrumb/llms.txt): Hierarchical navigation showing the user's location within a site.
- [Button](https://ui.playstack.com.au/ui/button/llms.txt): The Button component provides a consistent way to trigger actions across the application.
- [Calendar](https://ui.playstack.com.au/ui/calendar/llms.txt): A component for selecting a date or date range with month and year navigation controls
- [Center](https://ui.playstack.com.au/ui/center/llms.txt): Horizontally and vertically center content
- [Chart](https://ui.playstack.com.au/ui/chart/llms.txt): Dashboard chart primitives — Recharts cartesian series plus SVG sparkline and donut
- [Checkbox](https://ui.playstack.com.au/ui/checkbox/llms.txt): A simple native checkbox prepared for indeterminate states
- [Cluster](https://ui.playstack.com.au/ui/cluster/llms.txt): A wrap-friendly horizontal group with consistent gap and alignment
- [Color Picker](https://ui.playstack.com.au/ui/color-picker/llms.txt): A composable color picker component with modular parts for building custom color selection interfaces.
- [Container](https://ui.playstack.com.au/ui/container/llms.txt): A responsive max-width wrapper with horizontal gutters
- [Data Table](https://ui.playstack.com.au/ui/data-table/llms.txt): Sortable data table powered by TanStack Table and the Foundations Table primitive
- [Date Picker](https://ui.playstack.com.au/ui/date-picker/llms.txt): A date picker component built with the Calendar and Menu components.
- [Dialog](https://ui.playstack.com.au/ui/dialog/llms.txt): Dialog allows you to create modal elements that overlay the main content.
- [Disclosure](https://ui.playstack.com.au/ui/disclosure/llms.txt): A mostly unstyled vertical set of interactive elements that each reveal a section of content when clicked
- [Divider](https://ui.playstack.com.au/ui/divider/llms.txt): Dividers are used to visually separate content in a UI.
- [Drawer](https://ui.playstack.com.au/ui/drawer/llms.txt): A slide-in panel that overlays the main content.
- [Empty State](https://ui.playstack.com.au/ui/empty-state/llms.txt): A friendly placeholder for blank screens and zero-result views
- [Field](https://ui.playstack.com.au/ui/field/llms.txt): Wires labels, descriptions and errors to form controls with the right ARIA attributes.
- [File Upload](https://ui.playstack.com.au/ui/file-upload/llms.txt): A drag-and-drop file picker with validation, previews, and progress rendering.
- [Flex](https://ui.playstack.com.au/ui/flex/llms.txt): Composable flex container with VStack and HStack helpers
- [Grid](https://ui.playstack.com.au/ui/grid/llms.txt): A 12-column responsive grid with span helpers
- [Input](https://ui.playstack.com.au/ui/input/llms.txt): A simple text input component.
- [Inspector](https://ui.playstack.com.au/ui/inspector/llms.txt): A right-edge hover-reveal panel for properties / settings sidebars.
- [Kbd](https://ui.playstack.com.au/ui/kbd/llms.txt): A keyboard key indicator for displaying shortcuts and key bindings.
- [List Item](https://ui.playstack.com.au/ui/list-item/llms.txt): A row primitive with leading icon, title, subtitle, and trailing slot
- [Listbox](https://ui.playstack.com.au/ui/listbox/llms.txt): A control for selecting a value from a list of options.
- [Menu](https://ui.playstack.com.au/ui/menu/llms.txt): A floating menu of actions, with optional nested submenus.
- [Modal](https://ui.playstack.com.au/ui/modal/llms.txt): Modal provides an unstyled basis to display content in a layer above the main interface.
- [Nav](https://ui.playstack.com.au/ui/nav/llms.txt): Sidebar navigation with grouped items, icons, and trailing slots
- [Number Input](https://ui.playstack.com.au/ui/number-input/llms.txt): An editable numeric input with stepper buttons, keyboard support, and pluggable formatting for locale-aware display.
- [OTP Input](https://ui.playstack.com.au/ui/otp-input/llms.txt): A composable OTP field where each cell is a real input, managed by a shared root.
- [Page Header](https://ui.playstack.com.au/ui/page-header/llms.txt): A page-level title block with description and actions
- [Pagination](https://ui.playstack.com.au/ui/pagination/llms.txt): Navigation across paginated content with truncation for long ranges.
- [Popover](https://ui.playstack.com.au/ui/popover/llms.txt): A floating panel that is attached to a trigger element.
- [Portal](https://ui.playstack.com.au/ui/portal/llms.txt): A component that renders its children into a new DOM node outside the parent hierarchy.
- [Progress](https://ui.playstack.com.au/ui/progress/llms.txt): A determinate progress indicator for known-completion tasks. Linear and circular variants.
- [Radio](https://ui.playstack.com.au/ui/radio/llms.txt): A radio button input component.
- [Scrubber](https://ui.playstack.com.au/ui/scrubber/llms.txt): A compact labeled slider with an inline value readout — ideal for settings rows and media controls
- [Section](https://ui.playstack.com.au/ui/section/llms.txt): Vertical rhythm wrapper with optional surface variants
- [Segmented Control](https://ui.playstack.com.au/ui/segmented-control/llms.txt): A compact control for switching between a small set of mutually exclusive options with smooth animations and keyboard support.
- [Select](https://ui.playstack.com.au/ui/select/llms.txt): A native select component with consistent styling across browsers.
- [Settings Row](https://ui.playstack.com.au/ui/settings-row/llms.txt): A label/value/edit row used to compose dense settings pages
- [Sidebar](https://ui.playstack.com.au/ui/sidebar/llms.txt): Structural layout primitive for sidebar navigation. Provides Header, Content, Footer, and Group slots.
- [Skeleton](https://ui.playstack.com.au/ui/skeleton/llms.txt): A component to display a replacement for content while loading.
- [Slider](https://ui.playstack.com.au/ui/slider/llms.txt): A slider component based on the native range input
- [Spinner](https://ui.playstack.com.au/ui/spinner/llms.txt): A component to display a loading state with several visual variants.
- [Split](https://ui.playstack.com.au/ui/split/llms.txt): Sidebar + main layout that stacks on small screens
- [Stat](https://ui.playstack.com.au/ui/stat/llms.txt): A KPI block with label, value, and optional trend
- [Surface](https://ui.playstack.com.au/ui/surface/llms.txt): A composable card-like surface with header and footer slots
- [Switch](https://ui.playstack.com.au/ui/switch/llms.txt): A simple switch component on top of the native checkbox.
- [Table](https://ui.playstack.com.au/ui/table/llms.txt): Semantic table primitive. Compose with TanStack Table for sorting, selection, filtering, and pagination.
- [Tabs](https://ui.playstack.com.au/ui/tabs/llms.txt): A tab navigation component with smooth animations and keyboard support.
- [TemplateCard](https://ui.playstack.com.au/ui/template-card/llms.txt): Card for displaying email templates with thumbnail, status, and actions.
- [Textarea](https://ui.playstack.com.au/ui/textarea/llms.txt): A taller input.
- [Toaster](https://ui.playstack.com.au/ui/toaster/llms.txt): A component for displaying transient messages to users, such as notifications or alerts.
- [Toggle](https://ui.playstack.com.au/ui/toggle/llms.txt): A two-state button. Use standalone for a single on/off action, or grouped for related toggles like a formatting toolbar.
- [Toolbar Menu](https://ui.playstack.com.au/ui/toolbar-menu/llms.txt): A morphing toolbar that expands into a panel for each tab. The bar collapses to an icon-only strip when no tab is selected, then grows to reveal content as a directional slide.
- [Tooltip](https://ui.playstack.com.au/ui/tooltip/llms.txt): Tooltips are used to display information on demand.

## Icons

- [Copy Button](https://ui.playstack.com.au/icons/copy-button/llms.txt): A clipboard-copy button with an animated icon swap between Copy and Check.
- [Morph Icon](https://ui.playstack.com.au/icons/morph-icon/llms.txt): One icon, many shapes. Every glyph is exactly three SVG lines, so any icon can fluidly morph into any other.

## Blocks

- [Carousel](https://ui.playstack.com.au/blocks/carousel/llms.txt): Horizontal carousel of slides — snap (single), multi (multiple visible), or marquee (auto-scroll).
- [Core Values](https://ui.playstack.com.au/blocks/core-values/llms.txt): Two-title intro on the left, list of values (media + title + description) on the right.
- [CTA Banner](https://ui.playstack.com.au/blocks/cta-banner/llms.txt): Full-width call-to-action card with title, description, and one or two actions.
- [FAQs](https://ui.playstack.com.au/blocks/faqs/llms.txt): Two-column accordion of frequently asked questions.
- [Hero](https://ui.playstack.com.au/blocks/hero/llms.txt): Oversized two-title headline with optional description, CTAs, and media slot.
- [Logo Cloud](https://ui.playstack.com.au/blocks/logo-cloud/llms.txt): A centered row of client or partner logos with an optional title.
- [Stat Grid](https://ui.playstack.com.au/blocks/stat-grid/llms.txt): A responsive grid of KPI cards. Drop-in dashboard hero.
- [Steps](https://ui.playstack.com.au/blocks/steps/llms.txt): Two-title intro on the left, numbered steps with a dashed vertical rail on the right.
- [Text with Media](https://ui.playstack.com.au/blocks/text-with-media/llms.txt): Two-column section pairing copy with an image or video. Sides can be flipped.

## components

- [Instance Counter](https://ui.playstack.com.au/components/instance-counter/llms.txt): A utility component that assigns unique indices to component instances and tracks their total count in the component tree.
- [Marquee](https://ui.playstack.com.au/components/marquee/llms.txt): A component that displays a continuous stream of content.
- [Sequence](https://ui.playstack.com.au/components/sequence/llms.txt): A component for creating timed sequences of content with automatic progression.
- [Slot](https://ui.playstack.com.au/components/slot/llms.txt): A utility component that merges its props onto its immediate child.
- [Stack](https://ui.playstack.com.au/components/stack/llms.txt): A component for creating scrollable sections with sticky headers, perfect for long-form content and documentation where maintaining context while scrolling is important.

## hooks

- [useDetectDevice](https://ui.playstack.com.au/hooks/use-detect-device/llms.txt): A hook for detecting the user's device type and platform
- [useElementTransition](https://ui.playstack.com.au/hooks/use-element-transition/llms.txt): A hook to manage the mounting, unmounting, and transition status of a DOM element with lifecycle-related CSS transitions
- [useIntersectionObserver](https://ui.playstack.com.au/hooks/use-intersection-observer/llms.txt): A hook for observing the intersection of an element (or array of elements) with the viewport
- [useKeyboardShortcut](https://ui.playstack.com.au/hooks/use-keyboard-shortcut/llms.txt): A hook that listens for a global keyboard shortcut and invokes a callback.
- [useMatchMedia](https://ui.playstack.com.au/hooks/use-match-media/llms.txt): A hook that uses the matchMedia API to observe a media query
- [useMousePan](https://ui.playstack.com.au/hooks/use-mouse-pan/llms.txt): A hook for scrolling elements with a mouse pan gesture
- [usePrefersReducedMotion](https://ui.playstack.com.au/hooks/use-prefers-reduced-motion/llms.txt): A hook for checking user preference for reduce motion
- [useScrollLock](https://ui.playstack.com.au/hooks/use-scroll-lock/llms.txt): A hook that allows you to disable scrolling on an HTML element.
- [useStableCallback](https://ui.playstack.com.au/hooks/use-stable-callback/llms.txt): A hook that provides a stable callback reference for handling unstable function props.
- [useTailwindBreakpoint](https://ui.playstack.com.au/hooks/use-tailwind-breakpoint/llms.txt): A hook for observing breakpoints using Tailwind CSS breakpoints and custom media queries
- [useTicker](https://ui.playstack.com.au/hooks/use-ticker/llms.txt): A hook for creating performant paint-dependent loops using requestAnimationFrame with precise timing and delta calculations
- [useTopLayer](https://ui.playstack.com.au/hooks/use-top-layer/llms.txt): A hook to push an element to the application's Top Layer

## utils

- [Compose Refs](https://ui.playstack.com.au/utils/compose-refs/llms.txt): Compose multiple refs into a single ref.
- [Debounce](https://ui.playstack.com.au/utils/debounce/llms.txt): A utility function that limits the rate at which a function can be called by delaying its execution until a specified time has passed since its last invocation.
- [DOM](https://ui.playstack.com.au/utils/dom/llms.txt): A collection of utility functions for common DOM operations.
- [Math](https://ui.playstack.com.au/utils/math/llms.txt): A collection of utility functions for common mathematical operations.

## Guides

- [Changelog](https://ui.playstack.com.au/changelog/llms.txt): Breaking and consumer-facing changes to Foundations primitives — what to update when you copy-paste from this repo.
- [Component patterns](https://ui.playstack.com.au/guides/component-patterns/llms.txt): The canonical rules every Playstack component conforms to — file layout, server/client boundary, anatomy, variants, tokens, and accessibility.