@szum-tech/design-system

v3.21.7

Published

3 days ago

Szum-Tech design system with tailwindcss support

0High
0Medium
0Low

szum-tech Szum-Tech tailwindcss react javascript theme typescript react-components storybook design-system semantic-release

✨ Features

🎨 Modern Stack: Ready to go with Tailwind CSS v4+ & React 19+.
🧩 Extensive Kit: Over 50+ crafted components (Carousel, Sortable, Drawers, Comboboxes, Pickers & more).
♿ Accessible: Built around Radix UI and @base-ui/react to ensure WAI-ARIA compliance.
🌓 Themes: Native support for configurable light and dark color palettes.
📐 Animations: Smooth motion and interactions powered by motion, tailwindcss-animate, and @dnd-kit.
🗃️ Iconography: Bundled optimized icon set with Lucide React.
📘 Interactive Docs: Fully documented and play-tested in a Storybook environment.

📖 Table of Contents

🎯 Getting Started

⚙️ Installation

The package and its peer dependencies are available on npm. Start by adding it to your project:

# NPM
npm install @szum-tech/design-system

# YARN
yarn add @szum-tech/design-system

# PNPM
pnpm add @szum-tech/design-system

# BUN
bun add @szum-tech/design-system

Note: You must have react, react-dom (>=19) and tailwindcss (>=4) installed as peer dependencies.

🎨 Tailwind CSS Configuration

To use the design system components correctly, ensure Tailwind compiles its CSS framework. If you are using Tailwind v4+ with @import methodology, append the following lines to your main CSS file:

@import "tailwindcss";

/* Import the design system's predefined styles, tokens, and theme layers */
@import "@szum-tech/design-system/tailwind/global.css";

/* Specify source path to allow Tailwind's JIT scanner to pick up the component classes */
@source "../node_modules/@szum-tech/design-system";

For additional installation methods, refer to the Tailwind CSS Installation Docs.

🚀 Usage

🧩 Components

All available components, contexts, and specific providers are exported from the root @szum-tech/design-system.

import { Button, Card, CardHeader, CardTitle, CardContent } from "@szum-tech/design-system";

export default function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to Szum-Tech!</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="primary">Click me</Button>
      </CardContent>
    </Card>
  );
}

🖼️ Icons

The system provides an optimized endpoint for fetching icons (using tree-shaking best practices):

import { GoogleLogoIcon } from "@szum-tech/design-system/icons";

export function CustomButton() {
  return <Button leftIcon={<GoogleLogoIcon />}>Login with Google</Button>;
}

🪝 Hooks & Utils

Utilities and React hooks can be imported from their respective paths:

import { useMediaQuery } from "@szum-tech/design-system/hooks";
import { cn } from "@szum-tech/design-system/utils";

🌓 Theming (Light & Dark Mode)

The design system inherits native support for both light and dark themes. Theme switching relies on Tailwind CSS's selector strategies (custom variant .dark).

To activate the dark mode, append the .dark class to the <html> or <body> tag of your application:

import { useEffect, useState } from "react";
import { Button } from "@szum-tech/design-system";

export default function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    if (isDark) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  }, [isDark]);

  return <Button onClick={() => setIsDark(!isDark)}>Toggle to {isDark ? "Light" : "Dark"} Mode</Button>;
}