How-to components

Build common UI components with HTML, CSS, JavaScript, React and accessibility notes.

Navbar

Build a practical Navbar component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Dropdown

Build a practical Dropdown component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Sidebar

Build a practical Sidebar component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Modal

Build a practical Modal component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Tabs

Build a practical Tabs component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Accordion

Build a practical Accordion component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Button

Build a practical Button component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Form

Build a practical Form component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Login form

Build a practical Login form component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Signup form

Build a practical Signup form component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Search bar

Build a practical Search bar component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Card

Build a practical Card component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Table

Build a practical Table component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Alert

Build a practical Alert component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Toast

Build a practical Toast component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Tooltip

Build a practical Tooltip component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Slider

Build a practical Slider component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Gallery

Build a practical Gallery component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Image lightbox

Build a practical Image lightbox component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Loader

Build a practical Loader component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Animation

Build a practical Animation component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Responsive layout

Build a practical Responsive layout component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Sticky header

Build a practical Sticky header component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Dark mode toggle

Build a practical Dark mode toggle component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Pricing section

Build a practical Pricing section component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Hero section

Build a practical Hero section component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Footer

Build a practical Footer component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Pagination

Build a practical Pagination component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Breadcrumb

Build a practical Breadcrumb component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Stepper

Build a practical Stepper component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Timeline

Build a practical Timeline component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Progress bar

Build a practical Progress bar component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Range slider

Build a practical Range slider component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Filter list

Build a practical Filter list component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Sort table

Build a practical Sort table component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Copy button

Build a practical Copy button component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Share button

Build a practical Share button component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Tabs with keyboard support

Build a practical Tabs with keyboard support component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Accessible dialog

Build a practical Accessible dialog component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Responsive menu

Build a practical Responsive menu component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Contact form

Build a practical Contact form component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Image carousel

Build a practical Image carousel component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Scrollspy

Build a practical Scrollspy component with accessible markup, responsive CSS, JavaScript behavior and a React version.