Scroll Area
Explore different variants and configurations of the Scroll Area component.
Scroll Area
Basic Scroll Area
Tags
v1.2.0-beta.0
v1.2.0-beta.1
v1.2.0-beta.2
v1.2.0-beta.3
v1.2.0-beta.4
v1.2.0-beta.5
v1.2.0-beta.6
v1.2.0-beta.7
v1.2.0-beta.8
v1.2.0-beta.9
v1.2.0-beta.10
v1.2.0-beta.11
v1.2.0-beta.12
v1.2.0-beta.13
v1.2.0-beta.14
v1.2.0-beta.15
v1.2.0-beta.16
v1.2.0-beta.17
v1.2.0-beta.18
v1.2.0-beta.19
v1.2.0-beta.20
v1.2.0-beta.21
v1.2.0-beta.22
v1.2.0-beta.23
v1.2.0-beta.24
v1.2.0-beta.25
v1.2.0-beta.26
v1.2.0-beta.27
v1.2.0-beta.28
v1.2.0-beta.29
v1.2.0-beta.30
v1.2.0-beta.31
v1.2.0-beta.32
v1.2.0-beta.33
v1.2.0-beta.34
v1.2.0-beta.35
v1.2.0-beta.36
v1.2.0-beta.37
v1.2.0-beta.38
v1.2.0-beta.39
v1.2.0-beta.40
v1.2.0-beta.41
v1.2.0-beta.42
v1.2.0-beta.43
v1.2.0-beta.44
v1.2.0-beta.45
v1.2.0-beta.46
v1.2.0-beta.47
v1.2.0-beta.48
v1.2.0-beta.49
Notifications List
Notifications
Your call has been confirmed.
1 hour ago
You have a new message!
2 hours ago
Your subscription is expiring soon!
5 hours ago
Payment received successfully.
1 day ago
New feature available.
2 days ago
Weekly report is ready.
3 days ago
Security update applied.
4 days ago
Team member joined.
5 days ago
Horizontal Scroll
John Doe · $299
Jane Smith · $450
Mike Chen · $375
Sarah Lee · $520
Tom Wilson · $280
Anna Brown · $390
Code Block
import { useState, useEffect } from 'react';
interface User {
id: number;
name: string;
email: string;
role: 'admin' | 'user' | 'guest';
}
function useUsers() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
async function fetchUsers() {
try {
const response = await fetch('/api/users');
const data = await response.json();
setUsers(data);
} catch (err) {
setError(err as Error);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);
return { users, loading, error };
}
export default useUsers;Chat Messages
Team Chat
Alice
Hey team! 👋
Hi Alice! How's the project going?
Alice
Going well! Just finished the design review.
Bob
Great work everyone!
Thanks! Let's sync up later today.
Alice
Sounds good. How about 3 PM?
Perfect! 👍
Both Directions
| ID | Name | Status | Role | |
|---|---|---|---|---|
| 1 | User 1 | user1@example.com | Active | Admin |
| 2 | User 2 | user2@example.com | Inactive | User |
| 3 | User 3 | user3@example.com | Active | User |
| 4 | User 4 | user4@example.com | Inactive | Admin |
| 5 | User 5 | user5@example.com | Active | User |
| 6 | User 6 | user6@example.com | Inactive | User |
| 7 | User 7 | user7@example.com | Active | Admin |
| 8 | User 8 | user8@example.com | Inactive | User |
| 9 | User 9 | user9@example.com | Active | User |
| 10 | User 10 | user10@example.com | Inactive | Admin |
| 11 | User 11 | user11@example.com | Active | User |
| 12 | User 12 | user12@example.com | Inactive | User |
| 13 | User 13 | user13@example.com | Active | Admin |
| 14 | User 14 | user14@example.com | Inactive | User |
| 15 | User 15 | user15@example.com | Active | User |