Astro Design System Kitchen Sink
A single page that renders all current Astro design-system components used in this docs site.
Alert
Info
Informational callout with subtle appearance.
Warning
Solid warning surface for higher emphasis.
Danger
Danger alert with icon slot content.
Aside
Note
Aside note variant.
Tip
Aside tip variant.
Caution
Aside caution variant.
Danger
Aside danger variant.
Badge
neutral accent success warning danger tip
Card, CardGrid, and LinkCard
Card title
Simple card body content.
Go to the component system guide.
Open guide ->Steps
-
Install typestyles and the related packages.
-
Import your component styles in your app entry.
-
Compose components and theme tokens in pages.
FileTree
- src/
- components/
- styles.ts
-
Code
ts
import { button } from '@examples/design-system';
const classes = button({ tone: 'primary', size: 'md' });
console.log(classes.root);