Divider

Create dividers to separate content and apply different styles to them.

Usage

You can use a simple <hr> element to illustrate a separation of different content parts on your pages. The Divider component allows you to add different styles to these dividers.

Divider icon

Add the .uk-divider-icon class to a <hr> or <div> element to create a divider with some decoration, like an icon.

```
<hr class="uk-divider-icon" />
```

Divider small

Add the .uk-divider-small class to a <hr> or <div> element to create a smaller divider.

```
<hr class="uk-divider-small" />
```

Divider vertical

Add the .uk-divider-vertical class to a <hr> or <div> element to create a vertical divider.

```
<hr class="uk-divider-vertical" />
```

Theme development

On your tailwind.config.js file, add the Divider component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        divider: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook Name	Affected Classes
`hook-icon`	`.uk-divider-icon`
`hook-icon-line`	`.uk-divider-icon::before, .uk-divider-icon::after`
`hook-icon-line-left`	`.uk-divider-icon::before`
`hook-icon-line-right`	`.uk-divider-icon::after`
`hook-small`	`.uk-divider-small::after`
`hook-vertical`	`.uk-divider-vertical`
`hook-misc`	`*`