VDK Components

A React component library built with TypeScript and SCSS.

Installation

npm install vdk-components
# or
yarn add vdk-components

Usage

Import Components

import { Button, Card, Avatar } from 'vdk-components';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Card title="My Card">Card content</Card>
      <Avatar alt="John Doe" />
    </div>
  );
}

Import Styles

Import the global styles in your app's entry point (e.g., App.tsx or index.tsx):

import 'vdk-components/dist/styles.css';

Available Components

Avatar

• Supports images and initials
• Multiple sizes: small, medium, large
• Shapes: circle, square
• Status indicators: online, offline, away, busy

Button

• Variants: primary, secondary, outline
• Sizes: small, medium, large
• Disabled state

Card

• Multiple variants: default, elevated, outlined, gradient, dark, interactive, bordered, compact
• Optional image
• Optional footer
• Click handler support

Switch

• Toggle state
• Loading state
• Disabled state
• Custom labels
• Success, warning, and error states

Toast

• Types: success, error, warning, info
• Custom duration
• Auto-close option
• Manual close support

Tooltip

• Positions: top, right, bottom, left
• Custom delay
• HTML content support
• Custom triggers

Development

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build the library
npm run build

License

This project is licensed under the MIT License - see the LICENSE file for details.