Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Components
Stack
Slider

A draggable control for selecting numeric values within a defined range.

Svg

An enhanced SVG wrapper with built-in styling, perfect for custom inline icons.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

Stack

A vertical flex container that arranges children in a column with consistent spacing. Ideal for vertical layouts.

Usage

Basic usage example to quickly see how the Stack works.

import { Stack } from "@/ui/stack";
import { Button } from "@/ui/button";
import { Group } from "@/ui/group";

export function StackDemo() {
  const groups = [
    ["1", "2", "3"],
    ["4", "5", "6"],
    ["7", "8", "9"]
  ];

  return (
    <Group grow align="center">
      {groups.map((stack, index) => (
        <Stack key={index}>
          {stack.map(label => (
            <Button key={label} variant="outline" size="sm">
              {label}
            </Button>
          ))}
        </Stack>
      ))}
    </Group>
  );
}

Properties

Interactive configurator to explore customization options for the Stack component.

Gap
import React from "react";
import { Stack } from "@/ui/stack";
import { Button } from "@/ui/button";

export function StackDemo() {
  return (
    <Stack className="h-72 w-full">
      <Button variant="outline" size="sm">1</Button>
      <Button variant="outline" size="sm">2</Button>
      <Button variant="outline" size="sm">3</Button>
    </Stack>
  );
}

API References

Styles API

Styles APITypeDefaultAnnotation
unstyled?booleanfalseif true, all default styles will be removed

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

stack.tsx