Skip to content
DraculaDracula for Starlight

Components Demo

Everything Starlight ships with, rendered with the theme applied. Flip the color scheme with the toggle in the top right to compare Dracula and Alucard side by side.

Text

Section titled “Text”

Regular paragraph text with a link to somewhere, some bold text, italics, and inline code. Keyboard input looks like Ctrl + K.

Listen to them, the children of the night. What music they make!

Code

Section titled “Code”
dracula.js
/*
 * Once upon a time...
 */
class Vampire {
  constructor(props) {
    this.location = props.location;
    this.birthDate = props.birthDate;
    this.weaknesses = props.weaknesses;
  }


  get age() {
    return this.calcAge();
  }
}


// ...there was a guy named Vlad
const Dracula = new Vampire({
  location: "Transylvania",
  birthDate: 1428,
  weaknesses: ["Sunlight", "Garlic"],
});

Asides

Section titled “Asides”

Badges

Section titled “Badges”
NoteSuccessTipCautionDanger

Cards

Section titled “Cards”

Moonlit

Cards pick up the surface shades from the palette.

Starlit

And their icons use the accent color.

Getting StartedInstall the theme and see all of this on your own site.

Tabs

Section titled “Tabs”
The classic. Reliable, if a little messy.

Steps

Section titled “Steps”

  1. Invite the vampire in.

  2. Regret it immediately.

  3. Consult the documentation.

File tree

Section titled “File tree”
  • astro.config.mjs
  • package.json
  • Directorysrc
    • Directorycontent
      • Directorydocs
        • index.mdx
        • getting-started.mdx
    • Directoryassets
      • dracula.png