Getting Started
fern-ui is a collection of minimal, accessible components built with React, Tailwind CSS, and Radix UI primitives. Copy the components you need into your project.
Installation
Start by installing the required dependencies:
# Install dependencies
pnpm add class-variance-authority clsx tailwind-merge radix-ui lucide-reactUtility Function
Add the cn utility for merging Tailwind classes:
// lib/utils.ts
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}Components
Browse available components below
Album Cards
Expandable album cards with animated lyrics display
Animated Image
Diamond-shaped image that expands and reveals color on hover
Artist List
Interactive artist showcase with hover-activated profiles
Badge
Small label for status indicators and tags
Button
Interactive button with multiple variants and sizes
Card
Versatile container for grouping related content
Diamond Gallery
Four-image diamond layout with hover focus effects
Draggable Cards
Polaroid-style draggable album cards
Hero Section
Landing page hero with animated sparkles (multi-file example)
Hover Disclosure
Horizontally expanding hover gallery for artists
Hover Flip Card
Card that flips to reveal an image background on hover
Hover Gallery
Stacked gallery that expands into a 2x2 grid on hover
HoverBox Effect
3D flip effect that reveals back content on hover
Shiny Wrap
Shimmering highlight wrapper for images and cards
Spider Button
Spiderman-themed comic buttons with hover effects
Splitflap
Split-flap display component for dynamic text
SVG Filters
Image hover effects using SVG turbulence and displacement
Tilt Card
Mouse-position-based 3D tilt effect for cards
Valorant Button
Valorant-inspired animated button variants