Chuyển tới nội dung chính
ZZalo Platforms
Design System

Zalo Platforms Design System

Nguồn sự thật cho color tokens, typography, spacing, components và patterns. Dùng để build và maintain toàn bộ portal — hỗ trợ light / dark mode.

Design TokensShadcn Components

Toàn bộ 24 components trong src/components/ui/ — mỗi card có UI demo thực tế để preview trực tiếp.

8shadcn / Base UI
2Composite
10Custom
4Portal Brand

shadcn / Base UI Primitives

8 components

DefaultSecondaryOutlineDestructiveGhost

Badge

shadcn / Base UI

Inline label với các variants: default, secondary, destructive, outline, ghost, link.

src/components/ui/badge.tsx

Primitive: @base-ui/react/use-render + merge-props

BadgebadgeVariants

Button

shadcn / Base UI

Button đa dạng variant (default, outline, secondary, ghost, destructive, link) và size.

src/components/ui/button.tsx

Primitive: @base-ui/react/button

ButtonbuttonVariants

Dialog

shadcn / Base UI

Modal dialog với backdrop blur, animation vào/ra, và close button tích hợp.

src/components/ui/dialog.tsx

Primitive: @base-ui/react/dialog

DialogDialogTriggerDialogPortalDialogCloseDialogOverlayDialogContentDialogHeaderDialogFooterDialogTitleDialogDescription

Input

shadcn / Base UI

Text input chuẩn với focus ring, disabled state, và aria-invalid.

src/components/ui/input.tsx

Primitive: @base-ui/react/input

Input

Scroll Area

shadcn / Base UI

Vùng cuộn tùy chỉnh scrollbar cả chiều dọc và ngang.

src/components/ui/scroll-area.tsx

Primitive: @base-ui/react/scroll-area

ScrollAreaScrollBar
Phần đầu tiên
Phần thứ hai
LeftRightThird

Separator

shadcn / Base UI

Đường phân cách, hỗ trợ orientation: horizontal / vertical.

src/components/ui/separator.tsx

Primitive: @base-ui/react/separator

Separator

Sheet

shadcn / Base UI

Slide-over panel từ 4 phía (top/right/bottom/left) dùng Dialog primitive.

src/components/ui/sheet.tsx

Primitive: @base-ui/react/dialog

SheetSheetTriggerSheetCloseSheetContentSheetHeaderSheetFooterSheetTitleSheetDescription

Textarea

shadcn / Base UI

Textarea tự co giãn chiều cao (field-sizing: content) với shadcn styling.

src/components/ui/textarea.tsx

Primitive: HTML <textarea>

Textarea

Composite (dựa trên shadcn)

2 components

Tìm kiếm tài liệu...
Getting Started
Authentication
Send Message API
Webhook Setup

Command

Composite

Command palette / search dropdown với keyboard navigation.

src/components/ui/command.tsx

Primitive: Dialog + InputGroup

CommandCommandDialogCommandInputCommandListCommandEmptyCommandGroupCommandSeparatorCommandItemCommandShortcut
https://

Input Group

Composite

Nhóm input với prefix/suffix icon, button, text — hỗ trợ inline và block alignment.

src/components/ui/input-group.tsx

Primitive: Button + Input + Textarea

InputGroupInputGroupAddonInputGroupButtonInputGroupTextInputGroupInputInputGroupTextarea

Custom (project-specific)

10 components

const token = await getAccessToken(appId, secretKey);

Tabs

Custom

Tab strip nội tuyến với blue underline indicator, dùng trong card và quick start.

src/components/ui/tabs.tsx
Tabs

Nav Tab

Custom

Tab điều hướng top-level dùng ở topbar, khác với Tabs (nội tuyến).

src/components/ui/nav-tab.tsx
NavTab
Lưu ý
Token hết hạn sau 24 giờ.
Cảnh báo
Không chia sẻ secret key.
Hoàn tất
Tích hợp thành công!

Callout Block

Custom

Khối thông báo có icon với các variant: info, warning, success.

src/components/ui/callout-block.tsx
CalloutBlock
brand
brandSoft
brandStrong
success
muted
sm
md
lg
xl

Icon Box

Custom

Container hình vuông bo góc cho icon, nhiều tone màu và kích thước.

src/components/ui/icon-box.tsx
IconBox

Default

border + bg

Subtle

brand lighter

Brand

dark surface

Surface Card

Custom

Card surface với CSS class variants: portal-surface-card, --subtle, --brand.

src/components/ui/surface-card.tsx
SurfaceCard

Tiêu đề Section

Mô tả ngắn về nội dung trong section này.

Section

Custom

Wrapper section với padding, border-top và heading cho trang nội dung.

src/components/ui/section.tsx
Section

Getting Started

Xây dựng Mini App đầu tiên

Quick Reference

API Authentication

Eyebrow

Custom

Label nhỏ in hoa hiển thị phía trên heading, dùng để phân loại nội dung.

src/components/ui/eyebrow.tsx
Eyebrow
OverviewMini App PlatformZalo Business SolutionOpen APIs

Sidebar Item

Custom

Item trong sidebar navigation với icon, label và trạng thái active.

src/components/ui/sidebar-item.tsx
SidebarItem

Search Trigger

Custom

Nút trigger mở search dialog, hiển thị keyboard shortcut.

src/components/ui/search-trigger.tsx
SearchTrigger
Ask AI
Panel chat AI — xem demo thực tế bằng nút "Ask AI" ở topbar.

AI Chat Panel

Custom

Panel chat AI với input và danh sách tin nhắn.

src/components/ui/ai-chat-panel.tsx
AiChatPanel

Portal Brand

4 components

Herohero
Defaultdefault
Subtlesubtle
Successsuccess
Outlineoutline
default + dotsuccess + dotsubtle + dot

Portal Badge

Portal Brand

Badge theo brand portal: hero, default, subtle, success, outline + leadingDot.

src/components/ui/portal/badge.tsx
PortalBadge
md
sm
xs

Portal Button

Portal Brand

Button theo brand portal: primary, brand, secondary, outline, ghost, successAccent.

src/components/ui/portal/button.tsx
PortalButton

Mini App Platform

Xây dựng ứng dụng nhẹ chạy bên trong Zalo.

View Docs

Open APIs

Tích hợp API Zalo vào ứng dụng của bạn.

View Docs

Portal Product Card

Portal Brand

Card sản phẩm dùng ở landing page với icon, title, description và hover effect.

src/components/ui/portal/product-card.tsx
ProductCard
const
token = await getAccessToken(appId, secret);

Portal Quick Start Card

Portal Brand

Card bước hướng dẫn nhanh với tab chọn ngôn ngữ và code block.

src/components/ui/portal/quick-start-card.tsx
QuickStartCardQuickStartCodeBlock