Blog

HeroUI คืออะไร? สอน HeroUI สำหรับมือใหม่

Mark Ponomarev

Mark Ponomarev

12 June 2025

HeroUI คืออะไร? สอน HeroUI สำหรับมือใหม่
💡
ต้องการเครื่องมือทดสอบ API ที่ยอดเยี่ยมซึ่งสร้าง เอกสาร API ที่สวยงาม หรือไม่?

ต้องการแพลตฟอร์มแบบครบวงจรสำหรับทีมพัฒนาของคุณเพื่อทำงานร่วมกันด้วย ประสิทธิภาพสูงสุด หรือไม่?

Apidog ตอบสนองทุกความต้องการของคุณ และ มาแทนที่ Postman ในราคาที่เข้าถึงได้มากกว่ามาก!
ปุ่ม

สำหรับนักพัฒนาส่วนหน้า (frontend devs) ความต้องการอินเทอร์เฟซผู้ใช้ที่สวยงาม ประสิทธิภาพสูง และปรับแต่งได้ลึกซึ้งนั้นไม่เคยมีมากเท่านี้มาก่อน นักพัฒนากำลังค้นหาเครื่องมือที่ช่วยเร่งขั้นตอนการทำงานโดยไม่ลดทอนคุณภาพหรือการควบคุมเชิงสร้างสรรค์อยู่เสมอ ในขณะที่ไลบรารีส่วนประกอบ UI แบบ monolithic ได้ให้บริการชุมชนมาอย่างดีเป็นเวลาหลายปี กระบวนทัศน์ใหม่กำลังเกิดขึ้น—กระบวนทัศน์ที่ให้ความสำคัญกับการเป็นเจ้าของของนักพัฒนา ความเป็นโมดูล และการผสานรวมกับเฟรมเวิร์กสมัยใหม่ได้อย่างราบรื่น HeroUI ได้สร้างพื้นที่เฉพาะของตนเองขึ้นภายในกระบวนทัศน์ใหม่นี้

HeroUI ไม่ใช่แค่ไลบรารีส่วนประกอบทั่วไป แต่เป็นชุดส่วนประกอบ UI ที่นำมาใช้ซ้ำได้ซึ่งได้รับการสร้างสรรค์อย่างพิถีพิถัน ออกแบบมาเพื่อผสานรวมเข้ากับโปรเจกต์ของคุณโดยตรง มันสนับสนุนปรัชญาที่ให้นักพัฒนาควบคุมโค้ดเบสของตนได้อย่างเต็มที่ แทนที่จะนำเข้าส่วนประกอบที่ไม่โปร่งใสจาก node module คุณใช้ HeroUI Command Line Interface (CLI) เพื่อเพิ่มซอร์สโค้ดจริงของส่วนประกอบที่คุณต้องการลงในโปรเจกต์ของคุณ วิวัฒนาการแบบ "คัดลอกและวาง" นี้หมายความว่าทุกปุ่ม การ์ด และกล่องโต้ตอบจะกลายเป็นส่วนหนึ่งของแอปพลิเคชันของคุณเอง พร้อมที่จะปรับแต่ง จัดสไตล์ใหม่ และปรับให้เข้ากับความต้องการเฉพาะของคุณ

สร้างขึ้นบนพื้นฐานของยักษ์ใหญ่เช่น React, Tailwind CSS และ Next.js, HeroUI มอบบล็อกอาคารสำหรับการสร้างอินเทอร์เฟซผู้ใช้ที่สวยงาม เข้าถึงได้ และตอบสนอง มันถูกออกแบบมาสำหรับนักพัฒนาสมัยใหม่ที่ให้ความสำคัญทั้งความเร็วและความเฉพาะเจาะจง โดยนำเสนอจุดเริ่มต้นที่แข็งแกร่งซึ่งไม่จำกัดคุณอยู่ในระบบการออกแบบที่ตายตัว บทความนี้จะทำหน้าที่เป็นคู่มือที่ครอบคลุมเพื่อทำความเข้าใจหลักการหลักของ HeroUI การติดตั้งในโปรเจกต์ของคุณ การปรับแต่งรูปลักษณ์และความรู้สึก และการใช้ประโยชน์จาก CLI ที่ทรงพลังเพื่อสร้างเว็บแอปพลิเคชันยุคใหม่

ส่วนที่ 1: เจาะลึก HeroUI - ปรัชญาและคุณสมบัติหลัก

ก่อนที่จะลงลึกในรายละเอียดทางเทคนิคของการติดตั้งและการใช้งาน สิ่งสำคัญคือต้องทำความเข้าใจ "ทำไม" เบื้องหลัง HeroUI มันแก้ปัญหาอะไร และอะไรที่ทำให้เป็นตัวเลือกที่น่าสนใจในตลาดเครื่องมือ UI ที่มีการแข่งขันสูง

ปรัชญา: การเป็นเจ้าของและการปรับแต่งที่ไม่ลดทอน

ความแตกต่างพื้นฐานระหว่าง HeroUI และไลบรารี UI แบบดั้งเดิม เช่น Material-UI หรือ Ant Design อยู่ที่แนวคิดของการเป็นเจ้าของ เมื่อคุณติดตั้งไลบรารีแบบดั้งเดิม คุณกำลังเพิ่ม dependency ลงใน package.json ของคุณ แอปพลิเคชันของคุณจะนำเข้าส่วนประกอบที่คอมไพล์ไว้ล่วงหน้าจากแพ็กเกจนี้ แม้ว่าจะสะดวก แต่ก็มีข้อเสียหลายประการ:

  1. การปรับแต่งที่จำกัด: การ override สไตล์อาจซับซ้อน มักจะต้องต่อสู้กับสไตล์เริ่มต้นของไลบรารีด้วยแท็ก !important หรือการตั้งค่า theme provider ที่ซับซ้อน
  2. ส่วนประกอบแบบกล่องดำ (Black Box Components): ตรรกะภายในของส่วนประกอบถูกซ่อนอยู่ในโฟลเดอร์ node_modules การดีบักพฤติกรรมที่ไม่คาดคิดหรือทำความเข้าใจการทำงานภายในจะยากขึ้นอย่างมาก
  3. Bundle Size Bloat: คุณมักจะนำเข้าไลบรารีทั้งหมด หรืออย่างน้อยก็เป็นส่วนสำคัญของมัน แม้ว่าคุณจะใช้เพียงส่วนประกอบไม่กี่ตัว ซึ่งอาจเพิ่มขนาด bundle สุดท้ายของแอปพลิเคชันของคุณ
  4. Dependency Hell: คุณต้องขึ้นอยู่กับวงจรการอัปเดตของไลบรารีและ dependencies ของมัน การเปลี่ยนแปลงที่ทำให้เกิด breaking change ในไลบรารีอาจบังคับให้ต้อง refactor ครั้งใหญ่ในแอปพลิเคชันของคุณ

HeroUI หลีกเลี่ยงปัญหาเหล่านี้ทั้งหมด ด้วยการให้ CLI วางซอร์สโค้ดของส่วนประกอบโดยตรงลงในไดเร็กทอรีโปรเจกต์ของคุณ (เช่น /components/ui) มันช่วยเสริมพลังให้คุณในหลายด้านที่สำคัญ:

ปรัชญานี้มุ่งเป้าไปที่นักพัฒนาและทีมที่ต้องการสร้างระบบการออกแบบที่ไม่เหมือนใครสำหรับผลิตภัณฑ์ของตนโดยไม่ต้องเริ่มต้นจากศูนย์ มันมอบพื้นฐานที่เป็น primitive ที่ไม่มีสไตล์ (หรือมีสไตล์เล็กน้อย) และคุณเป็นผู้ให้เอกลักษณ์ของแบรนด์

คุณสมบัติหลักโดยสรุป

HeroUI เป็นมากกว่าแค่วิธีการติดตั้ง มันมาพร้อมกับคุณสมบัติที่ออกแบบมาสำหรับเวิร์กโฟลว์การพัฒนาที่ทันสมัย

HeroUI เหมาะสำหรับใคร?

HeroUI เป็นตัวเลือกที่เหมาะสมสำหรับนักพัฒนาและโปรเจกต์ประเภทเฉพาะ:

มันอาจไม่เหมาะสำหรับผู้เริ่มต้นอย่างแท้จริงที่ชอบโซลูชันแบบ "พร้อมใช้งานทันที" ที่มีการกำหนดค่าน้อยที่สุด พลังของ HeroUI อยู่ที่ความสามารถในการกำหนดค่า ซึ่งต้องอาศัยความเข้าใจพื้นฐานเกี่ยวกับ Tailwind CSS และสภาพแวดล้อมการพัฒนาส่วนหน้าสมัยใหม่

ส่วนที่ 2: เริ่มต้นใช้งาน - คำแนะนำโดยละเอียดเกี่ยวกับการติดตั้งและการตั้งค่า

เมื่อเราเข้าใจปรัชญาแล้ว มาลงมือปฏิบัติจริงกัน ส่วนนี้จะให้คำแนะนำทีละขั้นตอนอย่างละเอียดสำหรับการผสานรวม HeroUI เข้ากับโปรเจกต์ใหม่หรือที่มีอยู่ วิธีการที่แนะนำและมีประสิทธิภาพที่สุดคือการใช้ HeroUI CLI อย่างเป็นทางการ

ข้อกำหนดเบื้องต้น

ก่อนที่เราจะเริ่มต้น ตรวจสอบให้แน่ใจว่าสภาพแวดล้อมการพัฒนาของคุณตรงตามข้อกำหนดต่อไปนี้:

npx create-next-app@latest my-heroui-app

ในระหว่างการตั้งค่า Next.js ขอแนะนำให้เลือก TypeScript และ Tailwind CSS เนื่องจากสิ่งเหล่านี้เป็นพื้นฐานสำหรับระบบนิเวศของ HeroUI

คำสั่ง `init` ของ HeroUI CLI: จุดเริ่มต้นของคุณ

คำสั่ง init เป็นจุดเริ่มต้นที่มหัศจรรย์เข้าสู่โลกของ HeroUI มันจะตรวจสอบโปรเจกต์ของคุณอย่างชาญฉลาด ถามคำถามหลายข้อ แล้วกำหนดค่าทุกอย่างที่คุณต้องการโดยอัตโนมัติ

นำทางไปยังไดเร็กทอรีโปรเจกต์ของคุณ:Bash

cd my-heroui-app

ตอนนี้ รันคำสั่งเริ่มต้น:Bash

npx heroui-cli@latest init

CLI จะนำคุณเข้าสู่กระบวนการตั้งค่า มาดูรายละเอียดคำถามแต่ละข้อที่มันถามและความหมายของตัวเลือกของคุณ

1. "Which style would you like to use?"

2. "Which color would you like to use as a base color?"

3. "Where is your global CSS file?"

4. "Do you want to use CSS variables for colors?"

5. "Where is your tailwind.config.js file?"

6. "Configure import alias for components:"

7. "Configure import alias for utils:"

8. "Are you using React Server Components?"

เมื่อคุณตอบคำถามทั้งหมดแล้ว CLI จะดำเนินการตามความมหัศจรรย์ มันจะ:

โปรเจกต์ของคุณได้รับการกำหนดค่าอย่างสมบูรณ์และพร้อมสำหรับ HeroUI แล้ว

โครงสร้างของการเปลี่ยนแปลง

มาดูไฟล์หลักที่ CLI ได้แก้ไขหรือสร้างขึ้นอย่างใกล้ชิด

components.json

ไฟล์นี้เป็น manifest สำหรับ HeroUI ภายในโปรเจกต์ของคุณ มันเก็บตัวเลือกที่คุณทำระหว่างกระบวนการ init และบอก CLI ว่าโปรเจกต์ของคุณได้รับการกำหนดค่าอย่างไรJSON

{
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "utils": "@/lib/utils",
    "components": "@/components"
  }
}

คุณแทบจะไม่จำเป็นต้องแก้ไขไฟล์นี้ด้วยตนเอง แต่มันมีประโยชน์ที่จะเข้าใจวัตถุประสงค์ของมัน มันคือสมองเบื้องหลังการทำงานของ CLI

tailwind.config.js

การกำหนดค่า Tailwind ของคุณจะถูกขยายให้มีลักษณะเช่นนี้ การเพิ่มเติมที่สำคัญคือส่วนขยาย theme และปลั๊กอิน tailwindcss-animateJavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        // ... and many more color definitions linked to CSS variables
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ...
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        // ... keyframes for animations
      },
      animation: {
        // ... animation utilities
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

สังเกตว่าสีเช่น primary ไม่ได้ถูกกำหนดด้วยรหัส hex แต่ด้วย hsl(var(--primary)) นี่บอกให้ Tailwind ใช้ตัวแปร CSS ชื่อ --primary ซึ่งถูกกำหนดไว้ใน global CSS ของคุณ

app/globals.css

ไฟล์นี้คือหัวใจสำคัญของธีมระบบการออกแบบของคุณ มันจะประกอบด้วยคำสั่ง Tailwind พื้นฐานและบล็อกขนาดใหญ่ของตัวแปร CSSCSS

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    /* ... many more variables for the light theme */
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    /* ... many more variables for the dark theme */
  }
}

ที่นี่คุณจะเห็นพลังของการตั้งค่านี้ สีทั้งหมดของธีมสว่างของคุณถูกกำหนดในขอบเขต :root และสีทั้งหมดของธีมมืดของคุณถูกกำหนดภายในขอบเขตคลาส .dark เมื่อคลาส .dark ถูกเพิ่มไปยังองค์ประกอบ <html> เบราว์เซอร์จะใช้ตัวแปรธีมมืดโดยอัตโนมัติ

ส่วนที่ 3: การปรับแต่งขั้นสูง - การกำหนดธีม, เลย์เอาต์, และโหมดมืด

เมื่อ HeroUI ถูกเริ่มต้นแล้ว ความสนุกที่แท้จริงก็เริ่มต้นขึ้น: การทำให้เป็นของคุณเอง สถาปัตยกรรมได้รับการออกแบบมาอย่างชัดเจนสำหรับการปรับแต่งที่ลึกซึ้งและใช้งานง่าย

ศิลปะแห่งการกำหนดธีมด้วยตัวแปร CSS

การกำหนดธีมใน HeroUI แตกต่างจากออบเจกต์ธีมที่ใช้ JavaScript ที่ซับซ้อนที่คุณอาจพบในไลบรารีอื่น ๆ มันง่ายกว่า ทรงพลังกว่า และใช้ประโยชน์จากคุณสมบัติ CSS สมัยใหม่ ธีมทั้งหมด—สี รัศมีขอบ ฟอนต์—ถูกควบคุมโดยตัวแปร CSS ที่กำหนดไว้ในไฟล์ globals.css ของคุณ

การเปลี่ยนสี

สมมติว่าคุณต้องการเปลี่ยนสีแบรนด์หลักของคุณ คุณไม่จำเป็นต้องเข้าไปในการกำหนดค่า Tailwind คุณเพียงแค่ค้นหาตัวแปร CSS ที่เกี่ยวข้องใน globals.css และเปลี่ยนค่าของมัน

สีถูกกำหนดโดยใช้ค่า HSL (Hue, Saturation, Lightness) แต่ไม่มี wrapper hsl() ตัวอย่างเช่น:CSS

:root {
  /* ... */
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

.dark {
  /* ... */
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

หากต้องการเปลี่ยนสีหลักของคุณเป็นสีเขียวสดใส คุณสามารถใช้เครื่องมือเลือกสีออนไลน์เพื่อค้นหาค่า HSL สำหรับเฉดสีที่คุณเลือกและอัปเดตตัวแปร:CSS

/* In globals.css */
:root {
  /* ... */
  --primary: 142.1 76.2% 36.3%; /* New Green Primary Color */
  --primary-foreground: 355.7 100% 97.3%; /* A contrasting light color for text on the primary color */
  /* ... */
}

.dark {
  /* ... */
  --primary: 142.1 70.2% 46.3%; /* A slightly different green for dark mode */
  --primary-foreground: 355.7 100% 97.3%;
  /* ... */
}

เมื่อคุณบันทึกไฟล์นี้ ส่วนประกอบทุกตัวที่ใช้สี "primary" (เช่น <Button>) จะอัปเดตทันทีทั่วทั้งแอปพลิเคชันของคุณเพื่อสะท้อนสีเขียวใหม่นี้ นี่เป็นสิ่งที่มีพลังอย่างเหลือเชื่อ

การเปลี่ยนรัศมีขอบ (Border Radius)

ความโค้งของมุมบนส่วนประกอบเช่นการ์ดและอินพุตถูกควบคุมโดยตัวแปร CSS ตัวเดียว: --radiusCSS

/* In globals.css */
:root {
  /* ... */
  --radius: 0.5rem; /* The default value */
}

หากคุณต้องการรูปลักษณ์ที่คมชัดและเป็นเหลี่ยมมากขึ้น คุณสามารถลดค่านี้ได้:CSS

:root {
  --radius: 0.25rem; /* Less rounded */
}

หรือสำหรับสุนทรียภาพที่นุ่มนวลและโค้งมนมาก คุณสามารถเพิ่มค่าได้:CSS

:root {
  --radius: 1.5rem; /* Very rounded */
}

การเปลี่ยนแปลงเพียงบรรทัดเดียวนี้จะส่งผลต่อเนื่องไปยังส่วนประกอบทั้งหมดของคุณ ทำให้มั่นใจได้ว่ารัศมีขอบจะสอดคล้องกันทั่วทั้ง UI ของคุณ

การเพิ่มสีใหม่

คุณไม่ได้ถูกจำกัดอยู่แค่สีที่ได้รับจากคำสั่ง init คุณสามารถเพิ่มสีเชิงความหมายของคุณเองได้อย่างง่ายดาย ตัวอย่างเช่น มาเพิ่มสีแบรนด์ "พิเศษ" กัน

กำหนดตัวแปร CSS ใน globals.css:CSS

/* In globals.css */
:root {
  /* ... */
  --special: 320 86% 59%;
  --special-foreground: 330 100% 98%;
}
.dark {
  /* ... */
  --special: 320 80% 69%;
  --special-foreground: 330 100% 98%;
}

เปิดเผยให้ Tailwind ใน tailwind.config.js:JavaScript

// In tailwind.config.js
// ...
extend: {
  colors: {
    // ...
    special: {
      DEFAULT: "hsl(var(--special))",
      foreground: "hsl(var(--special-foreground))",
    },
  },
},
// ...

ตอนนี้คุณสามารถใช้สีเหล่านี้ในส่วนประกอบของคุณด้วยคลาส utility ของ Tailwind เช่น bg-special และ text-special-foreground

การสร้างเลย์เอาต์ที่ตอบสนอง

ส่วนประกอบ HeroUI สร้างขึ้นด้วย Tailwind CSS ซึ่งหมายความว่ามันตอบสนองโดยธรรมชาติ คุณสามารถใช้ responsive prefixes ของ Tailwind (sm:, md:, lg:, xl:) บนคลาส utility ใดก็ได้เพื่อเปลี่ยนสไตล์ของส่วนประกอบในขนาดหน้าจอที่แตกต่างกัน

ลองจินตนาการถึงการสร้างเลย์เอาต์หน้าเว็บง่ายๆ ที่มีแถบด้านข้างซึ่งมองเห็นได้บนเดสก์ท็อป แต่จะยุบตัวลงบนมือถือ ในขณะที่ HeroUI มีส่วนประกอบระดับต่ำ (Card, Button) คุณมีหน้าที่ในการประกอบส่วนประกอบเหล่านั้นเข้าด้วยกันเป็นเลย์เอาต์ที่ใหญ่ขึ้น

นี่คือตัวอย่างวิธีการจัดโครงสร้างนี้ในส่วนประกอบหน้า Next.js:TypeScript

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function DashboardPage() {
  return (
    <div className="flex min-h-screen flex-col md:flex-row">
      {/* Sidebar */}
      <aside className="w-full border-b bg-muted p-4 md:w-64 md:border-b-0 md:border-r">
        <h2 className="text-lg font-semibold">Navigation</h2>
        <nav className="mt-4 flex flex-row space-x-2 md:flex-col md:space-x-0 md:space-y-2">
          <Button variant="ghost" className="justify-start">Dashboard</Button>
          <Button variant="ghost" className="justify-start">Settings</Button>
          <Button variant="ghost" className="justify-start">Profile</Button>
        </nav>
      </aside>

      {/* Main Content */}
      <main className="flex-1 p-8">
        <h1 className="text-4xl font-bold tracking-tight">Dashboard</h1>
        <p className="mt-2 text-muted-foreground">
          Welcome to your dashboard.
        </p>
        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <Card>
            <CardHeader>
              <CardTitle>Revenue</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">$45,231.89</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Subscriptions</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">+2350</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Active Users</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">+573</p>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  );
}

ในตัวอย่างนี้:

สิ่งนี้แสดงให้เห็นถึงหลักการสำคัญ: HeroUI มอบ primitive ที่มีการจัดสไตล์ (Card, Button) และคุณใช้พลังทั้งหมดของ Tailwind CSS เพื่อจัดเรียงพวกมันให้เป็นเลย์เอาต์ที่ซับซ้อนและตอบสนอง

การใช้งานโหมดมืดที่สมบูรณ์แบบ

หนึ่งในคุณสมบัติที่สง่างามที่สุดของ HeroUI คือการรองรับโหมดมืดในตัว เนื่องจากคำสั่ง init ได้ตั้งค่าตัวแปรสีสำหรับทั้งธีมสว่าง (:root) และธีมมืด (.dark) ไว้แล้ว การใช้งานจึงง่ายอย่างน่าประหลาดใจ

แนวทางที่พบบ่อยที่สุดคือการใช้แพ็กเกจ next-themes ซึ่งจัดการการสลับธีมและคงการเลือกของผู้ใช้ไว้ใน local storage

ติดตั้ง next-themes:Bash

npm install next-themes

สร้าง Theme Provider:

สร้างไฟล์ใหม่ เช่น ที่ components/theme-provider.tsxTypeScript

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

ห่อ Root Layout ของคุณด้วย Provider:

ใน root layout ของ Next.js ของคุณ (app/layout.tsx) นำเข้าและใช้ ThemeProviderTypeScript

import { ThemeProvider } from "@/components/theme-provider";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

props ที่สำคัญในที่นี้คือ:

สร้างปุ่มสลับธีม:

ตอนนี้ คุณเพียงแค่ต้องการองค์ประกอบ UI เพื่อให้ผู้ใช้สามารถสลับธีมได้TypeScript

"use client";

import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";

export function ModeToggle() {
  const { setTheme, theme } = useTheme();

  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  return (
    <Button variant="outline" size="icon" onClick={toggleTheme}>
      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  );
}

ส่วนประกอบนี้1 ใช้ hook useTheme จาก next-themes เพื่อตรวจสอบธีมปัจจุบันและตั้งค่าธีมใหม่ ไอคอนพระอาทิตย์และพระจันทร์ที่หมุนได้ให้การเปลี่ยนภาพที่สวยงาม เพียงแค่วางส่วนประกอบ <ModeToggle /> นี้ไว้ที่ใดที่หนึ่งใน UI ของคุณ (เช่น ในส่วนหัว) และคุณก็จะมีปุ่มสลับโหมดมืดที่ทำงานได้อย่างสมบูรณ์และคงอยู่

ส่วนที่ 4: HeroUI CLI และเวิร์กโฟลว์ที่เน้นส่วนประกอบ

heroui-cli เป็นมากกว่าแค่โปรแกรมติดตั้ง มันเป็นเครื่องมือหลักที่คุณจะใช้ในการจัดการและขยายไลบรารีส่วนประกอบของคุณ วัตถุประสงค์หลักหลังจากเริ่มต้นคือการเพิ่มส่วนประกอบใหม่เข้าในโปรเจกต์ของคุณ

การเพิ่มส่วนประกอบ: เวิร์กโฟลว์หลัก

สมมติว่าคุณต้องการ modal dialog สำหรับแอปพลิเคชันของคุณ แทนที่จะเขียนเองตั้งแต่ต้น คุณสามารถขอให้ CLI เพิ่มส่วนประกอบ Dialog ที่ HeroUI สร้างไว้ล่วงหน้าและเข้าถึงได้

คำสั่งนั้นง่ายมาก:Bash

npx heroui-cli@latest add dialog

CLI จะดำเนินการดังต่อไปนี้:

  1. มันจะอ่านไฟล์ components.json ของคุณเพื่อทำความเข้าใจโครงสร้างโปรเจกต์ของคุณ (path aliases, การใช้ TypeScript ฯลฯ)
  2. มันจะดึงซอร์สโค้ดล่าสุดสำหรับส่วนประกอบ Dialog และ dependencies ใดๆ ของมัน (เช่น Dialog อาจขึ้นอยู่กับ Button)
  3. มันจะวางไฟล์ส่วนประกอบโดยตรงในไดเร็กทอรีส่วนประกอบของคุณ เช่น: components/ui/dialog.tsx
  4. มันจะแจ้งให้คุณทราบเกี่ยวกับ dependencies อื่นๆ ที่คุณอาจต้องติดตั้ง

ตอนนี้ คุณมีไฟล์ dialog.tsx ในโปรเจกต์ของคุณ คุณสามารถตรวจสอบโค้ด เรียนรู้จากมัน และแม้กระทั่งแก้ไขมัน หาก Dialog เริ่มต้นมี transition ที่คุณไม่ชอบ คุณสามารถเปิดไฟล์และเปลี่ยนคลาส Tailwind ที่ควบคุมแอนิเมชันได้ การควบคุมระดับนี้เป็นรากฐานสำคัญของประสบการณ์ HeroUI

คุณสามารถเพิ่มส่วนประกอบหลายรายการพร้อมกันได้:Bash

npx heroui-cli@latest add card button input label

คำสั่งนี้จะเพิ่มส่วนประกอบทั้งสี่ตัวและ dependencies ของพวกมันเข้าในโปรเจกต์ของคุณในครั้งเดียว

ทำความเข้าใจ CLI API: components.json

ไฟล์ components.json เป็นสัญญาผูกมัดระหว่างโปรเจกต์ของคุณและ HeroUI CLI มาทบทวนคุณสมบัติของมันเพื่อทำความเข้าใจว่ามันมีอิทธิพลต่อพฤติกรรมของ CLI อย่างไร

ด้วยการทำความเข้าใจการกำหนดค่านี้ คุณยังสามารถปรับพฤติกรรมของ CLI ด้วยตนเองได้ หากคุณตัดสินใจที่จะ refactor โครงสร้างโปรเจกต์ของคุณ ตัวอย่างเช่น โดยการย้ายไดเร็กทอรีส่วนประกอบของคุณจาก @/components ไปยัง @/ui

บทสรุป: สร้างในแบบของคุณด้วย HeroUI

HeroUI แสดงถึงการเปลี่ยนแปลงที่สำคัญในวิธีที่นักพัฒนาสามารถคิดและใช้ไลบรารี UI มันก้าวออกจากโมเดลแบบสำเร็จรูป กล่องดำ และมุ่งสู่ประสบการณ์นักพัฒนาที่โปร่งใส เสริมพลัง และปรับแต่งได้อย่างลึกซึ้ง ด้วยการนำเสนอส่วนประกอบที่ไม่มีสไตล์และเข้าถึงได้โดยตรงในรูปแบบซอร์สโค้ด มันสร้างความสมดุลที่สมบูรณ์แบบระหว่างการพัฒนาที่รวดเร็วและการออกแบบที่กำหนดเอง

จุดแข็งหลักของ HeroUI นั้นชัดเจน:

HeroUI เหมาะสำหรับนักสร้างสรรค์ ช่างฝีมือ และทีมที่เชื่อว่าอินเทอร์เฟซผู้ใช้เป็นส่วนสำคัญของเอกลักษณ์ผลิตภัณฑ์ของตน มันไม่ได้ให้บ้านสำเร็จรูปแก่คุณ แต่มอบวัสดุคุณภาพสูงสุดและเวิร์กช็อปที่จัดระเบียบอย่างสมบูรณ์แบบเพื่อสร้างบ้านในฝันของคุณ สำหรับโปรเจกต์ถัดไปของคุณที่ต้องการส่วนหน้าที่ไม่เหมือนใคร ขัดเกลา และดูแลรักษาง่าย ไม่ต้องมองหาที่ไหนไกลนอกจาก HeroUI มันอาจเป็นเครื่องมือที่ช่วยให้คุณสร้าง UI ที่ยอดเยี่ยมที่สุดของคุณได้

💡
ต้องการเครื่องมือทดสอบ API ที่ยอดเยี่ยมซึ่งสร้าง เอกสาร API ที่สวยงาม หรือไม่?

ต้องการแพลตฟอร์มแบบครบวงจรสำหรับทีมพัฒนาของคุณเพื่อทำงานร่วมกันด้วย ประสิทธิภาพสูงสุด หรือไม่?

Apidog ตอบสนองทุกความต้องการของคุณ และ มาแทนที่ Postman ในราคาที่เข้าถึงได้มากกว่ามาก!
ปุ่ม

ฝึกการออกแบบ API แบบ Design-first ใน Apidog

ค้นพบวิธีที่ง่ายขึ้นในการสร้างและใช้ API

ลงทะเบียนฟรีดาวน์โหลด