Introduction

Chalk UI is an robust, customizable, and accessible library which helps Developers to use best styles and components you can build your own design system and develop your dream applications faster

Installation

In order to introduce Chalk UI to your project, Copy the Link given below and paste it in Your Project html.

Avatar

Avatar is representation of user's profile picture.

Sized Avatar

Size of the avatars can be changed by adding avatar-sm | avatar-md | avatar-lg class to the existing avatar class.

Squared Avatar

Adding a class 'square' to existing class, will generate a square shaped avatar.

Badge

The Badge components contain Badges which are small circles, Badge can be used to display numbers, online / offline status, depending on where they are used.

Profile Badge

Number Badge

Number Badge can be used to display numbers.

5 5

Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Simple Alert

A Primary Alert Example

A Secondary Alert Example

A Error Alert Example

A Success Alert Example

A Warning Alert Example

Button

Buttons are a middleman between the user and the product, and are charged with keeping the conversation between person and machine going.

Primary Button

Link Button

Link button used to attach link to button.

Icon Button

Icon button can be created by using Images.

Floating Button

Floating button are use to toggle theme.

Card

Cards act as a small rectangle associated to a singular thought. They are full of interactive elements such as text, links, buttons or images