### Stack Component Installation

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Shows the command to install the `@nkzw/stack` package using npm. This is the standard method for adding the library to a project.

```bash
npm install @nkzw/stack
```

--------------------------------

### Stack Card Layout Example

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

An example demonstrating the use of Stack for creating a card layout with vertical arrangement, gaps, padding, borders, and nested content.

```tsx
<Stack
  vertical
  gap={16}
  padding={24}
  style={{ border: '1px solid #ccc', borderRadius: '16px' }}
>
  <h2>Card Title</h2>
  <p>Card content goes here</p>
  <Stack gap={8}>
    <button>Action 1</button>
    <button>Action 2</button>
  </Stack>
</Stack>
```

--------------------------------

### React Native Stack Component Examples

Source: https://context7.com/nkzw-tech/stack/llms.txt

Illustrates the usage of the Stack component for creating vertical lists, profile card layouts, and styled components with NativeWind. It requires React Native and optionally NativeWind for styled examples. The component facilitates flexible layout management with properties like 'vertical', 'gap', 'padding', and 'alignCenter'.

```tsx
import Stack from '@nkzw/stack';
import { Text, Image, TouchableOpacity } from 'react-native';

// Basic vertical list
const UserList = () => (
  <Stack vertical gap={16} padding={16}>
    <Text>Alice</Text>
    <Text>Bob</Text>
    <Text>Charlie</Text>
  </Stack>
);

// Profile card layout
const ProfileCard = ({ user }) => (
  <Stack
    vertical
    gap={16}
    padding={24}
    style={{ backgroundColor: '#fff', borderRadius: 12, shadowOpacity: 0.1 }}
  >
    <Stack alignCenter gap={16}>
      <Image
        source={{ uri: user.avatar }}
        style={{ width: 60, height: 60, borderRadius: 30 }}
      />
      <Stack vertical gap>
        <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{user.name}</Text>
        <Text style={{ color: '#666' }}>{user.email}</Text>
      </Stack>
    </Stack>

    <Stack gap={8} center>
      <TouchableOpacity style={{ padding: 12, backgroundColor: '#3498db', borderRadius: 8, flex: 1 }}>
        <Text style={{ color: 'white', textAlign: 'center' }}>Message</Text>
      </TouchableOpacity>
      <TouchableOpacity style={{ padding: 12, backgroundColor: '#2ecc71', borderRadius: 8, flex: 1 }}>
        <Text style={{ color: 'white', textAlign: 'center' }}>Follow</Text>
      </TouchableOpacity>
    </Stack>
  </Stack>
);

// NativeWind support (when installed)
const StyledCard = () => (
  <Stack
    vertical
    gap={16}
    padding={24}
    className="bg-white rounded-lg shadow-md"
  >
    <Text className="text-xl font-bold">Title</Text>
    <Text className="text-gray-600">Description</Text>
  </Stack>
);

```

--------------------------------

### Stack Content Alignment

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Align the content within the stack container. Supports 'center' and 'start'.

```tsx
<Stack content="center">
  <div>Content</div>
</Stack>

<Stack content="start">
  <div>Content</div>
</Stack>
```

--------------------------------

### Stack Component Usage: Vertical and Horizontal Layouts with Gap

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Provides examples of using the Stack component for both horizontal (default) and vertical layouts. It demonstrates how to apply a gap between child elements using the `gap` prop, including using a boolean `gap` for default spacing.

```tsx
import Stack from '@nkzw/stack';

// Horizontal layout (default).
<Stack gap={16}>
  <div>Apple</div>
  <div>Banana</div>
  <div>Kiwi</div>
</Stack>

// Vertical layout.
<Stack vertical gap={16}>
  <div>Apple</div>
  <div>Banana</div>
  <div>Kiwi</div>
</Stack>

// Using boolean gap (uses default gap of 8px).
<Stack vertical gap>
  <div>Apple</div>
  <div>Banana</div>
</Stack>
```

--------------------------------

### Stack Alignment (Cross Axis)

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Align items along the cross axis. Options include centering, aligning to the start, end, or baseline.

```tsx
// Center align items.
<Stack alignCenter>
  <div>Centered</div>
</Stack>

// Align to start.
<Stack alignStart>
  <div>At start</div>
</Stack>

// Align to end.
<Stack alignEnd>
  <div>At end</div>
</Stack>

// Baseline alignment.
<Stack baseline>
  <div style={{ fontSize: '12px' }}>Small</div>
  <div style={{ fontSize: '24px' }}>Large</div>
</Stack>
```

--------------------------------

### VStack Component: Vertical Layout Shorthand (React)

Source: https://context7.com/nkzw-tech/stack/llms.txt

Illustrates the use of the VStack component, a convenient shorthand for creating vertical stacks. This example demonstrates building a form with nested VStacks to manage layout and spacing for labels, inputs, and a submit button.

```tsx
import { VStack } from '@nkzw/stack';

// VStack is equivalent to <Stack vertical>
const Form = () => (
  <VStack gap={16} padding={24}>
    <VStack gap>
      <label htmlFor="name">Name</label>
      <input id="name" type="text" style={{ padding: 8 }} />
    </VStack>

    <VStack gap>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" style={{ padding: 8 }} />
    </VStack>

    <VStack gap>
      <label htmlFor="message">Message</label>
      <textarea id="message" rows={4} style={{ padding: 8 }} />
    </VStack>

    <Stack gap={8} end>
      <button type="button">Cancel</button>
      <button type="submit">Send</button>
    </Stack>
  </VStack>
);
```

--------------------------------

### Stack Self Alignment

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Control the alignment of individual Stack children along the cross axis. Supports 'center', 'start', 'end', and 'stretch'.

```tsx
// Align self to center.
<Stack self="center">
  <div>Self-centered</div>
</Stack>

// Other self alignment options.
<Stack self="start">
  <div>Self at start</div>
</Stack>

<Stack self="end">
  <div>Self at end</div>
</Stack>

<Stack self="stretch">
  <div>Self stretched</div>
</Stack>
```

--------------------------------

### Stack Component: Basic and Complex Layouts (React)

Source: https://context7.com/nkzw-tech/stack/llms.txt

Demonstrates the fundamental usage of the Stack component for creating horizontal and vertical layouts with configurable gaps and alignment. It also showcases a more complex example with padding and nested Stack components for structuring UI elements.

```tsx
import Stack from '@nkzw/stack';

// Horizontal layout with 16px gap and centered items
const HorizontalList = () => (
  <Stack gap={16} alignCenter>
    <div style={{ width: 50, height: 50, background: '#e74c3c' }}>A</div>
    <div style={{ width: 50, height: 50, background: '#3498db' }}>B</div>
    <div style={{ width: 50, height: 50, background: '#2ecc71' }}>C</div>
  </Stack>
);

// Vertical layout with boolean gap (uses default 8px)
const VerticalList = () => (
  <Stack vertical gap center>
    <div>Apple</div>
    <div>Banana</div>
    <div>Kiwi</div>
  </Stack>
);

// Complex layout with padding and custom alignment
const CardLayout = () => (
  <Stack
    vertical
    gap={16}
    padding={24}
    style={{ border: '1px solid #ccc', borderRadius: '16px', maxWidth: 400 }}
  >
    <h2 style={{ margin: 0 }}>Product Card</h2>
    <p style={{ margin: 0, color: '#666' }}>High quality product description</p>
    <Stack gap={8} end>
      <button style={{ padding: '8px 16px' }}>Cancel</button>
      <button style={{ padding: '8px 16px', background: '#3498db', color: 'white', border: 'none' }}>
        Buy Now
      </button>
    </Stack>
  </Stack>
);
```

--------------------------------

### Use `asStack` to Convert Components

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

The `asStack` utility allows any component to be converted into a Stack component, enabling seamless use of all Stack props.

```tsx
import { asStack } from '@nkzw/stack';

const Link = asStack(({ to, children, ...props }) => (
  <a href={to} {...props}>
    {children}
  </a>
));

<Link to="/home" center gap={16}>
  Home
</Link>;
```

--------------------------------

### Basic Stack Usage with Shorthand Props

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Demonstrates the basic usage of the Stack component with shorthand props like `vertical`, `gap`, and `center`. It shows how to render children, including platform-specific components like `div` for web and `View` for React Native.

```tsx
import Stack from '@nkzw/stack';

const Component = () => (
  <Stack vertical gap center>
    <div>Apple</div> {/* Works on the web */}
    <View>Banana</View> {/* Works in React Native */}
    <Item>Kiwi</Item>
  </Stack>
);
```

--------------------------------

### Stack Layout Options

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Configure layout direction, wrapping, and reversing. Supports inline flex, reverse, vertical reverse, and wrapping.

```tsx
// Inline flex.
<Stack inline>
  <div>Inline flex</div>
</Stack>

// Reverse direction.
<Stack reverse>
  <div>Apple (appears last)</div>
  <div>Banana (appears first)</div>
</Stack>

// Vertical reverse.
<Stack vertical reverse>
  <div>Apple (appears at bottom)</div>
  <div>Banana (appears at top)</div>
</Stack>

// Wrap (`flex-wrap: nowrap` is the default).
<Stack wrap>
  <div>Apple</div>
  <div>Banana</div>
  <div>Kiwi</div>
</Stack>
```

--------------------------------

### Stack Render as Different Elements

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Specify the HTML element or custom component that the Stack should render as, using the 'as' prop. This allows for semantic HTML or integrating with other components.

```tsx
<Stack as="section" gap={16}>
  <div>Content</div>
</Stack>

<Stack as="nav" center gap={24}>
  <Stack as={Link} to="/home">
    Home
  </Stack>
  <Stack as={Link} to="/about">
    About
  </Stack>
</Stack>
```

--------------------------------

### Navigation Bar using Stack Component (TSX)

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Renders a responsive navigation bar using the Stack component. It includes a logo, navigation links, and a sign-in button. This component assumes the availability of a 'Stack' UI primitive.

```tsx
<Stack alignCenter padding={16} style={{ backgroundColor: '#f5f5f5' }}>
  <h1>Logo</h1>
  <Stack gap={24} flex1 center>
    <a href="/home">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </Stack>
  <button>Sign In</button>
</Stack>
```

--------------------------------

### VStack Shorthand for Vertical Stacks

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Introduces the `VStack` component as a shorthand for creating vertical stacks with the `@nkzw/stack` library. It functions identically to `<Stack vertical>`. 

```tsx
import { VStack } from '@nkzw/stack';

<VStack gap={16}>
  <div>Apple</div>
  <div>Banana</div>
  <div>Kiwi</div>
</VStack>;

// Same as `<Stack vertical gap={16}>`.
```

--------------------------------

### Stack Component with NativeWind and CSS Classes

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Demonstrates integrating the Stack component with NativeWind, allowing the use of `className` prop for applying Tailwind CSS classes to style the stack and its children.

```tsx
<Stack vertical gap={16} className="rounded-md border border-gray-300">
  <Text>Apple</Text>
  <Text>Banana</Text>
  <Text>Kiwi</Text>
</Stack>
```

--------------------------------

### Build Grid Layout with Wrapping using Stack

Source: https://context7.com/nkzw-tech/stack/llms.txt

Demonstrates creating a grid-like layout with wrapping functionality using the Stack component. It's designed for displaying items like products, where each item has consistent styling and layout. The component accepts an array of products as input.

```tsx
import Stack from '@nkzw/stack';

// Grid-like layout with wrapping
const ProductGrid = ({ products }) => (
  <Stack wrap gap={24} padding={24}>
    {products.map(product => (
      <Stack
        key={product.id}
        vertical
        gap={12}
        padding={16}
        style={{ width: 280, border: '1px solid #ddd', borderRadius: 8 }}
      >
        <img src={product.image} alt={product.name} style={{ width: '100%', height: 200, objectFit: 'cover', borderRadius: 4 }} />
        <h3 style={{ margin: 0 }}>{product.name}</h3>
        <p style={{ margin: 0, color: '#666', fontSize: 14 }}>{product.description}</p>
        <Stack between alignCenter>
          <span style={{ fontSize: 20, fontWeight: 'bold' }}>${product.price}</span>
          <button style={{ padding: '8px 16px', background: '#3498db', color: 'white', border: 'none', borderRadius: 4 }}>
            Add to Cart
          </button>
        </Stack>
      </Stack>
    ))}
  </Stack>
);

```

--------------------------------

### Create Responsive Header with Stack Component

Source: https://context7.com/nkzw-tech/stack/llms.txt

Implements a responsive navigation header using the Stack component. It arranges elements horizontally with alignment and spacing controls, suitable for website navigation. Dependencies include the @nkzw/stack library.

```tsx
import Stack from '@nkzw/stack';

// Responsive navigation header
const Header = () => (
  <Stack
    as="header"
    alignCenter
    between
    padding={16}
    style={{ backgroundColor: '#2c3e50', color: 'white' }}
  >
    <Stack alignCenter gap={12}>
      <img src="/logo.svg" alt="Logo" style={{ height: 32 }} />
      <h1 style={{ margin: 0, fontSize: 20 }}>MyApp</h1>
    </Stack>

    <Stack as="nav" gap={24}>
      <a href="#features" style={{ color: 'white', textDecoration: 'none' }}>Features</a>
      <a href="#pricing" style={{ color: 'white', textDecoration: 'none' }}>Pricing</a>
      <a href="#about" style={{ color: 'white', textDecoration: 'none' }}>About</a>
    </Stack>

    <Stack gap={8}>
      <button style={{ padding: '8px 16px', background: 'transparent', color: 'white', border: '1px solid white' }}>
        Sign In
      </button>
      <button style={{ padding: '8px 16px', background: '#3498db', color: 'white', border: 'none' }}>
        Sign Up
      </button>
    </Stack>
  </Stack>
);

```

--------------------------------

### Default Flexbox Styles of Stack Component

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Illustrates the default CSS styles applied by the Stack component when rendered without any props. This includes `display`, `flexDirection`, `flexWrap`, and `justifyContent`.

```tsx
<div
  style={{
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'nowrap',
    justifyContent: 'flex-start',
  }}
/>
```

--------------------------------

### Stack Justification (Main Axis)

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Control the alignment of items along the main axis. Supports centering, aligning to the end, spacing around, between, and evenly. Includes 'safe' prop for web.

```tsx
// Center items.
<Stack center>
  <div>Centered</div>
</Stack>

// Align to end.
<Stack end>
  <div>At end</div>
</Stack>

// Space around items.
<Stack around>
  <div>Apple</div>
  <div>Banana</div>
</Stack>

// Align between.
<Stack between>
  <div>Between</div>
</Stack>

// Space evenly.
<Stack evenly>
  <div>Apple</div>
  <div>Banana</div>
</Stack>

// Space between (default).
<Stack>
  <div>Apple</div>
  <div>Banana</div>
</Stack>

// Renders with `justify-content: safe center`.
<Stack center safe>
  <div>Centered</div>
</Stack>

// Renders with `justify-content: safe flex-end`.
<Stack end safe>
  <div>At end</div>
</Stack>
```

--------------------------------

### Stack Flex Properties

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Apply standard flexbox properties like taking available space, growing to fill, and preventing shrinking.

```tsx
// Take all available space.
<Stack flex1>
  <div>Full width/height</div>
</Stack>

// Grow to fill container.
<Stack stretch>
  <div>Stretched</div>
</Stack>

// Prevent shrinking.
<Stack shrink0>
  <div>Won't shrink</div>
</Stack>
```

--------------------------------

### Stack Default Gap Configuration

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Set a global default gap value for all Stack components. This affects `gap={true}` usage.

```tsx
import { setDefaultGap } from '@nkzw/stack';

setDefaultGap(12); // Now gap={true} will use 12px.
```

--------------------------------

### Enhancing Custom Components with 'asStack' Utility in React

Source: https://context7.com/nkzw-tech/stack/llms.txt

Explains how to use the 'asStack' utility from '@nkzw/stack' to wrap custom React components, enabling them to accept and utilize all Stack layout props (like gap, padding, center, vertical). This allows for consistent styling and layout management across both built-in Stack components and custom ones.

```tsx
import { asStack } from '@nkzw/stack';

// Custom Link component wrapped with Stack
const Link = asStack(({ to, children, ...props }) => (
  <a href={to} {...props}>
    {children}
  </a>
));

// Custom Button component wrapped with Stack
const Button = asStack(({ variant = 'primary', children, ...props }) => (
  <button
    {...props}
    style={{
      ...props.style,
      background: variant === 'primary' ? '#3498db' : '#95a5a6',
      color: 'white',
      border: 'none',
      padding: '8px 16px',
      borderRadius: 4,
      cursor: 'pointer',
    }}
  >
    {children}
  </button>
));

// Usage with all Stack props available
const Navigation = () => (
  <nav>
    <Link to="/" center gap={8} padding={16}>
      <span>🏠</span>
      <span>Home</span>
    </Link>

    <Button variant="primary" center gap padding={12}>
      <span>✓</span>
      <span>Confirm</span>
    </Button>
  </nav>
);

// Custom Card component with Stack props
const Card = asStack(({ title, children, ...props }) => (
  <div {...props}>
    {title && <h3 style={{ margin: '0 0 12px 0' }}>{title}</h3>}
    {children}
  </div>
));

const Dashboard = () => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
    <Card
      title="Sales"
      vertical
      gap={16}
      padding={24}
      style={{ border: '1px solid #ddd', borderRadius: 8 }}
    >
      <p style={{ margin: 0, fontSize: 32, fontWeight: 'bold' }}>$12,345</p>
      <p style={{ margin: 0, color: '#27ae60' }}>↑ 12% from last month</p>
    </Card>
  </div>
);

```

--------------------------------

### Stack Padding Control

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Control padding for the Stack component. Padding can be set to match the gap, use a custom value, or use the default gap.

```tsx
// Add padding equal to the gap.
<Stack gap={16} padding>
  <div>Content</div>
</Stack>

// Custom padding value.
<Stack gap={16} padding={24}>
  <div>Content</div>
</Stack>

// Padding using the default gap value.
<Stack gap padding>
  <div>Content</div>
</Stack>
```

--------------------------------

### Stack Row and Column Gap Control

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Manage distinct gap values for rows and columns to create complex layouts. Supports vertical-only layouts with row gaps.

```tsx
// Different gaps for rows and columns.
<Stack rowGap={8} columnGap={16}>
  <div>Apple</div>
  <div>Banana</div>
  <div>Kiwi</div>
  <div>Item 4</div>
</Stack>

// Vertical layout with row gap.
<Stack vertical rowGap={20}>
  <div>Apple</div>
  <div>Banana</div>
</Stack>
```

--------------------------------

### Control Flex Growth and Sizing with @nkzw/stack

Source: https://context7.com/nkzw-tech/stack/llms.txt

Demonstrates how to control flex item behavior including growth, shrinkage, and sizing using properties like 'flex1', 'stretch', and 'shrink0' on the @nkzw/stack component. This allows for dynamic layout adjustments based on available space.

```tsx
import Stack from '@nkzw/stack';

const FlexExamples = () => (
  <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
    {/* flex1: Takes all available space */}
    <Stack vertical gap={16} flex1 style={{ background: '#3498db', color: 'white', padding: 16 }}>
      <h3 style={{ margin: 0 }}>Main Content (flex: 1)</h3>
      <p style={{ margin: 0 }}>This section grows to fill available space</p>
    </Stack>

    {/* stretch: Grows to fill container */}
    <Stack gap={16} style={{ background: '#ecf0f1', padding: 16 }}>
      <div style={{ background: '#e74c3c', padding: 16, color: 'white' }}>Fixed</div>
      <Stack stretch style={{ background: '#2ecc71', padding: 16, color: 'white' }}>
        Stretched
      </Stack>
      <div style={{ background: '#9b59b6', padding: 16, color: 'white' }}>Fixed</div>
    </Stack>

    {/* shrink0: Prevents shrinking */}
    <Stack gap={16} style={{ background: '#ecf0f1', padding: 16, width: 300 }}>
      <Stack shrink0 style={{ background: '#1abc9c', padding: 16, color: 'white', minWidth: 200 }}>
        Won't Shrink
      </Stack>
      <div style={{ background: '#16a085', padding: 16, color: 'white' }}>Can Shrink</div>
    </Stack>
  </div>
);

```

--------------------------------

### Form Layout using Stack Component (TSX)

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Defines a structured form layout using the Stack component. It arranges input fields (name, email) vertically with labels and includes action buttons (Cancel, Submit). This component relies on the 'Stack' UI primitive.

```tsx
<Stack as="form" vertical gap={16} padding={24}>
  <Stack vertical gap>
    <label>Name</label>
    <input type="text" />
  </Stack>
  <Stack vertical gap>
    <label>Email</label>
    <input type="email" />
  </Stack>
  <Stack gap end>
    <button type="button">Cancel</button>
    <button type="submit">Submit</button>
  </Stack>
</Stack>
```

--------------------------------

### Implement Dashboard Layout with Sidebar using Stack

Source: https://context7.com/nkzw-tech/stack/llms.txt

Shows how to create a dashboard layout with a fixed sidebar and a main content area using the Stack component. It utilizes flex properties like `flex1` and `shrink0` for flexible sizing and arrangement. The layout is designed for administrative interfaces.

```tsx
import Stack from '@nkzw/stack';

// Sidebar layout with flex control
const DashboardLayout = () => (
  <Stack style={{ height: '100vh' }}>
    {/* Sidebar */}
    <Stack
      vertical
      gap={8}
      padding={16}
      shrink0
      style={{ width: 240, backgroundColor: '#34495e', color: 'white' }}
    >
      <h2 style={{ margin: '0 0 16px 0' }}>Dashboard</h2>
      <Stack gap padding={12} style={{ background: '#2c3e50', borderRadius: 4 }}>
        <span>📊</span>
        <span>Analytics</span>
      </Stack>
      <Stack gap padding={12} style={{ borderRadius: 4 }}>
        <span>👥</span>
        <span>Users</span>
      </Stack>
      <Stack gap padding={12} style={{ borderRadius: 4 }}>
        <span>⚙️</span>
        <span>Settings</span>
      </Stack>
    </Stack>

    {/* Main content */}
    <Stack vertical flex1 style={{ backgroundColor: '#ecf0f1', overflow: 'auto' }}>
      <Stack alignCenter between padding={24} style={{ backgroundColor: 'white', borderBottom: '1px solid #ddd' }}>
        <h1 style={{ margin: 0 }}>Analytics</h1>
        <button style={{ padding: '8px 16px' }}>Export Data</button>
      </Stack>

      <Stack vertical gap={24} padding={24}>
        <Stack gap={24}>
          <Stack vertical gap padding={24} flex1 style={{ backgroundColor: 'white', borderRadius: 8 }}>
            <h3 style={{ margin: 0 }}>Total Users</h3>
            <p style={{ margin: 0, fontSize: 32, fontWeight: 'bold' }}>1,234</p>
          </Stack>
          <Stack vertical gap padding={24} flex1 style={{ backgroundColor: 'white', borderRadius: 8 }}>
            <h3 style={{ margin: 0 }}>Revenue</h3>
            <p style={{ margin: 0, fontSize: 32, fontWeight: 'bold' }}>$45,678</p>
          </Stack>
        </Stack>
      </Stack>
    </Stack>
  </Stack>
);

```

--------------------------------

### Stack Component Usage in React Native with Gap

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Shows how to use the Stack component within a React Native application, applying a vertical layout with a specified gap between child `Text` components.

```tsx
<Stack vertical gap={16}>
  <Text>Apple</Text>
  <Text>Banana</Text>
  <Text>Kiwi</Text>
</Stack>
```

--------------------------------

### Gap and Padding Props: Spacing Control (React)

Source: https://context7.com/nkzw-tech/stack/llms.txt

Explains and demonstrates the various ways to control spacing using the `gap`, `padding`, `verticalPadding`, and `horizontalPadding` props within the Stack component. It covers boolean usage, specific values, and directional padding, adhering to a 4px grid system.

```tsx
import Stack from '@nkzw/stack';

// Available gap values: 0, 1, 2, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, or true
const SpacingExamples = () => (
  <>
    {/* Boolean gap uses default 8px */}
    <Stack gap padding>
      <div>Uses 8px gap and padding</div>
    </Stack>

    {/* Specific gap with padding matching gap */}
    <Stack gap={24} padding>
      <div>Item 1</div>
      <div>Item 2</div>
    </Stack>

    {/* Independent gap and padding values */}
    <Stack gap={16} padding={32}>
      <div>16px gap, 32px padding</div>
    </Stack>

    {/* Directional padding control */}
    <Stack gap={12} verticalPadding={20} horizontalPadding={40}>
      <div>Content</div>
    </Stack>

    {/* Row and column gap for wrapped layouts */}
    <Stack wrap rowGap={16} columnGap={24} style={{ maxWidth: 400 }}>
      <div style={{ width: 100, height: 100, background: '#e74c3c' }}>1</div>
      <div style={{ width: 100, height: 100, background: '#3498db' }}>2</div>
      <div style={{ width: 100, height: 100, background: '#2ecc71' }}>3</div>
      <div style={{ width: 100, height: 100, background: '#f39c12' }}>4</div>
    </Stack>
  </>
);
```

--------------------------------

### Polymorphic Rendering with 'as' Prop in React

Source: https://context7.com/nkzw-tech/stack/llms.txt

Demonstrates rendering the Stack component as semantic HTML elements (like 'nav', 'a', 'form', 'label') or custom components (like 'react-router-dom's Link). This feature allows for flexible UI construction while maintaining type safety and leveraging Stack's layout props.

```tsx
import Stack from '@nkzw/stack';
import { Link } from 'react-router-dom';

// Render as semantic HTML elements
const SemanticLayout = () => (
  <Stack as="nav" gap={24} center padding={16} style={{ background: '#34495e' }}>
    <Stack as="a" href="/" style={{ color: 'white', textDecoration: 'none' }}>
      Home
    </Stack>
    <Stack as="a" href="/about" style={{ color: 'white', textDecoration: 'none' }}>
      About
    </Stack>
    <Stack as="a" href="/contact" style={{ color: 'white', textDecoration: 'none' }}>
      Contact
    </Stack>
  </Stack>
);

// Render as custom component (requires style prop support)
const NavigationWithRouter = () => (
  <Stack as="nav" center gap={24} padding={16} style={{ background: '#2c3e50' }}>
    <Stack as={Link} to="/" center gap style={{ color: 'white', textDecoration: 'none' }}>
      <span>🏠</span>
      <span>Home</span>
    </Stack>
    <Stack as={Link} to="/products" center gap style={{ color: 'white', textDecoration: 'none' }}>
      <span>📦</span>
      <span>Products</span>
    </Stack>
  </Stack>
);

// Form with semantic elements
const Form = () => (
  <Stack as="form" vertical gap={16} padding={24} style={{ maxWidth: 400 }}>
    <Stack as="label" vertical gap htmlFor="username">
      <span>Username</span>
      <input id="username" type="text" style={{ padding: 8 }} />
    </Stack>

    <Stack as="label" vertical gap htmlFor="password">
      <span>Password</span>
      <input id="password" type="password" style={{ padding: 8 }} />
    </Stack>

    <Stack gap={8} end>
      <button type="submit" style={{ padding: '8px 16px' }}>Login</button>
    </Stack>
  </Stack>
);

```

--------------------------------

### Configuring Global Default Gap with 'setDefaultGap' in React

Source: https://context7.com/nkzw-tech/stack/llms.txt

Shows how to use the 'setDefaultGap' function from '@nkzw/stack' to set a global default value for the 'gap' prop. This simplifies spacing consistency across an application, allowing `gap` and `gap={true}` to use the configured default, while explicit pixel values still work.

```tsx
import { setDefaultGap } from '@nkzw/stack';
import Stack from '@nkzw/stack';

// Configure default gap at app initialization
setDefaultGap(12); // Now gap={true} will use 12px instead of 8px

// Application component
const App = () => (
  <div>
    {/* These will use 12px gap */}
    <Stack gap padding>
      <div>Item 1</div>
      <div>Item 2</div>
    </Stack>

    {/* Still can use explicit values */}
    <Stack gap={24} padding>
      <div>Item A</div>
      <div>Item B</div>
    </Stack>

    {/* Boolean gap now uses configured default */}
    <Stack vertical gap>
      <div>Uses 12px gap</div>
      <div>Because of setDefaultGap(12)</div>
    </Stack>
  </div>
);

// Typically set in app entry point
// index.tsx or App.tsx
import { setDefaultGap } from '@nkzw/stack';
setDefaultGap(16); // Configure once at startup

export default App;

```

--------------------------------

### Stack Directional Padding

Source: https://github.com/nkzw-tech/stack/blob/main/README.md

Apply padding specifically to the vertical or horizontal axis, or set custom values for both. Can be mixed with gap properties.

```tsx
// Vertical padding only.
<Stack gap={16} verticalPadding>
  <div>Content</div>
</Stack>

// Horizontal padding only.
<Stack gap={16} horizontalPadding>
  <div>Content</div>
</Stack>

// Custom directional padding.
<Stack verticalPadding={24} horizontalPadding={32}>
  <div>Content</div>
</Stack>

// Mix with gaps.
<Stack rowGap={12} columnGap={20} verticalPadding horizontalPadding={32}>
  <div>Content</div>
</Stack>
```

--------------------------------

### Justify Items on Main Axis with @nkzw/stack

Source: https://context7.com/nkzw-tech/stack/llms.txt

Demonstrates how to control item positioning along the main axis using properties like 'center', 'end', 'between', 'evenly', and 'around' on the @nkzw/stack component. This is useful for distributing space and aligning content horizontally or vertically depending on the flex direction.

```tsx
import Stack from '@nkzw/stack';

const JustificationExamples = () => (
  <div style={{ width: '100%' }}>
    {/* Center items */}
    <Stack center gap={16} style={{ background: '#ecf0f1', padding: 16, marginBottom: 8 }}>
      <div style={{ background: '#3498db', padding: 8, color: 'white' }}>Centered</div>
    </Stack>

    {/* Align to end */}
    <Stack end gap={16} style={{ background: '#ecf0f1', padding: 16, marginBottom: 8 }}>
      <div style={{ background: '#e74c3c', padding: 8, color: 'white' }}>At End</div>
    </Stack>

    {/* Space between */}
    <Stack between style={{ background: '#ecf0f1', padding: 16, marginBottom: 8 }}>
      <div style={{ background: '#2ecc71', padding: 8, color: 'white' }}>Start</div>
      <div style={{ background: '#9b59b6', padding: 8, color: 'white' }}>End</div>
    </Stack>

    {/* Space evenly */}
    <Stack evenly style={{ background: '#ecf0f1', padding: 16, marginBottom: 8 }}>
      <div style={{ background: '#1abc9c', padding: 8, color: 'white' }}>A</div>
      <div style={{ background: '#34495e', padding: 8, color: 'white' }}>B</div>
      <div style={{ background: '#e67e22', padding: 8, color: 'white' }}>C</div>
    </Stack>

    {/* Space around */}
    <Stack around style={{ background: '#ecf0f1', padding: 16 }}>
      <div style={{ background: '#16a085', padding: 8, color: 'white' }}>X</div>
      <div style={{ background: '#27ae60', padding: 8, color: 'white' }}>Y</div>
      <div style={{ background: '#2980b9', padding: 8, color: 'white' }}>Z</div>
    </Stack>
  </div>
);

```

--------------------------------

### Align Items on Cross Axis with @nkzw/stack

Source: https://context7.com/nkzw-tech/stack/llms.txt

Illustrates how to control item positioning along the cross axis using properties like 'alignCenter', 'alignStart', 'alignEnd', and 'baseline' on the @nkzw/stack component. This is useful for aligning items when they have different heights or when the main axis is vertical.

```tsx
import Stack from '@nkzw/stack';

const AlignmentExamples = () => (
  <div style={{ width: '100%' }}>
    {/* Center align items */}
    <Stack gap={16} alignCenter style={{ height: 100, background: '#ecf0f1', marginBottom: 8 }}>
      <div style={{ background: '#3498db', padding: 8, color: 'white', height: 40 }}>Small</div>
      <div style={{ background: '#e74c3c', padding: 8, color: 'white', height: 60 }}>Medium</div>
      <div style={{ background: '#2ecc71', padding: 8, color: 'white', height: 80 }}>Large</div>
    </Stack>

    {/* Align to start */}
    <Stack gap={16} alignStart style={{ height: 100, background: '#ecf0f1', marginBottom: 8 }}>
      <div style={{ background: '#9b59b6', padding: 8, color: 'white', height: 40 }}>Start</div>
      <div style={{ background: '#34495e', padding: 8, color: 'white', height: 60 }}>Aligned</div>
    </Stack>

    {/* Align to end */}
    <Stack gap={16} alignEnd style={{ height: 100, background: '#ecf0f1', marginBottom: 8 }}>
      <div style={{ background: '#1abc9c', padding: 8, color: 'white', height: 40 }}>End</div>
      <div style={{ background: '#16a085', padding: 8, color: 'white', height: 70 }}>Aligned</div>
    </Stack>

    {/* Baseline alignment */}
    <Stack gap={16} baseline style={{ background: '#ecf0f1', padding: 16 }}>
      <div style={{ fontSize: 12, background: '#e67e22', padding: 4, color: 'white' }}>Small</div>
      <div style={{ fontSize: 20, background: '#d35400', padding: 4, color: 'white' }}>Medium</div>
      <div style={{ fontSize: 32, background: '#c0392b', padding: 4, color: 'white' }}>Large</div>
    </Stack>
  </div>
);

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.