DRAMS Design Component Library

Shadcn-style React component library for ONDC portals.

Installation

pnpm add @drams-design/components @ondc-sdk/shared

Components

| Component | Description | |-----------|-------------| | AddButton | Floating action button | | AgentChat | AI chat interface | | DramsButton | Styled button component | | DramsDropdown | Dropdown menu | | DramsEmptyState | Empty state placeholder | | DramsInput | Text input field | | DramsRadioGroup | Radio button group | | DramsSelect | Select dropdown | | DramsSpinner | Loading spinner | | DramsTabGroup | Tab navigation | | DramsToggle | Toggle switch | | FlipCard | Flip card animation | | PageLayout | Page layout wrapper | | ProductCard | Product display card | | RollingSearch | Animated search input |

Usage

import { DramsButton, DramsInput } from '@drams-design/components';

function MyComponent() {
  return (
    <div>
      <DramsInput placeholder="Enter text..." />
      <DramsButton variant="primary">Click me</DramsButton>
    </div>
  );
}

Development

# Install dependencies
pnpm install

# Build
pnpm build

# Watch mode
pnpm dev

Design Tokens

Uses design tokens from @ondc-sdk/shared/design-system.