---
id: getting-started
title: Getting Started
description: Learn how to get started with the Chakra UI v3.0
---

# Getting Started

> Blockquotes are very `handy` in email to emulate reply text. This line is part
> of the same quote.

Lorem ipsum **dolor** sit amet, consectetur adipiscing elit. Fusce vestibulum
ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus
et.

- first item
- second item
- second item
- second item

::::card-group

:::card{href="#" icon="nextjs"}

### Hello

Discover all the components available in Chakra UI.

:::

:::card{href="#" icon="terminal"}

### Hello

Discover all the components available in Chakra UI.

:::

::::

## Some snippets

```js
import { Accordion } from "@chakra-ui/react"
```

---

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

:::note

This is a note callout. [Link](https://google.com)

:::

:::info

This is an info callout. [Link](https://google.com)

:::

```bash [Terminal]
npm i @chakra-ui/react
```

:::code-group

```bash [npm]
npm i @chakra-ui/react
```

```bash [pnpm]
pnpm i @chakra-ui/react
```

```bash [bun]
bun i @chakra-ui/react
```

:::

::::steps

### Step one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante
non neque convallis tempor. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Nam a iaculis libero.

### Step two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante
non neque convallis tempor. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Nam a iaculis libero.

:::code-group

```tsx [console.log]
console.log("hello world")
```

```tsx [alert]
alert("hello world")
```

:::

:::info

test

:::

### Step three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante
non neque convallis tempor. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Nam a iaculis libero.

::::

```ts
console.log("hewwo") // [!code --]
console.log("hello") // [!code ++]
console.log("goodbye")
```

```ts {1}
console.log("hewwo")
console.log("goodbye")
```

```ts
// [!code word:Hello]
const message = "Hello World"
```

<Example name="breadcrumb-basic" />
