Starlight Component Showcase

This page demonstrates every Starlight component available on gabrubuilds. Use it as a reference when writing new content.

---

Aside

Callout boxes for tips, notes, warnings, and danger alerts.

Note

A default note aside. Use for supplementary information.

Pro Tip

Use type="tip" for actionable advice that helps the reader.

Watch Out

Use type="caution" when the reader should proceed carefully.

Breaking Change

Use type="danger" for critical warnings — data loss, breaking changes, security issues.

---

Badge

Inline status indicators.

New Stable Deprecated Removed Default Tip

Badges work inline with text: Check out this feature Beta before it ships.

---

Card & CardGrid

Cards for grouping related content. CardGrid creates a responsive grid layout.

Single Card

AI-Powered Development

Use AI coding assistants to ship faster. Claude Code for architecture, Cursor for day-to-day coding, v0 for UI generation.

Card Grid (2 columns)

Week 1

Build an AI-powered developer tool. Focus: rapid prototyping with Claude Code.

Week 2

Ship a user-facing product. Focus: product scoping and talking to users.

Week 3

Design-heavy project. Focus: UI/UX, v0, and design systems.

Week 4

Revenue experiment. Focus: pricing, payments, value proposition.

Stagger Layout

Step 1: Identify the Problem

Find a real pain point. Not imagined, not theoretical — something people actually complain about.

Step 2: Build the MVP

Ship the smallest thing that solves the problem. No extra features, no polish. Just function.

Step 3: Get Feedback

Put it in front of real users. Watch what they do, not what they say.

---

LinkCard

Cards that link to other pages or external URLs.

SDE to AI Engineer The practical roadmap for making the jump.

AI Coding Tools Compared Claude Code vs Cursor vs Codex — honest comparison.

---

LinkButton

Call-to-action buttons with variants.

Read the Blog About gabrubuilds Follow on X

---

Tabs

Tabbed content for showing alternatives or variations.

Claude Code

Best for: complex multi-file projects, architecture decisions, terminal-based workflows.

# Start a new project with Claude Code
claude "Create a Next.js app with Razorpay integration"

Cursor

Best for: everyday coding, inline edits, IDE-native AI assistance.

Open Cursor → Cmd+K → describe what you want → accept or iterate.

v0

Best for: UI generation, component design, landing pages.

Prompt: “Create a pricing page with 3 tiers, dark mode, indigo accent color”

Synced Tabs

JavaScript

const response = await fetch('/api/build', {
	method: 'POST',
	body: JSON.stringify({ tool: 'claude-code' }),
});

Python

import requests
response = requests.post('/api/build', json={'tool': 'claude-code'})

cURL

curl -X POST /api/build \
	-H "Content-Type: application/json" \
	-d '{"tool": "claude-code"}'

---

Steps

Numbered step-by-step instructions.

1. Pick a pain point

   Browse Reddit, X, or your own frustrations. Find something real.

2. Scope ruthlessly

   If it takes more than a week, you’re overbuilding. Cut features until it fits.

3. Build with AI tools

   Use Claude Code for architecture, Cursor for implementation, v0 for UI.

4. Ship and share

   Deploy to Cloudflare Pages. Write a build log. Post on X.

5. Measure and iterate

   Track signups, usage, feedback. Double down on what works.

---

FileTree

Visual directory structures.

• Directorysrc/

  • Directorycontent/

    • Directorydocs/

      • Directoryblog/

        • first-post.md
        • tools-i-use.md
      • Directorybuilds/

        • week-1.md
        • template.md
      • Directorylearn/

        • sde-to-ai-engineer.md
        • ai-coding-tools-compared.md
        • starlight-showcase.mdx (this page)
      • about.md
      • index.mdx
  • Directorystyles/

    • custom.css
• Directorypublic/

  • favicon.svg
  • og-image.svg
  • robots.txt
• astro.config.mjs
• package.json

---

Code

Inline code and code blocks with syntax highlighting, line highlighting, and titles.

Basic Code Block

// gabrubuilds weekly build template
export async function buildTool(idea) {
	const mvp = await claudeCode.generate(idea);
	const deployed = await cloudflare.deploy(mvp);
	return { url: deployed.url, buildTime: '1 week' };
}

With Title and Line Highlights

src/lib/build-tracker.ts

interface BuildLog {
	week: number;
	tool: string;
	revenue: number;
	users: number;
	learnings: string[];
}

function logBuild(build: BuildLog): void {
	console.log(`Week ${build.week}: ${build.tool}`);
	console.log(`Revenue: ₹${build.revenue}`);
}

Terminal Output

Terminal

$ npm run build

  generating static routes
  ▶ src/content/docs/index.mdx
  ▶ src/content/docs/about.md
  ▶ src/content/docs/blog/first-post.md
  ...
  ✓ Completed in 2.4s

  15 page(s) built in 3.1s

Diff Style

- const accent = '#f59e0b'; // amber — causes eye fatigue
+ const accent = 'oklch(0.65 0.15 280)'; // indigo-violet — cool, comfortable

---

Tables

Standard Markdown tables, styled by the theme.

Component	Use Case	Import From
Card	Group related info	@astrojs/starlight/components
Tabs	Show alternatives	@astrojs/starlight/components
Steps	Sequential instructions	@astrojs/starlight/components
FileTree	Directory structures	@astrojs/starlight/components
Aside	Callouts and warnings	@astrojs/starlight/components
Badge	Status indicators	@astrojs/starlight/components
LinkButton	CTA buttons	@astrojs/starlight/components
Code	Code with extras	@astrojs/starlight/components

---

Combining Components

Components work together. Here’s a real-world example:

Build Pattern

This is the exact workflow I use every week at gabrubuilds.

1. Monday: Ideate

   Sources
   • Reddit pain points
   • Personal frustrations
   • X/Twitter complaints
   Criteria
   • Solvable in a week
   • Has existing demand
   • Can charge for premium tier

2. Tuesday–Thursday: Build

   Architecture

   Claude Code handles the big decisions.

   Implementation

   Cursor for rapid iteration.

3. Friday: Ship

   Deploy, write the build log, share on X. Done. Shipped