Layout Primitives

Use layout primitives to compose page structure quickly.

Quick Preview

HeaderActions

Card A

Card B

Card C

Preset Examples

Code

<Container className="py-8">...</Container>
<Stack className="gap-4">...</Stack>
<Flex className="items-center justify-between">...</Flex>
<Grid className="grid-cols-1 gap-4 md:grid-cols-3">...</Grid>
<Box className="rounded-lg border p-4">...</Box>

Usage

Code

import { Container, Stack, Flex, Grid, Box } from "@altech-ui/react"
 
<Container>
  <Stack className="gap-4">
    <Flex className="justify-between">...</Flex>
    <Grid className="grid-cols-3 gap-3">
      <Box>...</Box>
    </Grid>
  </Stack>
</Container>

Components

Box
Flex
Grid
Stack
Container

Props

Box, Flex, Grid, Stack, Container: native div props