Skip to content
DesignMunkDesignMunk Submit a site

React Bits

pro.reactbits.dev
134 animated React components with lifetime updates—one-time payment.
Software Technology Next.js Tailwind Homepage
Share Visit site
pro.reactbits.dev DESKTOP · 1440
React Bits

AI Breakdown

Design export

---
version: alpha
name: React Bits
description: 134 animated React components with lifetime updates—one-time payment.
colors:
  primary: "#000000"
  secondary: "#4413b8"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-vega-violet: "#b550fa"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: ui-sans-serif
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: system-ui
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.04
  headline-sm:
    fontFamily: ui-sans-serif
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.22
  headline-xs:
    fontFamily: ui-sans-serif
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.21
  body-md:
    fontFamily: ui-sans-serif
    fontSize: 16px
    fontWeight: 400
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 25px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# React Bits: Dark Hero With Violet One-Time CTA

## Overview

React Bits targets developers and teams who want production-grade, animated UI without building it from scratch. The brand voice is direct and technical, favoring dense information and live previews over narrative. The interface should feel confident, fast, and minimal—leaning on stark contrast and small radii to keep motion and visuals grounded. When tokens don't specify, default to high contrast, generous type scale for headlines, and compact body spacing for efficiency.

## Colors

- **primary (#000000):** Core ink for headings, icons, and the primary button fill.
- **secondary (#4413b8):** Primary accent for links, emphasis words, and small highlights.
- **neutral (#ffffff):** Base surface for cards and page backgrounds in light mode.
- **border (#e5e7eb):** Subtle dividers and card outlines; also suitable for table rules.
- **brand-vega-violet (#b550fa):** Secondary accent used for energetic highlights and UI flourishes.
- **surface ({colors.neutral}):** Default light surface; pair with on-surface for readable content blocks.
- **on-surface ({colors.primary}):** Standard text color on light surfaces (body copy and dense UI).

## Typography

- Headline Large (ui-sans-serif, 32px/1.19, 700): Use for H1/Hero headlines and key section intros. ui-sans-serif is a system stack; no web load required. Substitutes if you need a hosted face: Roboto (Google, available here), Inter, or Source Sans 3.
- Headline Medium (system-ui, 27px/1.04, 400): H2 and pricing plan titles. system-ui is a system stack; no web load required. Substitutes: Roboto (Google), Inter, Source Sans 3.
- Headline Small (ui-sans-serif, 23px/1.22, 400): H3s, card titles, and feature callouts.
- Headline X-Small (ui-sans-serif, 19px/1.21, 400): Eyebrow headings, captions with weight.
- Body Medium (ui-sans-serif, 16px, 400): Standard paragraph text and list items. For emoji support, Noto Color Emoji (Google) can be included alongside the system stack.
Guidance: Keep weight contrast simple—700 for main headline, 400 elsewhere. Avoid decorative alternates; the brand relies on clarity and scale, not flourish.

## Layout

Spacing uses a compact 4-point feel with steps at 8, 12, 16, 20, and 25px. Compose vertical rhythm from these units: 12–20px between related items, 25px for section padding multiples. A 12-column grid works well for marketing sections; use 16–20px gutters and 25px section margins on mobile, scaling up by multiples of the same tokens. Cards and feature blocks breathe with 16px inner padding (card token).

## Elevation & Depth

Shadows are disabled at every size. Depth is expressed through contrast (black on white), fine borders (#e5e7eb), and spacing. Use borders for separation between cards, table rows, and pricing tiers; reserve accent fills for interactive elements such as the primary button. For hover and focus, prefer color and underline changes over synthetic shadows.

## Shapes

Two radii define the language. 4px (sm) is for controls and compact UI; it reads crisp and technical. 8px (md) is for larger surfaces like cards and feature containers. Don't mix custom radii—consistency is doing most of the visual work here.

## Components

Buttons and Card
- Primary Button: 40px tall; background #000000 with #ffffff text; 8px×16px internal padding; 4px radius. Use for main CTAs.
- Secondary Button: 40px tall; text #000000; 8px×16px padding; 4px radius. Use on light surfaces as a quiet alternative; add a 1px #e5e7eb border when clarity is needed.
- Link Button: Text-only control with 0px radius; rely on the accent colors for affordance.
- Card: Background #ffffff, text #000000, 8px radius, 16px padding. Use borders in #e5e7eb to separate stacked cards.

### Top Navigation Bar
Compact horizontal nav with text links and a right-aligned primary CTA. Use Body 16px for links, 4px radii on the CTA, and 12–16px link gaps.

### Hero Headline Block
Two-line H1 using Headline Large (32px/700). Use #000000 on light surfaces; accent a key word with #4413b8 or #b550fa. Place two buttons: primary (Get Lifetime Access) and secondary or link.

### Asset Category Grid
A responsive grid listing categories and counts. Render each as a card (8px radius, 16px padding) with a thin #e5e7eb border and Headline XS (19px) labels.

### Product Preview Frame
A wide media card that simulates a browser window. Use a #ffffff card with 8px radius and 16px padding; add a 1px #e5e7eb border for definition.

### Templates Gallery
Multi-card grid of template thumbnails. Each card uses the card token; titles in Headline Small (23px), CTA links styled as button-link.

### Pricing Tiers
Three cards side-by-side on desktop. Each uses the card token, plan name in Headline Medium (27px), price in Headline Large (32px/700). Primary plan may add an accent label in #4413b8.

### Testimonial Wall
Stacked quotes with author handles. Use Headline XS (19px) for attributions and Body 16px for quotes; divide items with #e5e7eb rules.

### FAQ Accordion
Question rows at 19–23px headings, 16px answers. Use 1px #e5e7eb borders between items; keep radii at 4px for toggles.

## Do's and Don'ts

- Do reserve #4413b8 and #b550fa for emphasis, links, and small UI notes; keep most surfaces neutral (#ffffff) with #000000 text.
- Do keep interactive controls at 40px height with 4px radius to match the primary/secondary button spec.
- Do use #e5e7eb borders to create structure—between pricing cards, list items, and table rows.
- Don't introduce shadows or extra radii; hierarchy comes from scale, spacing, and tone.
- Don't set body text below 16px or above 19px for dense sections; use headline levels for emphasis instead.
- Don't mix multiple accent colors in the same block; pick one violet (#4413b8 or #b550fa) per context.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent: #4413b8 (alt accent #b550fa)

1) Build a dark-on-light hero with two CTAs
- Background #ffffff, max-width 1200px, 25px vertical padding.
- H1: ui-sans-serif, 32px, 700, line-height 1.19, color #000000; accent one word in #4413b8.
- Body: ui-sans-serif, 16px, color #000000 at 70% opacity.
- Primary button: 40px tall, 8px 16px, radius 4px, bg #000000, text #ffffff.
- Secondary button: 40px, 8px 16px, radius 4px, text #000000, 1px border #e5e7eb.

2) Three pricing cards
- Grid: 12-column, 20px gutters.
- Card: bg #ffffff, text #000000, 16px padding, radius 8px, 1px border #e5e7eb.
- Plan title: system-ui, 27px, 400. Price: ui-sans-serif, 32px, 700. CTA uses primary button spec.

3) Templates gallery section
- Section padding 25px top/bottom. Title: ui-sans-serif, 23px, 400.
- Cards: 8px radius, 16px padding, border #e5e7eb; thumbnail on top, title below; link styled as text in #4413b8.

4) FAQ accordion
- Container max-width 900px.
- Each item: 16px vertical padding, 1px bottom border #e5e7eb.
- Question: ui-sans-serif, 19px, 400, color #000000. Answer: ui-sans-serif, 16px.

5) Navigation bar with CTA
- Height 64px, background #ffffff, 12–16px link gaps.
- Links: ui-sans-serif, 16px, color #000000. CTA: primary button spec at right.

## Similar Brands

- shadcn/ui: Shares a no-shadow, border-driven aesthetic; React Bits leans heavier on animated previews and a sales-forward hero.
- Tailwind UI: Similar card structure and restrained radii; React Bits layers in violet accents and lifetime pricing as the pitch.
- Framer Templates: Visual inventory and live previews overlap; React Bits is denser and more developer-centric in tone.
- Vercel: High contrast and system fonts in common; React Bits adds a stronger marketplace angle with counts and category lists.

More like this

Browse Software →
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 3 hours ago
glideapps.com
Glide Blog Developer Tools
Glide Blog
A bold masthead titled The Column and an above-the-fold email capture lead into a clean two-column layout: a large, image-led feature on…
Blog · 15 hours ago
modulify.ai
Modulify AI
Modulify
Turn a prompt into a real website or web app—edit, refine, publish.
Homepage · 20 hours ago