How to Make an Aside Component in Astro

Don’t let your blog posts be boring. Break up monotany and draw attention to important information with an Aside component!

These are also know as an “admonition” or “callout”. No matter what you call it, that’s what we’ll make in this post. It’ll even support markdown features within it.

What is an Aside Component?

The Aside component we are going to make will look similar to the below (with 4 variants), which you’ll also see me use in various blog posts on the site.

Prerequisites

Packages

Before we get started, make sure you have the following:

• An Astro project, ideally using the blog starter project as that is what I will use for demonstration.
  • If you don’t know how to do this, follow these instructions and select the blog starter project.
• Tailwind, tailwindcss/typography MDX, and astro-icon installed in the project.
  • Install Tailwind: npx astro add tailwind
  • Install tailwindcss/typography: npm install -D @tailwindcss/typography
  • Install MDX: npx astro add mdx
  • Install astro-icon: npx astro add astro-icon

Icons

You’ll likely want icons to help this look a little nicer. I like the ones from Tabler Icons, but you can use any you like. For ease of use, create an svg file for each at src/icons/tabler/{icon-name}.svg. In the code I will use tabler/bulb, tabler/alert-triangle, tabler/flame, and tabler/info-circle.

Tailwind Typography

I prefer to use tailwind’s typography plugin for styling markdown. You can find it’s documentation here. In short, after you install it you need to add it to your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("@tailwindcss/typography"),
    // ...
  ],
};

Then you need to add the prose class to your layout file so it surrounds the <Content />. This will style it nicely. If you’re using the blog starter, they already use this class inside src/layouts/BlogPost.astro.

Creating the Aside Component

Aside Component Code

First, let’s create the Aside.astro component. This will be a simple component that takes a variant prop to determine the style of the aside. Note that this needs to have a <slot /> for the content to be passed in.

---
import { Icon } from "astro-icon/components";

interface Props {
  variant: "tip" | "caution" | "danger" | "info";
}

const { variant } = Astro.props as Props;

const icon = (() => {
  switch (variant) {
    case "tip":
      return "tabler/bulb";
    case "caution":
      return "tabler/alert-triangle";
    case "danger":
      return "tabler/flame";
    case "info":
      return "tabler/info-circle";
  }
})();
---

<div
  class:list={[
    "aside prose-p:my-0 my-3 rounded-md border-l-4 px-4 py-3",
    {
      "prose-code:bg-green-400/20 border-green-400 bg-green-400/10 text-green-950":
        variant === "tip",
    },
    {
      "prose-code:bg-yellow-400/20 border-yellow-400 bg-yellow-400/10 text-yellow-950":
        variant === "caution",
    },
    {
      "prose-code:bg-red-400/20 border-red-400 bg-red-400/10 text-red-950":
        variant === "danger",
    },
    {
      "prose-code:bg-sky-400/20 border-sky-400 bg-sky-400/10 text-sky-950":
        variant === "info",
    },
  ]}
>
  <div class="flex items-center gap-2 pb-2">
    <Icon name={icon} class="h-7 w-7" aria-hidden="true" />
    <p class="text-sm font-bold">{variant.toUpperCase()}</p>
  </div>
  <slot />
</div>

Code Explanations

I use the variant prop to determine which type of aside to make. This changes the icon, as well as the colors.

All the prose- classes change the styling of prose content. This allows us to override some prose styling as needed. I kept it pretty simple here, but you could alter this to fit your needs using the various modifiers.

Production-ready Astro Templates

Templates with tons of features others leave out. I18n, CMS, animations, image optimization, SEO, and more.

View Free Themes

Using the Aside Component in Markdown

In order to use it, the component first needs imported. You can do this directly within the markdown, use a package like astro-auto-import, or pass the component to your <Content /> component. I’ll use the latter option here so we don’t need to install anything else.

Blog […slug].astro edits

First, we need to pass the component to the <Content /> component. This is done in the src/pages/blog/[...slug].astro file. Here’s the slight modifications you need to make.

---
import { type CollectionEntry, getCollection } from "astro:content";
import BlogPost from "../../layouts/BlogPost.astro";
import Aside from "../../components/Aside.astro";

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.id },
    props: post,
  }));
}
type Props = CollectionEntry<"blog">;

const post = Astro.props;
const { Content } = await post.render();
---

<BlogPost {...post.data}>
  <Content components={{ Aside: Aside }} />
</BlogPost>

Blog Starter CSS Correction

The blog starter has a little bit of CSS that will conflict with the aside component. You can remove or comment this out from the src/styles/global.css file.

/* more styles */
p {
  margin-bottom: 1em;
}
.prose p {
  margin-bottom: 2em;
}
textarea {
  width: 100%;
  font-size: 16px;
}
/* more styles */

Aside Component Syntax

Here’s an example of it in action in an MDX file.

---
title: "Markdown Style Guide"
description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
pubDate: "Jul 01 2022"
heroImage: "/blog-placeholder-1.jpg"
---

Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.

<Aside variant="tip">
  Aside `variant="tip"`. Use this to provide a cool tip.
</Aside>

<Aside variant="caution">
  Aside `variant="caution"`. Use this to warn people of potential issues.
</Aside>

<Aside variant="danger">
  Aside `variant="danger"`. Use this to tell people not to do something.
</Aside>

<Aside variant="info">
  Aside `variant="info"`. Use this to provide extra secret sauce.
</Aside>

So, what now?

That’s it! You’ve created an aside component in Astro. Happy coding. 🚀