shadcn-all-in-one

A comprehensive React component library that consolidates all shadcn UI components into a single, easy-to-use package.

View on GitHub

Shadcn All In One

A comprehensive React component library that consolidates all shadcn UI components into a single, easy-to-use package.

[!IMPORTANT] This package is for convenience and personal use. It consolidates shadcn UI components but you can also use shadcn UI directly by following their installation guide.

Features:

Installation

npm install @madooei/shadcn-all-in-one

Peer Dependencies: This package requires React, React DOM, and Tailwind CSS as peer dependencies:

npm install react react-dom tailwindcss

Styling Requirements

This package requires Tailwind CSS for styling. Components use Tailwind utility classes and will not display correctly without Tailwind CSS properly configured in your project.

CSS Import Options

This package works with Tailwind CSS v4.

// src/main.tsx
import "./index.css"; // or your main CSS file where you import Tailwind CSS
import "@madooei/shadcn-all-in-one/shadcn.css"; // add this after your main CSS file

Alternatively, you can import the @madooei/shadcn-all-in-one/shadcn.css file directly in your index.css file:

/* src/index.css */
@import "tailwindcss";
@import "@madooei/shadcn-all-in-one/shadcn.css";

Tailwind Configuration

Configure your tailwind.config.js to include the component library:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    // Add this line to scan the component library:
    "./node_modules/@madooei/shadcn-all-in-one/dist/**/*.{js,cjs}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Then update your index.css (or your main CSS file) file to use this configuration:

/* src/index.css */
@import "tailwindcss";
@import "@madooei/shadcn-all-in-one/shadcn.css";
@config "../tailwind.config.js"; // path to your Tailwind config file

[!TIP] Make note of the semicolon at the end of the @import and @config lines. This is required for Tailwind CSS to process these statements correctly.

Migration from shadcn UI

After you’ve completed the above setup, take the following steps to migrate from shadcn UI to @madooei/shadcn-all-in-one:

Usage

Import components individually for optimal bundle optimization and tree-shaking:

Import each component individually for the smallest possible bundle size:

import React from "react";
import { Button } from "@madooei/shadcn-all-in-one/button";
import { Card } from "@madooei/shadcn-all-in-one/card";
import { Input } from "@madooei/shadcn-all-in-one/input";
import { Dialog } from "@madooei/shadcn-all-in-one/dialog";
import { Icons } from "@madooei/shadcn-all-in-one/icons";
import { TooltipButton } from "@madooei/shadcn-all-in-one/tooltip-button";

function App() {
  return (
    <div>
      <Card>
        <h2>Welcome to shadcn-all-in-one</h2>
        <Input placeholder="Enter your name" />
        <Button>Click me!</Button>
        <TooltipButton tooltipContent="This is a tooltip button">
          Hover me
        </TooltipButton>
        <Icons.react className="w-6 h-6" />
      </Card>
    </div>
  );
}

Category Imports

Import related functionality by category:

import * as hooks from "@madooei/shadcn-all-in-one/hooks";
import * as utils from "@madooei/shadcn-all-in-one/utils";

Available Components

Core UI Components

All standard shadcn UI components are available:

Modified UI Components

Updated Sonner Toast Notifications

The original version has a dependency on next-themes. I removed this dependency and now when you use it, you must pass the theme prop to it.

import { Toaster } from "@madooei/shadcn-all-in-one/sonner";
import { Button } from "@madooei/shadcn-all-in-one/button";
import { toast } from "sonner";

function App() {
  const { theme } = useTheme(); // Use your preferred theme management solution

  return (
    <div>
      <Button variant="outline" onClick={() => toast("Event has been created")}>
        Default
      </Button>
      <Toaster
        theme={theme} // Pass the theme prop
        richColors
        position="bottom-right"
      />
    </div>
  );
}

Additional Components

Icons

A comprehensive collection of popular icons:

import { Icons } from "@madooei/shadcn-all-in-one/icons";

// Available icons
<Icons.twitter />
<Icons.gitHub />
<Icons.react />
<Icons.tailwind />
<Icons.npm />
<Icons.yarn />
<Icons.pnpm />
<Icons.google />
<Icons.apple />
<Icons.paypal />
<Icons.spinner />
<Icons.radix />
<Icons.aria />

TooltipButton

An enhanced button component with built-in tooltip functionality:

import { TooltipButton } from "@madooei/shadcn-all-in-one/tooltip-button";

<TooltipButton
  tooltipContent="This button has a tooltip"
  variant="outline"
  size="sm"
>
  Hover me
</TooltipButton>;

Props:

Hooks, Contexts, and Utilities

import { useMobile } from "@madooei/shadcn-all-in-one/hooks";
import { cn } from "@madooei/shadcn-all-in-one/utils";

Cloning the Repository

To make your workflow more organized, it’s a good idea to clone this repository into a directory named shadcn-all-in-one-workspace. This helps differentiate the workspace from the shadcn-all-in-one located in the packages directory.

git clone https://github.com/madooei/shadcn-all-in-one shadcn-all-in-one-workspace

cd shadcn-all-in-one-workspace

Repository Structure

How to Use This Repo

Using a VSCode Multi-root Workspace

With Visual Studio Code, you can enhance your development experience by using a multi-root workspace to access packages, examples, and playgrounds simultaneously. This approach is more efficient than opening the root directory, or each package or example separately.

To set up a multi-root workspace:

  1. Open Visual Studio Code.
  2. Navigate to File > Open Workspace from File....
  3. Select the shadcn-all-in-one.code-workspace file located at the root of the repository. This action will open all specified folders in one workspace.

The shadcn-all-in-one.code-workspace file can be customized to include different folders or settings. Here’s a typical configuration:

{
  "folders": [
    {
      "path": "packages/shadcn-all-in-one"
    },
    {
      "path": "examples/with-tailwind4"
    },
    {
      "path": "playgrounds/vite"
    }
  ],
  "settings": {
    // Add any workspace-specific settings here, for example:
    "git.openRepositoryInParentFolders": "always"
  }
}

Developing the Package

Change to the package directory and install dependencies:

cd packages/shadcn-all-in-one
npm install

Package Management

When you are ready to publish your package:

npm run release

This single command will:

[!TIP] For detailed information about package publishing, versioning, and local development workflows, see the NPM Package Management Guide.