@dododog/ui

React UI component library for DodoDog — the pet-friendly travel platform.

Built with React, TypeScript, Tailwind CSS, and class-variance-authority.

Installation

npm install @dododog/ui

Setup

Tailwind CSS

Add the DodoDog preset and content path to your tailwind.config.ts:

import type { Config } from "tailwindcss";
import dodododgPreset from "@dododog/ui/tailwind-preset";

const config: Config = {
  presets: [dodododgPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@dododog/ui/dist/**/*.{js,mjs}",
  ],
};

export default config;

Usage

import { Button } from "@dododog/ui";
// or tree-shakeable deep import:
import { Button } from "@dododog/ui/button";

export default function App() {
  return <Button variant="primary">Book now</Button>;
}

Components

| Component | Import path | Description | |-----------|-------------|-------------| | Accordion | @dododog/ui/accordion | Expandable content sections | | Alert | @dododog/ui/alert | Informational alert banners | | Autocomplete | @dododog/ui/autocomplete | Input with suggestions dropdown | | Avatar | @dododog/ui/avatar | User avatar with fallback | | Badge | @dododog/ui/badge | Status and label badges | | Banner | @dododog/ui/banner | Promotional banners | | BottomNavBar | @dododog/ui/bottom-nav-bar | Mobile bottom navigation | | Breadcrumb | @dododog/ui/breadcrumb | Navigation breadcrumbs | | Button | @dododog/ui/button | Primary action button | | Card | @dododog/ui/card | Content card container | | CardList | @dododog/ui/card-list | List of cards layout | | Carousel | @dododog/ui/carousel | Image/content carousel | | Checkbox | @dododog/ui/checkbox | Checkbox input | | Counter | @dododog/ui/counter | Numeric counter with +/- | | DateRangePicker | @dododog/ui/date-range-picker | Date range selection | | DetailList | @dododog/ui/detail-list | Key-value detail list | | Divider | @dododog/ui/divider | Horizontal divider | | Drawer | @dododog/ui/drawer | Slide-out panel | | DropdownMenu | @dododog/ui/dropdown-menu | Dropdown menu | | DualRangeSlider | @dododog/ui/dual-range-slider | Range slider with two handles | | EmptyState | @dododog/ui/empty-state | Empty state placeholder | | ErrorBoundary | @dododog/ui/error-boundary | React error boundary | | FilterAccordion | @dododog/ui/filter-accordion | Collapsible filter groups | | FilterPill | @dododog/ui/filter-pill | Removable filter pill | | Footer | @dododog/ui/footer | Site footer | | GuestPicker | @dododog/ui/guest-picker | Guest count selector | | Header | @dododog/ui/header | Site header | | HotelCard | @dododog/ui/hotel-card | Hotel listing card | | IconBadge | @dododog/ui/icon-badge | Badge with icon | | ImageGallery | @dododog/ui/image-gallery | Image gallery grid | | ImageWithFallback | @dododog/ui/image-with-fallback | Image with fallback placeholder | | Input | @dododog/ui/input | Text input field | | Lightbox | @dododog/ui/lightbox | Fullscreen image viewer | | LinkCard | @dododog/ui/link-card | Clickable card with link | | LoadingOverlay | @dododog/ui/loading-overlay | Fullscreen loading overlay | | MegaMenu | @dododog/ui/mega-menu | Desktop mega menu | | MobileMenu | @dododog/ui/mobile-menu | Mobile navigation menu | | Modal | @dododog/ui/modal | Dialog modal | | Pagination | @dododog/ui/pagination | Page navigation | | PriceDisplay | @dododog/ui/price-display | Formatted price display | | ProgressBar | @dododog/ui/progress-bar | Progress indicator bar | | RadioGroup | @dododog/ui/radio-group | Radio button group | | Rating | @dododog/ui/rating | Star rating display | | SearchBar | @dododog/ui/search-bar | Search input bar | | SegmentedControl | @dododog/ui/segmented-control | Segmented toggle control | | Select | @dododog/ui/select | Select dropdown | | Sidebar | @dododog/ui/sidebar | Navigation sidebar | | Skeleton | @dododog/ui/skeleton | Loading skeleton placeholder | | Spinner | @dododog/ui/spinner | Loading spinner | | StatCard | @dododog/ui/stat-card | Statistics display card | | StatusBadge | @dododog/ui/status-badge | Status indicator badge | | Stepper | @dododog/ui/stepper | Step-by-step progress | | Switch | @dododog/ui/switch | Toggle switch | | Tabs | @dododog/ui/tabs | Tabbed content | | Tag | @dododog/ui/tag | Content tag | | Textarea | @dododog/ui/textarea | Multiline text input | | Toast | @dododog/ui/toast | Toast notifications | | Toggle | @dododog/ui/toggle | Toggle button | | Tooltip | @dododog/ui/tooltip | Hover tooltip | | VerticalMarquee | @dododog/ui/vertical-marquee | Vertical scrolling marquee |

Utilities

| Export | Import path | Description | |--------|-------------|-------------| | Tokens | @dododog/ui/tokens | Design tokens (colors, spacing, etc.) | | Tailwind Preset | @dododog/ui/tailwind-preset | Tailwind CSS preset with DodoDog theme | | Utils | @dododog/ui/utils | Utility functions (cn, etc.) |

Requirements

• React >= 18
• Tailwind CSS >= 3

License

MIT