@vetaui/templates

Full-page layout primitives for the Veta design system. Templates provide the typographic and spatial skeleton used by marketing sites, dashboards, and documentation pages — Heading, Text, Container, Stack, Grid.

Install

pnpm add @vetaui/foundations @vetaui/templates

Usage

import { Container, Heading, Text, Stack, Grid } from "@vetaui/templates";

export default function Page() {
  return (
    <Container size="lg">
      <Stack gap={8}>
        <Heading as="h1" size="4xl" weight="bold">
          Welcome to Veta
        </Heading>
        <Text size="lg" color="muted">
          The atomic design system for Next.js 2026.
        </Text>
        <Grid cols={{ base: 1, md: 3 }} gap={6}>
          {/* ... feature cards ... */}
        </Grid>
      </Stack>
    </Container>
  );
}

Component catalog

| Component | Description | | --- | --- | | Heading | Semantic heading (h1–h6) with size, weight, and color variants | | Text | Paragraph / span with size, weight, color, and alignment variants | | Container | Max-width centered wrapper — sm / md / lg / xl / full | | Stack / VStack / HStack | Flex column or row with configurable gap and alignment | | Grid | CSS Grid wrapper with responsive column count and gap |

Variants

All components accept a className prop for one-off overrides via tailwind-merge.

<Container size="md" className="py-20">
  <Heading as="h2" size="3xl" className="text-[var(--veta-primary)]">
    Custom heading
  </Heading>
</Container>

License

MIT — Dambert Munoz