Wire

UI

WireUI components make effective use of a range of CSS utilities that are designed to cater to the needs of developers at all levels of expertise. These utilities offer a versatile toolkit for handling styling, layout, and responsiveness, making it easier for developers to create visually appealing and responsive user interfaces.

Information!
To conceal the scrollbar, simply apply the .hide-scrollbar CSS class.

To scroll through the content, press and hold the shift key while using the mouse wheel.
1<div class="w-full p-2 overflow-x-auto h-52">
2 <div class="relative flex items-center border rounded-lg shadow-lg h-44 bg-negative-500"
3 style="width: 900px">
4 <div class="absolute w-full h-8 border-white border-dashed border-y-8"></div>
5 </div>
6</div>
7 
8<div class="w-full p-2 overflow-x-auto h-52 hide-scrollbar">
9 <div class="relative flex items-center border rounded-lg shadow-lg h-44 bg-positive-500"
10 style="width: 900px">
11 <div class="absolute w-full h-8 border-white border-dotted border-y-8"></div>
12 </div>
13</div>
Information!
You can customize the scrollbar appearance by applying the .soft-scrollbar CSS class.
1<div class="w-full p-2 overflow-x-auto h-52">
2 <div class="relative flex items-center border rounded-lg shadow-lg h-44 bg-negative-500"
3 style="width: 900px">
4 <div class="absolute w-full h-8 border-white border-dashed border-y-8"></div>
5 </div>
6</div>
7 
8<div class="w-full p-2 overflow-x-auto h-52 soft-scrollbar">
9 <div class="relative flex items-center border rounded-lg shadow-lg h-44 bg-positive-500"
10 style="width: 900px">
11 <div class="absolute w-full h-8 border-white border-dotted border-y-8"></div>
12 </div>
13</div>