arca-ui

Scroll Area

Fine Clay style custom scroll area component with soft scrollbar styling.

垂直滚动

Notifications

New message from Alice

2 min ago

Your order has been shipped

15 min ago

Password changed successfully

1 hour ago

New comment on your post

2 hours ago

Weekly report is ready

3 hours ago

New follower: @bob

5 hours ago

Payment received

Yesterday

System maintenance scheduled

Yesterday

New feature available

2 days ago

Account verified

3 days ago

水平滚动

ReactNext.jsTypeScriptTailwind CSSRadix UIFramer MotionZustandReact QueryPrismatRPCZodReact Hook FormVitestPlaywrightStorybook

带轨道颜色的滚动条

自定义轨道和滑块颜色

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 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

Clay 风格粗滑块

符合 Fine Clay 主题的粗边框滚动条

A
Contact 1
B
Contact 2
C
Contact 3
D
Contact 4
E
Contact 5
F
Contact 6
G
Contact 7
H
Contact 8
I
Contact 9
J
Contact 10
K
Contact 11
L
Contact 12
M
Contact 13
N
Contact 14
O
Contact 15
P
Contact 16
Q
Contact 17
R
Contact 18
S
Contact 19
T
Contact 20

双向滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

长列表

A
Item #1
B
Item #2
C
Item #3
D
Item #4
E
Item #5
F
Item #6
G
Item #7
H
Item #8
I
Item #9
J
Item #10
K
Item #11
L
Item #12
M
Item #13
N
Item #14
O
Item #15
P
Item #16
Q
Item #17
R
Item #18
S
Item #19
T
Item #20
U
Item #21
V
Item #22
W
Item #23
X
Item #24
Y
Item #25
Z
Item #26
A
Item #27
B
Item #28
C
Item #29
D
Item #30
E
Item #31
F
Item #32
G
Item #33
H
Item #34
I
Item #35
J
Item #36
K
Item #37
L
Item #38
M
Item #39
N
Item #40
O
Item #41
P
Item #42
Q
Item #43
R
Item #44
S
Item #45
T
Item #46
U
Item #47
V
Item #48
W
Item #49
X
Item #50

代码块示例

深色背景使用亮色滚动条

import { useState, useEffect } from 'react'

function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T) => void] {
  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.error(error)
      return initialValue
    }
  })

  const setValue = (value: T) => {
    try {
      setStoredValue(value)
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(value))
      }
    } catch (error) {
      console.error(error)
    }
  }

  return [storedValue, setValue]
}

export default useLocalStorage

聊天记录示例

Team Chat

Alice

Hey everyone! How's the project going?

Hi Alice! Making good progress on the UI components.

Bob

Just finished the API integration!

Alice

That's awesome! Can we schedule a demo tomorrow?

Sure, morning works best for me.

Bob

10am works for me too.

Alice

Perfect, I'll send the calendar invite.

Sounds good!

Bob

Looking forward to it!

Alice

By the way, the client loved the last demo!

迷你滚动条

更小巧精致的滚动条样式

Gradient Item 1
Gradient Item 2
Gradient Item 3
Gradient Item 4
Gradient Item 5
Gradient Item 6
Gradient Item 7
Gradient Item 8
Gradient Item 9
Gradient Item 10
Gradient Item 11
Gradient Item 12
Gradient Item 13
Gradient Item 14
Gradient Item 15
Gradient Item 16
Gradient Item 17
Gradient Item 18
Gradient Item 19
Gradient Item 20