Sidebar can be on the viewport, rn it covers the text when poped out

Have a proper undo button in the alert.

Have the code snippets with the same width in the documentation.

Badge and float button needs to be a perfect circle

Badge should be on the top and at the edge of the text/element.

Card: apply proper padding in cards, align the icons with text, remove margin from the badge on the card and give margin to close icon on the card.

Apply proper padding in the toast/snack bar, increase the time toast stays on the screen.

The toast should always be positioned on the viewport.

The text utilities page not working

class Naming at a few places is not explanatory, improve that and check in other files as well. Ex: .bold in alert.css

The JS code for alert could have been reused.

Consistency in units, if you are using px for less than 10px then use that everywhere.

Extract display: flex and justify content and repetitive code to a separate class and use it everywhere.

Use rems/ems for cards, paddings, and margins

Why use vh in margin?

Use color variables everywhere in your code and make sure that the naming of color variables is consistent.

display: none should be used to hide alerts and not opacity.

Apply styles to sliders.

UI Improvements:
Documentation content can be in the center
Buttons for navigation should have a different background color to set them apart from normal background.
The Sidebar should always be present on desktop screens as navigation without it is a hassle.
Change the color of links to improve Readability.
Use primary or some light color for the link button.
Avoid star(*) before username and password in input.
Why is a disabled button added in the radio and checkbox?
Change colors of CTA buttons in modal
Dismissable drawer sidebar should be present by default and hidden on a smaller screen size.
Use bigger icons in the Rating
Not to use hacky value ex: .0001, 1.382555
Remove console.log from the code.
Have primary color more visible to the eye than secondary color.