A shared folder with AI prompts and code snippets
From workspace: HeroUI Chat
Team: Main
Total snippets: 7
7 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...