Duoop UI — Tactile React components

46 components across 7 categories. Interactive previews, complete JSX and CSS source files, and runnable examples.

Install the library

Install the published npm package in a React 19 application:

npm i duoop-ui

Import components from duoop-ui and the stylesheet duoop-ui/styles.css once. Runtime dependencies install automatically.

You can also copy source files or download a runnable Vite project. Dedicated TypeScript declarations are not supplied.

Buttons

  • Raised button — A satisfying press. Six variants, three sizes, and clear action feedback.
  • Reaction Button — Likes, favorites and reactions with a little personality.

Forms

  • Input — A considered starting point for every form.
  • Field — Labels, help and validation that belong together.
  • Input Group — Inputs, icons and actions on one continuous surface.
  • Textarea — Room for longer thoughts, with resize and character counts.
  • Number Field — Precise numbers with tactile step controls.
  • OTP Field — Verification codes with keyboard and paste support.
  • Checkbox — One choice or a whole group. Every state feels right.
  • Radio Group — One considered choice, from a list to a grid of cards.
  • Switch — Small movements. Clear decisions.
  • Select — A familiar choice with grouped options and tactile feedback.
  • Autocomplete — Find the next choice as you type.
  • Slider — One value or a considered range. Continuous control with tactile handles.
  • Calendar — A day to remember. Standalone single-date and range selection.
  • Date Picker — Make a date. A field, a popover and a calendar working together.
  • File Upload — A place for your files. Drop, preview, retry and keep moving.

Navigation

  • Breadcrumb — A clear path back. Tactile links and a distinct current location.
  • Tabs — Move between views with a springy, measured indicator.
  • Dropdown Menu — Commands, choices and nested paths, close at hand.
  • Stepper — A clear path from the first step to the last.
  • Accordion — Let the details unfold at their own pace.
  • Pagination — One page at a time. A clear path through larger collections.

Cards

  • Card — Composable surfaces with unmistakable depth.
  • Bento Grid — A little structure for your next big idea.
  • Cards Carousel — A tactile collection of stories to explore.
  • Testimonials — Give good words a considered place.
  • Folder — A tabbed folder that unfolds into selectable documents.

Feedback

  • Badge — Compact context, considered colors and visible contours.
  • Dialog — Make space for a focused decision.
  • Toast — Timely confirmations, useful actions and honest outcomes.
  • Progress — Measured movement, from the first byte to done.
  • Achievement — Make progress worth keeping.
  • Tooltip — Context at the right moment. Focus, hover, timing and collision-aware hints.
  • Popover — A little more room, right next to the action. Non-modal by design.
  • Sheet — Bring the details in. A focused panel from any side of the screen.
  • Skeleton — Keep the shape of what comes next. Quiet structural loading states.
  • Alert — A message that stays. Clear context, useful actions and considered tones.

Motion

  • Kinetic Type — Typography with an entrance worth watching.
  • Shuffle Deck — A deck of perspectives, ready for a shuffle.
  • Text Loop — Words with a rhythm, on sculpted ribbons.

Display

  • Chart — Data with character. Customizable curves, areas and tactile bars.
  • Separator — A quiet break. Horizontal and vertical rules between related spaces.
  • Avatar — Familiar faces in tactile frames.
  • Map — Neutral cartography with useful, tactile controls.
  • Table — The work, at a glance. Semantic tables and useful data interactions.

Page example

Outdoor adventure landing page: the current public page example, with source files and a runnable download.

Duoop UI is open source under Apache-2.0.