@minimall.io/astro-primitives

Astro primitives inspired by Radix UI Themes

Installation
Breakpoints
Responsive Variants
Box
Container
Divider
Flex
Grid
Heading
Link
SVG
Text

Installation

npm install @minimall.io/astro-primitives

Breakpoints

Components with responsive variants (Box, Container, Flex, Grid, Heading, Link, SVG, Text) use the following min-width breakpoints:

Variant	Breakpoint
XS	520px
SM	768px
MD	1024px
LG	1280px
XL	1640px

For example, pMD="6" applies padding 6 from the 1024px viewport and up; sizeXS="3" applies size 3 from the 520px viewport and up.

Responsive Variants

Components that support responsive behavior follow a consistent naming convention. For any base prop prop, the responsive variants are:

propXS — applies at the XS breakpoint (520px) and up
propSM — applies at the SM breakpoint (768px) and up
propMD — applies at the MD breakpoint (1024px) and up
propLG — applies at the LG breakpoint (1280px) and up
propXL — applies at the XL breakpoint (1640px) and up

The base prop (e.g., size, p, gap) sets the default value; responsive variants override it at their respective breakpoints. For example, size="3" with sizeMD="5" renders size 3 below 1024px and size 5 from 1024px upward.

Box

A layout primitive for applying responsive padding. Renders as a semantic HTML element (header, main, footer, section, nav, div, or li) with configurable padding using a spacing scale (0–9). The following props support responsive variants: p, px, py, pt, pr, pb, and pl.

Interface

interface Props {
  id?: string;
  as?: 'header' | 'main' | 'footer' | 'section' | 'nav' | 'div' | 'li';

  p?: Spacing;   // all sides
  px?: Spacing;  // horizontal
  py?: Spacing;  // vertical
  pt?: Spacing;  // top
  pr?: Spacing;  // right
  pb?: Spacing;  // bottom
  pl?: Spacing;  // left
  // Responsive variants: p, px, py, pt, pr, pb, pl
}

// Spacing: 0=0px, 1=8px, 2=12px, 3=16px, 4=24px, 5=32px, 6=48px, 7=64px, 8=96px, 9=128px
type Spacing = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';

Usage

---
import Box from '@minimall.io/astro-primitives/Box';
---

<Box as="section" p="4" pMD="6">
  <p>Content with responsive padding</p>
</Box>

Container

A centered layout container with a max-width. Constrains content width and centers it horizontally. The following props support responsive variants: size.

Interface

interface Props {
  id?: string;
  size?: '1' | '2' | '3' | '4';
  // Responsive variants: size
}
// size: 1=448px, 2=688px, 3=880px, 4=1136px

Usage

---
import Container from '@minimall.io/astro-primitives/Container';
---

<Container size="3" sizeMD="4">
  <p>Centered content with max-width</p>
</Container>

Divider

A horizontal rule for separating content. Renders an <hr> with optional custom border color. No responsive variants.

Interface

interface Props {
  id?: string;
  color?: string;  // CSS color value (default: currentColor)
}

Usage

---
import Divider from '@minimall.io/astro-primitives/Divider';
---

<section>
  <p>First section</p>
  <Divider color="var(--gray-6)" />
  <p>Second section</p>
</section>

Flex

A flexbox layout primitive. Renders as div, ul, or ol. The following props support responsive variants: direction, wrap, gap, justifyContent, alignItems, and alignContent.

Interface

interface Props {
  id?: string;
  as?: 'div' | 'ul' | 'ol';

  direction?: 'row' | 'column';
  wrap?: 'wrap' | 'nowrap';
  gap?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
  justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
  alignItems?: 'start' | 'end' | 'center' | 'stretch';
  alignContent?: 'start' | 'end' | 'center' | 'stretch' | 'between' | 'around' | 'evenly';
  // Responsive variants: direction, wrap, gap, justifyContent, alignItems, alignContent
}
// Gap: 0=0px, 1=8px, 2=12px, 3=16px, 4=24px, 5=32px, 6=48px, 7=64px, 8=96px, 9=128px

Usage

---
import Flex from '@minimall.io/astro-primitives/Flex';
---

<Flex direction="row" directionMD="column" gap="3" justifyContent="between" alignItems="center">
  <span>Item 1</span>
  <span>Item 2</span>
</Flex>

Grid

A CSS Grid layout primitive. Renders as div, ul, or ol. The following props support responsive variants: gap, columns, rows, flow, justifyItems, alignItems, justifyContent, alignContent, minColWidth, minRowHeight, columnsSizing, and rowsSizing.

Interface

interface Props {
  id?: string;
  as?: 'div' | 'ul' | 'ol';

  gap?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
  columns?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'fit' | 'fill';
  rows?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
  flow?: 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
  justifyItems?: 'start' | 'end' | 'center' | 'stretch';
  alignItems?: 'start' | 'end' | 'center' | 'stretch';
  justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'between' | 'around' | 'evenly';
  alignContent?: 'start' | 'end' | 'center' | 'stretch' | 'between' | 'around' | 'evenly';
  minColWidth?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
  minRowHeight?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
  columnsSizing?: 'auto' | 'equal';
  rowsSizing?: 'auto' | 'equal';
  // Responsive variants: gap, columns, rows, flow, justifyItems, alignItems, justifyContent, alignContent, minColWidth, minRowHeight, columnsSizing, rowsSizing
}
// Gap: 0=0px, 1=8px, 2=12px, 3=16px, 4=24px, 5=32px, 6=48px, 7=64px, 8=96px, 9=128px
// minColWidth, minRowHeight: 1=160px, 2=180px, 3=200px, 4=240px, 5=260px, 6=280px, 7=320px, 8=360px

Usage

---
import Grid from '@minimall.io/astro-primitives/Grid';
---

<Grid columns="3" columnsMD="6" gap="4" minColWidth="5">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</Grid>

Heading

A typography primitive for headings. Renders as h1–h6 with configurable size, weight, align, wrap, trim, truncate, and color. The following props support responsive variants: size, weight, align, wrap, trim, and truncate.

Interface

interface Props {
  id?: string;
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

  size?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
  weight?: 'light' | 'regular' | 'medium' | 'bold';
  align?: 'left' | 'center' | 'right';
  wrap?: 'balance' | 'nowrap' | 'pretty' | 'stable' | 'wrap';
  trim?: 'normal' | 'start' | 'end' | 'both';
  truncate?: boolean;
  color?: string;
  // Responsive variants: size, weight, align, wrap, trim, truncate
}
// size (font-size): 1=12px, 2=14px, 3=16px, 4=18px, 5=20px, 6=24px, 7=28px, 8=35px, 9=60px
// weight (font-weight): light=300, regular=400, medium=500, bold=700

Usage

---
import Heading from '@minimall.io/astro-primitives/Heading';
---

<Heading as="h1" size="8" sizeMD="9" weight="bold" align="center">
  Page Title
</Heading>

Link

A styled anchor link with typography options. The following props support responsive variants: size, weight, align, wrap, trim, and truncate. Automatically adds rel="noopener noreferrer" when target="_blank".

Interface

interface Props {
  id?: string;

  href: string;
  target?: '_self' | '_blank';
  rel?: string;

  size?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
  weight?: 'light' | 'regular' | 'medium' | 'bold';
  align?: 'left' | 'center' | 'right';
  wrap?: 'balance' | 'nowrap' | 'pretty' | 'stable' | 'wrap';
  trim?: 'normal' | 'start' | 'end' | 'both';
  truncate?: boolean;
  color?: string;
  // Responsive variants: size, weight, align, wrap, trim, truncate
}
// size (font-size): 1=12px, 2=14px, 3=16px, 4=18px, 5=20px, 6=24px, 7=28px, 8=35px, 9=60px
// weight (font-weight): light=300, regular=400, medium=500, bold=700

Usage

---
import Link from '@minimall.io/astro-primitives/Link';
---

<Link href="/about" size="4" weight="medium">
  Learn more
</Link>

<Link href="https://example.com" target="_blank">
  External link
</Link>

SVG

A wrapper for SVG components. Accepts an Astro SVG component via the as prop. The following props support responsive variants: width and height. Supports accessibility with optional label for aria-label or aria-hidden when decorative.

Interface

interface Props {
  id?: string;
  as: SvgComponent;  // Astro SVG component
  label?: string;   // For aria-label (role="img")
  style?: Record<string, string>;

  width?: string;   // CSS length (e.g. "24px", "1em")
  height?: string;  // CSS length (e.g. "24px", "1em")
  // Responsive variants: width, height
}

Usage

---
import SVG from '@minimall.io/astro-primitives/SVG';
import Icon from '../assets/icon.svg';
---

<SVG as={Icon} width="24px" height="24px" label="Settings" />

<SVG as={Icon} width="1em" widthMD="1.5em" />

Text

A typography primitive for body text and spans. Renders as p or span with configurable size, weight, align, wrap, trim, truncate, and color. The following props support responsive variants: size, weight, align, wrap, trim, and truncate.

Interface

interface Props {
  id?: string;
  as?: 'p' | 'span';

  size?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
  weight?: 'light' | 'regular' | 'medium' | 'bold';
  align?: 'left' | 'center' | 'right';
  wrap?: 'balance' | 'nowrap' | 'pretty' | 'stable' | 'wrap';
  trim?: 'normal' | 'start' | 'end' | 'both';
  truncate?: boolean;
  color?: string;
  // Responsive variants: size, weight, align, wrap, trim, truncate
}
// size (font-size): 1=12px, 2=14px, 3=16px, 4=18px, 5=20px, 6=24px, 7=28px, 8=35px, 9=60px
// weight (font-weight): light=300, regular=400, medium=500, bold=700

Usage

---
import Text from '@minimall.io/astro-primitives/Text';
---

<Text as="p" size="3" sizeMD="4" weight="regular">
  Body paragraph text with responsive sizing.
</Text>

<Text as="span" size="2" color="var(--gray-11)">
  Inline text
</Text>

@minimall.io/astro-primitives

Get started

Weekly DownloadsAcross all versions

Compatibility

Versions

Peer Dependency (1)

Keywords

Maintainers

Readme

Astro primitives inspired by Radix UI Themes

Table of Contents

Installation

Breakpoints

Responsive Variants

Box

Container

Divider

Flex

Grid

Heading

Link

SVG

Text