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

3

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

Ready to Build Faster?

Explore 50+ handcrafted React components and ship beautiful interfaces in minutes.

Single Action CTA Block

Simple centered call-to-action block with headline, description, and single action button. Minimal and focused layout.

ctacenteredsimplemarketing

Need More Help?

Still can't find what you're looking for? Check our FAQ or reach out directly.

Dual Action CTA Block

Call-to-action block with two action buttons for primary and secondary choices. Useful for FAQ or contact sections.

ctabuttonsdualactionbanner

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

5

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

Welcome to ReactBlocks

Create a new Account

OR

Already have an Account? Login here

Sign Up Form

Complete Sign Up form with email, password toggle, password confirmation, password strength calculator and Google sign-in.

formregistersignupauth

ReactBlocks

Check Your Email

We sent a 4-digit verification code to yourname@gmail.com

Didn't receive the email? Click to resend

Back to Login

4 Digit Verification

Email verification component with four-digit code input, smart focus handling, safe paste support, and modern responsive UI. Includes resend option and placeholder animation for a polished verification experience.

verificationauthotpformcode-input

ReactBlocks

Check Your Email

We sent a 6-digit verification code to yourname@gmail.com

Didn't receive the email? Click to resend

Back to Login

6 Digit Verification

Six-digit verification component for secure email or phone authentication. Features clean UI, auto-focus between fields, intelligent backspace navigation, and safe clipboard paste support.

verificationauthotpformcode-input

ReactBlocks

Check Your Email

We sent an 8-digit verification code to yourname@gmail.com

Didn't receive the email? Click to resend

Back to Login

8 Digit Verification

Extended eight-digit verification component ideal for advanced or high-security authentication flows. Includes smooth focus transitions, digit validation, and user-friendly paste handling for fast input.

verificationauthotpformcode-input

Cards

3

Urban Street Photography

Capturing the energy and motion of everyday city life from fleeting expressions to vibrant colors hidden in plain sight.

photographyurbanportfolio

Image Content Card

Card component with image, title, description, tags, and action button. Image and container have rounded corners.

cardimagetagsproduct

Urban Street Photography

Capturing the energy and motion of everyday city life from fleeting expressions to vibrant colors hidden in plain sight.

photographyurbanportfolio

Full Bleed Image Card

Card with a full bleed image. Content section below includes title, description, tags, and a button.

cardimageoverflowblog

Fast Integration

Copy, paste, and start building immediately. No setup or configuration required.

Icon Feature Card

Feature card with icon, title, and description. Clean layout for showcasing product features or benefits.

cardfeatureiconbenefits

Typography

4

Great design starts with attention to detail and a deep understanding of user needs.

Bold Text

Bold inline text element for emphasizing important words or phrases within content.

textemphasisinline

Stay ahead with our Pro Plan designed for creators who never stop building.

Badge Text

Inline badge element for labels, tags, code blocks, or status indicators. Works well within sentences or as standalone labels.

badgelabeltaginline

To achieve real growth, consistency matters more than intensity.

Underlined Text

Underlined text element for subtle emphasis or highlighting key terms within content.

textunderlineemphasisinline

Creativity begins the moment you stop chasing perfection and start embracing "possibility".

Italic Text

Italic text element for quotes, emphasis, or foreign words. Includes quotation marks styling.

textitalicquoteinline

Tickers

2

Next.js

React

Tailwind CSS

JavaScript

TypeScript

GSAP

Next.js

React

Tailwind CSS

JavaScript

TypeScript

GSAP

Simple Ticker

Infinite scrolling ticker with configurable direction, speed, and gap. Uses GSAP for smooth animation with customizable duplicates.

tickermarqueescrollanimationinfinite

Next.js

React

Tailwind CSS

JavaScript

TypeScript

GSAP

Next.js

React

Tailwind CSS

JavaScript

TypeScript

GSAP

Masked Ticker

Infinite scrolling ticker with gradient fade masks on edges. Same GSAP animation as Simple Ticker with added visual polish for seamless loops.

tickermarqueescrollanimationgradientfade

Dividers

2
OR

Horizontal Divider

Horizontal divider with centered text label. Commonly used to separate form sections or indicate alternative options.

dividerseparatorhorizontalorsection
OR

Vertical Divider

Vertical divider with centered text label. Useful for separating content in horizontal layouts or sidebars.

dividerseparatorverticalorsidebar

Made withby Daham Senarathne