macOS-Inspired React UI Component Library – Darwin UI

Description:

Darwin UI is a React UI component library that comes with 35+ macOS-style UI components configured to work with Tailwind CSS and Framer Motion.

It supports tree-shaking to reduce bundle size and maintains compatibility with the Shadcn component registry format.

Features

• 🎨 Elegant Components: Includes layout containers, form controls, data display elements, overlays, feedback mechanisms, and chart visualizations.
• 🌙 Dark Glass-Morphism Theme: Applies backdrop blur, translucent surfaces, and depth layering across all components.
• 🎭 Tailwind CSS and Framer Motion: Styles through Tailwind utility classes and animates with Framer Motion primitives.
• 🔧 shadcn Registry Support: Works with shadcn CLI for individual component installation through remote JSON registry.
• ♿ Accessible and Keyboard-Friendly: Implements ARIA patterns and keyboard navigation across interactive components.

Use Cases

• Dashboard Applications: Build admin panels and analytics dashboards.
• macOS-Style Web Apps: Create applications that match macOS design language.
• Design System: Start new projects with a consistent component base.

How to Use It

1. Install Darwin UI through your preferred package manager. The library requires React 18 or higher and Framer Motion as peer dependencies.

npm install @pikoloo/darwin-ui

For Yarn users:

yarn add @pikoloo/darwin-ui

For pnpm users:

pnpm add @pikoloo/darwin-ui

For Bun users:

bun add @pikoloo/darwin-ui

After installing Darwin UI, add the required peer dependencies:

npm install react react-dom framer-motion

2. Darwin UI supports installation through the shadcn CLI. This method copies the component source code rather than installing a package dependency.

npx shadcn add https://darwin-ui.mandalsuraj.com/registry/accordion.json

3. Import the Darwin UI styles into your global CSS file. The library expects Tailwind CSS to be configured in your project.

/* In your global CSS file (e.g., app.css or globals.css) */
@import "tailwindcss";
@import "@pikoloo/darwin-ui/styles";

4. Import components from the package and use them in your React application. Here’s an accordion component example:

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@pikoloo/darwin-ui';
function App() {
  return (
    <Accordion type="single" defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger>Project Overview</AccordionTrigger>
        <AccordionContent>
          This section contains the main project details and timeline information.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Technical Requirements</AccordionTrigger>
        <AccordionContent>
          Review the technical specifications and dependencies needed for implementation.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

5. UI Components included

FAQs

Q: Does Darwin UI work with Next.js App Router?
A: Darwin UI works with Next.js 13+ including the App Router. Import components in client components using the “use client” directive at the top of files that use Darwin UI components.

Q: Can I customize the glass-morphism effects?
A: You can modify the glass-morphism styling by overriding CSS custom properties or component-specific classes in your stylesheet. The backdrop blur and translucency values are defined in the imported Darwin UI styles.

Q: How do I reduce bundle size when using Darwin UI?
A: The library supports tree-shaking through ES modules. Import only the specific components you need rather than importing the entire package. Build tools like Webpack and Vite will eliminate unused code automatically.

Related Resources

• Radix UI: Unstyled React component primitives for building accessible design systems and component libraries.
• shadcn/ui: Re-usable components built with Radix UI and Tailwind CSS that can be copied directly into projects.
• Next.js UI Components: Discover more UI component libraries designed for Next.js.