DPC-CSS-React

React component library based on DPC-CSS design system.

Installation

npm install @dpc-css/react @dpc-css/css
npm install -D sass

Usage

Import CSS variables in your app entry point:

// app.tsx or index.tsx
import "@dpc-css/css/dist/variables.css";

Component styles are automatically loaded when you import components.

import { Button, Alert, Input } from '@dpc-css/react';

function App() {
  return (
    <div>
      <Button variant="primary" onClick={() => alert('Clicked!')}>
        Click me
      </Button>
      <Alert variant="success">Success message</Alert>
      <Input placeholder="Enter text..." />
    </div>
  );
}

Vite Configuration

Add this to your vite.config.ts:

export default defineConfig({
  optimizeDeps: {
    exclude: ["@dpc-css/react"],
  },
});

Components

• Alert
• Badge
• Breadcrumb
• Button
• Checkbox
• Input
• Label
• Pagination
• Panel
• Radio
• Select
• Switch
• Table
• Tabs

Development

npm install
npm run storybook

Build

npm run build