ObsidianUI

Design Less. Ship Better.
ObsidianUI is React & Tailwind CSS Component Library featuring components, blocks, and landing page templates.

obsidianui.dev  ·  Components  ·  Templates  ·  Documentation  ·  Follow on X

What you can build

• Interactive components: Preview each effect, read its usage guide, and install the complete source in your React project.
• Landing page templates: Explore Project One and the template gallery.
• Your own source: Registry installs add editable files to your project, including the styles and local helpers a component needs.
• Agent access: Use llms.txt, Markdown documentation, the public registry, or the local MCP server.

Built with Factory

ObsidianUI is built with Factory and Droid, Factory's software development agent. The repository is set up so Droid can take a component from idea to install command: the source, a docs page, tests, and the registry entry. Clone it to build your own components with Droid the same way.

Made with Droid:

• Active Sessions
• Status Bars
• Discover Button
• Parallax Slider

Now cooking: a Dashboard component, built with Factory. Coming soon.

How the repository works with Droid

• AGENTS.md: Droid loads this file at the start of every session. It sets where primitives, blocks, docs, and tests go, forbids hand-editing generated files, and names the checks to run before work counts as done.
• ACEBUILDER.md and skills/: the design conventions AGENTS.md points Droid to, covering accessibility, color, layout, typography, transitions, and writing.
• Generated output: npm run registry:build and npm run agent:build rebuild the shadcn registry, llms.txt, and the Markdown docs from source, so a component Droid builds can be installed right away.
• Checks: npm test runs the unit and component tests, and npm run check adds lint, type checking, and a production build, so Droid can prove a change works.

Build a component with Droid

1. Install Droid (quickstart):

   # macOS and Linux
   curl -fsSL https://app.factory.ai/cli | sh
   
   # Windows (PowerShell)
   irm https://app.factory.ai/cli/windows | iex
   

2. Clone the repository and start Droid in it:

   git clone https://github.com/Atharvsinh-codez/ObsidianUI.git
   cd ObsidianUI
   npm ci
   droid
   

3. Describe the component you want. For example:

   Add a pricing toggle component in src/components/block, with a docs page in
   src/content and a component test in tests/components. Then run
   npm run registry:build and npm test.
   

4. Review the changes, then run npm run dev and open the new docs page at localhost:3000/docs/<component-name>.

You can also open the folder in the Factory App instead of the terminal.

Quick start

Choose a component from the showcase, then install it with the shadcn CLI. For example:

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

For the interactive prism:

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

Each component page includes a preview, installation steps, and source files. Install the listed dependencies when copying files manually.

Running locally

git clone https://github.com/Atharvsinh-codez/ObsidianUI.git
cd ObsidianUI
npm ci
npm run dev

Open localhost:3000 in your browser.

• Primitives: src/components/ui
• Blocks and effects: src/components/block
• Documentation: src/content

After updating a component or registry source, rebuild the registry output with npm run registry:build.

Commands

Command	Purpose
npm run dev	Start the local development server
npm run build	Build the production site, registry manifests, and search index
npm run registry:build	Rebuild installation manifests from component sources
npm run agent:build	Rebuild llms.txt, Markdown pages, and agent route maps
npm run mcp	Launch local Model Context Protocol (MCP) server over stdio
npm run lint	Run ESLint check
npm run typecheck	Run TypeScript verification
npm test	Run unit and component test suites
npm run check	Run lint, types, tests, and production build

Star History

Contributing

Issues and pull requests are welcome. Read CONTRIBUTING.md for the full walkthrough, from creating a component to a working install command.

License

ObsidianUI is released under the MIT License.