Layout
Powerful layout components and utilities for building responsive, flexible interfaces.
Overview
Aki UI provides a comprehensive set of layout components that make it easy to create responsive designs without writing custom CSS. All layout components support responsive props that adapt to different screen sizes.
🎯 Key Features:
- • Responsive-first design with mobile-first approach
- • TypeScript support with full type safety
- • Consistent API across all layout components
- • Zero runtime CSS-in-JS - uses Tailwind classes
- • Flexible and composable component architecture
Components
Grid
Flexible grid system with responsive columns, rows, and gap control.
Features: Responsive columns • Grid spans • Auto-fit layouts
Stack
Arrange elements in horizontal or vertical stacks with consistent spacing.
Features: Direction control • Alignment • Wrapping • Spacing
Breakpoints
Responsive design utilities and hooks for adaptive layouts.
Features: Breakpoint hooks • Media queries • Responsive props
Quick Examples
Responsive Card Grid
Card 1
Sample card content with some text.
Card 2
Sample card content with some text.
Card 3
Sample card content with some text.
<Grid cols={{ base: 1, md: 2, lg: 3 }} gap={4}> <div>Card 1</div> <div>Card 2</div> <div>Card 3</div> </Grid>
Responsive Navigation
<Stack direction={{ base: 'vertical', md: 'horizontal' }} spacing={4} align="center" > <div>Logo</div> <Stack direction="horizontal" spacing={6}> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> </Stack> <button>Get Started</button> </Stack>
Getting Started
1. Import Components
import { Grid, GridItem, Stack } from '@akitectio/aki-ui'
2. Use Responsive Props
Most layout components accept responsive props using breakpoint objects:
// Single value for all breakpoints <Grid cols={3} /> // Responsive values <Grid cols={{ base: 1, md: 2, lg: 3 }} />
3. Compose Layouts
Combine components to create complex, responsive layouts:
<Stack spacing={8}> <header>Header content</header> <Grid cols={{ base: 1, lg: 3 }} gap={6}> <Stack spacing={4}>Sidebar</Stack> <Stack spacing={6}>Main content</Stack> <Stack spacing={4}>Aside</Stack> </Grid> </Stack>