The component library
Ready-made pieces of interface — buttons, cards, navigation, forms and more. See each one live, read how it is made, then drop the code into the website you are building.
Buttons
Primary Button with Hover Lift
A solid accent-colored button that lifts and deepens its shadow on hover for a tactile, responsive feel.
Ghost Outline Button
A transparent button with a colored border that fills in with the accent color when hovered.
Round Icon Button
A circular button that holds a single inline SVG icon, ideal for compact actions like add or close.
Gradient Border Button
A button that appears to have a gradient border by nesting a white inner label inside a gradient-filled wrapper.
Cards
Product Card
A shop-style card with an image area, title, description, price and an add to cart button.
Profile Card
A personal card showing an avatar initial, name, role and a short bio with follow and message actions.
Pricing Plan Card
A subscription plan card with a highlighted popular badge, large price and a bulleted feature list.
Stat Summary Card
A compact metric card pairing an icon badge with a large number, a label and a small trend indicator.
Navigation
Top Navigation Bar
A responsive top navbar with a logo, inline links and a call to action button aligned in one row.
Tabbed Navigation
A row of clickable tabs that swap the visible content panel below using a small script and active classes.
Breadcrumb Trail
A horizontal breadcrumb path showing the current page location with slash separators between each step.
Sidebar Navigation List
A vertical sidebar menu with icon and label pairs, a highlighted active item and click to switch active state.
Forms & inputs
Floating Label Input
A text input whose placeholder label floats above the field once it is focused or filled with text.
Search Bar with Clear Button
A pill-shaped search input with a leading icon and a clear button that appears once text has been typed.
Toggle Switch
An accessible on and off switch built from a hidden checkbox and a styled track and knob, with a status label.
Checkbox Group
A styled group of custom checkboxes inside a fieldset, letting a learner pick several topics of interest.
Sign Up Form Block
A compact sign up card with name, email and password fields, a submit button and a basic validation message.
Heroes & banners
Centered Hero Section
A simple centered hero with an eyebrow tag, large heading, supporting text and two call to action buttons.
Split Hero with Visual Panel
A two column hero with heading and buttons on the left and a decorative gradient panel with an icon on the right.
Hero with Stat Row
A hero section that pairs a headline and subtext with a row of three key numbers to build quick credibility.
Call to Action Banner
A full width accent colored banner with a short prompt and a white button, meant to sit near the bottom of a page.
Feedback & overlays
Toast Notification
A button that triggers a temporary slide in notification in the corner, which can be dismissed or auto hides.
Animated Progress Bar
A labeled progress bar whose fill width can be increased step by step with a button to simulate task completion.
Modal Dialog
An open button reveals a centered dialog over a dimmed overlay, closable by button, overlay click or the Escape key.