We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Allows easy customization by hooking into predefined selectors, reducing selector repetition and enabling effortless global changes.
To prevent overhead selectors, we have “hooks”, which hook into predefined selectors from the source and replace or inject additional properties. Selectors don’t have to be repeated throughout all documents and global changes can be made much more easily.
Each component in Franken UI comes with hooks for easy customization, allowing you to tweak the appearance and behavior to suit your needs. These hooks are defined using a simple object structure, where you can specify custom CSS styles:
{
'hook-alert': {
fontSize: '14px'
},
'hook-close': {},
'hook-close-hover': {},
'hook-close-focus': {},
'hook-default': {},
'hook-primary': {},
'hook-success': {},
'hook-warning': {},
'hook-danger': {},
'hook-misc': {}
}For your convenience, Franken UI provides pre-configured hooks based on the shadcn/ui (New York) design specifications. You can simply use these hooks to achieve a consistent design. However, if you need to add your own customizations, you can do so by passing them to either hooks() or presetQuick() functions:
presetQuick()Using the presetQuick()
will get you up and running quickly. You can pass your own customization like so:
import presetQuick from "franken-ui/shadcn-ui/preset-quick";
/** @type {import('tailwindcss').Config} */
export default {
presets: [
presetQuick({
overrides: {
accordion: {
"hook-accordion": {},
"hook-item": {
background: "purple",
},
"hook-title": {
"@apply text-lime-400": {},
},
"hook-title-hover": {
color: "orange",
},
"hook-title-focus": {},
"hook-title-active": {},
"hook-content": {},
"hook-misc": {},
},
},
}),
],
};In this example, we’re targeting the accordion component and configure our own hooks. We set the background to purple, apply the text-lime-400 color using the @apply directive, and change the color to orange on hover.
presetUsing the ordinary preset gives you total control of what components to be turned on or off. You can apply your own customizations as follows:
import preset from "franken-ui/shadcn-ui/preset";
import variables from "franken-ui/shadcn-ui/variables";
import ui from "franken-ui";
import hooks from "franken-ui/shadcn-ui/hooks";
const shadcn = hooks({
overrides: {
accordion: {
"hook-title": {
background: "pink",
fontSize: "33px",
},
},
},
});
/** @type {import('tailwindcss').Config} */
export default {
presets: [preset],
plugins: [
variables(),
ui({
components: {
accordion: {
hooks: shadcn.accordion,
},
},
}),
],
};In the example above, we are setting the .uk-accordion-title to have a hideous background of pink and an exaggerated font size of 33px.
shadcn/ui is just basically a bunch of pre-configured hooks. You can create your own completely different theme by excluding shadcn/ui and passing custom configurations directly to the ui() function.
import ui from "franken-ui";
/** @type {import('tailwindcss').Config} */
export default {
plugins: [
ui({
components: {
accordion: {
hooks: {
"hook-accordion": {},
"hook-item": {
background: "purple",
},
"hook-title": {
color: "lime",
},
"hook-title-hover": {
color: "orange",
},
"hook-title-focus": {},
"hook-title-active": {},
"hook-content": {},
"hook-misc": {},
},
},
alert: {
hooks: {
"hook-alert": {
background: "red",
color: "cyan",
fontSize: "33px",
},
"hook-close": {},
"hook-close-hover": {},
"hook-close-focus": {},
"hook-default": {},
"hook-primary": {},
"hook-success": {},
"hook-warning": {},
"hook-danger": {},
"hook-misc": {},
},
},
},
}),
],
};In this example, we are creating a completely new theme. We first enable the accordion and alert components, then set their hooks. For the accordion, we configure all items with a purple background, lime-colored titles, which turn orange on hover. For the alert component, we configure it with an angry red background, cyan text color, and a ridiculously large font size.
Should there be no hooks available, you can also create your own selector. To do so, use the hook-misc and write a selector inside. This will sort your new selector to the right place in the compiled CSS file.
import ui from "franken-ui";
/** @type {import('tailwindcss').Config} */
export default {
plugins: [
ui({
components: {
alert: {
hooks: {
"hook-misc": {
".uk-alert-red": {
backgroundColor: "red",
},
},
},
},
},
}),
],
};Note You can also use hook-misc
to override other selectors.
If you wish to override or disable pre-configured styling, you can set a property or delete the entire selector by setting it to null. Or, use the @apply directive from Tailwind CSS.
import preset from "franken-ui/shadcn-ui/preset";
import variables from "franken-ui/shadcn-ui/variables";
import ui from "franken-ui";
import hooks from "franken-ui/shadcn-ui/hooks";
const shadcn = hooks({
overrides: {
card: {
"hook-card": {
borderWidth: null,
"@apply border-none shadow-none": {},
},
},
},
});
/** @type {import('tailwindcss').Config} */
export default {
presets: [preset],
plugins: [
variables(),
ui({
components: {
card: {
hooks: shadcn.card,
},
},
}),
],
};In the example above, we first enable the card component and then apply our customization. We attempt to remove the border-width property by setting it to null. If that doesn’t work, we override it using the @apply directive. It’s important to note that the simple object structure takes precedence over the @apply directive. The @apply directive is always compiled last and should be used for consistency.
You always can. But, using hooks helps prevent your HTML from becoming cluttered with utility classes. They also contribute to making your components more consistent and reduce overhead.
You can find the available hooks and their corresponding affected classes in each component's documentation page.
The preset is an object that offers full control over component selection, allowing you to cherry-pick what you need.
On the other hand, presetQuick() is a function that returns an object accepting theme and overrides options. It includes all UIkit components and provides a 137.83kB (22.56kB minified and gzipped) CSS upfront.
No, all objects will be merged together, combining all duplicate rules. If you follow the optimization guide, your final CSS will be much leaner.
Please restart your development server.
In conclusion, hooks provide a convenient way of overriding styles with less overhead. This approach makes your component more consistent, reduces build size, and helps prevent HTML clutter.