# Starlight Components Reference

This site now supports all Starlight components! Here's how to use them in your .mdx files:

## Import Components

Add this to the top of any .mdx file to use components:

```jsx
import { 
  Card, CardGrid, LinkCard, 
  Aside, Badge, Steps, Tabs, TabItem, 
  Code, Icon 
} from '@astrojs/starlight/components';
```

## Component Examples

### Cards & CardGrid
```jsx
<CardGrid>
<Card title="Feature 1" icon="star">
Content here
</Card>
<Card title="Feature 2" icon="rocket">
More content
</Card>
</CardGrid>
```

### LinkCard
```jsx
<LinkCard
  title="Link Title"
  description="Description text"
  href="/path/to/page/"
  badge="Optional Badge"
/>
```

### Asides (Callouts)
```jsx
<Aside type="note" title="Optional Title">
Note content here
</Aside>

<Aside type="tip">
Tip content
</Aside>

<Aside type="caution">
Warning content
</Aside>

<Aside type="danger">
Danger content
</Aside>
```

### Steps
```jsx
<Steps>
1. First step
2. Second step  
3. Third step
</Steps>
```

### Tabs
```jsx
<Tabs>
<TabItem label="Tab 1">
Content for tab 1
</TabItem>
<TabItem label="Tab 2">  
Content for tab 2
</TabItem>
</Tabs>
```

### Code
```jsx
<Code 
  code={`console.log('Hello world!')`} 
  lang="js" 
  title="Example Script"
/>
```

### Badge
```jsx
<Badge text="New" variant="tip" />
<Badge text="Updated" variant="note" />
<Badge text="Deprecated" variant="caution" />
```

## Usage Tips

- All content files are now .mdx format (was .md)
- Import components at the top of each file where you want to use them
- Components enhance readability and user experience
- Use Cards for feature highlights
- Use Asides for important callouts
- Use Tabs for before/after examples
- Use Steps for tutorials and processes

See the homepage and first tutorial for implementation examples!