Components
Scroll Area
A bounded container that replaces native browser scrollbars with custom Cognition-styled ones. Use it when content can exceed the space it has.
Preview
Rendered with live Cognition tokens. Toggle the theme and it remaps, no dark: classes.
Variants
<ScrollArea className="h-44 w-40" /><ScrollArea>
<ScrollBar orientation="horizontal" />
</ScrollArea><ScrollArea className="h-44 w-44" />Add a horizontal ScrollBar for the horizontal and both-axes layouts. The vertical bar is built in.
States
Default. Content fits, so no scrollbar appears.
<ScrollArea type="always" />Overflow. Content exceeds the container; the bar shows on hover or scroll.
The thumb uses border-strong so it stays visible on both themes. Set type="always" to keep the bar shown.
API
Compose with ScrollBar (it takes an orientation) for horizontal or both-axes scrolling.
Don't and Do
Don't wrap content that already fits its container. A Scroll Area earns its place only when content can exceed the space it has. Around content that never overflows it adds a control the reader never needs.
<ScrollArea className="h-72 w-48 rounded-md border">
<div className="p-4">
{tags.map((tag) => (
<div key={tag} className="py-2 text-sm">
{tag}
</div>
))}
</div>
</ScrollArea>Reach for it on long lists, code blocks, and any bounded container with variable-length content.
import { ScrollArea } from "@/components/ui/scroll-area";
export function TagList({ tags }: { tags: string[] }) {
return (
<ScrollArea className="h-72 w-48 rounded-md border border-border-default">
<div className="divide-y divide-border-default p-4">
{tags.map((tag) => (
<div key={tag} className="py-2 text-sm text-text-default">
{tag}
</div>
))}
</div>
</ScrollArea>
);
}