Nuclei is a CSS library, in which you can copy and paste all the components you desire with a single click. Make your website more appealing with the desired functionaliy. It has the following components
- Alert: An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task. There are various types of alerts.
- Default Alert
- Error Alert
- Success Alert
- Warning Alert
- Avatar: Avatar is where a user's profile photo is displayed. They used to be available in square shape however they are now mostly circular. Avatars are used in every website. The main purpose of avatar is to provide identity to the user. The various types of avatars are:
- Round Avatar
- Square Avatar
- Size varying Avatar
- Badge: Badge is used to display number or online activity of any user. It is present on the top-right or bottom-right of an icon or an avatar. Various types of badges are:
- Badges on icon
- Badges on avatar
- Button: Button are integral part of any website. Button are used for taking actions, interacting with the page and making it impressive.
- Primary Button
- Outline Button
- Button with link
- Button with icon
- Floating button
- Card: Cards are often used in websites to display content.
- Default Card with Shadow
- Text only card
- Card with Badge
- Card with Dismiss
- Image: Responsive Image Components are used to display images on websites, which are screen responsive. They expand upto the width of the container they are in and also reduce its width with the change in width of the browser window.
- Round image
- Responsive image
- Input: Inputs are present on every website. They are used to interact with the end user and type their inputs in it. It can be also used to select options by using radio and checkbox.
- Text box
- Input with Validation and Errors
- Radio Input
- Text Input
- List: Lists are present in every website, even if they are sometimes not directly sightable.
- Unordered Lists
- Ordered Lists
- Inline Lists
- Toast: Toasts are often used as popup to show a message at the bottom of the screen.
- Typography: In this section, all the font size and font type as well as font family are mentioned.