Scroll Area
Custom scrollable containers with hard-edge styling. The scrollbar features sharp rectangular thumbs and solid borders, consistent with the brutalist design language.
Vertical Scroll
Tags
Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31
Tag 30
Tag 29
Tag 28
Tag 27
Tag 26
Tag 25
Tag 24
Tag 23
Tag 22
Tag 21
Tag 20
Tag 19
Tag 18
Tag 17
Tag 16
Tag 15
Tag 14
Tag 13
Tag 12
Tag 11
Tag 10
Tag 9
Tag 8
Tag 7
Tag 6
Tag 5
Tag 4
Tag 3
Tag 2
Tag 1
Scrollbar Variants
Default
Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31
Always Visible
Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31
Minimal
Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31
Primary Color Track
Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31
Accent Color Track
Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31
Custom Gradient Track
Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31
Quick Appearance (scrollHideDelay)
Default delay (600ms)
Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31
Quick hide (100ms)
Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31
Slow hide (2000ms)
Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31
Never hide (Infinity)
Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31
Horizontal Scroll
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12
Card 13
Card 14
Card 15
Card 16
Card 17
Card 18
Card 19
Card 20
Horizontal Variants
Primary Track
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
Accent Track
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
Article List
Introduction to Design Systems
By Sarah Chen
Dec 12, 2024
Building Accessible Components
By Marcus Johnson
Dec 11, 2024
CSS Architecture Patterns
By Emily Rodriguez
Dec 10, 2024
React Performance Optimization
By David Kim
Dec 9, 2024
TypeScript Best Practices
By Anna Kowalski
Dec 8, 2024
Modern State Management
By James Wilson
Dec 7, 2024
Testing Strategies for UI
By Lisa Thompson
Dec 6, 2024
Animation and Motion Design
By Ryan Martinez
Dec 5, 2024
Responsive Layout Techniques
By Michelle Lee
Dec 4, 2024
API Design for Frontend
By Kevin Brown
Dec 3, 2024
Web Security Fundamentals
By Jennifer Davis
Dec 2, 2024
Performance Monitoring Tools
By Chris Anderson
Dec 1, 2024
Code Block
// Hard-Edge Stack Design System
// A brutalist approach to UI components
const theme = {
colors: {
canvas: '#FFFDF5', // Oatmeal background
card: '#FFFFFF', // Pure white cards
ink: '#111111', // Carbon black
accent: '#8B5CF6', // Signal purple
},
shadows: {
// No blur radius - hard edges only
small: '2px 2px 0 0 #111111',
medium: '4px 4px 0 0 #111111',
large: '6px 6px 0 0 #111111',
},
borders: {
width: '2px',
style: 'solid',
color: '#111111',
},
typography: {
heading: 'Space Grotesk',
body: 'DM Sans',
mono: 'JetBrains Mono',
},
// Interactive states
interactions: {
hover: {
shadowOffset: '2px',
translate: '2px',
},
active: {
shadowOffset: '0px',
translate: '4px',
},
},
};
export default theme;Compact Scroll Area
Notifications
New comment on your post
Sarah liked your photo
You have a new follower
Meeting reminder: 3:00 PM
Update available
Payment received
New message from John
Weekly report ready
Both Directions
| ID | Name | Role | Department | Status | |
|---|---|---|---|---|---|
| 1000 | User 1 | user1@example.com | Admin | Engineering | Inactive |
| 1001 | User 2 | user2@example.com | Viewer | Design | Active |
| 1002 | User 3 | user3@example.com | Editor | Marketing | Active |
| 1003 | User 4 | user4@example.com | Admin | Sales | Active |
| 1004 | User 5 | user5@example.com | Editor | Engineering | Inactive |
| 1005 | User 6 | user6@example.com | Viewer | Design | Active |
| 1006 | User 7 | user7@example.com | Admin | Marketing | Active |
| 1007 | User 8 | user8@example.com | Viewer | Sales | Active |
| 1008 | User 9 | user9@example.com | Editor | Engineering | Inactive |
| 1009 | User 10 | user10@example.com | Admin | Design | Active |
| 1010 | User 11 | user11@example.com | Editor | Marketing | Active |
| 1011 | User 12 | user12@example.com | Viewer | Sales | Active |
| 1012 | User 13 | user13@example.com | Admin | Engineering | Inactive |
| 1013 | User 14 | user14@example.com | Viewer | Design | Active |
| 1014 | User 15 | user15@example.com | Editor | Marketing | Active |
Wide Scrollbar
Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31