Getting Started
fern-ui is a collection of minimal, accessible components built with React, Tailwind CSS, and Radix UI primitives. Install components directly via the shadcn CLI.
Installation
Add components to your project using the shadcn CLI:
# Add a component from the registry
npx shadcn@latest add ChinmayNoob/fern-ui/animated-image
npx shadcn@latest add ChinmayNoob/fern-ui/tilt-image
npx shadcn@latest add ChinmayNoob/fern-ui/valorant-button
# Or list all available components
npx shadcn@latest list ChinmayNoob/fern-uiQuick Install
Or add the registry to your project for namespace-based installs:
npx shadcn@latest registry add @fern-ui=https://github.com/ChinmayNoob/fern-uiUtility 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
Inline Table Control
Inline row editing with layout transitions and focus management
HoverBox Effect
3D flip effect that reveals back content on hover
Shiny Wrap
Shimmering highlight wrapper for images and cards
Scroll Feed Tabs
Pill tab strip with sliding glow, pointer-reactive highlight, and Radix Tabs
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