React

blocks
HomeComponentsDocsFAQAboutContact

Avatars

8

Basic Avatar

A circular avatar image with clean rounded corners. Simple and versatile for user profiles.

avatarprofileimage

Square Avatar

A rounded square avatar with softer corners. Modern alternative to circular avatars.

avatarsquareprofile

Avatar Group

Multiple overlapping avatars displayed in a row. Perfect for showing team members or participants.

avatargroupteam
+99

Avatar Group With Count

Overlapping avatars with a counter badge showing additional members. Ideal for large groups.

avatargroupteamcount

Active Avatar

Avatar with a green status indicator showing the user is online or active.

avatarstatusonline

Pending Avatar

Avatar with an orange status indicator showing the user is away or pending.

avatarstatusawaypending

Busy Avatar

Avatar with a red status indicator showing the user is busy or do not disturb.

avatarstatusbusy

Inactive Avatar

Avatar with a gray status indicator showing the user is offline or inactive.

avatarstatusofflineinactive

Accordions

4

A curated collection of beautiful, copy-paste React components built with Tailwind CSS. No dependencies, just clean code ready to use.

Floating Card Accordion

Accordion with floating card style items and smooth animations. Clean shadows and hover effects.

accordioncardanimated

A curated collection of beautiful, copy-paste React components built with Tailwind CSS. No dependencies, just clean code ready to use.

Contained Accordion

Accordion with items grouped in a container background. Compact design with subtle spacing.

accordioncontainedgrouped

A curated collection of beautiful, copy-paste React components built with Tailwind CSS. No dependencies, just clean code ready to use.

Minimal Accordion

Clean accordion with simple border dividers. No backgrounds, just clean lines and spacing.

accordionminimalsimple

A curated collection of beautiful, copy-paste React components built with Tailwind CSS. No dependencies, just clean code ready to use.

Bordered Accordion

Accordion with a full border container and divided items. Structured and organized appearance.

accordionborderedstructuredsharp

Badges

8
Active

Active Badge

A badge with a green status indicator dot. Shows active or online status.

badgestatusindicatoronline
Pending

Pending Badge

A badge with an orange status indicator dot. Shows pending or away status.

badgestatusindicatoraway
Busy

Busy Badge

A badge with a red status indicator dot. Shows busy or do not disturb status.

badgestatusindicator
Inactive

Inactive Badge

A badge with a gray status indicator dot. Shows offline or inactive status.

badgestatusindicatoroffline

Active

Animated Active Badge

A badge with animated ping effect showing active or online status. Eye-catching indicator.

badgestatusindicatoronlineanimated

Pending

Animated Pending Badge

A badge with animated ping effect showing pending or away status. Smooth pulsing animation.

badgestatusindicatorawayanimated

Busy

Animated Busy Badge

A badge with a green status indicator dot. Shows active or online status.

badgestatusindicatoranimated

Inactive

Animated Inactive Badge

A badge with a green status indicator dot. Shows active or online status.

badgestatusindicatorofflineanimated

Sliders

8

Single Tone Slider

A minimalist range slider with a dual-ring thumb and solid color track for clear visual feedback.

sliderinputrangebasic

Square Thumb Slider

A contemporary slider with a square thumb instead of the traditional circle. Ideal for modern, geometric designs.

sliderinputrangesquare

Dual Handle Range Slider

Select minimum and maximum values with independent handles. Features gap constraint to prevent overlap.

sliderinputrangeminmaxhandle

Dual Tone Slider

A slider with gradient-filled track that visualizes progress. Features dual-ring thumb and smooth color transition.

sliderinputrangegradientprogress
205080

Labeled Range Slider

Gradient-filled slider with visible min, max, and current value labels. Perfect for precise value selection.

sliderinputrangelabeledvalues
50

Value Display Slider

An interactive slider with a floating badge that displays the current value above the thumb in real-time.

sliderinputrangetooltip
20
80

Dual Handle Tooltip Slider

Dual-handle range slider with floating badges showing min and max values in real-time. Includes gap constraint.

sliderinputrangetooltipdual

Stepped Dot Slider

A stepped slider with visual dot indicators that light up as you progress. Perfect for ratings or level selection.

sliderinputrangestepsdiscrete

Toggle Switches

2

Basic Toggle Switch

A standard toggle switch with a circular thumb that slides between on/off states. Clean and minimal design.

toggleswitchcheckbox

Square Toggle Switch

A toggle switch with a square thumb instead of the traditional circle. Perfect for modern, geometric designs.

toggleswitchcheckboxsquare

Mockups

3

Hello

Browser Mockup

A simple browser window mockup with macOS-style title bar buttons. Perfect for showcasing web content.

mockupbrowserwindow
https://google.com

Hello

Browser Mockup With URL

A browser mockup with a centered URL bar and title bar buttons. Clean design for web previews.

mockupbrowserurl

https://google.com

Hello

Browser Mockup With Tabs

A browser mockup featuring a realistic tab design with rounded edges and URL display. Great for multi-tab presentations.

mockupbrowsertaburl

Layouts

1

Ready to transform your workflow?

Join thousands of teams already building faster and smarter.

Start your free trial today

No credit card required

Call To Action Banner

A centered call-to-action component featuring a headline, descriptive text, a primary action button, and feature highlights separated by a divider.

ctabannermarketing

Testimonials

5

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, sint tenetur quibusdam modi ipsum maiores dicta deserunt fugit excepturi voluptatum.

Lorem, ipsum.

Lorem, ipsum dolor.

Quote First Testimonial

Testimonial card with quote displayed first, followed by author info. Clean horizontal layout.

testimonialcardreview

Lorem, ipsum.

Lorem, ipsum dolor.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, sint tenetur quibusdam modi ipsum maiores dicta deserunt fugit excepturi voluptatum. Lorem, ipsum.

Author First Testimonial

Testimonial card showing author details first, then the quote. Great for credibility.

testimonialcardreview

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis qui pariatur sint similique cupiditate est quaerat odio harum aliquam hic?

Lorem, ipsum.

Lorem, ipsum dolor.

Centered Testimonial

Centered testimonial card with avatar at top, quote in middle, and author at bottom.

testimonialcenteredcardreview

Lorem, ipsum.

Lorem, ipsum dolor.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis qui pariatur sint similique cupiditate est quaerat odio harum aliquam hic?

Floating Avatar Testimonial

Testimonial card with a floating avatar at top, followed by the author and quote, and the ratings at the bottom.

testimonialcenteredcardreviewrating

"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis, neque"

Lorem, ipsum.

Lorem, ipsum dolor.

Featured Testimonial

Centered testimonial card which can showcase featured reviews followed by an avatar and author details.

testimonialcenteredcardreviewfeatured

Image Galleries

2

Vertical Product Image Gallery

Product gallery with main image on top and thumbnails below. Includes lightbox with zoom on hover.

galleryproductlightbox

Horizontal Product Image Gallery

Product gallery with main image on left and vertical thumbnails on right. Features a lightbox with zoom on hover effect.

galleryproductlightbox

Auth

1

Welcome Back

Sign in to your Account

OR

Don't have an Account? Sign Up here

Login Form

Complete login form with email, password toggle, Google sign-in, and forgot password link.

formloginauth

Made withby Daham Senarathne