@teasim/aster — Teasim

@teasim/aster arranges pages from Astra elements. It owns grid, gaps, content measure, and responsive composition while Astra owns element appearance and browser behavior. It provides documentation shells, headers, footers, navigation trees, pagers, and marketing sections.

This guide targets Aster 0.5.0, Astra 0.5.0, and TeaCSS 0.7.1.

Install

After configuring GitHub Packages as shown in Astra:

bun add @teasim/[email protected] @teasim/[email protected] @teacss/[email protected]
bun add -d [email protected] @teacss/[email protected]

Aster requires Node.js 24.2.0 or later, Astro >=7.2.0, Astra ^0.5.0, and exact TeaCSS / Classes peers 0.7.1. The application installs Classes directly so its recipes and both libraries share one module.

Aster has no stylesheet entry of its own. Its recipes use Standard, Official, and Astra’s declarations. At the project-root index.css:

css

@import "@teasim/astra/index.shortcuts.css";
@presets "standard,icons,official";
@source "./src/**/*.{astro,ts,tsx,js,jsx,md,mdx,css}";
@source "./node_modules/@teasim/astra/dist/**/*.{js,astro,css}";
@source "./node_modules/@teasim/aster/dist/**/*.{js,astro,css}";
@teacss;

Keep both packages in the SSR build:

import { defineConfig } from "astro/config";
import { teacss } from "@teacss/astro";

export default defineConfig({
  integrations: [teacss()],
  vite: { resolve: { noExternal: ["@teasim/astra", "@teasim/aster"] } },
});

See TeaCSS installation for entry-relative source paths and adapter requirements.

Import by family

Aster has no public package root. Import components, public helpers, and types from the documented family subpath:

import { Shell01 } from "@teasim/aster/shell-01";
import { Header01 } from "@teasim/aster/header-01";
import { Footer01 } from "@teasim/aster/footer-01";

Numbered families use two digits. Header01, header01Recipe, and the header-01/root part belong to one family; old site-prefixed aliases and source deep imports are not supported. Use documented props and slots rather than treating one numbered design as interchangeable with another. Recipes are internal; customize rendered parts through documented data-slot identities, or use the package’s editable source registry for local composition.

Header appearance controls use appearanceLabel and related appearance options. The page layout installs Astra’s AppearanceScript once, as shown in Shared appearance.

The block boundary

A block can render sibling parts and named slots because page composition needs regions. It composes Astra’s elements instead of duplicating their surfaces, semantics, or interactive controllers. Aster itself ships no client scripts; interactive behavior comes from the Astra elements it composes.

The site owns its brand, navigation data, content, and decorative frame. Neither Aster nor Astra loads content collections. Compute navigation through Astro, then pass the resulting data into the relevant block. Every block remains ordinary Astro and can be replaced locally without changing the content model.

Continue reading

See Project structure for how the content, element, and block layers compose into a complete site.