Components

UI components are essential elements for building interactive interfaces.
They can be classified into various categories based on their functionality: action, containment, communication, navigation, selection, and text input.

Actions Informative Contents Navigation Selection Form Control Icons Third Party Utility

Actions

Dropdowns, Icon buttons, Buttons and button groups are key elements for triggering actions in HTML templates. They enhance user interaction by providing clear, accessible ways to perform tasks like submitting forms or navigating interfaces.

Buttons

Common buttons for actions

Button Groups

Grouped button for toggle choices

Icon Buttons

Icon button & square buttons

Dropdowns

Space saving list with button click

Pagination

Navigating to specific list of pages

Informative

These components, such as tooltips, loaders, progress and alerts, provide users with essential information and feedback. They enhance the user experience by delivering context-specific details and guidance.

Alerts

Notify error, alert, information in a box

Badges

Live states, new item or numbers

Popovers

Toggle introduction of item or Tips

Progress

Show progress status and how much

Toasts

Notify minor action status updates

Tooltips

Identify element or have help text

Spinners Loaders

Show something is in progress

Riskometer

Show risk factor from low to high

Contents

These components, like cards, lists, and tables, organize and present information clearly. They enhance readability and help users quickly find and understand content.

Accordions

More information access in space

Cards

Group data: title, details & actions

Collapse

Toggle what you need to know

List Group

Well manner list of items

Modal Dialog

Quick look and take action

Off Canvas

Data preview, settings, information

Tables

Column wise data grouping

Pricing

Subscription Plan and Pricing

Navigation

These components, like menus, breadcrumbs, and pagination, guide users through the interface. They enhance usability by providing clear paths to different sections and content.

Header

Different styles and content

Navs

Make it easy to navigate

Tabs

Switch between information groups

Breadcrumb

Know where you are and go back

Scrollspy

Smoothly reach to content section

Sidebars

Switch between information groups

Selections

These components, such as radio buttons, checkboxes, and switches, allow users to make selections. They enhance interactivity by providing clear options for user input.

Radio

Choice when one of it required

Checkbox

Choices of multiple selection

Switch

Get quick 0/1, yes/no decision

Sliders

Is to increase-decrease value

Form Controls

These components, including input fields, select, and input validation, facilitate user data entry. They ensure efficient and accurate data collection within forms.

Inputs

Common fields used for forms

Select

Dropdown for item selection

Input Group

Group suffix, prefix with inputs

Floating Labels

Stylish and intuitive inputs

Validations

Show status of data by validating

Icons

Icons visually represent actions, statuses, or categories, enhancing user interface clarity. They improve navigation and provide intuitive visual cues for users.

Bootstrap Icons

v 1.11.x includes 2000+ icons

Feather Icons

v 4.29.1 includes 280+ icons

Third Party Plugins

These components, sourced from external libraries, enhance functionality and design. They integrate seamlessly to provide advanced features and improve development efficiency. We have modified styles to best match with our templates.

Chart Js

Beautiful different charts library

DataTable

Make simple table more useful

DateRange Picker

Select date range or date

Dragula

Drag and drop DOM in columns

Full Calendar

Display event with ease

Dropzone

Upload with just drag and drop

Progressbar js

Circular progress made easy

SmartWizard

Get steps form filled easily

Swiper Carousel

Awesome content and banners

Utility

Utilities provide essential helper functions like spacing, alignment, and sizing control. They enhance the flexibility and customization of components, ensuring a consistent and responsive design.

There are more from Bootstrap framework Checkout official document

Avatar

Different sizes of avatars

Colors

Color schemes available

Height & Widths

Customized heights and widths

Padding and Margins

Make it more spacious & separate