ObsidianUI

Overview

ObsidianUI is an open-source React component library crafted for developers and designers who want to ship expressive, motion-rich web interfaces with minimal friction. Built for Next.js, Tailwind CSS, and Motion, ObsidianUI features over 100+ production-grade components spanning smooth buttons, cursor trails, parallax galleries, text reveals, and WebGL canvas shaders. Following the shadcn copy-paste registry architecture, it provides full source code ownership with zero black-box dependencies, accompanied by local stdio MCP tooling for AI-assisted frontend workflows.

Key Features

• ⚡️ Delightful Micro-Interactions: Features fluid spring animations, split hover states, magnetic tabs, and folder previews that instantly elevate interface feel.
• 🎨 Creative Shaders & Canvas FX: Integrates cutting-edge WebGL effects including Dither Canvas, Fractal Glass, Curved Plane, and Grid Lift directly into React components.
• 📦 shadcn Registry Workflow: Distributed via standardized registry manifests (/r/{name}.json), allowing developers to pull clean TypeScript and CSS directly into their repository.
• 🤖 Agent-Ready MCP Integration: Includes a local stdio MCP server (npm run mcp) that lets AI coding agents (Claude Code, Cursor, Codex) search and inspect component manifests automatically.

Installation & Quick Start

# Install any component directly using shadcn CLI
npx shadcn@latest add "https://www.obsidianui.dev/r/arrow-fill-button.json"

"use client";
import React from 'react';
import { ArrowFillButton } from '@/components/block/arrow-fill-button';

export default function HeroCTA() {
  return (
    <section className="flex flex-col items-center justify-center py-16 text-center">
      <h2 className="text-3xl font-bold tracking-tight mb-6">Next-Level Creative Motion</h2>
      <ArrowFillButton
        href="/components"
        bgColor="#ff6b00"
        fillTextColor="#ff6b00"
        className="shadow-lg hover:shadow-orange-500/20"
      >
        Explore ObsidianUI
      </ArrowFillButton>
    </section>
  );
}

Why Choose ObsidianUI?

1. Expressive Design Differentiation: Breaks away from cookie-cutter UI templates by introducing tactile motion, interactive cursor feedback, and visual shaders out of the box.
2. True Source Ownership: Every component brings self-contained CSS and TypeScript definitions without bloated runtime locks, making customization seamless.