# Duoop-UI

> Tactile React components with plain CSS, interactive previews, complete JSX/CSS source files and runnable downloads.

Duoop UI has 46 components across 7 categories and one public page example. These counts refer to catalog entries; compound components and helpers are additional named exports. The production website is https://duoop-ui.com/.

## Installation

Install the published library with `npm i duoop-ui` in a React 19 / React DOM 19 application. Import named components from `duoop-ui` and import `duoop-ui/styles.css` once. Runtime dependencies install automatically. The ESM package contains the public components and helpers, including IconButton; it excludes catalog demos. Its stylesheet includes the foundation, all component styles and Leaflet styles. Import application overrides afterwards; DM Sans is optional.

For source-copy integration, keep all listed paths, import `base.css` once and install the dependencies in the component's Installation tab. Motion may use GSAP; Map uses Leaflet; Tooltip, Popover, Slider and Sheet use Radix; calendars use React DayPicker; File Upload uses React Dropzone. Downloads contain a Vite project with the selected example and required files. Use Node.js 22.18+ in the 22.x line, or 24.11+, and npm. The repository also supports `npm pack` for a local installable archive.

Dedicated TypeScript declarations are not supplied. Next.js and server rendering have not been separately validated; Map requires client-only loading. The source is licensed under Apache-2.0, with third-party notices retained. Demo brands, prices, forms, requests and persistence are examples to connect to your own services.

The catalog documents the current repository. An installed npm release may predate additions shown here. For a component missing from that release, use its source download or install a locally packed archive; a Git push does not publish an npm version. Chart itself uses React and SVG without an external chart library. Its playground also uses Duoop Button, Checkbox, Slider and Popover.

## Start here

- [Home](https://duoop-ui.com/): Introduction to Duoop UI.
- [Component catalog](https://duoop-ui.com/?page=components): All public components.
- [Installation guide](https://duoop-ui.com/?page=installation): npm installation, source copying, CSS imports and dependencies.
- [Page examples](https://duoop-ui.com/?page=examples): Public compositions.

## Components by category

### [Buttons](https://duoop-ui.com/?category=Buttons)

- [Raised button](https://duoop-ui.com/?component=builtin-relief-button): A satisfying press. Six variants, three sizes, and clear action feedback.
- [Reaction Button](https://duoop-ui.com/?component=builtin-reaction-button): Likes, favorites and reactions with a little personality.

### [Forms](https://duoop-ui.com/?category=Forms)

- [Input](https://duoop-ui.com/?component=builtin-input): A considered starting point for every form.
- [Field](https://duoop-ui.com/?component=builtin-field): Labels, help and validation that belong together.
- [Input Group](https://duoop-ui.com/?component=builtin-input-group): Inputs, icons and actions on one continuous surface.
- [Textarea](https://duoop-ui.com/?component=builtin-textarea): Room for longer thoughts, with resize and character counts.
- [Number Field](https://duoop-ui.com/?component=builtin-number-field): Precise numbers with tactile step controls.
- [OTP Field](https://duoop-ui.com/?component=builtin-otp-field): Verification codes with keyboard and paste support.
- [Checkbox](https://duoop-ui.com/?component=builtin-checkbox): One choice or a whole group. Every state feels right.
- [Radio Group](https://duoop-ui.com/?component=builtin-radio-group): One considered choice, from a list to a grid of cards.
- [Switch](https://duoop-ui.com/?component=builtin-switch): Small movements. Clear decisions.
- [Select](https://duoop-ui.com/?component=builtin-select): A familiar choice with grouped options and tactile feedback.
- [Autocomplete](https://duoop-ui.com/?component=builtin-autocomplete): Find the next choice as you type.
- [Slider](https://duoop-ui.com/?component=builtin-slider): One value or a considered range. Continuous control with tactile handles.
- [Calendar](https://duoop-ui.com/?component=builtin-calendar): A day to remember. Standalone single-date and range selection.
- [Date Picker](https://duoop-ui.com/?component=builtin-date-picker): Make a date. A field, a popover and a calendar working together.
- [File Upload](https://duoop-ui.com/?component=builtin-file-upload): A place for your files. Drop, preview, retry and keep moving.

### [Navigation](https://duoop-ui.com/?category=Navigation)

- [Breadcrumb](https://duoop-ui.com/?component=builtin-breadcrumb): A clear path back. Tactile links and a distinct current location.
- [Tabs](https://duoop-ui.com/?component=builtin-tabs): Move between views with a springy, measured indicator.
- [Dropdown Menu](https://duoop-ui.com/?component=builtin-menu): Commands, choices and nested paths, close at hand.
- [Stepper](https://duoop-ui.com/?component=builtin-stepper): A clear path from the first step to the last.
- [Accordion](https://duoop-ui.com/?component=builtin-accordion): Let the details unfold at their own pace.
- [Pagination](https://duoop-ui.com/?component=builtin-pagination): One page at a time. A clear path through larger collections.

### [Cards](https://duoop-ui.com/?category=Cards)

- [Card](https://duoop-ui.com/?component=builtin-card): Composable surfaces with unmistakable depth.
- [Bento Grid](https://duoop-ui.com/?component=builtin-bento-grid): A little structure for your next big idea.
- [Cards Carousel](https://duoop-ui.com/?component=builtin-cards-carousel): A tactile collection of stories to explore.
- [Testimonials](https://duoop-ui.com/?component=builtin-testimonials): Give good words a considered place.
- [Folder](https://duoop-ui.com/?component=builtin-folder): A tabbed folder that unfolds into selectable documents.

### [Feedback](https://duoop-ui.com/?category=Feedback)

- [Badge](https://duoop-ui.com/?component=builtin-badge): Compact context, considered colors and visible contours.
- [Dialog](https://duoop-ui.com/?component=builtin-dialog): Make space for a focused decision.
- [Toast](https://duoop-ui.com/?component=builtin-toast): Timely confirmations, useful actions and honest outcomes.
- [Progress](https://duoop-ui.com/?component=builtin-progress): Measured movement, from the first byte to done.
- [Tooltip](https://duoop-ui.com/?component=builtin-tooltip): Context at the right moment. Focus, hover, timing and collision-aware hints.
- [Popover](https://duoop-ui.com/?component=builtin-popover): A little more room, right next to the action. Non-modal by design.
- [Sheet](https://duoop-ui.com/?component=builtin-sheet): Bring the details in. A focused panel from any side of the screen.
- [Skeleton](https://duoop-ui.com/?component=builtin-skeleton): Keep the shape of what comes next. Quiet structural loading states.
- [Alert](https://duoop-ui.com/?component=builtin-alert): A message that stays. Clear context, useful actions and considered tones.
- [Achievement](https://duoop-ui.com/?component=builtin-achievement): Caller-owned milestones, progress, collectible badges and unlock announcements.

### [Motion](https://duoop-ui.com/?category=Motion)

- [Kinetic Type](https://duoop-ui.com/?component=builtin-kinetic-type): Typography with an entrance worth watching.
- [Shuffle Deck](https://duoop-ui.com/?component=builtin-shuffle-deck): A deck of perspectives, ready for a shuffle.
- [Text Loop](https://duoop-ui.com/?component=builtin-text-loop): Words with a rhythm, on sculpted ribbons.

### [Display](https://duoop-ui.com/?category=Display)

- [Separator](https://duoop-ui.com/?component=builtin-separator): A quiet break. Horizontal and vertical rules between related spaces.
- [Avatar](https://duoop-ui.com/?component=builtin-avatar): Familiar faces in tactile frames.
- [Map](https://duoop-ui.com/?component=builtin-map): Neutral cartography with useful, tactile controls.
- [Table](https://duoop-ui.com/?component=builtin-table): The work, at a glance. Semantic tables and useful data interactions.
- [Chart](https://duoop-ui.com/?component=builtin-chart): Area, line and grouped bar charts with missing-value gaps, negative values, keyboard exploration and a data table. The playground's Our data popover edits labels and values locally; Apply data updates the preview and Reset restores demo data.

## Complete page

- [Outdoor adventure landing page](https://duoop-ui.com/?page=examples&example=landing): Tourism composition with excursion choices, an FAQ, an adventure dialog, source files and a runnable download. This is the single public page example. SettingsPage.jsx remains a source-only example in the repository.

## Source repository

- [Duoop-UI on GitHub](https://github.com/gus-rlin/Duoop-UI): README, contribution guide, design guidelines, validation scope and Apache-2.0 license.

Component identity is carried by the `component` query parameter; `category`, `page` and `example` select other public content. The `tab` parameter selects a view of the same documentation. Search results are not canonical catalog pages.