- {/* Text Colors Section */}
-
- Text Colors
-
-
-
-
-
-
- Foreground (Default)
-
-
- Default text color for main content
-
-
-
-
- Muted Foreground
-
-
- Muted text for secondary information
-
-
-
-
- Primary
-
-
- Primary brand color text
-
-
-
-
- Secondary Foreground
-
-
- Secondary action text color
-
-
-
-
-
-
- Accent Foreground
-
-
- Accent text for emphasis
-
-
-
-
- Destructive
-
-
- Error or destructive action text
-
-
-
-
- Card Foreground
-
-
- Text color on card backgrounds
-
-
-
-
- Popover Foreground
-
-
- Text color in popovers
-
-
-
-
-
-
-
-
- {/* Color Combinations Section */}
-
- Color Combinations
-
-
-
-
-
Primary
-
- Primary background with foreground text
-
-
-
-
Secondary
-
- Secondary background with foreground text
-
-
-
-
Muted
-
- Muted background with foreground text
-
-
-
-
Accent
-
- Accent background with foreground text
-
-
-
-
Destructive
-
- Destructive background with foreground text
-
-
-
-
Card
-
- Card background with foreground text
-
-
-
-
Popover
-
- Popover background with foreground text
-
-
-
-
Background
-
- Default background with foreground text
-
-
-
-
-
-
-
- {/* Buttons Section */}
-
- Buttons
-
-
-
- Default
- Secondary
- Destructive
- Outline
- Ghost
- Link
- Small
- Large
-
-
-
-
-
-
-
-
- {/* Form Inputs Section */}
-
- Form Inputs
-
-
-
- Email
-
-
-
- Message
-
-
-
- Select
-
-
-
-
-
- Apple
- Banana
- Orange
-
-
-
-
-
- Accept terms and conditions
-
-
-
- Airplane Mode
-
-
-
Radio Group
-
-
-
- Option One
-
-
-
- Option Two
-
-
-
-
- Slider
-
-
-
- Input OTP
-
-
-
-
-
-
-
-
-
-
-
-
-
Date Time Picker
-
-
-
-
- {datePickerDate ? (
- format(datePickerDate, "PPP HH:mm", { locale: zhCN })
- ) : (
- Select date and time
- )}
-
-
-
-
-
-
-
-
- Time
-
-
- {
- const [hours, minutes] =
- e.target.value.split(":");
- const newDate = datePickerDate
- ? new Date(datePickerDate)
- : new Date();
- newDate.setHours(parseInt(hours));
- newDate.setMinutes(parseInt(minutes));
- setDatePickerDate(newDate);
- }}
- />
-
-
-
-
-
- {datePickerDate && (
-
- Selected:{" "}
- {format(datePickerDate, "yyyy/MM/dd HH:mm", {
- locale: zhCN,
- })}
-
- )}
-
-
-
Searchable Dropdown
-
-
-
- {selectedFramework
- ? [
- { value: "react", label: "React" },
- { value: "vue", label: "Vue" },
- { value: "angular", label: "Angular" },
- { value: "svelte", label: "Svelte" },
- { value: "nextjs", label: "Next.js" },
- { value: "nuxt", label: "Nuxt" },
- { value: "remix", label: "Remix" },
- ].find(fw => fw.value === selectedFramework)?.label
- : "Select framework..."}
-
-
-
-
-
-
-
- No framework found
-
- {[
- { value: "react", label: "React" },
- { value: "vue", label: "Vue" },
- { value: "angular", label: "Angular" },
- { value: "svelte", label: "Svelte" },
- { value: "nextjs", label: "Next.js" },
- { value: "nuxt", label: "Nuxt" },
- { value: "remix", label: "Remix" },
- ].map(framework => (
- {
- setSelectedFramework(
- currentValue === selectedFramework
- ? ""
- : currentValue
- );
- setOpenCombobox(false);
- }}
- >
-
- {framework.label}
-
- ))}
-
-
-
-
-
- {selectedFramework && (
-
- Selected:{" "}
- {
- [
- { value: "react", label: "React" },
- { value: "vue", label: "Vue" },
- { value: "angular", label: "Angular" },
- { value: "svelte", label: "Svelte" },
- { value: "nextjs", label: "Next.js" },
- { value: "nuxt", label: "Nuxt" },
- { value: "remix", label: "Remix" },
- ].find(fw => fw.value === selectedFramework)?.label
- }
-
- )}
-
-
-
-
-
- Month
-
-
-
-
-
-
- {Array.from({ length: 12 }, (_, i) => i + 1).map(
- month => (
-
- {month.toString().padStart(2, "0")}
-
- )
- )}
-
-
-
-
-
- Year
-
-
-
-
-
-
- {Array.from(
- { length: 10 },
- (_, i) => new Date().getFullYear() - 5 + i
- ).map(year => (
-
- {year}
-
- ))}
-
-
-
-
- {selectedMonth && selectedYear && (
-
- Selected: {selectedYear}/{selectedMonth}/
-
- )}
-
-
-
-
-
- {/* Data Display Section */}
-
- Data Display
-
-
-
-
Badges
-
- Default
- Secondary
- Destructive
- Outline
-
-
-
-
-
-
-
Progress
-
-
- setProgress(Math.max(0, progress - 10))}
- >
- -10
-
- setProgress(Math.min(100, progress + 10))}
- >
- +10
-
-
-
-
-
-
-
-
Pagination
-
-
-
- {
- e.preventDefault();
- setCurrentPage(Math.max(1, currentPage - 1));
- }}
- />
-
- {[1, 2, 3, 4, 5].map(page => (
-
- {
- e.preventDefault();
- setCurrentPage(page);
- }}
- >
- {page}
-
-
- ))}
-
- {
- e.preventDefault();
- setCurrentPage(Math.min(5, currentPage + 1));
- }}
- />
-
-
-
-
- Current page: {currentPage}
-
-
-
-
-
Table
-
- A list of your recent invoices.
-
-
- Invoice
- Status
- Method
- Amount
-
-
-
-
- INV001
- Paid
- Credit Card
- $250.00
-
-
- INV002
- Pending
- PayPal
- $150.00
-
-
- INV003
- Unpaid
- Bank Transfer
- $350.00
-
-
-
-
-
-
- Menubar
-
-
- File
-
- New Tab
- New Window
-
- Share
-
- Print
-
-
-
- Edit
-
- Undo
- Redo
-
-
-
- View
-
- Reload
- Force Reload
-
-
-
-
-
-
- Breadcrumb
-
-
-
- Home
-
-
-
-
- Components
-
-
-
-
- Breadcrumb
-
-
-
-
-
-
-
-
- {/* Alerts Section */}
-
- Alerts
-
-
-
- Heads up!
-
- You can add components to your app using the cli.
-
-
-
-
- Error
-
- Your session has expired. Please log in again.
-
-
-
-
-
- {/* Tabs Section */}
-
-
- {/* Accordion Section */}
-
- Accordion
-
-
- Is it accessible?
-
- Yes. It adheres to the WAI-ARIA design pattern.
-
-
-
- Is it styled?
-
- Yes. It comes with default styles that matches the other
- components' aesthetic.
-
-
-
- Is it animated?
-
- Yes. It's animated by default, but you can disable it if you
- prefer.
-
-
-
-
-
- {/* Collapsible Section */}
-
- Collapsible
-
-
-
-
-
- @peduarte starred 3 repositories
-
-
-
-
-
-
-
- @radix-ui/primitives
-
-
- @radix-ui/colors
-
-
- @stitches/react
-
-
-
-
-
-
-
-
- {/* Dialog, Sheet, Drawer Section */}
-
- Overlays
-
-
-
-
-
- Open Dialog
-
-
-
- Test Input
-
- Enter some text below. Press Enter to submit (IME composition supported).
-
-
-
-
- Input
- setDialogInput(e.target.value)}
- onKeyDown={handleDialogKeyDown}
- autoFocus
- />
-
-
-
- setDialogOpen(false)}
- >
- Cancel
-
- Submit
-
-
-
-
-
-
- Open Sheet
-
-
-
- Edit profile
-
- Make changes to your profile here. Click save when
- you're done.
-
-
-
-
-
-
-
- Open Drawer
-
-
-
- Are you absolutely sure?
-
- This action cannot be undone.
-
-
-
- Submit
-
- Cancel
-
-
-
-
-
-
-
- Open Popover
-
-
-
-
Dimensions
-
- Set the dimensions for the layer.
-
-
-
-
-
-
-
- Hover me
-
-
- Add to library
-
-
-
-
-
-
-
- {/* Menus Section */}
-
- Menus
-
-
-
-
-
- Dropdown Menu
-
-
- My Account
-
- Profile
- Billing
- Team
- Subscription
-
-
-
-
-
- Right Click Me
-
-
- Profile
- Billing
- Team
- Subscription
-
-
-
-
-
- Hover Card
-
-
-
-
@nextjs
-
- The React Framework – created and maintained by
- @vercel.
-
-
-
-
-
-
-
-
-
- {/* Calendar Section */}
-
-
- {/* Carousel Section */}
-
- Carousel
-
-
-
-
- {Array.from({ length: 5 }).map((_, index) => (
-
-
-
-
-
- {index + 1}
-
-
-
-
-
- ))}
-
-
-
-
-
-
-
-
- {/* Toggle Section */}
-
- Toggle
-
-
-
-
Toggle
-
-
- B
-
-
- I
-
-
- U
-
-
-
-
-
- Toggle Group
-
-
- B
-
-
- I
-
-
- U
-
-
-
-
-
-
-
- {/* Aspect Ratio & Scroll Area Section */}
-
- Layout Components
-
-
-
-
Aspect Ratio (16/9)
-
-
-
-
-
-
-
Scroll Area
-
-
-
- {Array.from({ length: 20 }).map((_, i) => (
-
- Item {i + 1}: This is a scrollable content area
-
- ))}
-
-
-
-
-
-
-
-
- {/* Resizable Section */}
-
- Resizable Panels
-
-
-
-
-
- Panel One
-
-
-
-
-
- Panel Two
-
-
-
-
-
-
-
- {/* Toast Section */}
-
- Toast
-
-
-
-
Sonner Toast
-
- {
- sonnerToast.success("Operation successful", {
- description: "Your changes have been saved",
- });
- }}
- >
- Success
-
- {
- sonnerToast.error("Operation failed", {
- description:
- "Cannot complete operation, please try again",
- });
- }}
- >
- Error
-
- {
- sonnerToast.info("Information", {
- description: "This is an information message",
- });
- }}
- >
- Info
-
- {
- sonnerToast.warning("Warning", {
- description:
- "Please note the impact of this operation",
- });
- }}
- >
- Warning
-
- {
- sonnerToast.loading("Loading", {
- description: "Please wait",
- });
- }}
- >
- Loading
-
- {
- const promise = new Promise(resolve =>
- setTimeout(resolve, 2000)
- );
- sonnerToast.promise(promise, {
- loading: "Processing...",
- success: "Processing complete!",
- error: "Processing failed",
- });
- }}
- >
- Promise
-
-
-
-
-
-
-
- {/* AI ChatBox Section */}
-
- AI ChatBox
-
-
-
-
-
- A ready-to-use chat interface component that integrates with the LLM system.
- Features markdown rendering, auto-scrolling, and loading states.
-
-
- This is a demo with simulated responses. In a real app, you'd connect it to a tRPC mutation.
-
-
-
-
-
-
-
-
-