uix-uiDivider
Section separator. 4 types.
or
import { Divider } from "@/components/ui/divider";
import { Star } from "@/components/ui/icons";
export default function Example() {
return (
<div style={{ width: 320, display: "grid", gap: 20 }}>
<Divider />
<Divider type="dashed" />
<Divider type="with-label" label="or" />
<Divider type="with-icon" icon={<Star />} />
</div>
);
}
Installation
$ npx uix-ui@latest add dividerThis copies the file into components/ui/divider.tsx in your project. npx shadcn@latest add @uix/divider works too.
Usage
import { Divider } from "@/components/ui/divider";
<div style={{ width: 320, display: "grid", gap: 20 }}>
<Divider />
<Divider type="dashed" />
<Divider type="with-label" label="or" />
<Divider type="with-icon" icon={<Star />} />
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "solid" | "dashed" | "with-label" | "with-icon" | "solid" | |
label | React.ReactNode | – | Text in the middle of the "with-label" divider. |
icon | React.ReactNode | – | Icon in the middle of the "with-icon" divider. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts