Scroll Area

 1import { ScrollArea } from "@/components/wensity/scroll-area";
 2
 3const items = ["Profile", "Security & Privacy", "Notifications", "Billing & Plans", "API Tokens", "Team Members", "Audit Log", "Sessions"];
 4
 5export function ScrollAreaVertical() {
 6  return (
 7    <div className="w-[320px] rounded-2xl border bg-card p-4 shadow-sm">
 8      <ScrollArea orientation="vertical" className="h-56">
 9        <div className="flex flex-col gap-0.5 pr-3">
10          {items.map((item) => (
11            <div key={item} className="flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] hover:bg-muted transition-colors">
12              <div className="size-2 rounded-full bg-muted-foreground/30 shrink-0" />
13              <span>{item}</span>
14            </div>
15          ))}
16        </div>
17      </ScrollArea>
18    </div>
19  );
20}

 1import { ScrollArea } from "@/components/wensity/scroll-area";
 2
 3const tags = ["React", "TypeScript", "Tailwind CSS", "Next.js", "Framer Motion", "PostgreSQL", "Redis", "Docker"];
 4
 5export function ScrollAreaHorizontal() {
 6  return (
 7    <div className="w-[440px] rounded-2xl border bg-card p-4 shadow-sm">
 8      <ScrollArea orientation="horizontal">
 9        <div className="flex gap-2 py-1 w-max">
10          {tags.map((tag) => (
11            <span key={tag} className="shrink-0 rounded-md bg-muted px-3 py-1.5 text-[12px] whitespace-nowrap">
12              {tag}
13            </span>
14          ))}
15        </div>
16      </ScrollArea>
17    </div>
18  );
19}

 1import { ScrollArea } from "@/components/wensity/scroll-area";
 2
 3const cards = ["Analytics", "Dashboard", "Settings", "Messages", "Calendar", "Tasks", "Files", "Teams"];
 4
 5export function ScrollAreaBoth() {
 6  return (
 7    <div className="w-[400px] rounded-2xl border bg-card p-4 shadow-sm">
 8      <ScrollArea orientation="both" className="h-48">
 9        <div className="grid grid-cols-3 gap-2 p-0.5 min-w-[480px]">
10          {cards.map((item) => (
11            <div key={item} className="flex flex-col items-center justify-center gap-1.5 rounded-lg bg-muted/50 p-3">
12              <div className="size-7 rounded-md bg-muted-foreground/15" />
13              <span className="text-[11px] text-muted-foreground">{item}</span>
14            </div>
15          ))}
16        </div>
17      </ScrollArea>
18    </div>
19  );
20}

 1import { ScrollArea } from "@/components/wensity/scroll-area";
 2
 3const items = ["Profile", "Security & Privacy", "Notifications", "Billing & Plans", "API Tokens", "Team Members", "Audit Log", "Sessions"];
 4
 5export function ScrollAreaAutoHide() {
 6  return (
 7    <div className="w-[320px] rounded-2xl border bg-card p-4 shadow-sm">
 8      <ScrollArea orientation="vertical" hideScrollbar="auto" className="h-56">
 9        <div className="flex flex-col gap-0.5 pr-3">
10          {items.map((item) => (
11            <div key={item} className="flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] hover:bg-muted transition-colors">
12              <div className="size-2 rounded-full bg-muted-foreground/30 shrink-0" />
13              <span>{item}</span>
14            </div>
15          ))}
16        </div>
17      </ScrollArea>
18    </div>
19  );
20}

 1import { ScrollArea } from "@/components/wensity/scroll-area";
 2
 3const items = ["Profile", "Security & Privacy", "Notifications", "Billing & Plans", "API Tokens", "Team Members", "Audit Log", "Sessions"];
 4
 5export function ScrollAreaAlwaysVisible() {
 6  return (
 7    <div className="w-[320px] rounded-2xl border bg-card p-4 shadow-sm">
 8      <ScrollArea orientation="vertical" hideScrollbar="never" className="h-56">
 9        <div className="flex flex-col gap-0.5 pr-3">
10          {items.map((item) => (
11            <div key={item} className="flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] hover:bg-muted transition-colors">
12              <div className="size-2 rounded-full bg-muted-foreground/30 shrink-0" />
13              <span>{item}</span>
14            </div>
15          ))}
16        </div>
17      </ScrollArea>
18    </div>
19  );
20}

 1import { ScrollArea } from "@/components/wensity/scroll-area";
 2
 3const images = [
 4  { src: "https://assets.wensity.com/templates/docs-site/marketplace/hero.webp", label: "Hero" },
 5  { src: "https://assets.wensity.com/templates/docs-site/marketplace/architecture.webp", label: "Architecture" },
 6  { src: "https://assets.wensity.com/templates/docs-site/marketplace/content.webp", label: "Content" },
 7];
 8
 9export function ImageGallery() {
10  return (
11    <div className="w-[540px] rounded-2xl border bg-card p-5 shadow-sm">
12      <ScrollArea orientation="horizontal">
13        <div className="flex gap-4 pb-1 w-max">
14          {images.map((img) => (
15            <figure key={img.label} className="shrink-0 w-[200px]">
16              <img
17                src={img.src}
18                alt={img.label}
19                className="w-full aspect-[16/10] rounded-xl object-cover"
20              />
21              <figcaption className="mt-2 text-center text-[12px] font-medium text-muted-foreground">
22                {img.label}
23              </figcaption>
24            </figure>
25          ))}
26        </div>
27      </ScrollArea>
28    </div>
29  );
30}