New Content Components

InlineCode

Styled inline code with optional language hint.

<InlineCode>npm install</InlineCode>
<InlineCode lang="js">const x = 10</InlineCode>

Example: Use npm install to install dependencies.

CodeGroup

Group multiple code blocks with tabs (npm/yarn/pnpm style).

<CodeGroup labels={['npm', 'yarn', 'pnpm']} sync="pkg-manager">
  <div data-code-panel>npm install astro</div>
  <div data-code-panel hidden>yarn add astro</div>
  <div data-code-panel hidden>pnpm add astro</div>
</CodeGroup>

LinkPreview

Show preview card on link hover.

<LinkPreview
  href="https://astro.build"
  title="Astro"
  description="The web framework for content-driven websites"
  image="/astro-logo.png"
>
  Visit Astro
</LinkPreview>

FileTree

Display file/folder structure with icons.

<FileTree title="Project Structure">
  <ul class="file-tree">
    <li data-folder>src/
      <ul>
        <li data-folder>components/</li>
        <li data-folder>pages/</li>
        <li>index.astro</li>
      </ul>
    </li>
    <li>package.json</li>
  </ul>
</FileTree>

Kbd

Keyboard shortcut display.

<Kbd keys={['Ctrl', 'K']} />
<Kbd>⌘K</Kbd>

Example: Press Ctrl + K to open search.

Mark

Highlighted/marked text with color variants.

<Mark>Default yellow highlight</Mark>
<Mark color="green">Success highlight</Mark>
<Mark color="blue">Info highlight</Mark>
<Mark color="red">Error highlight</Mark>
<Mark color="purple">Custom highlight</Mark>

Example: This is important to remember.

Abbr

Abbreviation with tooltip definition.

<Abbr title="HyperText Markup Language">HTML</Abbr>

Example: CSS Cascading Style Sheets is used for styling.

Details

Collapsible details/summary with animation and variants.

<Details summary="Click to expand" open={false} variant="default">
  Hidden content here
</Details>

<Details summary="Bordered variant" variant="bordered">
  Content with border
</Details>

<Details summary="Filled variant" variant="filled">
  Content with background
</Details>

Figure

Image with caption and optional attribution.

<Figure
  src="/image.jpg"
  alt="Description"
  caption="Image caption"
  attribution="Photo by John Doe"
  width={800}
  height={600}
/>

Footnote

Footnote reference and content.

<!-- In text -->
Some text here<Footnote id="1" ref={true} />.

<!-- At bottom -->
<Footnote id="1">
  This is the footnote content.
</Footnote>

Example: This statement needs a reference ^[1] .

Glossary

Term definition display.

<Glossary term="Static Site Generation" id="ssg">
  A method of building websites where pages are pre-rendered at build time
  rather than on each request.
</Glossary>

SSG

Static Site Generation - A method of building websites where pages are pre-rendered at build time.

Changelog

Version changelog entry with badges.

<Changelog
  version="2.0.0"
  date="2024-12-27"
  type="major"
  badges={['Breaking', 'New']}
>
  <ul class="changelog-list">
    <li>Added new feature X</li>
    <li>Fixed bug in component Y</li>
    <li>Breaking: Removed deprecated API Z</li>
  </ul>
</Changelog>