next 13 with shadcn ui scroll area example

In this tutorial, we will see how to use scroll area 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 scroll area in next js 13 with shadcn ui you need to install npx shadcn-ui@latest add scroll-area.

npx shadcn-ui@latest add scroll-area

npx shadcn-ui@latest add

Next 13 with Shadcn UI Scroll Area Example

1. Create next js 13 with shadcn ui scroll area using shadcn-ui ScrollArea component.

import { ScrollArea } from "@/components/ui/scroll-area"

export default function  ScrollAreaDemo() {
  return (
    <div>
      <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
        Jokester began sneaking into the castle in the middle of the night and
        leaving jokes all over the place: under the king's pillow, in his soup,
        even in the royal toilet. The king was furious, but he couldn't seem to
        stop Jokester. And then, one day, the people of the kingdom discovered
        that the jokes left by Jokester were so funny that they couldn't help
        but laugh. And once they started laughing, they couldn't stop.
      </ScrollArea>
    </div>
  )
}

shadcn ui scroll area

2. next js 13 with shadcn ui tags lists with scroll area.

import * as React from "react"

import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`
)

export default function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-72 w-48 rounded-md border">
      <div className="p-4">
        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
        {tags.map((tag) => (
          <React.Fragment>
            <div className="text-sm" key={tag}>
              {tag}
            </div>
            <Separator className="my-2" />
          </React.Fragment>
        ))}
      </div>
    </ScrollArea>
  )
}