Feature — Alternating

Three alternating feature rows with code previews. Left-right layout flips on odd rows.

How it works

Fast to install. Easy to customize. Impossible to regret.

Installation

One command. Zero friction.

Run the ParticleUI CLI to install any component directly into your project. You get the source — no black box, no version churn.

# Add a single component
npx particleui-cli add button

# Or add multiple at once
npx particleui-cli add glow-card marquee beam

Customization

Tokens, not magic. You control everything.

ParticleUI runs on 4 OKLCH CSS variables. Change the accent color in globals.css and every component updates. No Tailwind config surgery.

:root {
  --color-accent: oklch(78% 0.17 200);   /* electric cyan  */
  --color-bg: oklch(5% 0.004 265);       /* near-black     */
  --color-surface-1: oklch(8% 0.004 265); /* card bg        */
  --color-text-1: oklch(97% 0 0);        /* headings       */
}

Animation

Particle layer. Wow-factor included.

12 animated components that work as drop-in replacements for their core counterparts. Swap Button for ConfettiButton. Input for GlowInput. No refactoring.

// Before
import { Button } from "@/components/ui/button"
<Button>Submit</Button>

// After — zero prop changes
import { ConfettiButton } from "@/components/ui/confetti-button"
<ConfettiButton>Submit</ConfettiButton>

Installation

Run the CLI

$npx particleui-cli add feature-alternating

Usage

TSX

import { FeatureAlternating } from "@/components/blocks/feature-alternating"

export default function Page() {
  return <FeatureAlternating />
}

Props

Prop	Type	Default	Required
heading	string	—	no
description	string	—	no
features	AlternatingFeature[]	—	no

Details

Source filecomponents/blocks/feature-alternating.tsx

Typeblock

Categoriesmarketing, blocks

npm dependencies

Registry depsbadge, glow-card, gradient-text, beam

Claude skill—