Things

The Scroll Area component provides a custom-styled scrollable container. It uses native CSS scrollbar styling for maximum performance and compatibility while maintaining a unique neobrutalist aesthetic.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/scroll-area.json

Usage

tsx

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

function MyComponent() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border-2 border-foreground p-4">
      <div className="space-y-4">
        <p>Long content here...</p>
      </div>
    </ScrollArea>
  )
}

Examples

Default

Things is a collection of beautifully designed components built from scratch. Each component is carefully crafted to provide a great user experience while maintaining accessibility and customization options.

All components are built using React and Tailwind CSS, with no external dependencies. This ensures fast performance and easy integration into your projects.

The design system follows a neobrutalism aesthetic with bold borders, shadows, and clean typography. Every component is fully accessible and follows web standards.

You can use these components as building blocks for your applications, customizing them to fit your specific needs. The code is clean, well-documented, and easy to understand.

With Custom Height

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20