DocsComponentsScroll area
Scroll area
A scrollable region with a thin, themed scrollbar.
1 file
<pb-ui.scroll-area class="h-72 w-48 rounded-md border">
<div class="p-4">
<h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
@for(tag in tags)
<div class="text-sm">{{ tag }}</div>
<pb-ui.separator class="my-2" />
@endfor
</div>
</pb-ui.scroll-area>Installation
pyblade-ui add scroll-area- Copy this file into your projectcomponents/ui/scroll_area.html
<div data-slot="scroll-area" tabindex="0" {{ attributes.cn("relative overflow-auto rounded-[inherit] outline-none [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin] focus-visible:ring-[3px] focus-visible:ring-ring/50") }}>{{ slot }}</div> - Update the path to fit your project
The
componentsfolder is the one set inpyblade.toml.
Usage
The tag <pb-ui.scroll-area> is available in all your templates.
<pb-ui.scroll-area class="h-72 w-48 rounded-md border">...</pb-ui.scroll-area>Examples
Horizontal
<pb-ui.scroll-area class="w-full max-w-md rounded-md border whitespace-nowrap">
<div class="flex w-max gap-4 p-4">
@for(tag in tags)
<div class="grid h-32 w-36 shrink-0 place-items-center rounded-md bg-muted text-sm">{{ tag }}</div>
@endfor
</div>
</pb-ui.scroll-area>