Dark UI Component Pack
50+ dark-mode React components — cards, modals, data tables, forms, dropdowns, and sidebars. Accessible by default with Radix primitives, animated with Framer Motion, and styled with Tailwind CSS.
50+ dark-mode React components — cards, modals, data tables, forms, dropdowns, and sidebars. Accessible by default with Radix primitives, animated with Framer Motion, and styled with Tailwind CSS.
What is Dark UI Component Pack?
Dark UI components look simple but are hard to do right. Shadow layering, border opacity at different depths, text contrast ratios, hover state legibility, focus rings visible on dark backgrounds — every detail matters. Most component libraries either look generic (shadcn clones) or aren't truly dark-mode-first (they just invert the light theme). This pack is built dark-first, from the ground up, using Radix UI primitives for accessibility and Tailwind CSS for styling. Every component handles all interactive states — default, hover, focus, active, disabled, loading, and error. Framer Motion animations are included where they add value (modals, dropdowns, toasts) and omitted where they'd feel gratuitous. The result is a component library that makes your dark-mode product look like it was designed by a team of professional designers.
Everything in the package.
Layout Components (8)
Sidebar, navbar, page shell, drawer, split layout, card grid, content area, and breadcrumb trail — the skeleton of any dashboard or app.
Data Display (12)
Data table with sorting and pagination, stat cards, metric charts (bar, line, donut), activity feed, notification badge, avatar stack, and empty states.
Form Components (10)
Text inputs, textareas, select dropdowns, multi-select, checkbox, radio, toggle switch, date picker, file upload, and form error states.
Overlay Components (8)
Modal dialog, confirmation dialog, slide-over panel, tooltip, popover, context menu, command palette, and notification toast.
Navigation (6)
Horizontal nav, vertical nav, tabbed navigation, pagination controls, stepper, and progress indicator.
Feedback & Status (6)
Alert banners, inline validation messages, loading skeletons, progress bars, badge variants, and empty state illustrations.
Built for production, not demos.
Radix UI Primitives
Every interactive component (dialogs, dropdowns, tooltips, etc.) is built on Radix primitives — keyboard navigation, screen reader support, and focus management handled for you.
Dark-First Design System
Not a light-mode component library with dark mode bolted on. Designed dark-first with a deliberate layering system — background, surface, overlay, and floating element depths.
Fully Typed Props
Every component has a comprehensive TypeScript interface. Autocomplete shows all available props and their types — no guessing, no docs tab hunting.
Framer Motion Animations
Modals animate in and out. Dropdowns spring open. Toasts slide in from the corner. Animations are tasteful, fast, and respect prefers-reduced-motion.
Tailwind CSS Customisable
Every visual detail is a Tailwind class — change colours, spacing, border radius, and shadows without touching JavaScript. No CSS-in-JS black boxes.
Storybook Documentation
Each component has a Storybook story covering all variants and states. Browse the full library in isolation before integrating into your app.
Who is this for?
Developers, indie hackers, and product teams who want to skip the boilerplate and ship faster.
SaaS Dashboard Products
The full layout + data + form + overlay component set covers almost every screen a typical SaaS dashboard needs. Ship a polished internal product or customer-facing dashboard fast.
Developer Tools & Admin Panels
Developer tools live in the dark. This pack looks right in that context — sharp, information-dense, and professional without being over-designed.
Freelancers Delivering Client Projects
Clients see polished UI and assume weeks of design work. Delivering a dark, component-consistent interface in days is a competitive advantage.
Design System Foundations
Use this as the starting point for a company design system. The Tailwind token system and TypeScript props make it straightforward to extend and document for your team.
Technologies used.
Core
Primitives
Animation
Dev Tools
Common questions.
Is this compatible with shadcn/ui?
It's built on the same Radix UI primitives as shadcn, so the component API patterns feel familiar. However, it's not a shadcn extension — these are independently styled components with their own dark design system.
Does it work with Next.js?
Yes. All components are standard React with no Vite-specific code. Client components are marked with 'use client' where needed for Next.js App Router compatibility.
Can I use this alongside Tailwind's dark mode class strategy?
Yes — the components use Tailwind dark: utilities throughout. If your app uses class-based dark mode (dark class on html), these components will respect it.
Are there light mode variants?
This pack is dark-first. The components are built for dark-mode products. Light mode support is limited — if you're building a light-mode product, this isn't the right fit.
How do I customise the colour palette?
The colour system is defined as CSS custom properties in a single theme file. Change your brand colours there and they propagate through every component automatically.
Need something custom-built?
Need a fully custom component library for your product — with your brand colours, specific component types not in this pack, or a full Figma design system to go with it? Our design + frontend team builds bespoke component libraries and design systems for product companies.
Ready to ship faster?
Buy Dark UI Component Pack today and go from zero to production in hours — not weeks.
Setup and implementation
Review prerequisites, installation steps, and configuration before integrating this product.
Read the setup documentation