# yugo.click

> A design system for React with principles, components, and motion finished until they feel inevitable. Every piece is one self-contained file whose only dependency is motion, shipped as a headless hook plus a styled example. Copy the file into your codebase and it is yours. Also known as yugo design.

- Source code: https://github.com/iBz-04/yugo
- FAQ: https://yugo.click/docs/faq
- AI access policy: https://yugo.click/ai.txt
- Full documentation with component source: https://yugo.click/llms-full.txt
- Install for any component: `bun add motion`, then copy the file from its docs page
- Sound is the one exception: its four components also need `@yugo.click/sound`, a zero-dependency Web Audio package, because a synthesis engine should not be copied four times
- shadcn registry: `bunx shadcn@latest add https://yugo.click/r/<name>.json`: catalog at https://yugo.click/r/registry.json

## Foundations

- [The token layer](https://yugo.click/docs/foundations): the fifteen radii that nest, the twelve type steps, two curves, five springs, three materials: everything a component is allowed to spend

## Action Feedback

- [Copy Button](https://yugo.click/docs/copy-button): Copy to tick, width locked, reverts after 2s
- [Loading Button](https://yugo.click/docs/loading-button): Label to state without layout shift
- [Hold to Confirm](https://yugo.click/docs/hold-to-confirm): A guard rail in front of destructive actions
- [Like Burst](https://yugo.click/docs/like-burst): Optimistic like that survives rapid taps
- [Ripple](https://yugo.click/docs/ripple): Touch feedback from the pointer origin
- [Icon Morph](https://yugo.click/docs/icon-morph): Play/pause, menu/close as one mechanism
- [Press Depth](https://yugo.click/docs/press-depth): The feeling that the press landed

## Input

- [Floating Label](https://yugo.click/docs/floating-label): The label makes room instead of disappearing
- [Inline Validation](https://yugo.click/docs/inline-validation): Error message that does not shove the form
- [Password Strength](https://yugo.click/docs/password-strength): Strength read segment by segment
- [OTP Input](https://yugo.click/docs/otp-input): Auto advance, paste, error recovery
- [Tag Input](https://yugo.click/docs/tag-input): Enter adds, backspace highlights then removes
- [Expanding Search](https://yugo.click/docs/expanding-search): Icon to field with focus handled
- [Exploding Input](https://yugo.click/docs/exploding-input): Every keystroke throws a particle off the field
- [Animated Checkbox](https://yugo.click/docs/animated-checkbox): The tick draws itself, the label strikes through

## Async

- [Skeleton Swap](https://yugo.click/docs/skeleton-swap): Skeleton to content with zero layout shift
- [Progress Bar](https://yugo.click/docs/progress-bar): Indeterminate handing over to determinate
- [Load More](https://yugo.click/docs/load-more): Sentinel that loads before you hit the end
- [Streaming Text](https://yugo.click/docs/streaming-text): Token by token with a caret
- [Task Steps](https://yugo.click/docs/task-steps): The system narrates its work

## Notification

- [Live Activity](https://yugo.click/docs/live-activity): The system's ongoing work, worn as a small object
- [Collapsible Banner](https://yugo.click/docs/collapsible-banner): Folds to its title, or lets go entirely
- [Presence Avatars](https://yugo.click/docs/presence-avatars): Join and leave as a layout change
- [Typing Indicator](https://yugo.click/docs/typing-indicator): Someone is writing
- [New Items Pill](https://yugo.click/docs/new-items-pill): New content without stealing your scroll

## Overlay

- [Modal](https://yugo.click/docs/modal): Backdrop, scroll lock, focus trap
- [Popover](https://yugo.click/docs/popover): Knows its origin, flips on collision
- [Tooltip Group](https://yugo.click/docs/tooltip-group): Delayed once, instant after that
- [Command Palette](https://yugo.click/docs/command-palette): Results reorder as you type
- [Drawer](https://yugo.click/docs/drawer): Side panel that keeps its place
- [Context Menu](https://yugo.click/docs/context-menu): Opens from the pointer, not the corner
- [Dropdown](https://yugo.click/docs/dropdown): Active highlight travels between items
- [Morphing Popover](https://yugo.click/docs/morphing-popover): The button becomes the panel, and goes back

## Navigation

- [Tabs](https://yugo.click/docs/tabs): One indicator shared across tabs
- [Segmented Control](https://yugo.click/docs/segmented-control): Thumb slides, label inverts through it
- [Accordion](https://yugo.click/docs/accordion): height auto, done correctly
- [Wizard Steps](https://yugo.click/docs/wizard-steps): Transition knows forward from back
- [Pagination](https://yugo.click/docs/pagination): The window moves, the row does not
- [Tree View](https://yugo.click/docs/tree-view): Disclosure the arrow keys can walk
- [Disclosure](https://yugo.click/docs/disclosure): One panel, measured, not guessed
- [Dynamic Toolbar](https://yugo.click/docs/dynamic-toolbar): A toolbar that becomes the field it opened

## Scroll

- [Sticky Header](https://yugo.click/docs/sticky-header): Condenses as you go down
- [Reading Progress](https://yugo.click/docs/reading-progress): How much is left
- [Scroll Spy](https://yugo.click/docs/scroll-spy): The section you are actually in
- [Snap Carousel](https://yugo.click/docs/snap-carousel): Momentum that lands on a slide
- [Hide on Scroll](https://yugo.click/docs/hide-on-scroll): Toolbar yields to the content

## Data

- [Sortable Table](https://yugo.click/docs/sortable-table): Rows travel to their new order
- [Filter Grid](https://yugo.click/docs/filter-grid): Filtering rearranges, it does not blink
- [Value Flash](https://yugo.click/docs/value-flash): Marks what just changed
- [Poll Results](https://yugo.click/docs/poll-results): The winner lands last

## Gesture

- [Slider Detents](https://yugo.click/docs/slider-detents): Stops you can feel
- [Swipe Deck](https://yugo.click/docs/swipe-deck): A stack you decide through
- [Reorder List](https://yugo.click/docs/reorder-list): The gap the siblings open is the drop target
- [Long Press](https://yugo.click/docs/long-press): Intent confirmed by time, and cancelled by everything else
- [Lightbox](https://yugo.click/docs/lightbox): Zoom that returns where it started
- [Tilt Card](https://yugo.click/docs/tilt-card): The card leans away from the cursor, lit from where you point
- [Cursor](https://yugo.click/docs/cursor): The pointer replaced, inside one frame only

## Content

- [Text Reveal](https://yugo.click/docs/text-reveal): Words arrive in reading order
- [Logo Marquee](https://yugo.click/docs/logo-marquee): Stops when you look at it
- [Blur-up Image](https://yugo.click/docs/blur-up-image): Placeholder resolves into the photo
- [Show More](https://yugo.click/docs/show-more): Height animates, text does not reflow
- [Text Loop](https://yugo.click/docs/text-loop): One line, rotating, in a box that never moves
- [Text Morph](https://yugo.click/docs/text-morph): Letters travel to their new word
- [Text Shimmer](https://yugo.click/docs/text-shimmer): A spinner made of words
- [Text Shimmer Wave](https://yugo.click/docs/text-shimmer-wave): The same wait, read letter by letter
- [Spinning Text](https://yugo.click/docs/spinning-text): A seal, turning at one rate

## Sound

- [Sound Cues](https://yugo.click/docs/sound-cues): Fourteen cues, auditioned before you commit to one
- [Sound Toggle](https://yugo.click/docs/sound-toggle): The preference the whole palette answers to
- [Cue Button](https://yugo.click/docs/cue-button): Press, release, and the outcome, each with its own sound
- [Waveform Scope](https://yugo.click/docs/waveform-scope): What is actually reaching the speakers