astro-aside

Astro aside/callout component with five variants: note, tip, caution, warning, and danger.

Installation

npm install @rgglez/astro-aside

Usage

import Aside from "@rgglez/astro-aside";

Usage in .mdx files

<Aside type="note">
  This is a note.
</Aside>

<Aside type="tip" title="Pro tip">
  Custom title overrides the default label.
</Aside>

Usage in .astro files

<Aside type="warning">
  This works in any `.astro` file, not just MDX.
</Aside>

<Aside type="danger" title="Breaking change">
  Custom title overrides the default label.
</Aside>

Limitations

This is an Astro component (.astro). It cannot be imported directly into React, Vue, Svelte, or other framework components. Use it only from .astro or .mdx files.

Props

| Prop | Type | Default | Description | |---------|---------------------------------------------------|----------|--------------------------------------| | type | "note" \| "tip" \| "caution" \| "warning" \| "danger" | "note" | Visual variant | | title | string | — | Overrides the default variant label |

Variants

| Type | Color | |-----------|--------| | note | Blue | | tip | Green | | caution | Amber | | warning | Amber | | danger | Red |

Requirements

This component uses Tailwind CSS utility classes for all styling. Tailwind CSS must be configured in your project for the component to render correctly. Without it the aside will have no colors, background, or border.

If you are using Tailwind v4, make sure the package source is included in your content scan so the utility classes are not purged:

// tailwind.config.js (v3)
module.exports = {
  content: [
    // ...
    "./node_modules/@rgglez/astro-aside/src/**/*.astro",
  ],
};

/* global.css (v4) */
@source "../node_modules/@rgglez/astro-aside/src";

Development

| Target | Description | |--------|-------------| | make tags | List git tags sorted by semver (descending) | | make patch | Bump PATCH version in package.json, commit, tag, and push | | make publish | Publish current version to npm |

Typical release flow: make patch → make publish.

License

Copyright (C) 2026 Rodolfo González González.

Licensed under the Apache v2.0 license. Read the LICENSE file.