how to use separator line next 13 with shadcn ui

In this tutorial, we will see how to use separator line in next js 13 with shadcn ui. First you need to setup next js 13 with shadcn ui project.

how to use shadcn ui in next js 13

Before use divider separator line in next js 13 with shadcn ui you need to install npx shadcn-ui@latest add separator.

npx shadcn-ui@latest add separator

npx shadcn-ui@latest add

1. Create next js 13 with shadcn ui divider separator line using shadcn-ui Separator component.

import { Separator } from "@/components/ui/separator"

export default function SeparatorDemo() {
  return (
    <div>
      <p>separator line next 13 with shadcn ui 1</p>
      <Separator />
      <p> separator line next 13 with shadcn ui 2</p>
    </div>
  )
}

shadcn ui divider separator line

2. next js 13 with shadcn ui divider separator line with vertical and horizontal.

import { Separator } from "@/components/ui/separator"

export default function SeparatorDemo() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
        <p className="text-sm text-muted-foreground">
          An open-source UI component library.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}