Free application ui components created using React.js and Tailwind.css.

Free data display components created using React.js and Tailwind.css.

Data Display

A table in card layout with search, sorting and pagination. The component is created using different popular libraries to handle individual elements which can be replaced with the ones of your choice. Names of these libraries can be found under the requirements section below.

React table in card layout with search, sorting and pagination

Free table components created using React.js and Tailwind.css.

Tables

Free form components created using React.js and Tailwind.css.

Forms

Material design inspired input group with floating labels that transition up on focus.

Input group with floating labels

Input group with partitioned text/icon on the left and the actual field on the right. Uses the react-icons library for the icon which can be conveniently replaced with an icon of your own choice.

Input group with text/icon decoration on the left

Input group with partitioned text/icon on the right and the actual field on the left. Uses the react-icons library for the icon which can be conveniently replaced with an icon of your own choice.

Input group with text/icon decoration on the right

Input group with embedded icon decoration on the left and the actual field on the right. Uses the react-icons library for the icon which can be conveniently replaced with an icon of your own choice.

Input group with embedded icon decoration on the left

Input group with embedded icon decoration on the right and the actual field on the left. Uses the react-icons library for the icon which can be conveniently replaced with an icon of your own choice.

Input group with embedded icon decoration on the right

Vertical bordered input group with embedded label on top left.

Input group with embedded labels

Card style input group with embedded icon decoration on the left and the actual field on the right. Uses the react-icons library for the icon which can be conveniently replaced with an icon of your own choice.

Card style input group with embedded icon decoration on the left

Card style input group with embedded icon decoration on the right and the actual field on the left. Uses the react-icons library for the icon which can be conveniently replaced with an icon of your own choice.

Card style input group with embedded icon decoration on the right

Free input group components created using React.js and Tailwind.css.

Input Groups

Elegant card style select field with check mark on selected item and hover effects. Uses the react-icons library for the icon which can be conveniently replaced with icon of your own choice.

Card style select field

Free select menu components created using React.js and Tailwind.css.

Select Menus

A simple radio button input element with subtle transition on select/unselect events. Uses the react-icons library for the icon which can be conveniently replaced with an icon of your own choice.

Simple radio group with subtle transition

Free radio group components created using React.js and Tailwind.css.

Radio Groups

A simple checkbox input element with subtle transition on select/unselect events. Uses the react-icons library for the icon which can be conveniently replaced with an icon of your own choice.

Simple checkbox with subtle transition

Free checkbox components created using React.js and Tailwind.css.

Checkboxes

Elegant date and time picker that utilizes the popular react-datepicker library, styled using tailwind css.

Bordered date and time picker

Free date picker components created using React.js and Tailwind.css.

Date Pickers

Free navigation components created using React.js and Tailwind.css.

Navigation

Elegant card style navigation for pagination purposes. Contains working logic for selection and switching between pages. Uses the react-icons library for the icons which can be conveniently replaced with icons of your own choice.

Card style page navigation

Free pagination components created using React.js and Tailwind.css.

Pagination

Free element components created using React.js and Tailwind.css.

Elements

Trendy icon button with background transition. Uses the react-icons library for the icon which can be conveniently replaced with an icon of your own choice.

Button with icon and background transition on hover

Trendy small card style icon button with background transition. Uses the react-icons library for the icon which can be conveniently replaced with an icon of your own choice.

Small card style icon Button with background transition on hover

Free button components created using React.js and Tailwind.css.

Buttons

Colorful minimal card with an icon, heading and description. Uses the react-icons library for the icon which can be conveniently replaced with an icon of your own choice.

Card with icon, heading and description

Elegant contact card with sections representing different contact fields. Uses the react-icons library for the icons which can be conveniently replaced with icons of your own choice.

Contact card with icons

Minimal card with a thumnail image heading and description. The thumbnail has an elegant hover zoom effect.