Modul praktis Level 2 VibeKoding: Upgrade UI dengan Modern Component Libraries.Modul praktis Level 2 VibeKoding: Upgrade UI dengan Modern Component Libraries.
In previous lessons, you already learned how to design interfaces with design tools, turn designs into code with an AI IDE, and even complete a full frontend project. But you may have noticed one issue: when you build buttons, forms, and modals from scratch, they work, but they still feel a bit short of a "professional product" - styles are not consistent enough, interaction details are not smooth enough, and adapting to different screens is painful.In previous lessons, you already learned how to design interfaces with design tools, turn designs into code with an AI IDE, and even complete a full frontend project. But you may have noticed one issue: when you build buttons, forms, and modals from scratch, they work, but they still feel a bit short of a "professional product" - styles are not consistent enough, interaction details are not smooth enough, and adapting to different screens is painful.
This is exactly the problem that component libraries solve.This is exactly the problem that component libraries solve.
A component library is a collection of pre-designed and pre-built UI building blocks. Buttons, inputs, dropdown menus, dialogs, tables... these interface elements appear repeatedly in almost every product. A component library has already built and polished them for you through large-scale real usage. You just combine them like Lego bricks and can quickly build a professional-grade interface.A component library is a collection of pre-designed and pre-built UI building blocks. Buttons, inputs, dropdown menus, dialogs, tables... these interface elements appear repeatedly in almost every product. A component library has already built and polished them for you through large-scale real usage. You just combine them like Lego bricks and can quickly build a professional-grade interface.
Imagine furnishing a home. You could build a chair yourself from raw wood, but the common approach is to buy one from IKEA - good design, stable quality, clear instructions, and you just assemble it at home.Imagine furnishing a home. You could build a chair yourself from raw wood, but the common approach is to buy one from IKEA - good design, stable quality, clear instructions, and you just assemble it at home.
Component libraries are the "IKEA" of frontend development. What they provide is not furniture, but interface parts:Component libraries are the "IKEA" of frontend development. What they provide is not furniture, but interface parts:
| Hand-coding everything | Using a component library |
|---|---|
| You handle styling, interactions, and animation yourself | Ready out of the box, with polished styles and interactions |
| Buttons may look different across pages | Unified global style and automatic consistency |
| Mobile/tablet adaptation needs extra work | Most component libraries already include responsive support |
| Accessibility is easy to miss | Professional libraries already handle keyboard navigation, screen readers, and more |
| Slower development | Faster development, more focus on business logic |
In short: component libraries let you spend time on "what to build" instead of "how to draw it."In short: component libraries let you spend time on "what to build" instead of "how to draw it."
Talking alone is not convincing. In Trae, we can use almost the same requirement twice: once without specifying a library, and once with one. Then compare the generated results.Talking alone is not convincing. In Trae, we can use almost the same requirement twice: once without specifying a library, and once with one. Then compare the generated results.
Prompt 1: without a component libraryPrompt 1: without a component library
text Please help me build a data dashboard page for an AI writing assistant, including: - a top title bar and an export button - four statistic cards showing user count, active users, document count, and revenue, with trend changes - one line chart and one pie chart - a user list table with pagination - a left navigation sidebar
Result when run directly in Trae:Result when run directly in Trae:
🖼️ Dashboard generated by Trae (without component library)Dashboard generated by Trae (without component library)
Prompt 2: use the shadcn/ui component libraryPrompt 2: use the shadcn/ui component library
text Please help me build a data dashboard page for an AI writing assistant using the shadcn/ui component library, including: - a top title bar and an export button - four statistic cards showing user count, active users, document count, and revenue, with trend changes - one line chart and one pie chart - a user list table with pagination - a left navigation sidebar
Result when run directly in Trae:Result when run directly in Trae:
🖼️ Dashboard generated by Trae (with shadcn/ui)Dashboard generated by Trae (with shadcn/ui)
Same requirement. The only difference is adding shadcn/ui + Tailwind CSS at the beginning of the prompt. But the generated result jumps to a completely different level in visual consistency, interaction detail, and overall polish. That is the "free upgrade" component libraries bring - you only need to add one library name in your prompt.Same requirement. The only difference is adding shadcn/ui + Tailwind CSS at the beginning of the prompt. But the generated result jumps to a completely different level in visual consistency, interaction detail, and overall polish. That is the "free upgrade" component libraries bring - you only need to add one library name in your prompt.
There are many component libraries (full list in the [appendix](#appendix-more-component-libraries)), but you only need to first understand these four representative ones:There are many component libraries (full list in the [appendix](#appendix-more-component-libraries)), but you only need to first understand these four representative ones:
| Component Library | Framework | One-line Positioning | Website |
|---|---|---|---|
| [Ant Design](https://ant.design) | React | Produced by Ant Group; the de facto standard for enterprise back-office systems, with very broad component coverage | ant.design |
| [shadcn/ui](https://ui.shadcn.com) | React | No big npm package install; copy component code directly into your project, built on Tailwind CSS, with maximum customization freedom | ui.shadcn.com |
| [HeroUI](https://heroui.com) (formerly NextUI) | React | Beautiful default styles and smooth animation; great for visually demanding landing pages and product showcases | heroui.com |
| [Material UI](https://mui.com) | React | The most established React component library, implementing Google Material Design, with the most mature ecosystem | mui.com |
> Vue users also have rich options: [Element Plus](https://element-plus.org) (most popular in China), [Ant Design Vue](https://antdv.com), [Naive UI](https://www.naiveui.com), etc. See the [appendix](#appendix-more-component-libraries).> Vue users also have rich options: [Element Plus](https://element-plus.org) (most popular in China), [Ant Design Vue](https://antdv.com), [Naive UI](https://www.naiveui.com), etc. See the [appendix](#appendix-more-component-libraries).
Different libraries are good at different scenarios. Next, through three real development scenarios, you will experience how to do Vibe Coding with AI IDE + component libraries.Different libraries are good at different scenarios. Next, through three real development scenarios, you will experience how to do Vibe Coding with AI IDE + component libraries.
To show different styles and strengths, we intentionally use a different library in each scenario. But note: this is only to let you see more options. In real projects, you can absolutely stick to one library you like most. For example, if you like shadcn/ui, you can use it for landing pages, product pages, and admin systems. Pick one that looks good to you and feels comfortable to use - that matters most.To show different styles and strengths, we intentionally use a different library in each scenario. But note: this is only to let you see more options. In real projects, you can absolutely stick to one library you like most. For example, if you like shadcn/ui, you can use it for landing pages, product pages, and admin systems. Pick one that looks good to you and feels comfortable to use - that matters most.
Scenario: You built an AI writing assistant and need a beautiful landing page to show product features and attract user sign-ups. The landing page should have strong visual impact, smooth animation, and good mobile appearance.Scenario: You built an AI writing assistant and need a beautiful landing page to show product features and attract user sign-ups. The landing page should have strong visual impact, smooth animation, and good mobile appearance.
Why HeroUI: HeroUI has very polished default styles and smooth transitions, which makes it ideal for user-facing showcase pages.Why HeroUI: HeroUI has very polished default styles and smooth transitions, which makes it ideal for user-facing showcase pages.
bash # Use the official HeroUI CLI npx create-heroui-app@latest ai-writer-landing cd ai-writer-landing npm install
🖼️ HeroUI component library homepageHeroUI component library homepage
Open your AI IDE (Cursor, Trae, etc.) and enter:Open your AI IDE (Cursor, Trae, etc.) and enter:
text Please help me build a landing page for an AI writing assistant using the HeroUI component library: **Page structure:** 1. Top navigation bar: put Logo and product name on the left, three links "Features", "Pricing", "About" on the right, plus a "Get Started" button 2. Hero section: main headline "Make AI your writing partner", subtitle introducing product value, two buttons "Try Free" and "View Demo", and a product screenshot below 3. Feature section: three-column cards introducing "Smart Continuation", "Style Adjustment", and "Multilingual Translation"; each card should have icon, title, and description 4. Pricing section: three pricing cards (Free, Pro, Team), with Pro highlighted as recommended 5. Bottom CTA: one compelling line of copy and a signup button 6. Footer: copyright information and social media links **Design requirements:** - modern and professional look - support dark mode - should also look good on mobile
🖼️ HeroUI landing page generated by AIHeroUI landing page generated by AI
In the code generated by AI, you will see these HeroUI components:In the code generated by AI, you will see these HeroUI components:
jsx import { Navbar, NavbarBrand, NavbarContent, NavbarItem, Button, Card, CardHeader, CardBody, CardFooter, Divider, Link, Chip } from '@heroui/react'
Role of each component:Role of each component:
| Component | Usage | Position in the landing page |
|---|---|---|
Navbar | Top navigation bar | Top of the page, fixed |
Button | Buttons with multiple variants and colors | CTA buttons, nav buttons |
Card | Card container | Feature cards, pricing cards |
Chip | Small badge/label | "Recommended", "Most Popular" markers |
Divider | Separator line | Visual separation between sections |
The first generated version may not be perfect. Continue the conversation with AI:The first generated version may not be perfect. Continue the conversation with AI:
text Please help me improve the landing page: 1. Add a gradient color to the main headline, from blue to purple 2. Add a hover lift animation to feature cards 3. Highlight the Pro pricing card with a border and a "Most Popular" badge 4. On mobile, change the nav bar to a hamburger menu (three horizontal lines)
🖼️ Landing page after iterationLanding page after iteration
> Core idea of Vibe Coding: You do not need to memorize every component API. Just describe the effect you want in natural language, and AI will choose suitable components and implementation. If something is not ideal, continue iterating in conversation.> Core idea of Vibe Coding: You do not need to memorize every component API. Just describe the effect you want in natural language, and AI will choose suitable components and implementation. If something is not ideal, continue iterating in conversation.
Scenario: Your AI writing assistant needs a logged-in main interface - document list on the left, editor on the right, toolbar on top. This is a functional product page that needs highly customizable UI.Scenario: Your AI writing assistant needs a logged-in main interface - document list on the left, editor on the right, toolbar on top. This is a functional product page that needs highly customizable UI.
Why shadcn/ui: shadcn/ui puts component code directly into your project, so you can modify any detail freely. For deeply customized product interfaces, this "own the code" model is the most flexible.Why shadcn/ui: shadcn/ui puts component code directly into your project, so you can modify any detail freely. For deeply customized product interfaces, this "own the code" model is the most flexible.
🖼️ shadcn/ui component library homepageshadcn/ui component library homepage
bash # Create a Next.js project npx create-next-app@latest ai-writer-app --typescript --tailwind --app cd ai-writer-app # Initialize shadcn/ui npx shadcn@latest init # Add components on demand (do not install everything at once) npx shadcn@latest add button card input sidebar sheet dialog
The unique part of shadcn/ui: each time you add a component, it copies source code into your project's components/ui/ directory. You can open these files and edit styles and behavior directly.The unique part of shadcn/ui: each time you add a component, it copies source code into your project's components/ui/ directory. You can open these files and edit styles and behavior directly.
text Please help me build the main interface of an AI writing assistant using the shadcn/ui component library: **Overall layout:** - Left side: a collapsible sidebar, about 280px wide: - Put a "New Document" button at the top - Below is a document list; each document shows title and last edited time - Right-click on a document should allow rename or delete - Right side: main editor area, split into upper and lower parts: - Top toolbar: editable document title, word count, "AI Continue" button, and an "Export" dropdown - Bottom editor area: one large text input filling remaining space **Interaction details:** - After clicking "AI Continue", the button shows loading state, and AI-generated text appears at the bottom of the editor (shown character by character like a typewriter) - On mobile, the sidebar becomes a drawer that slides in from the left - The currently selected document should be highlighted
🖼️ Product page generated by AI with shadcn/uiProduct page generated by AI with shadcn/ui
tsx import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Card, CardContent, CardHeader } from '@/components/ui/card' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu' import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet' import { Sidebar, SidebarContent, SidebarHeader } from '@/components/ui/sidebar'
| Component | Usage | Position in the product page |
|---|---|---|
Sidebar | Collapsible sidebar | Left document list |
Sheet | Mobile drawer | Mobile replacement for sidebar |
DropdownMenu | Dropdown menu | "Export" button, right-click menu |
Dialog | Dialog | Rename and delete confirmation |
Button | Button, supports variants and loading | Various action buttons |
Input | Input field | Document title editing |
The advantage of shadcn/ui is that you can modify component source code directly. For example, if you want larger button corner radius:The advantage of shadcn/ui is that you can modify component source code directly. For example, if you want larger button corner radius:
text Please edit components/ui/button.tsx, change all default button radius from rounded-md to rounded-xl, and add a subtle shadow effect to the primary variant.
AI will directly modify component files in your project, instead of overriding npm package styles - this is the value of shadcn/ui "code ownership."AI will directly modify component files in your project, instead of overriding npm package styles - this is the value of shadcn/ui "code ownership."
🖼️ shadcn/ui component code is directly editable in projectshadcn/ui component code is directly editable in project
Scenario: After your AI writing assistant launches, you need an admin backend to inspect user data, manage document content, and process paid orders. The core of admin systems is data display and operation efficiency.Scenario: After your AI writing assistant launches, you need an admin backend to inspect user data, manage document content, and process paid orders. The core of admin systems is data display and operation efficiency.
Why Ant Design: Ant Design has the deepest accumulation in back-office systems. Tables, forms, charts, and other business components are ready out of the box, with many built-in enterprise interaction patterns (batch actions, advanced filters, data export, etc.).Why Ant Design: Ant Design has the deepest accumulation in back-office systems. Tables, forms, charts, and other business components are ready out of the box, with many built-in enterprise interaction patterns (batch actions, advanced filters, data export, etc.).
🖼️ Ant Design component library homepageAnt Design component library homepage
bash # Use Ant Design Pro scaffolding (built-in layout, routing, permissions) npx create-umi@latest ai-writer-admin # Choose the Ant Design Pro template cd ai-writer-admin npm install
Or start from scratch:Or start from scratch:
bash npx create-react-app ai-writer-admin --template typescript cd ai-writer-admin npm install antd @ant-design/icons @ant-design/pro-components
text Please help me build an admin backend for an AI writing assistant using the Ant Design component library: **Overall layout:** - Left side menu: Dashboard, User Management, Document Management, Order Management, System Settings - Top area shows breadcrumb navigation **User Management page:** - Top area has four stats cards: total users, today's new users, active users, paid users - Search/filter area: search by username, select registration time range, filter by user status, plus "Search" and "Reset" buttons - User table: - Show avatar, username, email, registration time, subscription plan (distinguished by different tag colors), status, operations - 20 rows per page, with pagination - Support batch selection, batch disable, or export - Operation column: view details, edit, disable (disable requires secondary confirmation) - Clicking "View Details" opens a right-side drawer showing detailed user information and recent document list
🖼️ Ant Design admin interface generated by AIAnt Design admin interface generated by AI
tsx import { PageContainer, ProLayout } from '@ant-design/pro-components' import { ProTable } from '@ant-design/pro-components' import { StatisticCard } from '@ant-design/pro-components' import { Button, Tag, Badge, Space, Drawer, Popconfirm, message, Modal } from 'antd' import { UserOutlined, SearchOutlined, ExportOutlined } from '@ant-design/icons'
| Component | Usage | Position in backend |
|---|---|---|
ProLayout | Overall admin layout framework | Page skeleton (menu + content area) |
ProTable | Advanced table with built-in search, pagination, column settings | User list, document list, order list |
StatisticCard | Data statistic card | Dashboard and page-top overview |
Tag / Badge | Status tags | Subscription plans, user status |
Drawer | Side drawer | User details, edit forms |
Popconfirm | Confirmation popover | Dangerous actions like delete/disable |
text Please help me build a dashboard page: 1. Top four statistic cards: total users, total documents, today's API calls, monthly revenue. Each card should show value and period-over-period change (up or down) 2. Put two charts in the middle: - Left: user growth line chart for the last 7 days - Right: pie chart of subscription plan distribution 3. Bottom: recent operation log table, showing time, user, operation type, details Use Ant Design components for layout, and you can use Ant Design Charts for charts.
🖼️ Ant Design dashboard page resultAnt Design dashboard page result
> Vibe Coding tip for admin systems: Admin page structures are relatively fixed (table + search + modal), so they are perfect for batch generation with AI. You can first ask AI to generate one "User Management" page as a template, then say "Based on the same structure, generate a Document Management page." AI will reuse the same layout pattern.> Vibe Coding tip for admin systems: Admin page structures are relatively fixed (table + search + modal), so they are perfect for batch generation with AI. You can first ask AI to generate one "User Management" page as a template, then say "Based on the same structure, generate a Document Management page." AI will reuse the same layout pattern.
In Vibe Coding, AI writes most code for you. But when the generated result is not correct, or when you want to fine-tune component behavior, reading the docs is the fastest way to solve it.In Vibe Coding, AI writes most code for you. But when the generated result is not correct, or when you want to fine-tune component behavior, reading the docs is the fastest way to solve it.
Take Ant Design as an example. Its docs URL is: https://ant.design/components/overview-cnTake Ant Design as an example. Its docs URL is: https://ant.design/components/overview-cn
Standard docs workflow:Standard docs workflow:
rowSelectionCheck API table: at the bottom of the page, find the full config for rowSelection> You can also send docs links directly to your AI IDE: "Please refer to the rowSelection API in https://ant.design/components/table-cn and help me add batch selection to the user table." Giving AI the docs link makes generated code more accurate.> You can also send docs links directly to your AI IDE: "Please refer to the rowSelection API in https://ant.design/components/table-cn and help me add batch selection to the user table." Giving AI the docs link makes generated code more accurate.
Quick docs links for each library:Quick docs links for each library:
| Component Library | Docs URL |
|---|---|
| Ant Design | https://ant.design/components/overview-cn |
| shadcn/ui | https://ui.shadcn.com/docs/components |
| HeroUI | https://heroui.com/docs/components |
| Material UI | https://mui.com/material-ui/all-components/ |
| Element Plus | https://element-plus.org/zh-CN/component/overview.html |
The three practical scenarios cover the most common frontend development needs:The three practical scenarios cover the most common frontend development needs:
| Scenario | Recommended component library | Core strengths |
|---|---|---|
| Landing page / showcase page | HeroUI | Beautiful default styles, smooth animation, strong visual impact |
| Product functional page | shadcn/ui | Full code control, flexible deep customization |
| Admin system | Ant Design | Rich business components, tables/forms ready out of the box |
Vibe Coding workflow summary:Vibe Coding workflow summary:
Pick one scenario below and complete it from scratch with AI IDE + component library:Pick one scenario below and complete it from scratch with AI IDE + component library:
------
Besides the four core libraries covered in the main text, the frontend ecosystem has many excellent component libraries. Below they are grouped by framework to help you choose by project needs.Besides the four core libraries covered in the main text, the frontend ecosystem has many excellent component libraries. Below they are grouped by framework to help you choose by project needs.
| Component Library | Stars | Description | Suitable Scenarios |
|---|---|---|---|
| [Element Plus](https://element-plus.org) | ~27k | Vue 3 enterprise component library from the Ele.me team, most widely used in China, excellent Chinese ecosystem | Back-office admin systems |
| [Vuetify](https://vuetifyjs.com) | ~41k | Most popular Vue Material Design component library, 80+ components, complete docs | Google-design-style projects |
| [Ant Design Vue](https://antdv.com) | ~21k | Vue 3 component library based on Ant Design system, unified design specification | Enterprise back-office systems |
| [Naive UI](https://www.naiveui.com) | ~18k | Written in TypeScript, highly theme-customizable, no CSS preprocessor dependency | Projects with unique design needs |
| [Quasar](https://quasar.dev) | ~27k | One codebase for SPA, SSR, PWA, mobile, and desktop apps | Cross-platform projects |
| [Vant](https://vant-ui.github.io/vant) | ~24k | Lightweight mobile component library from Youzan, covering common e-commerce needs | Mobile H5 pages |
| [PrimeVue](https://primevue.org) | ~14k | 90+ components, multiple themes (Material, Bootstrap, etc.) | Projects needing rich components and multi-theme support |
| [Arco Design Vue](https://arco.design/vue) | ~3k | Produced by ByteDance, high component quality, built-in dark mode | Back-office products |
| [TDesign Vue Next](https://tdesign.tencent.com/vue-next) | ~2k | Produced by Tencent, unified design language, covers common desktop scenarios | Tencent ecosystem or enterprise projects |
| Component Library | Stars | Description | Suitable Scenarios |
|---|---|---|---|
| [Material UI (MUI)](https://mui.com) | ~95k | Long-established implementation of Google Material Design, most complete components, most mature ecosystem | Rapid enterprise app building |
| [Ant Design](https://ant.design) | ~94k | Produced by Ant Group, many high-quality business components, dominant among Chinese developers | Enterprise back-office systems |
| [shadcn/ui](https://ui.shadcn.com) | ~83k | Copy code into project instead of npm install, based on Radix UI + Tailwind CSS, fully controllable | Highly customized projects |
| [Chakra UI](https://chakra-ui.com) | ~39k | Focus on developer experience, concise API, built-in accessibility support | Rapid prototype development |
| [Mantine](https://mantine.dev) | ~28k | 100+ components and 50+ hooks, including advanced components like date pickers and rich text editors | Teams needing an all-in-one out-of-the-box solution |
| [Headless UI](https://headlessui.com) | ~27k | Unstyled component library from Tailwind Labs, supports both React and Vue | Best with Tailwind CSS |
| [HeroUI](https://heroui.com) | ~24k | Based on Tailwind CSS + React Aria, beautiful defaults, smooth animation | Projects pursuing visual quality |
| [Radix UI](https://www.radix-ui.com) | ~17k | Unstyled primitive component library focused on accessibility and behavior; foundational layer of shadcn/ui | Building custom design systems |
Beyond the general component libraries above, the shadcn/ui ecosystem has also produced many extension libraries based on the same philosophy, offering differentiated choices for specific scenarios. These extensions also use the "copy code into project" model, giving developers full source-code control.Beyond the general component libraries above, the shadcn/ui ecosystem has also produced many extension libraries based on the same philosophy, offering differentiated choices for specific scenarios. These extensions also use the "copy code into project" model, giving developers full source-code control.
| Component Library | Description | Suitable Scenarios |
|---|---|---|
| [Aceternity UI](https://ui.aceternity.com) | 200+ production-grade components, featuring glow cards, gradient text, 3D earth, and other signature visual components | High-polish landing pages, SaaS products |
| [Tailark UI](https://tailark.com) | Collection of marketing website blocks, including frequent modules like product showcases, testimonials, and CTA buttons | Marketing landing pages, product websites |
| [UI Tripled](https://ui.tripled.work) | Dynamic interaction components based on Framer Motion, including modal, navigation, card animation | Creative tools, personal portfolios |
| [Neobrutalism UI](https://neobrutalism.dev) | Neo-brutalism style with thick lines, high contrast, and bold colors | Personalized brand websites, creative projects |
| [REUI](https://reui.io) | 967+ component composition patterns from real business scenarios | Enterprise backends, complex forms |
| [Cult UI](https://cult-ui.com) | More refined interaction and visual polish, including compound components like data tables and filter panels | High-quality commercial products |
| [Kibo UI](https://kibo-ui.com) | Advanced business components such as color picker, rich text editor, file upload | Admin systems, tool products |
| [Kokonut UI](https://kokonutui.com) | 100+ components + 7+ complete templates, fresh and minimalist style | SaaS sites, blogs, e-commerce |
| [Commerce UI](https://ui.stackzero.co) | Specialized for e-commerce scenarios, including product cards, shopping cart, checkout forms | E-commerce platforms |
| [shadcnblocks](https://shadcnblocks.com) | 1373 UI blocks + 13 complete templates, most comprehensive resources | All scenarios |
| [Shoogle](https://shoogle.dev) | Aggregated search platform for shadcn/ui ecosystem | Quickly finding resources |
| [Discover All Shadcn](https://allshadcn.com) | Aggregated resource navigation | Quickly finding resources |
> Why choose shadcn/ui extensions? These extensions inherit the shadcn/ui "code ownership" philosophy, while adding deep customization for specific scenarios. In the Vibe Coding era, they help you quickly find components that match your design goals, break away from homogenized mainstream UI patterns, and build more differentiated products.> Why choose shadcn/ui extensions? These extensions inherit the shadcn/ui "code ownership" philosophy, while adding deep customization for specific scenarios. In the Vibe Coding era, they help you quickly find components that match your design goals, break away from homogenized mainstream UI patterns, and build more differentiated products.