Logo

dev-resources.site

for different kinds of informations.

How to Use Scroll Area in Next.js with Shadcn UI

Published at
7/3/2024
Categories
nextjs
shadcnui
webdev
Author
aaronnfs
Categories
3 categories in total
nextjs
open
shadcnui
open
webdev
open
Author
8 person written this
aaronnfs
open
How to Use Scroll Area in Next.js with Shadcn UI

In this tutorial, we will see how to implement a scroll area in Next.js 13 using the Shadcn UI.

Before using the scroll area in Next.js with Shadcn UI, you need to install it with npx shadcn-ui@latest and add the scroll-area component.

npx shadcn-ui@latest add scroll-area
# or
npx shadcn-ui@latest add
Enter fullscreen mode Exit fullscreen mode

NextJS with Shadcn UI Scroll Area Example

  1. Create a scroll area in Next.js 13 using the Shadcn UI ScrollArea component. ```jsx import { ScrollArea } from "@/components/ui/scroll-area"

export default function ScrollAreaDemo() {
return (



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.


)
}
![scroll area](https://frontendshape.com/wp-content/uploads/2024/06/xRUTLvitMpWFTqulPjzfupfN9AQ628qkRfOKKz24.png)
2.Implementing tagged lists with scroll areas in Next.js using Shadcn UI.
```jsx
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>
  )
}
Enter fullscreen mode Exit fullscreen mode

 tags lists scroll area

  1. Next.js with Shadcn UI Horizontal Image Scrolling. ```jsx import * as React from "react" import Image from "next/image"

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

export interface Artwork {
artist: string
art: string
}

export const works: Artwork[] = [
{
artist: "Ornella Binni",
art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
},
{
artist: "Tom Byrom",
art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
},
{
artist: "Vladimir Malyavko",
art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
},
]

export function ScrollAreaHorizontalDemo() {
return (


{works.map((artwork) => (


src={artwork.art}
alt={`Photo by ${artwork.artist}`}
className="aspect-[3/4] h-fit w-fit object-cover"
width={300}
height={400}
/>



Photo by{" "}

{artwork.artist}



))}



)
}

![ Horizontal Image Scrolling](https://frontendshape.com/wp-content/uploads/2024/06/Scroll-area-shadcn-ui-1-1.png)
Enter fullscreen mode Exit fullscreen mode
shadcnui Article's
30 articles in total
Favicon
Color Highlighting for Tailwind CSS Variables in VS Code
Favicon
Shadcn UI Theme generator, with OKLCH colors and ancient sacred geometry.
Favicon
Next.js Starter Kit: Build Fast & Secure Apps with Auth, Payments & More!
Favicon
Comparing the copyToClipboard implementations in Shadcn-ui/ui and Codehike.
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 3.1
Favicon
Comparison of file and component structures among Shadcn-ui, Plane.so and Gitroom.
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 3.0
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.15
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.14
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.13
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.12
Favicon
Create File Upload UI in Next.js with Shadcn UI
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.11
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.10
Favicon
How to Use Icons in Shadcn UI with Next.js
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.9
Favicon
Next.js with Shadcn UI Progress Bar Example
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.7
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.5
Favicon
How to Use Scroll Area in Next.js with Shadcn UI
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.4
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.3
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.2
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.0
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.1
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 1.1
Favicon
shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 1.0
Favicon
shadcn-ui/ui codebase analysis: How is “Blocks” page built — Part 5
Favicon
Next.js Image File Upload and Preview with shadcn/ui
Favicon
shadcn-ui/ui codebase analysis: How is “Blocks” page built — Part 3

Featured ones: