Styled-components Packages

Tidy-ui react utils library; 'commons' package

The versatile Container is your layout commander, adapting effortlessly to screen shifts and breakpoints. It comes in two modes: fluid, flexing its width with the screen for a dynamic arrangement of enclosed components; and fixed, aligning components sole

The Divider component elegantly separates components with horizontal or vertical dividers. It offers diverse densities, shades, and tones to match your design, along with various variants like solid and dashed. Customize lengths and alignments, and explor

The `Drawer` adds extra stuff, like navigation, to your app. You can put it on the left or right. Open/close it with clicks. When open, it covers the screen and focuses on its content. A top button closes it. Easy-peasy!

Tidy UI layout group components includes Border, Container, Divider, Flexbox, Grid, Stack

tidy-ui react component library; 'loader package

Message component can be used to display important information on a page based on the information importance level, powered by various styles (with theming) and settings

tidy-ui react component library; 'modal package

Tidy UI navigation group components includes Breadcrumb, Drawer, Modal

Notification component can be used to represent notifications on a page based on the importance level, powered by various styles (with theming) and settings. Use this component with Toaster to throw auto-closable notifications on a page

Panel can be used to fold data, show only necessary data and can expand whenever needed by the user. Panel brings accordion effect

A Button is like a magic wand for websites. When you click it, cool things happen! It can send forms, pop up chats, undo stuff, or even whisk you away to new places on the web. So, it's your go-to for making things tick and getting stuff done with a simpl

Tidy UI feedback group components includes Notification, Toaster

The FlexBox component empowers the design of layout elements using CSS flex properties. Incorporating FlexItems as child elements enables responsive layouts spanning 1 to 24 units of width. It streamlines styling by reducing the need for distinct flexbox

Tidy UI form group components includes Checkbox, Input, InputGroup, Radio

The Frame component is a dynamic placeholder that adds a stylish touch while your content loads. It features various styles like circular for profile pics, linear for paragraphs, and defaults to rectangular. Easily adjust sizes and transition from loading

The Grid component offers a mobile-first responsive layout with 24 horizontal sections. Distinct from CSS grid, it serves as a viable replacement. It supports fixed and fluid layouts, accommodating various screen sizes, and allows gap customization for sp

Tidy UI react icon library; 'icons' package

tidy-ui react component library; 'input package

The Badge component enhances components like an adjective, adding info. It adds content/dot to top-right, with tones, fill/outline options. Limit numeric content, add '+'. Blink for dynamic effects. Themed and styled.