---
title: "Thành phần"
description: "Bộ thành phần giao diện có sẵn trong bản khởi tạo, không nằm trong framework."
---

> Documentation Index
> Fetch the complete documentation index at: https://new.cuongthach.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Thành phần

Bản khởi tạo có vài thành phần thiết yếu, dùng trực tiếp trong mọi file MDX mà không cần `import`:

- `<Aside>`: hộp chú ý dạng note, tip, caution, danger
- `<Card>` và `<CardGrid>`: trang giới thiệu và danh sách tính năng
- `<Tabs>` và `<TabItem>`: nội dung có nhiều biến thể
- `<Steps>` và `<Step>`: quy trình đánh số
- `<PackageManagers>`: lệnh cài đặt cho npm, pnpm, yarn, bun

## Aside

> **Kiểm tra lúc build**
>
> Aside là thành phần được dùng nhiều nhất trong một trang tài liệu. Bản khởi tạo có sẵn bốn kiểu.

> **Tip**
>
> Tiêu đề là tùy chọn. Nếu bỏ qua, tên của kiểu sẽ được dùng.

> **Lưu ý**
>
> Kiểu caution dành cho cảnh báo không quá nghiêm trọng.

## Thẻ

- **Steps** — Quy trình đánh số cho hướng dẫn và bài thực hành.
- **Tabs** — Nội dung nhiều biến thể: đoạn mã, hướng dẫn theo hệ điều hành, hoặc cùng một nội dung bằng nhiều ngôn ngữ lập trình.

## Các bước

1. **Cài Nimbus**

   Tạo dự án mới bằng `pnpm create @cloudflare/nimbus-docs my-app`.
2. **Viết nội dung**

   Viết các file MDX trong `src/content/vi/`.
3. **Đưa lên mạng**

   Chạy `astro build` rồi triển khai.

## Trình quản lý gói

Với lệnh cài đặt, nên dùng `<PackageManagers>` thay cho `<Tabs>`: nó tạo đủ bốn lệnh từ một nguồn duy nhất
và nhớ lựa chọn của người đọc giữa các trang.

```sh
npm i @cloudflare/nimbus-docs
yarn add @cloudflare/nimbus-docs
pnpm add @cloudflare/nimbus-docs
bun add @cloudflare/nimbus-docs
```

## Tabs

Dùng `<Tabs>` cho nội dung không phải lệnh cài đặt: đoạn cấu hình, hướng dẫn theo hệ điều hành, ví dụ nhiều ngôn ngữ.

### TypeScript

```ts
import nimbus from "@cloudflare/nimbus-docs";

export default {
  integrations: [nimbus({ /* … */ })],
};
```

### JavaScript

```js
import nimbus from "@cloudflare/nimbus-docs";

export default {
  integrations: [nimbus({ /* … */ })],
};
```

## Video

Dùng `<VideoPlayer>` cho video. Nó dùng Video.js 10 và chỉ tải trình phát khi gần vào khung nhìn. Luôn đặt `title`.

Source: https://new.cuongthach.com/docs/vi/components/index.mdx