UI Lab

    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
    Abstract Waves
    John Doe · $299
    Mountain Sunset
    Jane Smith · $450
    City Nights
    Mike Chen · $375
    Ocean Dreams
    Sarah Lee · $520
    Forest Path
    Tom Wilson · $280
    Desert Storm
    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! 👋

    10:30 AM

    Hi Alice! How's the project going?

    10:32 AM

    Alice

    Going well! Just finished the design review.

    10:33 AM

    Bob

    Great work everyone!

    10:35 AM

    Thanks! Let's sync up later today.

    10:36 AM

    Alice

    Sounds good. How about 3 PM?

    10:38 AM

    Perfect! 👍

    10:39 AM
    Both Directions
    IDNameEmailStatusRole
    1User 1user1@example.com
    Active
    Admin
    2User 2user2@example.com
    Inactive
    User
    3User 3user3@example.com
    Active
    User
    4User 4user4@example.com
    Inactive
    Admin
    5User 5user5@example.com
    Active
    User
    6User 6user6@example.com
    Inactive
    User
    7User 7user7@example.com
    Active
    Admin
    8User 8user8@example.com
    Inactive
    User
    9User 9user9@example.com
    Active
    User
    10User 10user10@example.com
    Inactive
    Admin
    11User 11user11@example.com
    Active
    User
    12User 12user12@example.com
    Inactive
    User
    13User 13user13@example.com
    Active
    Admin
    14User 14user14@example.com
    Inactive
    User
    15User 15user15@example.com
    Active
    User