Skip to main content
ObsidianUI

ObsidianUI

obsidianui.dev

Open-source React and Tailwind CSS component library of animated, interactive UI effects you can preview, copy, or install via the shadcn CLI.

UI & UX DesignDevelopmentAnimation & Motion
Media 1 of 3

About ObsidianUI

ObsidianUI is an open-source React component library focused on animated, interactive interface details. It ships 30+ components, blocks and landing page templates built with Tailwind CSS and Motion, with some effects using GSAP, canvas or Three.js WebGL. The catalogue covers buttons, menus and navigation, galleries, text reveals, scroll animations, cursor effects, backgrounds and WebGL pieces such as Fractal Glass and Apple Spotlight.

Each component page has a live preview, usage examples and complete source files, and every item can be installed from the public registry with the shadcn CLI or copied manually. The project also publishes llms.txt, agent instructions, an OpenAPI spec and shadcn MCP support for AI tooling. It is MIT licensed, needs no account, and is built by Atharv.

Pricing model: Free

Features

  • 30+ animated React components built with Tailwind CSS and Motion, plus GSAP, canvas and WebGL effects
  • Categories for buttons, menus, galleries, text animations, scroll animations, cursor effects and backgrounds
  • Interactive live previews with full source code on every component page
  • Install any component with npx shadcn@latest add from the public registry, or copy the files manually
  • shadcn MCP server support so AI assistants can browse and install components
  • Landing page templates (Landing, Fintech, Web3) and a machine-readable registry of 102 items
  • MIT licensed with no account or subscription required

FAQs

Common questions about ObsidianUI

Is ObsidianUI free and open source?
Yes. ObsidianUI is MIT licensed and no account or subscription is needed to browse the library, read the docs or copy component source code. You can also use it in commercial projects as long as the license notice is kept.
What do I need to use the components?
The components are built for React and Tailwind CSS. Many animations use Motion, while some effects use GSAP, canvas or Three.js. Each component page lists its dependencies and setup steps.
How do I add a component to my project?
Choose a component, then run its registry install command (npx shadcn@latest add with the component's obsidianui.dev/r/{name}.json URL) or copy all the listed source files manually. The source lives in your project, so you can change colors, layout and animation freely.

Similar products