Components

Tags

v0.0.1-beta.50
v0.0.1-beta.49
v0.0.1-beta.48
v0.0.1-beta.47
v0.0.1-beta.46
v0.0.1-beta.45
v0.0.1-beta.44
v0.0.1-beta.43
v0.0.1-beta.42
v0.0.1-beta.41
v0.0.1-beta.40
v0.0.1-beta.39
v0.0.1-beta.38
v0.0.1-beta.37
v0.0.1-beta.36
v0.0.1-beta.35
v0.0.1-beta.34
v0.0.1-beta.33
v0.0.1-beta.32
v0.0.1-beta.31
v0.0.1-beta.30
v0.0.1-beta.29
v0.0.1-beta.28
v0.0.1-beta.27
v0.0.1-beta.26
v0.0.1-beta.25
v0.0.1-beta.24
v0.0.1-beta.23
v0.0.1-beta.22
v0.0.1-beta.21
v0.0.1-beta.20
v0.0.1-beta.19
v0.0.1-beta.18
v0.0.1-beta.17
v0.0.1-beta.16
v0.0.1-beta.15
v0.0.1-beta.14
v0.0.1-beta.13
v0.0.1-beta.12
v0.0.1-beta.11
v0.0.1-beta.10
v0.0.1-beta.9
v0.0.1-beta.8
v0.0.1-beta.7
v0.0.1-beta.6
v0.0.1-beta.5
v0.0.1-beta.4
v0.0.1-beta.3
v0.0.1-beta.2
v0.0.1-beta.1

Installation

NPM packages are currently unstable and may cause issues. Use it at your own risk.

npm install @mijn-ui/react-scroll-area

Example Usage

scroll-area-example.tsx
import React from "react"
import { ScrollArea } from "@mijn-ui/react-scroll-area"
import { Separator } from "@mijn-ui/react-separator"
 
const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v0.0.1-beta.${a.length - i}`,
)
 
const ScrollAreaExample = () => {
  return (
    <ScrollArea className="h-72 w-48 rounded-md border bg-surface">
      <div className="p-4">
        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
        {tags.map((tag) => (
          <React.Fragment key={tag}>
            <div key={tag} className="text-sm">
              {tag}
            </div>
            <Separator className="my-2" />
          </React.Fragment>
        ))}
      </div>
    </ScrollArea>
  )
}
 
export default ScrollAreaExample

On this page