@donotdev/components

Core easy-to-use components components built on radix-ui primites and our robust css styling system.

Getting Started

Interactive Showcase

Explore all components, their props, and see them in action in our interactive demo application: Launch Demo Application

Installation

bun add @donotdev/components

Usage Examples

Button (Template Component)

import { Button } from '@donotdev/components';

// Simple usage
<Button variant="primary">Click me</Button>

// With icon and tooltip
<Button
  variant="outline"
  icon={Icon}
  tooltip="Help text"
>
  Action
</Button>

Tooltip (Template Component)

import { Tooltip } from '@donotdev/components';

// Simple usage - props-based, no nesting
<Tooltip content="Help text" side="top">
  <button>Hover me</button>
</Tooltip>;

Popover

import { Popover } from '@donotdev/components';

// Props-based API
<Popover trigger={<Button>Open</Button>} side="bottom">
  <div>Popover content</div>
</Popover>;

Dialog

import { Dialog } from '@donotdev/components';

// Props-based API
<Dialog
  trigger={<Button>Open Dialog</Button>}
  title="Confirm Action"
  description="Are you sure?"
  actions={{
    cancel: { label: 'Cancel' },
    confirm: { label: 'Confirm', onClick: handleConfirm },
  }}
>
  <form>...</form>
</Dialog>;

Key Features

• Radix UI Primitives: Accessible, headless components in ./src/base/
• Props-Based Components: Simple, easy-to-use components in ./src/
• Pure CSS Styling: Highly customizable via CSS variables, no utility classes in JSX
• Type-Safe: Full TypeScript support with comprehensive types
• CSS Tokens Only: All styling based on dndev-* CSS classes
• Full Theming Support: Dynamic light/dark mode and custom themes
• ARIA & RTL Compliance: Built for accessibility and internationalization
• JSDoc: Comprehensive inline documentation