Component Library

A modern React + TypeScript component library built with Tailwind CSS and Radix UI primitives.

Installation

npm install ds-ui-react-mono

or

yarn add ds-ui-react-mono

or

pnpm add ds-ui-react-mono

Peer Dependencies

This library requires the following peer dependencies:

• react (^17.0.0 || ^18.0.0)
• react-dom (^17.0.0 || ^18.0.0)

Make sure these are installed in your project:

npm install react react-dom

Setup

1. Import CSS Styles

Import the library's CSS file in your application entry point (e.g., main.tsx, index.tsx, or App.tsx):

import 'ds-ui-react-mono/styles';

Or if you prefer to import it in your main CSS file:

@import 'ds-ui-react-mono/styles';

2. Configure Tailwind CSS (Required)

This library uses Tailwind CSS and requires you to configure it in your project. Add the library's content paths to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/ds-ui-react-mono/dist/**/*.{js,jsx,ts,tsx}', // Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Important: The library uses CSS variables for theming. Make sure your Tailwind config includes the following color variables (or extend your existing theme):

theme: {
  extend: {
    colors: {
      border: "hsl(var(--border))",
      input: "hsl(var(--input))",
      ring: "hsl(var(--ring))",
      background: "hsl(var(--background))",
      foreground: "hsl(var(--foreground))",
      primary: {
        DEFAULT: "hsl(var(--primary))",
        foreground: "hsl(var(--primary-foreground))",
      },
      secondary: {
        DEFAULT: "hsl(var(--secondary))",
        foreground: "hsl(var(--secondary-foreground))",
      },
      destructive: {
        DEFAULT: "hsl(var(--destructive))",
        foreground: "hsl(var(--destructive-foreground))",
      },
      muted: {
        DEFAULT: "hsl(var(--muted))",
        foreground: "hsl(var(--muted-foreground))",
      },
      accent: {
        DEFAULT: "hsl(var(--accent))",
        foreground: "hsl(var(--accent-foreground))",
      },
      popover: {
        DEFAULT: "hsl(var(--popover))",
        foreground: "hsl(var(--popover-foreground))",
      },
      card: {
        DEFAULT: "hsl(var(--card))",
        foreground: "hsl(var(--card-foreground))",
      },
    },
    borderRadius: {
      lg: "var(--radius)",
      md: "calc(var(--radius) - 2px)",
      sm: "calc(var(--radius) - 4px)",
    },
  },
}

The CSS file already includes these CSS variables, so you just need to configure Tailwind to use them.

Usage

Basic Example

import { Button, Input, Card } from 'ds-ui-react-mono';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Input placeholder="Enter text" />
      <Card title="Hello">Card content</Card>
    </div>
  );
}

Available Components

Core Components

• Button - Button component with multiple variants
• Input - Input field with label support
• Select - Select dropdown component
• Table - Advanced table component with sorting and filtering
• List - List component
• Switch - Toggle switch
• Radio - Radio button group
• Checkbox - Checkbox component
• SubmitInput - Input with submit button
• Modal - Modal dialog
• Loader - Loading spinner

Additional Components

• Accordion - Collapsible accordion
• Card - Card container
• CircleButton - Circular button
• Divider - Divider line
• PopConfirm - Popover with confirmation
• Popover - Popover component
• Slider - Image/content slider
• Tooltip - Tooltip component
• Calendar - Calendar component
• DatePicker - Date picker with calendar

Component Examples

Button

import { Button } from 'ds-ui-react-mono';

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button loading>Loading...</Button>

Input

import { Input } from 'ds-ui-react-mono';

<Input placeholder="Enter your name" />
<Input label="Email" type="email" />
<Input loading />

Modal

import { Modal } from 'ds-ui-react-mono';

function MyComponent() {
  const [open, setOpen] = useState(false);

  return (
    <Modal open={open} onOpenChange={setOpen} title="My Modal">
      <p>Modal content here</p>
    </Modal>
  );
}

Table

import { Table } from 'ds-ui-react-mono';

const columns = [
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'Email' },
];

const data = [
  { name: 'John', email: '[email protected]' },
  { name: 'Jane', email: '[email protected]' },
];

<Table columns={columns} data={data} />;

Utility Functions

The library also exports utility functions:

import { cn } from 'ds-ui-react-mono';

// cn is a utility for merging class names (uses clsx + tailwind-merge)
<div className={cn('base-class', condition && 'conditional-class')} />;

Development

Building the Library

npm run build

This will generate:

• dist/index.esm.js - ES module build
• dist/index.cjs.js - CommonJS build
• dist/index.d.ts - TypeScript definitions
• dist/styles.css - Compiled CSS

Development Mode

npm run dev

Storybook

View components in Storybook:

npm run storybook

Build Storybook:

npm run build:storybook

Testing

npm test

Linting

npm run lint
npm run lint:fix

TypeScript Support

This library is written in TypeScript and includes type definitions. All components are fully typed.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions, please open an issue on GitHub.