Components Library

Components let you easily reuse a piece of UI or styling consistently. Examples might include a link card or a YouTube embed. ChaiDocs supports the use of components in MDX files and provides some common components for you to use.

Learn more about building components in the Astro Docs.

Using a component in MDX

You can use a component by importing it into your MDX file and then rendering it as a JSX tag. These look like HTML tags but start with an uppercase letter matching the name in your import statement:

src/content/docs/example.mdx

---
title: Welcome to my docs
---

import { Icon } from '@astrojs/starlight/components';
import AboutUs from '@/components/branding/about-us.astro';

<Icon name="open-book" />

<AboutUs>Components can also contain **nested content**.</AboutUs>

Because ChaiDocs is powered by Astro, you can add support for components built with any supported UI framework (React, Preact, Svelte, Vue, Solid, and Alpine) in your MDX files. Learn more about using components in MDX in the Astro docs.

Built-in components

ChaiDocs provides built-in components for common documentation use cases. These components are available from the @astrojs/starlight/components package in MDX files.

See the sidebar for a list of available components and how to use them.

Compatibility with ChaiDocs’s styles

ChaiDocs applies default styling to your Markdown content, for example, adding margin between elements. If these styles conflict with your component’s appearance, set the not-content class on your component to disable them.

src/components/Example.astro

<div class="not-content">
  <p>Not impacted by ChaiDocs’s default content styling.</p>
</div>

Component props

Use the ComponentProps type from astro/types to reference the Props accepted by a component even if they are not exported by the component itself. This can be helpful when wrapping or extending an existing component.

The following example uses ComponentProps to get the type of the props accepted by ChaiDocs’s built-in Badge component:

src/components/Example.astro

---
import type { ComponentProps } from 'astro/types';
import { Badge } from '@astrojs/starlight/components';

type BadgeProps = ComponentProps<typeof Badge>;
---

Cards

To display content in a box matching ChaiDocs’s styles, use the <Card> component.

Preview

Moons

Io, Europa, Ganymede

Import

import { Card } from '@astrojs/starlight/components';

Usage

Display a card using the <Card> component and provide a title for the card.

import { Card } from '@astrojs/starlight/components';

<Card title="Check this out">Interesting content you want to highlight.</Card>

Preview

Check this out

Interesting content you want to highlight.

Add icons to cards

Include an icon in a card using the icon attribute set to the name of one of ChaiDocs’s built-in icons.

  import { Card } from '@astrojs/starlight/components';

  <Card title="Stars" icon="star">
    Sirius, Vega, Betelgeuse
  </Card>

Preview

Stars

Sirius, Vega, Betelgeuse

Group cards

Display multiple cards side-by-side when there’s enough space by grouping them using the <CardGrid> component. See the “Group cards” guide for an example.

<Card> Props

Implementation: Card.astro

The <Card> component accepts the following props:

title

required type: string

The title of the card to display.

icon

type: string

A card can include an icon attribute set to the name of one of ChaiDocs’s built-in icons.

---

Link Cards

To display links to different pages prominently, use the <LinkCard> component.

Preview

ChaiCode Learn more about ChaiCode.

Import

import { LinkCard } from '@astrojs/starlight/components';

Usage

Display a link prominently using the <LinkCard> component. Each <LinkCard> requires a title and an href attribute.

import { LinkCard } from '@astrojs/starlight/components';

<LinkCard title="Authoring Markdown" href="/contribute/starter-kit/page-content/" />

Preview

Authoring Markdown

Add a link description

Add a short description to a link card using the description attribute.

import { LinkCard } from '@astrojs/starlight/components';

<LinkCard
  title="Contribute"
  href="/contribute/starter-kit/project-structure/"
  description="Step-by-step guide to start contributing to ChaiDocs."
/>

Preview

Contribute Step-by-step guide to start contributing to ChaiDocs.

Group link cards

Display multiple link cards side-by-side when there’s enough space by grouping them using the <CardGrid> component. See the “Group link cards” guide for an example.

<LinkCard> Props

Implementation: LinkCard.astro

The <LinkCard> component accepts the following props, as well as all other <a> element attributes:

title

required type: string

The title of the link card to display.

href

required type: string

The URL to link to when the card is interacted with.

description

type: string

An optional description to display below the title.

---

Card grids

To wrap multiple <Card> or <LinkCard> components in a grid, use the<CardGrid> component.

Preview

Stars

Sirius, Vega, Betelgeuse

Moons

Io, Europa, Ganymede

Import

import { CardGrid } from '@astrojs/starlight/components';

Usage

Group cards

Display multiple <Card> components side-by-side when there’s enough space by grouping them using the <CardGrid> component.

import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
  <Card title="Check this out" icon="open-book">
    Interesting content you want to highlight.
  </Card>
  <Card title="Other feature" icon="information">
    More information you want to share.
  </Card>
</CardGrid>

Preview

Check this out

Interesting content you want to highlight.

Other feature

More information you want to share.

Group link cards

Display multiple <LinkCard> components side-by-side when there’s enough space by grouping them using the <CardGrid> component.

import { LinkCard, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
  <LinkCard title="Authoring Markdown" href="/contribute/starter-kit/page-content/" />
  <LinkCard title="Components" href="/contribute/starter-kit/components/" />
</CardGrid>

Preview

Authoring Markdown

Components

Stagger cards

Shift the second column of the grid vertically to add visual interest by adding the stagger attribute to the <CardGrid> component.

This attribute is useful on your home page to display your project’s key features.

import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid stagger>
  <Card title="Check this out" icon="open-book">
    Interesting content you want to highlight.
  </Card>
  <Card title="Other feature" icon="information">
    More information you want to share.
  </Card>
</CardGrid>

Preview

Check this out

Interesting content you want to highlight.

Other feature

More information you want to share.

<CardGrid> Props

Implementation: CardGrid.astro

The <CardGrid> component accepts the following props:

stagger

type: boolean

Defines whether to stagger the cards in the grid or not.

---

Images

To display optimized images use the <Image> component.

Preview

Import

import { Image } from 'astro:assets';

Usage

Display an image using the <Image> component. The style prop can be used to customize the image appearance. For consistent styling across documentation, we recommend using:

• margin: 1.5rem 0 to add top and bottom spacing
• margin-inline: auto to center images horizontally
• border-radius: 10px to add rounded corners

These styles help maintain a uniform look throughout the documentation.

import { Image } from 'astro:assets';
import chaicode from '@/assets/branding/brought-to-you-by-white.png';

<Image
  src={ChaiCode}
  alt="ChaiCode Banner"
  width="600px"
  style={{
    'margin': '1.5rem 0',
    'margin-inline': 'auto',
    'border-radius': '10px'
  }}
/>

Preview

Use an image as a link

To make an image a link, wrap the <Image> component in an <a> element and provide the href attribute.

import { Image } from 'astro:assets';
import udemy from '@/assets/branding/udemy.jpeg';

<a href="https://www.udemy.com/course/web-dev-master/">
  <Image
    src={udemy}
    alt="Udemy Banner"
    width="600px"
    style={{
      'margin': '1.5rem 0',
      'margin-inline': 'auto',
      'border-radius': '10px'
    }}
  />
</a>

Preview

<Image> Props

Implementation: Image.astro

The <Image /> component accepts all properties accepted by the HTML <img> tag in addition to the properties described below:

src (required)

Type: ImageMetadata | string | Promise<{ default: ImageMetadata }>

The format of the src value of your image file depends on where your image file is located:

import { Image } from 'astro:assets';
import myImportedImage from '../assets/my-local-image.png';

<Image src={myImportedImage} alt="descriptive text" />

• Images in the public/ folder - use the image’s file path relative to the public folder:

  import { Image } from 'astro:assets';
  
  <Image
    src="/images/my-public-image.png"
    alt="descriptive text"
    width="200"
    height="150"
  />

• Remote images - use the image’s full URL as the property value:

  import { Image } from 'astro:assets';
  
  <Image
    src=""
    alt="descriptive text"
    width="200"
    height="150"
  />

alt (required)

Type: string

Use the required alt attribute to provide a string of [descriptive alt text]( for images.

If an image is merely decorative (i.e. doesn’t contribute to the understanding of the page), set alt="" so that screen readers and other assistive technologies know to ignore the image.

width and height (required for images in public/)

Type: number | undefined

These properties define the dimensions to use for the image.

When using images in their original aspect ratio, width and height are optional. These dimensions can be automatically inferred from image files located in src/. For remote images, add the inferSize attribute set to true on the <Image />.

However, both of these properties are required for images stored in your public/ folder as ChaiDocs is unable to analyze these files.

quality

Type: ImageQuality | undefined

quality is an optional property that can either be:

• a preset (low, mid, high, max) that is automatically normalized between formats.
• a number from 0 to 100 (interpreted differently between formats).

inferSize

Type: boolean

Allows you to set the original width and height of a remote image automatically.

By default, this value is set to false and you must manually specify both dimensions for your remote image.

Add inferSize to the <Image /> component to infer these values from the image content when fetched. This is helpful if you don’t know the dimensions of the remote image, or if they might change:

import { Image } from 'astro:assets';
import cat from '@/assets/cat.png';

<Image src={cat} inferSize alt="A cat sleeping in the sun." />

---

Asides

To display secondary information alongside a page’s main content, use the <Aside> component.

Preview

Note

Include nonessential, supplementary information in an <Aside>.

Import

import { Aside } from '@astrojs/starlight/components';

Usage

Display an aside (also known as “admonitions” or “callouts”) using the <Aside> component.

An <Aside> can have an optional type attribute, which controls the aside’s color, icon, and default title.

import { Aside } from '@astrojs/starlight/components';

<Aside>Some content in an aside.</Aside>

<Aside type="caution">Some cautionary content.</Aside>

<Aside type="tip">
Other content is also supported in asides.

```js
// A code snippet, for example.
```
</Aside>

<Aside type="danger">Do not give your password to anyone.</Aside>

Preview

Note

Some content in an aside.

Caution

Some cautionary content.

Tip

Other content is also supported in asides.

// A code snippet, for example.

Danger

Do not give your password to anyone.

ChaiDocs also provides a custom syntax for rendering asides in Markdown and MDX as an alternative to the <Aside> component. See the “Authoring Content” guide for details of the custom syntax.

Use custom titles

Override the default aside titles by using the title attribute.

import { Aside } from '@astrojs/starlight/components';

<Aside type="caution" title="Watch out!">
  A warning aside *with* a custom title.
</Aside>

Preview

Watch out!

A warning aside with a custom title.

<Aside> Props

Implementation: Aside.astro

The <Aside> component accepts the following props:

type

type: 'note' | 'tip' | 'caution' | 'danger'
default: 'note'

The type of aside to display:

• note asides (the default) are blue and display an information icon.
• tip asides are purple and display a rocket icon.
• caution asides are yellow and display a triangular warning icon.
• danger asides are red and display an octagonal warning icon.

title

type: string

The title of the aside to display. If title is not set, the default title for the current aside type will be used.

---

Badges

To display small pieces of information, such as a status or category, use the <Badge> component.

Preview

New

Import

import { Badge } from '@astrojs/starlight/components';

Usage

Display a badge using the <Badge> component and pass the content you want to display to the text attribute of the <Badge> component.

By default, the badge will use the theme accent color of your site. To use a built-in badge color, set the variant attribute to one of the supported values.

import { Badge } from '@astrojs/starlight/components';

- <Badge text="Note" variant="note" />
- <Badge text="Success" variant="success" />
- <Badge text="Tip" variant="tip" />
- <Badge text="Caution" variant="caution" />
- <Badge text="Danger" variant="danger" />

Preview

• Note
• Success
• Tip
• Caution
• Danger

Use different sizes

Use the size attribute to control the size of the badge text.

import { Badge } from '@astrojs/starlight/components';

- <Badge text="New" size="small" />
- <Badge text="New and improved" size="medium" />
- <Badge text="New, improved, and bigger" size="large" />

Preview

• New
• New and improved
• New, improved, and bigger

Customize badges

Customize badges by using any other <span> attributes such as class or style with custom CSS.

import { Badge } from '@astrojs/starlight/components';

<Badge text="Custom" variant="success" style={{ fontStyle: 'italic' }} />

Preview

Custom

<Badge> Props

Implementation: Badge.astro

The <Badge> component accepts the following props and also any other <span> attributes:

text

required type: string

The text content to display in the badge.

variant

type: 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
default: 'default'

The badge color variant to use: note (blue), tip (purple), danger (red), caution (orange), success (green), or default (theme accent color).

size

type: 'small' | 'medium' | 'large'

Defines the size of the badge to display.

---

File Tree

To display the structure of a directory with file icons and collapsible sub-directories, use the <FileTree> component.

Preview

• astro.config.mjs an important file
• package.json
• README.md
• Directorysrc

  • Directorycomponents

    • Header.astro
  • …
• Directorypages/

  • …

Import

import { FileTree } from '@astrojs/starlight/components';

Usage

Display a file tree with file icons and collapsible sub-directories using the <FileTree> component.

Specify the structure of your files and directories with an unordered Markdown list inside <FileTree>. Create a sub-directory using a nested list or add a / to the end of a list item to render it as a directory without specific content.

import { FileTree } from '@astrojs/starlight/components';

<FileTree>

- astro.config.mjs
- package.json
- src
  - components
    - Header.astro
    - Title.astro
  - pages/

</FileTree>

Preview

• astro.config.mjs
• package.json
• Directorysrc

  • Directorycomponents

    • Header.astro
    • Title.astro
  • Directorypages/

    • …

Highlight entries

Make a file or directory stand out by making its name bold, e.g. **README.md**.

import { FileTree } from '@astrojs/starlight/components';

<FileTree>

- src
  - components
    - **Header.astro**
    - Title.astro

</FileTree>

Preview

• Directorysrc

  • Directorycomponents

    • Header.astro
    • Title.astro

Add comments

Add a comment to a file or directory by adding more text after the name. Inline Markdown formatting such as bold and italics is supported in comments.

import { FileTree } from '@astrojs/starlight/components';

<FileTree>

- src
  - components
    - Header.astro an **important** file
    - Title.astro

</FileTree>

Preview

• Directorysrc

  • Directorycomponents

    • Header.astro an important file
    • Title.astro

Add placeholders

Add placeholder files and directories by using either ... or … as the name. This can be useful to indicate to a reader that a folder is expected to contain more items without specifying them all explicitly.

import { FileTree } from '@astrojs/starlight/components';

<FileTree>

- src
  - components
    - Header.astro
    - …

</FileTree>

Preview

• Directorysrc

  • Directorycomponents

    • Header.astro
    • …

<FileTree> Props

Implementation: FileTree.astro

The <FileTree> component does not accept any props.

---

Icons

To display icons from ChaiDocs’s built-in icon set, use the <Icon> component.

Preview

Import

import { Icon } from '@astrojs/starlight/components';

Usage

Display an icon using the <Icon> component. An icon requires a name set to one of ChaiDocs’s built-in icons and can optionally include a label to provide context for screen readers.

import { Icon } from '@astrojs/starlight/components';

<Icon name="star" />
<Icon name="github" label="Github logo" />

Preview

Customize icons

The size and color attributes can be used to adjust the icon’s appearance using CSS units and color values. The class attribute can be used to add custom CSS classes to the icon.

import { Icon } from '@astrojs/starlight/components';

<Icon name="star" color="goldenrod" size="2rem" />
<Icon name="rocket" color="var(--sl-color-text-accent)" />

Preview

<Icon> Props

Implementation: Icon.astro

The <Icon> component accepts the following props:

name

required type: StarlightIcon

The name of the icon to display set to one of ChaiDocs’s built-in icons.

label

type: string

An optional label to provide context for assistive technologies, such as screen readers.

When label is not set, the icon will be completely hidden from assistive technologies. In this case, make sure the context is still understandable without the icon. For example, a link containing only the icon must include the label attribute in order to be accessible, but if a link contains text and the icon is purely decorative, omitting the label may make sense.

size

type: string

The size of the icon using CSS units.

color

type: string

The color of the icon using a CSS color value.

class

type: string

Custom CSS classes to add to the icon.

StarlightIcon type

Use the StarlightIcon TypeScript type to reference the names of ChaiDocs’s built-in icons.

src/icon.ts

import type { StarlightIcon } from '@astrojs/starlight/types';

const getIconLabel = (icon: StarlightIcon) => {
  // …
}

All Icons

A list of all available icons is shown below with their associated names. Click an icon to copy its name to your clipboard.

up-caret down-caret right-caret left-caret up-arrow down-arrow right-arrow left-arrow bars translate pencil pen document add-document setting external download cloud-download moon sun laptop open-book information magnifier forward-slash close error warning approve-check-circle approve-check rocket star puzzle list-format random comment comment-alt heart github gitlab bitbucket codePen farcaster discord gitter twitter x.com mastodon codeberg youtube threads linkedin twitch azureDevOps microsoftTeams instagram stackOverflow telegram rss facebook email phone reddit patreon signal slack matrix hackerOne openCollective blueSky discourse zulip pinterest tiktok astro alpine pnpm biome bun mdx apple linux homebrew nix starlight pkl node cloudflare vercel netlify deno jsr nostr backstage confluence jira storybook vscode jetbrains zed vim figma sketch npm sourcehut substack seti:folder seti:bsl seti:mdo seti:salesforce seti:asm seti:bicep seti:bazel seti:c seti:c-sharp seti:html seti:cpp seti:clojure seti:coldfusion seti:config seti:crystal seti:crystal_embedded seti:json seti:css seti:csv seti:xls seti:cu seti:cake seti:cake_php seti:d seti:word seti:elixir seti:elixir_script seti:hex seti:elm seti:favicon seti:f-sharp seti:git seti:go seti:godot seti:gradle seti:grails seti:graphql seti:hacklang seti:haml seti:mustache seti:haskell seti:haxe seti:jade seti:java seti:javascript seti:jinja seti:julia seti:karma seti:kotlin seti:dart seti:liquid seti:livescript seti:lua seti:markdown seti:argdown seti:info seti:clock seti:maven seti:nim seti:github seti:notebook seti:nunjucks seti:npm seti:ocaml seti:odata seti:perl seti:php seti:pipeline seti:pddl seti:plan seti:happenings seti:powershell seti:prisma seti:pug seti:puppet seti:purescript seti:python seti:react seti:rescript seti:R seti:ruby seti:rust seti:sass seti:spring seti:slim seti:smarty seti:sbt seti:scala seti:ethereum seti:stylus seti:svelte seti:swift seti:db seti:terraform seti:tex seti:default seti:twig seti:typescript seti:tsconfig seti:vala seti:vite seti:vue seti:wasm seti:wat seti:xml seti:yml seti:prolog seti:zig seti:zip seti:wgt seti:illustrator seti:photoshop seti:pdf seti:font seti:image seti:svg seti:sublime seti:code-search seti:shell seti:video seti:audio seti:windows seti:jenkins seti:babel seti:bower seti:docker seti:code-climate seti:eslint seti:firebase seti:firefox seti:gitlab seti:grunt seti:gulp seti:ionic seti:platformio seti:rollup seti:stylelint seti:yarn seti:webpack seti:lock seti:license seti:makefile seti:heroku seti:todo seti:ignored

---

Link Buttons

To display visually distinct call-to-action links, use the <LinkButton> component.

Preview

Explore Tracks

Import

import { LinkButton } from '@astrojs/starlight/components';

Usage

Use the <LinkButton> component to display a visually distinct call-to-action link. A link button is useful for directing users to the most relevant or actionable content and is often used on landing pages.

A <LinkButton> requires an href attribute. Optionally, customize the appearance of the link button using the variant attribute, which can be set to primary (the default), secondary, or minimal.

import { LinkButton } from '@astrojs/starlight/components';

<LinkButton href="/contribute/guide">Contribute</LinkButton>
<LinkButton href="/tracks" variant="secondary">
  Explore Tracks
</LinkButton>
<LinkButton href="https://courses.chaicode.com" variant="minimal">
  Watch Tutorials
</LinkButton>

Preview

Get started

Explore Tracks

Watch Tutorials

Add icons to link buttons

Include an icon in a link button using the icon attribute set to the name of one of ChaiDocs’s built-in icons.

The iconPlacement attribute can be used to place the icon before the text by setting it to start (defaults to end).

import { LinkButton } from '@astrojs/starlight/components';

<LinkButton
  href="https://chaicode.com"
  variant="secondary"
  icon="external"
  iconPlacement="start"
>
  Related: ChaiCode
</LinkButton>

Preview

Related: ChaiCode

<LinkButton> Props

Implementation: LinkButton.astro

The <LinkButton> component accepts the following props and also any other <a> attributes:

href

required type: string

The URL that the link button points to.

variant

type: 'primary' | 'secondary' | 'minimal'
default: 'primary'

The appearance of the link button. Set to primary for a prominent call-to-action link using the theme’s accent color, secondary for a less prominent link, or minimal for a link with minimal styling.

icon

type: string

A link button can include an icon attribute set to the name of one of ChaiDocs’s built-in icons.

iconPlacement

type: 'start' | 'end'
default: 'end'

Determines the placement of the icon in relation to the link button text.

---

Steps

To style a numbered list of tasks to create step-by-step guides, use the <Steps> component.

Preview

1. Create project

   Run the init command to create a new Next.js project or to setup an existing one:

   bun

   bunx shadcn@latest init

   pnpm

   pnpm dlx shadcn@latest init

   npm

   npx shadcn@latest init

   yarn

   yarn dlx shadcn@latest init

   Choose between a Next.js project or a Monorepo.

2. Add components

   You can now start adding components to your project.

   The command above will add the Button component to your project. You can then import it like this:

   import { Button } from "@/components/ui/button"
   
   export default function Home() {
     return (
       <div>
         <Button>Click me</Button>
       </div>
     )
   }

Import

import { Steps } from '@astrojs/starlight/components';

Usage

Use the <Steps> component to style numbered lists of tasks. This is useful for more complex step-by-step guides where each step needs to be clearly highlighted.

Wrap <Steps> around a standard Markdown ordered list. All the usual Markdown syntax is applicable inside <Steps>.

import { Steps } from '@astrojs/starlight/components';

<Steps>
1. Import the component into your MDX file:
    ```js
    import { Steps } from '@astrojs/starlight/components';
    ```

2. Wrap `<Steps>` around your ordered list items.
</Steps>

Preview

1. Import the component into your MDX file:

   import { Steps } from '@astrojs/starlight/components';

2. Wrap <Steps> around your ordered list items.

<Steps> Props

Implementation: Steps.astro

The <Steps> component does not accept any props.

---

Code

The <Code> component renders syntax highlighted code. It is useful when using a Markdown code block is not possible, for example, to render data coming from external sources like files, databases, or APIs.

Preview

example.md

  ## Welcome

  Hello from **space**!

Import

import { Code } from '@astrojs/starlight/components';

Usage

Use the <Code> component to render syntax highlighted code, for example when displaying code fetched from external sources.

See the Expressive Code “Code Component” docs for full details on how to use the <Code> component and the list of available props.

import { Code } from '@astrojs/starlight/components';

export const exampleCode = `console.log('This could come from a file or CMS!');`;
export const fileName = 'example.js';
export const highlights = ['file', 'CMS'];

<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />

Preview

example.js

console.log('This could come from a file or CMS!');

Display imported code

In MDX files and Astro components, use Vite’s ?raw import suffix to import any code file as a string. You can then pass this imported string to the <Code> component to include it on your page.

src/content/docs/example.mdx

import { Code } from '@astrojs/starlight/components';
import importedCode from '/tsconfig.json?raw';

<Code code={importedCode} lang="json" title="tsconfig.json" />

Preview

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

<Code> Props

Implementation: Code.astro

The <Code> component accepts all the props documented in the Expressive Code “Code Component” docs.

---

Tabs

To create a tabbed interface use the <Tabs> and <TabItem> components. Tabs are useful for grouping equivalent information where a user only needs to see one of several options.

Preview

Stars

Sirius, Vega, Betelgeuse

Moons

Io, Europa, Ganymede

Import

import { Tabs, TabItem } from '@astrojs/starlight/components';

Usage

Display a tabbed interface using the <Tabs> and <TabItem> components. Each <TabItem> must have a label to display to users.

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="Brute Force">
    Try all subarrays with nested loops, calculating their sums and tracking the maximum.

    O(n²) time | O(1) space
  </TabItem>
  <TabItem label="Kadane's Algorithm">
    Use dynamic programming to track current and max sums efficiently as you iterate.

    O(n) time | O(1) space
  </TabItem>
</Tabs>

Preview

Brute Force

Try all subarrays with nested loops, calculating their sums and tracking the maximum.

O(n²) time | O(1) space

Kadane's Algorithm

Use dynamic programming to track current and max sums efficiently as you iterate.

O(n) time | O(1) space

Sync tabs

Keep multiple tab groups synchronized by adding the syncKey attribute.

All <Tabs> on a page with the same syncKey value will display the same active label. This allows your reader to choose once (e.g. their operating system or package manager), and see their choice persisted across page navigation.

To synchronize related tabs, add an identical syncKey property to each <Tabs> component and ensure that they all use the same <TabItem> labels:

import { Tabs, TabItem } from '@astrojs/starlight/components';

_Some stars:_

<Tabs syncKey="constellations">
  <TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>
  <TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem>
</Tabs>

_Some exoplanets:_

<Tabs syncKey="constellations">
  <TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
  <TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
</Tabs>

Preview

Some stars:

Orion

Bellatrix, Rigel, Betelgeuse

Gemini

Pollux, Castor A, Castor B

Some exoplanets:

Orion

HD 34445 b, Gliese 179 b, Wasp-82 b

Gemini

Pollux b, HAT-P-24b, HD 50554 b

Add icons to tabs

Include an icon in a tab item using the icon attribute set to the name of one of ChaiDocs’s built-in icons to display an icon next to the label.

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="Stars" icon="star">
    Sirius, Vega, Betelgeuse
  </TabItem>
  <TabItem label="Moons" icon="moon">
    Io, Europa, Ganymede
  </TabItem>
</Tabs>

Preview

Stars

Sirius, Vega, Betelgeuse

Moons

Io, Europa, Ganymede

<Tabs> Props

Implementation: Tabs.astro

The <Tabs> component groups multiple <TabItem> components together and accepts the following props:

syncKey

type: string

A key used to keep multiple tab groups synchronized across multiple pages.

<TabItem> Props

Implementation: TabItem.astro

A set of tabs is composed of tab items, each with the following props:

label

required type: string

A tab item must include a label attribute set to the text that will be displayed in the tab.

icon

type: string

Each tab item can include an icon attribute set to the name of one of ChaiCode’s built-in icons to display an icon next to the label.

---

Code Tabs

Displays a list of code blocks with tabs.

Preview

index.js

const greet = () => {
  console.log('Hello, JS!')
}

index.ts

const greet = (): void => {
  console.log('Hello, TS!')
}

Import

import { CodeTabItem, CodeTabs } from '@/components/code'

Usage

Display a tabbed interface using the <CodeTabs> and <CodeTabItem> components. Each <CodeTabItem> must have a label to display to users.

import { CodeTabs, CodeTabItem } from '@/components/code'

<CodeTabs>
<CodeTabItem
  label="Brute Force"
  lang="ts"
  code={`const maxSubarraySumBruteForce = (arr: number[]): number => {
    let maxSum = -Infinity;

    for (let i = 0; i < arr.length; i++) {
      let currentSum = 0;

      for (let j = i; j < arr.length; j++) {
        currentSum += arr[j];
        maxSum = Math.max(maxSum, currentSum);
      }
    }

    return maxSum;
}`}
/>

<CodeTabItem
  label="Kadane's Algorithm"
  lang="ts"
  code={`const maxSubarraySumKadane = (arr: number[]): number => {
    let currentSum = arr[0];
    let maxSum = arr[0];

    for (let i = 1; i < arr.length; i++) {
      currentSum = Math.max(arr[i], currentSum + arr[i]);
      maxSum = Math.max(maxSum, currentSum);
    }

    return maxSum;
}`}
/>
</CodeTabs>

Preview

Brute Force

const maxSubarraySumBruteForce = (arr: number[]): number => {
  let maxSum = -Infinity;

  for (let i = 0; i < arr.length; i++) {
    let currentSum = 0;

    for (let j = i; j < arr.length; j++) {
      currentSum += arr[j];
      maxSum = Math.max(maxSum, currentSum);
    }
  }

  return maxSum;
}

Kadane's Algorithm

const maxSubarraySumKadane = (arr: number[]): number => {
  let currentSum = arr[0];
  let maxSum = arr[0];

  for (let i = 1; i < arr.length; i++) {
    currentSum = Math.max(arr[i], currentSum + arr[i]);
    maxSum = Math.max(maxSum, currentSum);
  }

  return maxSum;
}

Sync tabs

Keep multiple CodeTab groups synchronized by adding the syncKey attribute.

All <CodeTabs> on a page with the same syncKey value will display the same active label. This allows your readers to choose once (e.g., their preferred programming language) and see their choice persisted across the page and during navigation.

To synchronize related tabs, add an identical syncKey property to each <CodeTabs> component and ensure they all use the same <CodeTabItem> labels:

import { CodeTabs, CodeTabItem } from '@components/code';

_String Manipulation Examples:_

<CodeTabs syncKey="programming-language">

<CodeTabItem
  label="JavaScript"
  lang="js"
  code={`const toUpper = (text) => {
    return text.toUpperCase();
  }`}
/>

<CodeTabItem
  label="Python"
  lang="python"
  code={`# Convert to uppercase
  def to_upper(text):
      return text.upper()`}
/>

</CodeTabs>

_Array/List Operations:_

<CodeTabs syncKey="programming-language">

<CodeTabItem
  label="JavaScript"
  lang="js"
  code={`const sumArray = (arr) => {
    return arr.reduce((sum, num) => sum + num, 0);
  }`}
/>

<CodeTabItem
  label="Python"
  lang="python"
  code={`# Sum a list
  def sum_list(lst):
      return sum(lst)`}
/>

</CodeTabs>

Preview

String Manipulation Examples:

JavaScript

const toUpper = (text) => {
  return text.toUpperCase();
}

Python

# Convert to uppercase
def to_upper(text):
    return text.upper()

Array/List Operations:

JavaScript

const sumArray = (arr) => {
  return arr.reduce((sum, num) => sum + num, 0);
}

Python

# Sum a list
def sum_list(lst):
    return sum(lst)

<CodeTabs> Props

Implementation: CodeTabs.astro

The <CodeTabs> component groups multiple <CodeTabItem> components together and accepts the following props:

syncKey

type: string

A key used to keep multiple tab groups synchronized across multiple pages.

<CodeTabItem> Props

Implementation: CodeTabItem.astro

The <CodeTabItem> component accepts the following props, as well as all other <Code> component props:

label

required

type: string

A CodeTab item must include a label attribute set to the text that will be displayed in the tab.

---

Code Package Managers

Now a days we have so many package managers to choose from. This component helps you to display a list of commands for different package managers.

Preview

bun

bun add -D prettier

pnpm

pnpm add -D prettier

npm

npm install -D prettier

yarn

yarn add -D prettier

Import

import { CodePackageManagers } from '@/components/code'

Usage

Displays a list of commands for different package managers using <CodePackageManagers> component. <CodePackageManagers> must have a packages attribute set to the name of the package(s) to install.

import { CodePackageManagers } from '@/components/code'

<CodePackageManagers
  packages="express"
/>

Preview

bun

bun add express

pnpm

pnpm add express

npm

npm install express

yarn

yarn add express

Dev dependencies

You can install the package as a dev dependency by setting the dev attribute to true.

import { CodePackageManagers } from '@/components/code'
<CodePackageManagers
  packages="typescript"
  dev={true}
/>

Preview

bun

bun add -D typescript

pnpm

pnpm add -D typescript

npm

npm install -D typescript

yarn

yarn add -D typescript

Execute a command

You can execute a command by setting the commandType attribute to "execute" and passing the args attribute to the command.

import { CodePackageManagers } from '@/components/code'


<CodePackageManagers
  packages="shadcn@latest"
  commandType="execute"
  args="init"
/>

Preview

bun

bunx shadcn@latest init

pnpm

pnpm dlx shadcn@latest init

npm

npx shadcn@latest init

yarn

yarn dlx shadcn@latest init

Custom package managers

You can customize the package managers to use by setting the packageManagers attribute to an array of package manager names.

import { CodePackageManagers } from '@/components/code'

<CodePackageManagers
  packageManagers={['pnpm', 'bun', 'deno']}
  packages="pino"
/>

Preview

pnpm

pnpm add pino

bun

bun add pino

deno

deno add pino

Custom command

You can create a custom command by setting the commandType attribute to "custom" and passing the args attribute.

import { CodePackageManagers } from '@/components/code'
<CodePackageManagers
  packageManagers={['bun', 'pnpm']}
  commandType="custom"
  args="create hono@latest"
/>

Preview

bun

bun create hono@latest

pnpm

pnpm create hono@latest

<CodePackageManagers> Props

Implementation: CodePackageManagers.astro

The <CodePackageManagers> component accepts the following props:

packageManagers

type: 'pnpm' | 'npm' | 'yarn' | 'bun' | 'deno'
default: ['bun', 'pnpm', 'npm', 'yarn']

The package managers to use.

packages

type: string

The packages to install. If you want to install multiple packages, you can pass a space-separated string.

dev

type: boolean
default: false

Whether to install the packages as dev dependencies.

commandType

type: 'install' | 'execute' | 'custom'
default: 'install'

The type of command to generate. Use 'install' for package installation commands, 'execute' for running commands and 'custom' for custom commands.

args

type: string

The arguments to pass to the command. This prop is only used when commandType is set to 'execute' or 'custom'.

---

YouTube

The <YouTube> component generates an embed using the lite-youtube-embed custom element that will load YouTube’s <iframe> only when a user clicks play.

YouTube embeds will always require some JavaScript, but this is one of the most minimal and performant ways to embed a YouTube video.

Preview

Play

Import

import { YouTube } from 'astro-embed'

Usage

Displays a YouTube video using the <YouTube> component. The <YouTube> component must have an id attribute set to the video ID or URL.

import { YouTube } from 'astro-embed'

<YouTube
  id="sn4cDCq52h8"
  posterQuality="max"
/>

Preview

Play

Custom Poster

You can provide an alternative poster image by passing in a URL to the poster prop.

For example, this is the same video as above but with a custom poster image:

import { YouTube } from 'astro-embed'

<YouTube
  id="sn4cDCq52h8"
  poster="https://images.pexels.com/photos/18681382/pexels-photo-18681382/free-photo-of-coding.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
/>

Preview

Play

Custom Poster Quality

When using the default YouTube poster image, set the posterQuality to change the size of the placeholder image. This can be useful if displaying the embed at very large or very small sizes.

There are four possible values:

posterQuality	resolution
low	120px
default	480px
high	640px
max	1280px

We recommend using max for the best quality. For example :

import { YouTube } from 'astro-embed'

<YouTube
  id="2JroEREiBLw"
  posterQuality="max"
/>

Preview

Play

Player Parameters

You can pass in a params prop to set the YouTube player parameters. This looks like a series of URL search params.

For example, the following params value sets the start and end times of the video playback:

import { YouTube } from 'astro-embed'

<YouTube
  id="6A52M3b7tl8"
  params="start=245&end=303"
  posterQuality="max"
/>

Preview

Play

Custom Title

You can provide a custom title for the video by passing in a title prop.

import { YouTube } from 'astro-embed'

<YouTube
  id="KRDwp6J_LTQ"
  title="My Favorite Video"
  posterQuality="max"
/>

Preview

Play

<YouTube> Props

Implementation: YouTube.astro

The <YouTube> component accepts the following props:

id

type: string

The YouTube video ID or URL.

poster

type: string

The URL of the poster image to use.

posterQuality

type: 'low' | 'default' | 'high' | 'max'
default: 'default'

The quality of the poster image.

params

type: string

The URL search params to pass to the YouTube player.

title

type: string

The title of the video.

---

Link Preview

The <LinkPreview> component embeds the Open Graph media and metadata for a URL in your page.

Preview

Welcome, World | Astro astro.build

Astro's new look is live! Learn all about our new brand including the design process, our new logo, typeface, color palette, and mascot.

Import

import { LinkPreview } from 'astro-embed'

Usage

Displays a link preview using the <LinkPreview> component. The <LinkPreview> component must have an id attribute set to the URL of the page to embed.

import { LinkPreview } from 'astro-embed'

<LinkPreview
  id="https://leerob.com/"
/>

Preview

Lee Robinson leerob.com

Frontend developer, optimist, community builder.

Video metadata

If a URL’s tags include og:video metadata, <LinkPreview> will render a video player instead of an image.

import { LinkPreview } from 'astro-embed'
<LinkPreview
  id="https://giphy.com/gifs/bypriyashah-india-chai-3ohzAh7PHabMBiBzDG"
/>

Preview

India Chai GIF by bypriyashah - Find & Share on GIPHY giphy.com

Discover & share this India Chai GIF by bypriyashah with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

Hiding Media

If a URL’s image or video is unwanted, add hideMedia as a prop.

import { LinkPreview } from 'astro-embed'

<LinkPreview
  hideMedia
  id="https://hitesh.ai"
/>

Preview

Hitesh Choudhary Home page hitesh.ai

A home page of Hitesh Choudhary

Limitations

The available Open Graph metadata varies from site to site. If a site doesn’t provide og:image metadata, no image will be displayed, only the page title and description.

If no title is detected or the metadata collection step fails, <LinkPreview> will display only the original link URL.

<LinkPreview> Props

Implementation: LinkPreview.astro

The <LinkPreview> component accepts the following props:

id

type: string

The URL of the page to embed.

hideMedia

type: boolean
default: false

To hide the media.

Start your journey with ChaiCode

All of our courses are available on chaicode.com. Feel free to check them out.