Obsidian UI
Premium dark-first React components.
A curated collection of production-ready React components built with Tailwind CSS. Dark theme by default, fully accessible, and designed to make your SaaS product look premium out of the box.
Dark mode shouldn't be an afterthought.
Most component libraries are designed light-first, with dark mode bolted on as a theme toggle. The result? Washed-out colors, poor contrast ratios, and components that feel like an inversion rather than a deliberate design. Developers building dark-themed SaaS products deserve components that were designed dark from the ground up.
of developers prefer dark mode
of UI kits have poor dark mode
faster build time with a component kit
WCAG contrast on every component
Built to solve real problems
Every feature exists for a reason — no bloat, no filler.
Dark-First Design
Every component is designed for dark backgrounds first. Colors, contrast, and shadows are optimized for dark themes — not inverted from light mode.
React + Tailwind CSS
Built with React functional components and Tailwind utility classes. Copy-paste into any Next.js, Vite, or React project.
WCAG AA Accessible
Every component passes WCAG 2.1 AA contrast requirements. Keyboard navigable, screen reader friendly, focus states built in.
Copy-Paste Components
No package to install. Copy the code directly into your project, customize the Tailwind classes, and ship. You own the code.
Framer Motion Animations
Micro-interactions and entrance animations included. Hover states, transitions, and scroll reveals that make your product feel alive.
CSS Variable Theming
Full design system with CSS custom properties. Swap the color palette in one file and every component updates automatically.
Simple by design
Browse Components
Explore the library and find the components you need — buttons, cards, forms, tables, modals, navigation, and more.
Copy the Code
Each component is a self-contained React file with Tailwind classes. Copy it into your project and it works immediately.
Customize & Ship
Adjust the CSS variables to match your brand, tweak the Tailwind classes, and deploy. You own the code — no dependency lock-in.
Dark mode done right.
Obsidian UI is launching soon. Join the waitlist to get early access and a launch discount.