@patricktabar/droplets-ui

Core UI components library for the Droplets design system. Built on top of Chakra UI v3 with React 19.

Features

• 40+ components — Accordion, Alert, Avatar, Badge, Button, Checkbox, Code, CodeBlock, CodeEditor, Combobox, Dict, Field, Geo (maps), IconButton, Input, Menu, Modal, NumberInput, OptionList, Pagination, Portal, Providers, Radio, Select, Splitter, Table, Tabs, Tag, Text, Textarea, Toaster, Tooltip, TransferList, and more
• Theming — Full Chakra UI v3 theme integration with custom design tokens
• Code Editor — Powered by CodeMirror 6 with multiple themes (Nord, Red, Solarized)
• Maps — MapLibre GL integration via react-map-gl
• Data Tables — Powered by TanStack Table
• i18n — Internationalization support via i18next
• Dark Mode — Theme switching via next-themes
• Color Utilities — Chroma.js for color manipulation
• Custom Hooks — Powered by ahooks

Installation

pnpm add @patricktabar/droplets-ui

Usage

import { Button } from '@patricktabar/droplets-ui';

function App() {
  return <Button>Click me</Button>;
}

Development

# Build the library
pnpm build

# Watch mode
pnpm dev

# Lint
pnpm lint

# Generate Chakra UI theme types
pnpm typegen

Exports

The package exports all custom components plus re-exports commonly used Chakra UI primitives:

• Custom components: All components under src/ (accordion, alert, button, table, etc.)
• Chakra UI re-exports: Card, Flex, Grid, Stack, Box, Container, Image, and many more
• Utilities: Color utilities (chroma), hooks, shared helpers
• Types: Component prop types and theme types

Peer Dependencies

• react >= 18 or >= 19
• react-dom >= 18 or >= 19
• @tanstack/react-table >= 8.21

Build

Built with tsup for optimal bundle size and compatibility (CommonJS + ESM).

License

MIT