Built-in Components Reference

Astro includes several built-in components for you to use in your projects. All built-in components are available in .astro files and may require an import statement.

You can reference the Props of these components using the ComponentProps type utility.

<Code />

Section titled <Code />

---
import { Code } from 'astro:components';
---
<!-- Syntax highlight some JavaScript code. -->
<Code code={`const foo = 'bar';`} lang="js" />
<!-- Optional: Customize your theme. -->
<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" />
<!-- Optional: Enable word wrapping. -->
<Code code={`const foo = 'bar';`} lang="js" wrap />
<!-- Optional: Output inline code. -->
<p>
  <Code code={`const foo = 'bar';`} lang="js" inline />
  will be rendered inline.
</p>
<!-- Optional: defaultColor -->
<Code code={`const foo = 'bar';`} lang="js" defaultColor={false} />

This component provides syntax highlighting for code blocks at build time (no client-side JavaScript included). The component is powered internally by Shiki and it supports all popular themes and languages. Plus, you can add your custom themes, languages, transformers, and default colors by passing them to the theme, lang, transformers, and defaultColor attributes respectively.

Note

This component does not inherit the settings from your Shiki configuration. You will have to set them using the component props.

Transformers

Section titled Transformers

Adicionado em: astro@4.11.0

Shiki transformers can optionally be applied to code by passing them in through the transformers property as an array. Since Astro v4.14.0, you can also provide a string for Shiki’s meta attribute to pass options to transformers.

Note that transformers only applies classes and you must provide your own CSS rules to target the elements of your code block.

src/pages/index.astro

---
import { transformerNotationFocus, transformerMetaHighlight } from '@shikijs/transformers'
import { Code } from 'astro:components'
const code = `const foo = 'hello'
const bar = ' world'
console.log(foo + bar) // [!code focus]
`
---
<Code
  code={code}
  lang="js"
  transformers={[transformerMetaHighlight()]}
  meta="{1,3}"
/>

<style is:global>
  pre.has-focused .line:not(.focused) {
    filter: blur(1px);
  }
</style>

<Fragment />

Section titled <Fragment />

A component used with set:* directives to render HTML content without any additional wrapping elements:

src/components/SetHtml.astro

---
const htmlString = '<p>Raw HTML content</p>';
---
<Fragment set:html={htmlString} />

See more about using fragments in Astro syntax.

<Prism />

Section titled <Prism />

To use the Prism highlighter component, first install the @astrojs/prism package:

npm

npm install @astrojs/prism

pnpm

pnpm add @astrojs/prism

Yarn

yarn add @astrojs/prism

---
import { Prism } from '@astrojs/prism';
---
<Prism lang="js" code={`const foo = 'bar';`} />

This component provides language-specific syntax highlighting for code blocks by applying Prism’s CSS classes. Note that you need to provide a Prism CSS stylesheet (or bring your own) for syntax highlighting to appear! See the Prism configuration section for more details.

See the list of languages supported by Prism where you can find a language’s corresponding alias. And, you can also display your Astro code blocks with lang="astro"!

<Image />

Section titled <Image />

src/components/MyComponent.astro

---
// import the Image component and the image
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png"; // Image is 1600x900
---

<!-- `alt` is mandatory on the Image component -->
<Image src={myImage} alt="A description of my image." />

<!-- Output -->
<!-- Image is optimized, proper attributes are enforced -->
<img
  src="/_astro/my_image.hash.webp"
  width="1600"
  height="900"
  decoding="async"
  loading="lazy"
  alt="A description of my image."
/>

Properties

Section titled Properties

• src (required)
• alt (required)
• width and height (required for public/ and remote images)
• format
• quality
• densities
• widths

In addition to the properties above, the <Image /> component accepts all properties accepted by the HTML <img> tag.

See more in the Images Guide.

<Picture />

Section titled <Picture />

Adicionado em: astro@3.3.0

Use the built-in <Picture /> Astro component to display a responsive image with multiple formats and/or sizes.

src/pages/index.astro

---
import { Picture } from 'astro:assets';
import myImage from "../assets/my_image.png"; // Image is 1600x900
---

<!-- `alt` is mandatory on the Picture component -->
<Picture src={myImage} formats={['avif', 'webp']} alt="A description of my image." />

<!-- Output -->
<picture>
  <source srcset="/_astro/my_image.hash.avif" type="image/avif" />
  <source srcset="/_astro/my_image.hash.webp" type="image/webp" />
  <img
    src="/_astro/my_image.hash.png"
    width="1600"
    height="900"
    decoding="async"
    loading="lazy"
    alt="A description of my image."
  />
</picture>

See more in the Images Guide.

Properties

Section titled Properties

<Picture /> accepts all the properties of the <Image /> component, plus the following:

formats

Section titled formats

An array of image formats to use for the <source> tags. By default, this is set to ['webp'].

fallbackFormat

Section titled fallbackFormat

Format to use as a fallback value for the <img> tag. Defaults to .png for static images, .gif for animated images, and .svg for SVG files.

pictureAttributes

Section titled pictureAttributes

An object of attributes to be added to the <picture> tag. Use this property to apply attributes to the outer <picture> element itself. Attributes applied to the <Picture /> component directly will apply to the inner <img> element, except for those used for image transformation.

<Content />

Section titled <Content />

A generic component used to render the content of a content collection entry.

First, query one or more entries using getCollection() or getEntry(). Then, the entry.render() function can return the <Content /> component for use in a .astro file template.

src/pages/render-example.astro

---
import { getEntry } from 'astro:content';
const entry = await getEntry('blog', 'post-1');
const { Content } = await entry.render();
---
<p>Published on: {entry.data.published.toDateString()}</p>
<Content />

<ViewTransitions />

Section titled <ViewTransitions />

Adicionado em: astro@2.9.0

Opt in to using view transitions on individual pages by importing and adding the <ViewTransitions /> routing component to <head> on every desired page.

src/pages/index.astro

---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="en">
  <head>
    <title>My Homepage</title>
    <ViewTransitions />
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

See more about how to control the router and add transition directives to page elements and components.

<Debug />

Section titled <Debug />

---
import { Debug } from 'astro:components';
const serverObject = {
  a: 0,
  b: "string",
  c: {
    nested: "object"
  }
}
---
<Debug {serverObject} />

This component provides a way to inspect values on the client-side, without any JavaScript.