@neynar/ui
Version:
React UI component library built on shadcn/ui and Tailwind CSS
28 lines (20 loc) • 1.65 kB
Markdown
# Stack
**Type**: component
Stack - A flexible layout component for consistent spacing between elements Stack is a fundamental layout primitive that arranges child elements in either vertical or horizontal direction with consistent spacing. Built on flexbox principles, it provides a clean, declarative API for common layout patterns without requiring custom CSS or complex flex configurations. **Core Features:** - Consistent spacing using Tailwind's design system - Flexible direction control (vertical/horizontal) - Zero-config flexbox layouts with predictable behavior - Composable with other UI components and layout utilities - Full accessibility support with semantic HTML structure - TypeScript-first with comprehensive prop validation **Common Use Cases:** - Form layouts with consistent field spacing - Button groups and action bars - Content sections with uniform gaps - Navigation lists and menu structures - Card layouts and dashboard grids - Page sections and content hierarchy - Responsive component layouts **Design System Integration:** Stack integrates seamlessly with design systems by providing consistent spacing that aligns with Tailwind's spacing scale. This ensures visual harmony across your application and reduces the need for custom spacing utilities in most common layout scenarios.
## JSX Usage
```jsx
import { Stack } from '@neynar/ui';
<Stack
spacing={value}
direction={value}
/>
```
## Component Props
### spacing
- **Type**: `StackSpacing`
- **Required**: No
- **Description**: No description available
### direction
- **Type**: `StackDirection`
- **Required**: No
- **Description**: No description available