Quick Start Guide
Bắt đầu sử dụng Examdee Design System trong dự án của bạn chỉ với vài bước đơn giản. Chúng tôi hỗ trợ tối ưu cho Next.js và Tailwind CSS.
1. Cài đặt thư viện
Cài đặt gói core từ NPM để bắt đầu sử dụng các Design Token và CSS chuẩn của Examdee.
npm install @examdee/deeui2. Nhúng Styles & Fonts
Component có hỗ trợ auto-inject CSS. Tuy nhiên, đối với môi trường SSR như Next.js App Router, bạn BẮT BUỘC phải import file CSS toàn cục ở layout để không bị lỗi giật UI (FOUC) do render từ Server.
Trong file layout.tsx (Next.js) hoặc main.tsx:
// Bắt buộc trên Next.js để load biến CSS cho Server Components
import "@examdee/deeui/styles.css";
// Khuyến nghị dùng font Nunito (cho Student) và Inter (cho Teacher/Admin)
import "@fontsource/inter/400.css";
import "@fontsource/inter/500.css";
import "@fontsource/inter/600.css";
import "@fontsource/nunito/400.css";
import "@fontsource/nunito/600.css";
import "@fontsource/nunito/700.css";3. Cấu hình Tailwind CSS (Tùy chọn)
Mặc định components hoạt động độc lập không cần config. Tuy nhiên, nếu bạn muốn dùng utility class (ví dụ: text-ed-brand-primary-default) trong source của dự án, bạn có thể thiết lập preset Tailwind:
import type { Config } from "tailwindcss";
const config: Config = {
// Sử dụng preset có sẵn để kế thừa toàn bộ hệ thống màu & spacing
presets: [require("@examdee/deeui/tailwind.config")],
content: [
"./src/**/*.{js,ts,jsx,tsx}",
// ExamdeeUI css context
"./node_modules/@examdee/deeui/dist/**/*.{js,ts,jsx,tsx}",
],
};
export default config;4. Sử dụng Component
Bây giờ dự án của bạn đã sẵn sàng! Bạn có thể import trực tiếp bất kỳ component nào từ thư viện và dùng như bình thường ở mọi nơi (Pages, Components, v.v.).
import { StudentButton, TeacherButton, TeacherInput } from "@examdee/deeui";
export default function Page() {
return (
<div className="p-8 flex flex-col gap-4">
{/* Nút dành cho học sinh */}
<StudentButton variant="primary">
Bắt đầu học ngay
</StudentButton>
{/* Nút dành cho giáo viên */}
<TeacherButton variant="primary">
Tạo bài kiểm tra
</TeacherButton>
{/* Input */}
<TeacherInput placeholder="Nhập tên khóa học..." />
</div>
);
}