Scroll Area

Custom scrollable containers with smooth navigation for the Soft Sculpt theme.

Vertical Scroll

Standard vertical scrolling within a constrained height container.

New comment

Someone commented on your post

2 min ago

Project update

Version 2.0 has been released

5 min ago

Meeting reminder

Team standup in 15 minutes

10 min ago

Security alert

New login from unknown device

1 hour ago

Task completed

Your deployment has finished

2 hours ago

New follower

Alex started following you

3 hours ago

Weekly report

Your analytics report is ready

5 hours ago

Invitation

You were invited to workspace

1 day ago

Horizontal Scroll

Horizontal scrolling for tag lists or image galleries.

React
TypeScript
JavaScript
Node.js
Next.js
Tailwind CSS
shadcn/ui
Radix UI
Framer Motion
Zustand
React Query
Prisma
PostgreSQL
MongoDB
Redis

Code Block

Scrollable code snippets within a recessed container.

import { useState, useEffect } from 'react'

function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === 'undefined') {
      return initialValue
    }
    try {
      const item = window.localStorage.getItem(key)
      return item ? JSON.parse(item) : initialValue
    } catch (error) {
      console.log(error)
      return initialValue
    }
  })

  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value
      setStoredValue(valueToStore)
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(valueToStore))
      }
    } catch (error) {
      console.log(error)
    }
  }

  return [storedValue, setValue] as const
}

export default useLocalStorage

Bidirectional Scroll

Container that scrolls both horizontally and vertically.

IDNameEmailRoleStatusCreated
1000User 1user1@example.comAdminActive2024-01-10
1001User 2user2@example.comEditorInactive2024-02-11
1002User 3user3@example.comViewerInactive2024-03-12
1003User 4user4@example.comAdminInactive2024-04-13
1004User 5user5@example.comEditorActive2024-05-14
1005User 6user6@example.comViewerInactive2024-06-15
1006User 7user7@example.comAdminInactive2024-07-16
1007User 8user8@example.comEditorInactive2024-08-17
1008User 9user9@example.comViewerActive2024-09-18
1009User 10user10@example.comAdminInactive2024-01-19
1010User 11user11@example.comEditorInactive2024-02-20
1011User 12user12@example.comViewerInactive2024-03-21
1012User 13user13@example.comAdminActive2024-04-22
1013User 14user14@example.comEditorInactive2024-05-23
1014User 15user15@example.comViewerInactive2024-06-24

Chat Messages

Message thread with scrollable history.

Hey! How is the project going?

10:30 AM

Going great! Just finished the scroll area component.

10:32 AM

That sounds awesome. Can you show me a preview?

10:33 AM

Sure! Let me push the changes and send you the link.

10:35 AM

Perfect, take your time!

10:36 AM

Here is the preview link: preview.example.com/scroll-area

10:40 AM

This looks fantastic! The matte finish is a nice touch.

10:42 AM

Minimal Container

Simple scroll area without the recessed container styling.

1

List Item 1

Description for item 1

2

List Item 2

Description for item 2

3

List Item 3

Description for item 3

4

List Item 4

Description for item 4

5

List Item 5

Description for item 5

6

List Item 6

Description for item 6

7

List Item 7

Description for item 7

8

List Item 8

Description for item 8

9

List Item 9

Description for item 9

10

List Item 10

Description for item 10

11

List Item 11

Description for item 11

12

List Item 12

Description for item 12