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

Logo
HomeAboutServicesContact
<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>