Obsidian UI
Premium dark-first React components.
A premium React component kit built for dashboards, admin panels, and SaaS applications. 15 production-ready components with a full dark/light theme system, complete TypeScript types, and zero CSS dependencies.
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
production-ready components
faster build with a typed theme system
WCAG contrast on every component
Built to solve real problems
Every feature exists for a reason — no bloat, no filler.
Dark + Light Theme System
A fully-tokenized theme object. Pass darkTheme or lightTheme as a prop and every color, border, and surface adapts. No CSS variables to manage, no class toggling.
15 Production Components
Button, Badge, Input, Toggle, Tabs, Tooltip, Modal, Alert, Avatar, Skeleton, ProgressBar, EmptyState, NavItem, StatCard, ChartCard, and DataTable. Designed for dashboards.
WCAG AA Accessible
Every component passes WCAG 2.1 AA contrast in both themes. ARIA roles and labels, keyboard navigation, focus states, and escape-key dismissal on overlays.
Zero CSS Dependencies
All component styles are inline. No Tailwind, no CSS modules, no stylesheets to import. Just one helper to inject keyframe animations once at your app root.
TypeScript-First
Complete type definitions for every component, prop, and theme token. Autocomplete in your editor, type-checked theme overrides, no any escapes.
Tree-Shakeable Package
Import only the components you use. Recharts loads only when you import ChartCard. Ships ESM and CJS builds for any modern bundler.
Simple by design
Install the Package
npm install obsidian-ui lucide-react. Add recharts only if you'll use ChartCard. Works with any React 18+ app — Next.js, Vite, CRA.
Inject Animations
Call injectObsidianStyles() once at your app root, or import "obsidian-ui/styles". One-line setup for the keyframe animations used by Modal, Tooltip, and Skeleton.
Pick a Theme & Ship
Import darkTheme or lightTheme and pass it as a prop. Build a full dashboard in minutes — every component adapts automatically.
Dark mode done right.
One-time payment, no subscriptions. Install the package, pick a theme, and ship a polished dark-themed UI in minutes.