Free & open source, built for every frontend stack. Star Exhuma on GitHub
ExhumaBeta
DocsComponentsBlog

Getting Started

  • Introduction
  • Installation
  • Theming & Dark Mode
  • CLI Reference

Architecture

  • Kinetic Methodology
  • Ecosystem Contracts
  • Lifecycle & Memory Safety

Components

  • All Components20
Cards8
  • Stacking Cards
  • Horizontal Scroller
  • Tilt Card
  • Spotlight Card
  • Border Beam
  • Card Swipe Stack
  • Comparison Slider
  • Expandable Card
Layouts6
  • CSS Masonry
  • Row Masonry
  • Auto Grid
  • Infinite Marquee
  • Bento Grid
  • Diamond Grid
Navigation2
  • Morphing Tabs
  • Floating Dock
Primitives4
  • Accordion
  • Number Ticker
  • Magnetic Button
  • Cursor Tooltip
// DOCS·Getting Started

Installation & Quickstart

Get started with Exhuma using the interactive starter wizard or install components directly into your existing project across any package manager.

  • Tailwind CSS · clsx
  • pnpm · npm · bun · yarn
// 01·Prerequisites

Prerequisites & Styling Engine

Exhuma components use standard CSS variables and Tailwind CSS for styling, paired with clsx for class merging. We ship zero runtime animation engines (no Framer Motion or GSAP). Before installing, ensure your project has:

Styling

Tailwind CSS (v3 / v4)

Utility-first CSS framework configured in your project for responsive layouts and borders.
Theming

CSS Variables

Semantic theme tokens (--background, --card, --border) for seamless dark mode.
Utilities

clsx

Used directly across components for conditional class merging without overhead.
// 02·Quickstart

Interactive Starter Wizard

The fastest way to scaffold a new project with Exhuma pre-configured is using the official starter wizard:

pnpm dlx create exhuma@latest

The wizard will prompt you for your project name and preferred framework, then generate a lightweight project with self-contained tactile components ready to run.

// 03·Package Managers

Supported Package Managers

Exhuma supports all major modern JavaScript package managers without installing global binaries:

pnpm

pnpm dlx exhuma add <slug>

npm

npx exhuma add <slug>

bun

bunx exhuma add <slug>

yarn

yarn dlx exhuma add <slug>
// 04·exhuma init

Initializing Existing Projects (exhuma init)

To configure Exhuma in an existing codebase, run the initialization command in your repository root:

Terminal
bash
# Initialize configuration
npx exhuma init

# Automatically detects framework (React, Next.js, Vue, Svelte, Angular, Astro...)
# Creates an exhuma.json config file
Tip
Automatic Framework Detection
The CLI inspects your package.json, framework config files (e.g. next.config.js, svelte.config.js, nuxt.config.ts), and file paths to configure the target framework contract automatically.
// 05·Configuration

Configuration File (exhuma.json)

The generated exhuma.json stores your framework flavor and preferred component directory:

exhuma.json
json
{
  "$schema": "https://exhuma-ui.com/schema.json",
  "flavor": "nextjs",
  "paths": {
    "components": "@/components/ui"
  }
}
// 06·First Component

Adding Your First Component

Once initialized, install any canonical component with a single command:

Terminal
bash
# Install 3D Tilt Card
npx exhuma add tilt-card

# Install Stacking Cards
npx exhuma add stacking-cards

# Overwrite existing if updating
npx exhuma add horizontal-scroller --overwrite
IntroductionTheming & Dark Mode
On This Page
Prerequisites & Styling EngineInteractive Starter WizardPackage ManagersManual Project Setup (exhuma init)Configuration (exhuma.json)Adding Your First Component