Scroll Area

Custom scrollable containers with styled scrollbars. Designed to fit seamlessly within the Tinted Trays system.

Vertical Scroll

Standard vertical scrollable area with custom scrollbar styling.

Item List

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

Horizontal Scroll

Horizontally scrollable content for galleries or carousels.

Mountain Vista

Elena Rivers · 2023

Urban Rhythms

Marcus Chen · 2022

Silent Dawn

Sofia Andersen · 2024

Digital Dreams

Alex Kumar · 2023

Ocean Whispers

Isabella Torres · 2021

Neon Nights

James Wright · 2024

Autumn Solitude

Emily Park · 2022

Abstract Flow

David Stone · 2023

Notification Panel

Scrollable notification list demonstrating the capsule-within-tray pattern.

Notifications

You have 8 notifications

New message received
2 min ago

You have a new message from the support team.

Payment processed
15 min ago

Your payment of $49.99 has been processed successfully.

Document uploaded
1 hour ago

The quarterly report has been uploaded to your workspace.

Meeting reminder
2 hours ago

Team standup meeting starts in 30 minutes.

Task completed
3 hours ago

Project milestone has been marked as complete.

New comment
5 hours ago

Sarah added a comment to your design review.

System update
1 day ago

Platform maintenance scheduled for tonight.

Invitation accepted
2 days ago

John has joined your workspace.

Compact View

Small fixed-height scroll areas for constrained spaces.

Recent Files

Document_1.pdf
Document_2.pdf
Document_3.pdf
Document_4.pdf
Document_5.pdf
Document_6.pdf
Document_7.pdf
Document_8.pdf
Document_9.pdf
Document_10.pdf
Document_11.pdf
Document_12.pdf
Document_13.pdf
Document_14.pdf
Document_15.pdf

Team Members

A
Alice
B
Bob
C
Charlie
D
Diana
E
Edward
F
Fiona
G
George
H
Hannah
I
Ivan
J
Julia

Code Display

Scrollable code or log output with both vertical and horizontal scrolling.

function TintedTrays() {
  // Design system configuration
  const config = {
    canvas: '#FFFFFF',
    tray: '#F0F4F8',
    capsule: '#FFFFFF',
    primary: '#2563EB',
    text: '#334155',
  };

  const trayStyle = {
    background: config.tray,
    borderRadius: '32px',
    boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.02)',
  };

  const capsuleStyle = {
    background: config.capsule,
    borderRadius: '12px',
    border: '1px solid #E2E8F0',
    boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
  };

  return (
    <div style={{ background: config.canvas }}>
      <div style={trayStyle}>
        <div style={capsuleStyle}>
          {/* Content */}
        </div>
      </div>
    </div>
  );
}

With Track Background

Scroll area with visible scrollbar track for enhanced visibility.

Task List

Task #1: Complete documentation review
Task #2: Complete documentation review
Task #3: Complete documentation review
Task #4: Complete documentation review
Task #5: Complete documentation review
Task #6: Complete documentation review
Task #7: Complete documentation review
Task #8: Complete documentation review
Task #9: Complete documentation review
Task #10: Complete documentation review
Task #11: Complete documentation review
Task #12: Complete documentation review
Task #13: Complete documentation review
Task #14: Complete documentation review
Task #15: Complete documentation review
Task #16: Complete documentation review
Task #17: Complete documentation review
Task #18: Complete documentation review
Task #19: Complete documentation review
Task #20: Complete documentation review

Inverted Mode

Scroll area on tray background with white surface content - demonstrating Mode B pattern.

Message History

Alice
Hey, how's the project going?
You
Making good progress! Just finished the components.
Alice
That's great! When do you think we can deploy?
You
Probably by end of week if testing goes well.
Alice
Perfect, let me know if you need any help.
Bob
I can help with the testing phase.
You
Thanks Bob, that would be helpful!
Alice
Let's schedule a quick sync call tomorrow.
You
Sounds good, morning works for me.
Bob
I'm available after 10am.