ObsidianUI: React Components & Animated UI Blocks

ObsidianUI is a React and Tailwind CSS component library for building animated websites and dashboard UIs.

You can start with a ready-made dashboard layout, add interactive galleries to a portfolio, or build account settings with device sign-out controls.

The shadcn CLI installs the selected components as editable files in your project.

Features

• 50+ reusable UI components and 20+ blocks.
• Component-specific styles and utility files that you can edit locally.
• GSAP-based image and text effects, Motion animations, and Three.js graphics.
• Resizable dashboard navigation, responsive drawer, tabs, menus, and toolbar controls.
• Device-session management UI with loading, sign-out, and error states.
• Component-level CSS variables for colors and styling.

Available Components

Blocks

UI Components

How to Use ObsidianUI

1. Set Up shadcn/ui

In an existing React or Next.js project with Tailwind CSS, run the initializer if you do not already have components.json:

npx shadcn@latest init

For a new Next.js App Router project, use:

npx create-next-app@latest workspace-demo --typescript --tailwind --eslint --app --src-dir --import-alias '@/*'
cd workspace-demo
npx shadcn@latest init

2. Install Discover Button

npx shadcn@latest add "https://www.obsidianui.dev/r/discover-button.json"

3. Basic Usage

Discover Button accepts href for links, onClick for button actions, and label for text. Import it in src/app/page.tsx:

import { DiscoverButton } from "@/components/block/discover-button";
export default function HomePage() {
  return (
    <main className="mx-auto max-w-5xl px-6 py-20">
      <h1 className="mb-8 text-4xl font-semibold">Explore our products</h1>
      <DiscoverButton href="/products" label="View Products" />
    </main>
  );
}

Example: Build an Admin Dashboard

Install Dashboard Shell:

npx shadcn@latest add "https://www.obsidianui.dev/r/dashboard-shell.json"

Create src/app/dashboard/page.tsx as a Client Component because the navigation object passes React icon components. Give the wrapper a height so the dashboard fills the viewport.

"use client";
import { LayoutDashboard, Settings } from "lucide-react";
import { DashboardShell } from "@/components/block/dashboard-shell";
const navigation = [
  {
    id: "workspace",
    title: "Workspace",
    items: [
      { id: "overview", label: "Overview", icon: LayoutDashboard, href: "/dashboard" },
      { id: "settings", label: "Settings", icon: Settings, href: "/dashboard/settings" },
    ],
  },
];
export default function DashboardPage() {
  return (
    <div className="h-dvh">
      <DashboardShell
        brand={{ name: "Northstar" }}
        navigation={navigation}
        defaultActiveItemId="overview"
        title="Overview"
      >
        <section className="p-6">
          <h2 className="text-xl font-semibold">Workspace activity</h2>
          <p className="mt-2 text-sm text-muted-foreground">
            Review activity and manage team settings.
          </p>
        </section>
      </DashboardShell>
    </div>
  );
}

Dashboard Shell Props

The sidebar collapses into a drawer when the dashboard container is narrower than 672px. Items with href navigate to another page. Items with no href update the selected navigation item.

Example: Manage Active Sessions

Install Active Sessions for an account settings page. Your backend must revoke the real session:

npx shadcn@latest add "https://www.obsidianui.dev/r/active-sessions.json"

The component handles pending requests and errors after calling your DELETE /api/sessions/:id endpoint. Create src/app/settings/sessions/page.tsx:

"use client";
import {
  ActiveSessions,
  type ActiveSession,
} from "@/components/block/active-sessions";
const initialSessions: ActiveSession[] = [
  {
    id: "current-browser",
    device: "laptop",
    browser: "Chrome",
    os: "macOS",
    lastActiveAt: new Date(),
    current: true,
  },
  {
    id: "tablet-login",
    device: "tablet",
    browser: "Safari",
    os: "iPadOS",
    lastActiveAt: "2026-10-08T16:00:00Z",
  },
];
export default function SessionSettingsPage() {
  return (
    <main className="mx-auto max-w-3xl p-6">
      <ActiveSessions
        defaultSessions={initialSessions}
        onRevoke={async (session) => {
          const response = await fetch(
            `/api/sessions/${encodeURIComponent(session.id)}`,
            { method: "DELETE" },
          );
          if (!response.ok) throw new Error("Session revocation failed");
        }}
      />
    </main>
  );
}

Active Sessions Props

Each session needs an id, a device type (desktop, laptop, phone, or tablet), and lastActiveAt. Use current: true for the current login. That row stays at the top and cannot be signed out through the list.

Optional Registry Namespace

For repeated installs, configure @obsidian in the registries section of components.json:

{
  "registries": {
    "@obsidian": "https://www.obsidianui.dev/r/{name}.json"
  }
}

Install File Input through the registry namespace:

npx shadcn@latest add @obsidian/file-input

Alternatives and Related Resources

• Motiq: 80+ Animated UI Components for React & shadcn/ui
• Nexvyn UI: 30+ Animated UI Components for shadcn/ui & React
• Motion-Powered Animated Components for Modern UIs – Animate UI
• Copy-paste UI Components with Smooth Motion Effects – Spectrum UI