A shared tag with AI prompts and code snippets
From workspace: HeroUI Chat
Team: Main
Total snippets: 71
71 snippets
export type FontThemeUnit = { small?: string; medium?: string; large?: string; tiny?: string; };
export type BaseThemeUnit = { small?: string; medium?: string; large?: string; };
Then you can use the CSS variables in your CSS files.
/* With default prefix */ .my-button { font-size: var(--heroui-font-size-small); line-height: var(--heroui-line-height-small); border-radius: var(--heroui-radius-medium); } /* With custom prefix */ .my-component { font-size:...
HeroUI creates CSS variables using the format --prefix-prop-name-scale for each layout token. By default the prefix is heroui, but you can change it with the prefix option
module.exports = { plugins: [ heroui({ prefix: "myapp", }), ], };
Default values for the layout tokens are:
module.exports = { plugins: [ heroui({ layout: { dividerWeight: "1px", // h-divider the default height applied to the divider component disabledOpacity: 0.5, // this value is applied as opacity-[value] when the...
HeroUI provides layout customization options for spacing, fonts, and other visual properties. Layout tokens help maintain consistency across components without modifying Tailwind CSS defaults.
module.exports = { plugins: [ heroui({ layout: {}, // common layout options themes: { light: { layout: {}, // light theme layout options // ... }, dark: { layout: {}, // dark...
ThemeColors
type ColorScale = { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; foreground: string; // contrast color DEFAULT: string; }; type BaseColors...
LayoutTheme
type BaseThemeUnit = { small?: string; medium?: string; large?: string; }; type FontThemeUnit = { small?: string; medium?: string; large?: string; tiny?: string; }; interface LayoutTheme { /** * The default font size applied...
ConfigThemes
type ConfigTheme = { extend?: "light" | "dark"; // base theme to extend layout?: LayoutTheme; // see LayoutTheme colors?: ThemeColors; // see ThemeColors }; type ConfigThemes = Record<string, ConfigTheme>;
HeroUI enables you to apply TailwindCSS styles based on the currently active theme. Below are examples of how to do this:
<!-- In dark theme, background will be dark and text will be light. In light theme, background will be light and text will be dark --> <div class="dark dark:bg-gray-800 dark:text-white bg-white text-black"> ... <div>Text color changes...
HeroUI supports nested themes, allowing you to apply different themes to different sections of your application:
<html class="dark"> ... <div class="light">...</div> <div class="purple-dark">...</div> </html>
These are the options that you can use to apply custom configurations to your themes.
module.exports = { plugins: [ heroui({ themes: { light: { layout: {}, colors: {} }, dark: { layout: {}, colors: {} }, ... // custom themes } }) ...
The heroui plugin provides a default structure. It is outlined as follows:
module.exports = { plugins: [ heroui({ prefix: "heroui", // prefix for themes variables addCommonColors: false, // override common colors (e.g. "blue", "green", "pink"). defaultTheme: "light", // default theme from the...
// main.tsx or main.jsx import React from "react"; import ReactDOM from "react-dom/client"; import {HeroUIProvider} from "@heroui/react"; import App from "./App"; import "./index.css"; ReactDOM.createRoot(document.getElementById("root")).render( ...
The first step to using HeroUI's theming capability is adding the heroui plugin to your tailwind.config.js file. Below is an example of how to do this:
// tailwind.config.js const {heroui} = require("@heroui/react"); /** @type {import('tailwindcss').Config} */ module.exports = { content: [ // ... // make sure it's pointing to the ROOT node_module ...
Create a modal for submitting new feedback with title, description, and category fields.
Use HeroUI modal components to build a `SubmitFeedbackModal`. - Inputs: title (text), description (textarea), category (dropdown) - Buttons: Submit, Cancel - Focus trap, keyboard navigation, and screen reader labels must be included Follow HeroUI...
Display all submitted feedback using HeroUI cards with filters, tags, and short previews.
Build a `FeedbackBoard` using HeroUI card components. - Each card shows title, short description, category tag, upvote count - Optional: comment count, status (e.g., planned) - Responsive grid layout using Tailwind and slots for extensions
Add a filter bar to sort feedback by category using HeroUI's button group or tab system.
Create a filter bar using HeroUI’s tab or segmented control components. - Categories: All, Bug, Feature, UI/UX, Other - Highlight active tab - On click, update feedback list Ensure keyboard support and visual clarity using Tailwind spacing and...
Initialize the layout for the feedback portal using HeroUI with a public board, sidebar, and header.
Design a full-page layout using HeroUI components for a Product Feedback Portal. - Sidebar: categories (All, Planned, In Progress, Completed) - Header: site logo, search bar, user profile - Main: feedback list or placeholder if none Use Tailwind...
Add tagging support to feedback submissions with Tailwind styled badges using HeroUI.
Use HeroUI badge and multi-select input to build a tagging system. - Tags: "Urgent", "Mobile", "UI", "Bug", etc. - Allow up to 5 tags per feedback - Display tags as rounded Tailwind badge components - Support keyboard selection and clearing
Enable admins to reply to feedback directly using HeroUI panel and modal elements.
Create an `AdminResponsePanel` using HeroUI. - Displays selected feedback - Includes textarea for reply, submit button - Replies display below with admin label - Accessible modal for writing response and status update
Build an upvote system using HeroUI buttons with state feedback and accessibility.
Design an `UpvoteButton` component using HeroUI. - Display current upvote count - Change style on click (active state) - Add aria-pressed for screen readers - Use Tailwind for styling and HeroUI's button pattern with slot injection for count/icon
Build a customizable settings panel with toggles, dropdowns, and description texts.
Design a `TeamSettingsPanel` component with: - Sectioned layout for Notifications, Permissions, Integrations - Each setting should use consistent API and component slots - Support custom overrides (via slot injection) - Use Tailwind + Tailwind...
Design a real-time activity feed using HeroUI's accessibility and consistent API approach.
Design a real-time `ActivityFeed` component using HeroUI. It should: - Display user actions (e.g., “Anna updated project details”) - Use clear spacing, text hierarchy, and HeroUI’s uniform props - Support infinite scroll and live updates - Ensure...
Set up the main collaboration dashboard with HeroUI components and shared layout elements.
Set up a full-page layout for a team collaboration UI using HeroUI principles. Use Tailwind and HeroUI components to structure a clean, responsive layout that includes: - A sidebar with navigation (Dashboard, Teams, Projects, Calendar, Settings) -...
Add a comment thread section where users leave feedback or updates on tasks.
Design a `TaskComments` section that renders: - User avatars - Comment text blocks - Timestamps - Reply button Use HeroUI’s `Slot` pattern to allow custom styling per comment. Support keyboard navigation and visually align each comment using...
Use Tailwind and HeroUI variants to display roles like 'Admin', 'Editor', 'Viewer' with distinct badges.
Create a `RoleBadge` component that visually distinguishes user roles. - Use Tailwind Variants for color schemes - Display as rounded pill with text: 'Admin', 'Editor', etc. - Slot should allow injecting icon (optional) - Ensure accessibility:...
Create a modal using HeroUI’s accessibility and slot design to allow project creation.
Use HeroUI’s modal component system to create a `CreateProjectModal`. It should: - Open on “New Project” button click - Include input slots: project name, description, tags - Follow HeroUI accessibility rules: focus trap, keyboard nav, screen...
Add a dynamic card component showing each team with user avatars, customizable using slots.
Create a `TeamCard` component using HeroUI that supports slots for: - Title (team name) - Subtext (e.g. “7 members”) - Avatars (up to 4 visible) - Action menu (e.g. “Leave”, “Settings”) Each card should use Tailwind Variants for theming, include...
Add real-time validation with accessible feedback using HeroUI and Tailwind variants.
Use HeroUI form inputs with validation feedback. Include visual cues (borders, icons) and ARIA-compliant error messages. Follow HeroUI’s accessibility principle with consistent APIs across fields.
Enable reordering of form fields using a drag-and-drop interface compatible with HeroUI.
Build a reorderable list of form fields using HeroUI cards or panels. Use accessible drag-and-drop libraries and ensure keyboard navigation. Animate layout changes using Tailwind + HeroUI styling.
Add a toggle to preview the form live as users build it.
Create a toggleable live preview section using HeroUI switch and panel components. Allow users to see the rendered form in real-time. Ensure low latency and responsive layout.
Dynamically insert new form field types into the builder using HeroUI slot system.
Implement slot-based injection of custom field components in the form builder. Ensure that each field component adheres to HeroUI’s modular and accessible standards. Allow drag-and-drop support and custom labels.
Ensure every input field is labeled properly for screen readers and keyboard users.
Apply proper labeling to all inputs using HeroUI components. Use `aria-labelledby`, visible text, and helper text support. Comply with React Aria specs and support dark/light modes.
Add a button that converts the built form into a downloadable JSON schema.
Use HeroUI’s button and modal components to create an export function. When clicked, serialize the form structure into JSON and provide a download link. Ensure modular structure and include visual confirmation.
Set up the initial structure of the form builder using HeroUI components with simplicity and modular design principles.
Build a responsive dashboard layout using HeroUI components. Include a sidebar with form field types and a main panel for form preview. Use Tailwind for layout styling, HeroUI slots for flexibility, and ensure accessibility using React Aria...
Purge unused Tailwind classes in production to reduce CSS size when styling HeroUI.
Reduce bundle size by removing unused Tailwind styles. Steps: - Enable `content` purge in tailwind.config.js: ```js content: ['./src/**/*.{js,ts,jsx,tsx}'] ``` - Avoid dynamic class names with string interpolation - Use safelist if needed
Improve performance by dynamically importing HeroUI components only when needed.
Use dynamic import to lazy-load HeroUI components. Example (Next.js or React): ```js const Modal = dynamic(() => import('@heroui/react').then(mod => mod.Modal)) ``` Use: - For modals, dropdowns, large components - Add loading fallback for...
Apply route-level code splitting so HeroUI components are only bundled per-page.
Apply route-based code splitting. Use: - Dynamic import inside each page/component - Avoid importing all HeroUI UI in global layout - For example, only import Tabs on `/settings` route Bonus: - Use `loadable-components` or React.lazy for control
Improve input performance by debouncing state updates for HeroUI components.
Debounce frequent updates (e.g., onChange) in HeroUI forms. Steps: - Use lodash.debounce or custom debounce hook - Apply to: - Autocomplete - Search bar - Filter inputs Example: ```js const debounced = useMemo(() => debounce(handleChange,...
Use `React.memo` or `useMemo` for HeroUI components rendering large lists.
Reduce re-renders in HeroUI lists. Steps: - Wrap repeated components in `React.memo` - Memoize computed props (like formatted data) - Example: ```js const OptimizedRow = memo(({ item }) => <ListItem {...item} />) ```
Insert a custom action (like a secondary link) in the footer of a HeroUI Modal using slots.
Use slot to add custom footer action to HeroUI Modal. Structure: - Modal.Footer accepts slot content - Inject a secondary action (e.g., "Learn More" link) - Align to the left with `ml-auto` or flex spacing - Keep primary action right-aligned
Replace default Tooltip trigger with a custom component using slots.
Replace HeroUI Tooltip trigger using a custom slot. How: - Use `<Tooltip trigger={<CustomComponent />} content="..." />` - `trigger` is passed as a slot prop - Maintain focusability and accessibility (tabIndex, aria) on custom component
Replace the HeroUI Card header with a custom layout using slot injection.
Customize HeroUI Card header via slot. Steps: - Create a slot named `header` - Inject a custom layout (e.g., Avatar + Title + Badge) - Style with Tailwind: `flex items-center justify-between` - Example: ```jsx <Card> <div slot="header"...
Inject a 2-column layout into Card content using a slot-based system.
Use slot to add custom 2-column layout into HeroUI Card content. Setup: - Use `grid grid-cols-2 gap-4` inside content slot - Example: ```jsx <Card> <div slot="content" className="grid grid-cols-2 gap-4"> ... </div> </Card> ``` - Apply...
Use HeroUI slot system to add a custom icon inside a Button component.
Customize HeroUI Button with slot-based icon injection. Steps: - Define a `startIcon` slot - Render an SVG icon or HeroUI icon component in slot - Ensure spacing using `gap-2` and `items-center` - Example: `<Button><Icon slot="startIcon" />...
Make HeroUI Alerts readable by screen readers using aria-live regions.
Enhance HeroUI Alert accessibility. Steps: - Wrap alert message in `<div role="alert" aria-live="assertive">` - Avoid focus shift - Use plain text with meaningful message - Avoid animations that block readout
Enable full keyboard interaction for HeroUI Tab components.
Add keyboard support to HeroUI Tabs. Ensure: - Arrow keys change tab focus - Enter/Space activates selected tab - Tab key navigates into tab panel content - Use `role="tablist"`, `tab`, and `tabpanel` props
Ensure full keyboard support for HeroUI Modal with focus trap and escape handling.
Improve HeroUI Modal accessibility. Checklist: - Initial focus lands inside modal - Escape key closes modal - Focus trapped inside modal content - Use HeroUI Dialog + React Aria best practices
Make decorative or meaningful icons accessible with proper aria attributes.
Improve HeroUI icon accessibility. If decorative: - Add `aria-hidden="true"` to icon If meaningful: - Use `aria-label` or `title` - Use semantic `<button>` for clickable icons - Don't rely solely on color or shape
Add ARIA labels to HeroUI Input components for screen reader compatibility.
Improve form accessibility in HeroUI. Do: - Use `<label for="inputId">` or `aria-labelledby` - Inputs should have unique `id` - Prefer native `<label>` tag for best support - Add `aria-required="true"` if field is required
Prompt user for confirmation before deleting an item using HeroUI AlertDialog.
Create a delete confirmation modal using HeroUI AlertDialog. Details: - Trigger from a Delete button - Modal with warning icon and message - Cancel and Confirm buttons - Focus trap and escape to close
Build a collapsible FAQ section using HeroUI Accordion with Tailwind styling.
Create an FAQ section using HeroUI Accordion. Setup: - Question as Accordion.Header - Answer as Accordion.Content - Allow multiple open sections - Tailwind padding and border styles
Add a FAB (Floating Action Button) at bottom-right using HeroUI Button and fixed positioning.
Create a floating action button using HeroUI. Features: - Positioned bottom-right (fixed, z-50) - Round icon button with shadow - Trigger any action (e.g., create, message) - Accessible with aria-label and keyboard
Create a profile dropdown menu triggered by avatar using HeroUI Dropdown and Popover.
Create an avatar dropdown menu using HeroUI. Features: - Avatar as trigger - Dropdown items: Profile, Settings, Logout - Hover and keyboard navigation - Close on outside click - Use HeroUI Dropdown + Popover components
Create a multi-step onboarding modal using HeroUI Dialog with progress indicator.
Build an onboarding flow using HeroUI Modal/Dialog. Requirements: - Multi-step content - Step indicators or progress bar - Next / Back buttons - Final success message - Smooth transitions between steps
Fix body scroll not locking when HeroUI Modal is opened in certain browsers.
Fix scroll lock issue for HeroUI Modal. Steps: - Ensure Modal is wrapped in HeroUIProvider - Confirm `modal` is rendered at root level - Use `overflow-hidden` on <body> when modal is active
Fix border overflow issues when HeroUI Input is placed in a flex container with constrained width.
Fix HeroUI Input rendering overflow in flex layout. Steps: - Wrap input in container with w-full or max-w-sm - Add `overflow-hidden` and `rounded-md` - Prevent long text from breaking layout
Fix misaligned HeroUI Tooltip when used inside flex or absolute containers.
Fix HeroUI Tooltip misalignment. Check: - Parent has relative positioning - Tooltip uses absolute with correct offset - Adjust via `top`, `left`, or use Popper placement props
Fix flickering animations on HeroUI transitions when components mount/unmount rapidly.
Fix HeroUI transition flickering. Steps: - Wrap component in `AnimatePresence` if using Framer Motion - Use `transition: all` and avoid conflicting Tailwind utilities - Double-check exit animations and visibility toggling logic
Resolve React warning: 'validateDOMNesting(...): <button> cannot appear as a descendant of <button>' when using HeroUI buttons.
Fix the nesting issue with HeroUI Button in Autocomplete or dropdown. Solution: - Avoid wrapping HeroUI Button inside another button element - Use a <div> or <span> as container instead - Refactor conditional rendering logic to wrap only internal...
Use Tailwind responsive classes with HeroUI Card to adapt to screen sizes.
Style a responsive HeroUI Card component. Requirements: - Use grid or flex layout - Responsive padding: p-4 md:p-6 - Set max-w-screen-sm for small cards - Ensure text wraps cleanly and has spacing between sections
Extend HeroUI’s Alert component with `tailwind-variants` to define multiple alert styles.
Create styled variants for HeroUI Alert component. Variants: - info (bg-blue-100 text-blue-900) - success (bg-green-100 text-green-900) - warning (bg-yellow-100 text-yellow-900) - error (bg-red-100 text-red-900) Use tailwind-variants to...
Apply HeroUI-supported dark mode styling using Tailwind's `dark:` variants for consistent UI across themes.
Style a HeroUI Card component with dark mode support. Use: - Tailwind `dark:` class support - Light theme: bg-white text-gray-900 - Dark theme: dark:bg-gray-900 dark:text-white - Padding and rounded corners
Define custom button variants using `tailwind-variants` to extend HeroUI’s Button styles.
Create custom button variants using tailwind-variants. Base: - Default HeroUI button with padding and font Add: - primary (bg-blue-500 text-white hover:bg-blue-600) - outline (border border-gray-300 bg-white text-gray-900) - danger (bg-red-500...
Customize HeroUI Input components with brand colors and padding via Tailwind classes.
Style a HeroUI Input component. Use: - Border color: border-indigo-500 - Focus ring: focus:ring-indigo-500 - Padding: py-2 px-3 - Rounded corners: rounded-md - Font: text-sm text-gray-900
Create a responsive pricing table layout with three tiers and CTA buttons.
Build a pricing page using HeroUI. Features: - Three pricing tiers: Basic, Pro, Enterprise - Feature comparison grid - Highlighted 'Most Popular' plan - Call-to-action buttons on each tier - Tailwind classes and HeroUI layout
Scaffold a dashboard layout with sidebar, top nav, and responsive content area.
Generate a HeroUI dashboard layout. Include: - Sticky sidebar with nav items - Top navbar with user profile menu - Main content panel - Responsive layout using Tailwind CSS
Generate a contact form with name, email, message fields and HeroUI styling.
Create a contact form using HeroUI components. Structure: - Name, Email, and Message fields - Submit button - Success/Failure feedback messages - Basic layout using Tailwind
Generate a login page with email and password fields, styled using HeroUI defaults.
Generate a login page using HeroUI. Requirements: - Centered login form - Email and password fields - Submit button - Form validation with error messaging - Use Tailwind for layout
Scaffold a blog page layout with list of posts, author section, and pagination.
Create a HeroUI-powered blog layout. Needs: - List of blog posts with title, excerpt, author - Sidebar with recent posts or categories - Pagination at bottom - Responsive design with Tailwind