@donotdev/components

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

Getting Started

$3

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

$3

``bash
bun add @donotdev/components
`

Usage Examples

$3

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

// Simple usage
Click me

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

`

$3

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

// Simple usage - props-based, no nesting

Hover me
;
`

$3

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

// Props-based API
Open} side="bottom">



;
`

$3

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

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


...
;


`

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