A shared tag with AI prompts and code snippets
From workspace: HeroUI Chat
Team: Main
Total snippets: 29
29 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>;
The following table provides an overview of the various attributes you can use when working with themes in HeroUI:
.
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( ...
After adding the plugin to your tailwind.config.js file, you can utilize any of the default themes (light/dark) or a custom one. Here's how you can apply these themes in your main.jsx or main.tsx:
Go to the src directory and inside main.jsx or main.tsx, apply the following class names to the root element: light for the light theme. dark for the dark theme. text-foreground to set the text color. bg-background to set the background color.
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 ...
Use “slots” to inject custom content or wrappers for maximum flexibility.
Use React’s children or slot-like props to support content injection.
Components are easy to understand and use, regardless of skill level.
Prioritize intuitive defaults and reduce boilerplate across all components.
Standalone components—import only what you need to optimize bundle size.
Ensure each component works independently; minimize unnecessary dependencies.
Full theming and style overrides via Tailwind + Tailwind‑Variants.
Enable Tailwind classes and tailwind-variants for easy style overrides.
Built with React‑Aria: WAI‑ARIA compliance, keyboard navigation, sensible focus, screen‑reader support.
Ensure keyboard operability and ARIA tags are included by default.
Uniform props and behavior across components minimize learning curve.
Use shared naming conventions and prop structures across components.
Ensure that the component is minimal, easy to understand, and does not include unnecessary configuration.
Use minimal props and layout; simple usage; no extra custom styling.
Ensure components are accessible by default for users relying on screen readers or keyboard navigation.
Ensure keyboard support and ARIA attributes for Form and Modal.
Utilize HeroUI’s slot system to customize content inside components without rewriting the core layout.
Use slots to inject custom header in Card component.
Customize components using HeroUI's styling system and Tailwind-based theming capabilities.
Use Tailwind-variants; override theme colors for Button only.
Keep component imports clean and optimized by including only what is necessary.
Import only required HeroUI components; remove unused ones.