CommandK
Command Palette
Keyboard-first global actions with fuzzy search and sections.
Copy code & customize
Open SourceFree UI components for dark-mode interfaces
Copy, paste, customizeDark UI components for Next.js
Loki UI is a collection of free, open-source React components built with Next.js and Tailwind. Copy any component into your project, customize it to match your brand, and ship faster. No dependencies, no subscriptions, just pure components.
100% free and open sourceMIT licensedNo sign-up required
Browse our component library
Copy any component code directly into your project and customize as needed
Layout
Dock Layout
Snap panes, inspectors and timelines into a fluid dock.
Copy code & customize
Analytics
Metric Cards
Animated KPI cards with deltas, trend lines and spark charts.
Copy code & customize
100% free forever
MIT licensed
No dependencies
Copy & paste ready
Why choose Loki UI components
Everything you need to build beautiful dark interfaces, without the complexity.
📋
Copy & paste ready
Every component is ready to copy directly into your project. No installation, no package dependencies—just pure React and Tailwind code.
🎨
Fully customizable
All components are built with Tailwind CSS, making it easy to customize colors, spacing, and styles to match your brand perfectly.
🌙
Dark mode first
Designed specifically for dark interfaces. Every component is optimized for low-light, high-focus environments like dashboards and admin panels.
⚡
Lightweight & fast
No heavy dependencies or runtime overhead. Just the code you need, when you need it. Tree-shakeable and performant.
🔓
100% open source
MIT licensed and completely free. Use in personal or commercial projects without restrictions. Contribute back if you'd like!
Perfect for dark-mode projects
Use our components to build admin panels, internal tools, analytics dashboards, and any dark-mode interface. Copy what you need, customize to match your brand.
Analytics SaaS
Wire up metric cards, time-series panels and filters without reinventing the shell for every new surface.
Internal tools
Give ops and support pros the same level of polish as your end-user product, with shortcuts and drill-downs baked in.
Trading & terminals
Compose dense layouts, tickers and stream panes that stay legible in low-light, high-focus environments.
How to use Loki UI
It's simple: browse, copy, paste, and customize. No installation required, no dependencies to manage.
01 · Browse
Explore our component library. Each component shows a live preview and includes the full source code.
02 · Copy
Click the copy button to get the component code. Paste it directly into your Next.js project—no installation needed.
03 · Customize
Modify the Tailwind classes to match your brand. All components are built with standard Tailwind utilities, so customization is easy.