# Gear5 UI > Open-source React components for slow connections, different languages, and keyboard navigation. Browse live demos, copy the source, and make it yours. 210 copy-paste React components and 11 shared primitives. No runtime packages beyond React and React DOM. MIT licensed. Source: https://github.com/7se7en72025/gear5-ui Getting started: https://gear5-ui.vercel.app/getting-started Prerequisites: React, React DOM, Tailwind CSS, and configured @/ import aliases. Components are installed with the shadcn CLI, which copies the source into the consuming project. There is no npm package to depend on. Every component is verified in CI on ten axes: performance (a gzipped size budget per tier), accessibility (axe over the documented fixture), internationalisation (direction, calendar, numbering system resolved from the locale tag), privacy (no fetch, XHR, sendBeacon, or fingerprinting APIs), security (no dangerouslySetInnerHTML, eval, or innerHTML assignment), resilience, offline behaviour, SSR safety (rendered through react-dom/server), sensory safety (animation guarded by prefers-reduced-motion), and supply chain (external imports are restricted to React and React DOM). Conventions that apply to every component: - Translation is application-owned: supply translated labels where supported. - Locale-aware components use logical layout and Intl formatting. - Wrap the app in LocaleProvider (from https://gear5-ui.vercel.app/r/use-locale.json) to make direction, calendar, and number formatting follow the user's locale. ## Feedback & status - AsyncBoundary (async-boundary): Loading, error, empty, and offline states — announced, focus-managed, and shift-free. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/async-boundary.json docs: https://gear5-ui.vercel.app/components/async-boundary - ConnectionStatus (connection-status): A live banner for offline, restored, and constrained connections. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/connection-status.json docs: https://gear5-ui.vercel.app/components/connection-status - ErrorBoundary (error-boundary): Contains a render crash to its own subtree instead of the whole page, with a focusable, announced fallback. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/error-boundary.json docs: https://gear5-ui.vercel.app/components/error-boundary - Badge (badge): A small status label where color never carries meaning alone. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/badge.json docs: https://gear5-ui.vercel.app/components/badge - StatusDot (status-dot): A coloured status indicator with an always-present text label. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/status-dot.json docs: https://gear5-ui.vercel.app/components/status-dot - Alert (alert): A static in-flow message, polite or assertive by tone. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/alert.json docs: https://gear5-ui.vercel.app/components/alert - ProgressBar (progress-bar): A determinate or indeterminate progress bar with a real accessible value. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/progress-bar.json docs: https://gear5-ui.vercel.app/components/progress-bar - Spinner (spinner): A loading indicator announced once via role=status. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/spinner.json docs: https://gear5-ui.vercel.app/components/spinner - Skeleton (skeleton): A placeholder shape that reserves space for content that has not arrived yet. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/skeleton.json docs: https://gear5-ui.vercel.app/components/skeleton - EmptyState (empty-state): A placeholder for a list, table, or panel with nothing in it yet. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/empty-state.json docs: https://gear5-ui.vercel.app/components/empty-state - ToastProvider / useToast (toast): A toast queue with correctly-timed live regions. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/toast.json docs: https://gear5-ui.vercel.app/components/toast - Countdown (countdown): A live countdown with locale-correct digits. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/countdown.json docs: https://gear5-ui.vercel.app/components/countdown - LiveRegion (live-region): A declarative live region for components that track their own message as state. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/live-region.json docs: https://gear5-ui.vercel.app/components/live-region - SaveStatus (save-status): The autosave indicator, announced — and distinguishing 'failed' from 'offline'. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/save-status.json docs: https://gear5-ui.vercel.app/components/save-status - RetryButton (retry-button): A retry control with visible exponential backoff that stays disabled while offline. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/retry-button.json docs: https://gear5-ui.vercel.app/components/retry-button - StaleDataNotice (stale-data-notice): Tells the reader how old the data is, and says it differently when offline explains why. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/stale-data-notice.json docs: https://gear5-ui.vercel.app/components/stale-data-notice - Snackbar (snackbar): Temporary bottom notification with action button and auto-dismiss. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/snackbar.json docs: https://gear5-ui.vercel.app/components/snackbar - InlineAlert (inline-alert): Contextual message embedded within content flow. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/inline-alert.json docs: https://gear5-ui.vercel.app/components/inline-alert - Banner (banner): Site-wide announcement banner with dismiss and persist. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/banner.json docs: https://gear5-ui.vercel.app/components/banner - LoadingSkeleton (loading-skeleton): Animated placeholder shapes for content loading states. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/loading-skeleton.json docs: https://gear5-ui.vercel.app/components/loading-skeleton - ProgressCircular (progress-circular): Circular progress indicator with accessible value. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/progress-circular.json docs: https://gear5-ui.vercel.app/components/progress-circular - StatusBadge (status-badge): Small coloured status indicator with text label. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/status-badge.json docs: https://gear5-ui.vercel.app/components/status-badge - OnlineIndicator (online-indicator): Pulsing dot showing online presence status. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/online-indicator.json docs: https://gear5-ui.vercel.app/components/online-indicator - TypingIndicator (typing-indicator): Animated dots indicating someone is typing. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/typing-indicator.json docs: https://gear5-ui.vercel.app/components/typing-indicator - NotificationBell (notification-bell): Bell icon with unread count badge and dropdown panel. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/notification-bell.json docs: https://gear5-ui.vercel.app/components/notification-bell - UnreadDot (unread-dot): Small dot indicator for unread items. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/unread-dot.json docs: https://gear5-ui.vercel.app/components/unread-dot - ErrorPage (error-page): Full-page error display with retry action and home link. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/error-page.json docs: https://gear5-ui.vercel.app/components/error-page - MaintenanceBanner (maintenance-banner): Scheduled maintenance notice with countdown timer. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/maintenance-banner.json docs: https://gear5-ui.vercel.app/components/maintenance-banner - RateLimitNotice (rate-limit-notice): Warning when API rate limit is approaching or exceeded. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/rate-limit-notice.json docs: https://gear5-ui.vercel.app/components/rate-limit-notice - CooldownTimer (cooldown-timer): Countdown until an action becomes available again. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/cooldown-timer.json docs: https://gear5-ui.vercel.app/components/cooldown-timer ## Media & layout - AdaptiveImage (adaptive-image): An image that defers its own download on Save-Data and 2G-class connections. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/adaptive-image.json docs: https://gear5-ui.vercel.app/components/adaptive-image - Divider (divider): A horizontal or vertical rule, with an optional inline label. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/divider.json docs: https://gear5-ui.vercel.app/components/divider - Container (container): A centred, max-width content column. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/container.json docs: https://gear5-ui.vercel.app/components/container - CopyButton (copy-button): Copies to the clipboard and announces success. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/copy-button.json docs: https://gear5-ui.vercel.app/components/copy-button - ShareButton (share-button): Web Share API with a plain-link fallback. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/share-button.json docs: https://gear5-ui.vercel.app/components/share-button - LazyMount (lazy-mount): Defers mounting expensive children until visible, sooner on good connections. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/lazy-mount.json docs: https://gear5-ui.vercel.app/components/lazy-mount - PrintButton (print-button): A button that prints the page. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/print-button.json docs: https://gear5-ui.vercel.app/components/print-button - AudioPlayer (audio-player): Audio playback controls with waveform visualization. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/audio-player.json docs: https://gear5-ui.vercel.app/components/audio-player - VideoPlayer (video-player): Video player with custom controls and subtitle support. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/video-player.json docs: https://gear5-ui.vercel.app/components/video-player - ImageGallery (image-gallery): Lightbox gallery with keyboard navigation and zoom. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/image-gallery.json docs: https://gear5-ui.vercel.app/components/image-gallery - Carousel (carousel): Swipeable content carousel with auto-play and indicators. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/carousel.json docs: https://gear5-ui.vercel.app/components/carousel - BeforeAfter (before-after): Draggable slider comparing two images side by side. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/before-after.json docs: https://gear5-ui.vercel.app/components/before-after - QrCode (qr-code): QR code generator with download and copy options. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/qr-code.json docs: https://gear5-ui.vercel.app/components/qr-code - IconGrid (icon-grid): Selectable icon grid with search and category filtering. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/icon-grid.json docs: https://gear5-ui.vercel.app/components/icon-grid - EmojiPicker (emoji-picker): Categorised emoji picker with search and skin tone selection. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/emoji-picker.json docs: https://gear5-ui.vercel.app/components/emoji-picker - ColorSwatch (color-swatch): Selectable colour swatch with accessible name and value. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/color-swatch.json docs: https://gear5-ui.vercel.app/components/color-swatch - FontPreview (font-preview): Typeface preview with size and weight controls. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/font-preview.json docs: https://gear5-ui.vercel.app/components/font-preview - VideoEmbed (video-embed): Lazy-loaded video embed with privacy-friendly placeholder. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/video-embed.json docs: https://gear5-ui.vercel.app/components/video-embed - ResponsiveGrid (responsive-grid): CSS grid that adapts columns based on container width. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/responsive-grid.json docs: https://gear5-ui.vercel.app/components/responsive-grid - MasonryLayout (masonry-layout): Variable-height masonry grid with load-more support. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/masonry-layout.json docs: https://gear5-ui.vercel.app/components/masonry-layout - StackLayout (stack-layout): Vertical or horizontal stacking with consistent spacing. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/stack-layout.json docs: https://gear5-ui.vercel.app/components/stack-layout - AspectRatio (aspect-ratio): Container that maintains a fixed aspect ratio. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/aspect-ratio.json docs: https://gear5-ui.vercel.app/components/aspect-ratio - ClampText (clamp-text): Multi-line text truncation with expand toggle. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/clamp-text.json docs: https://gear5-ui.vercel.app/components/clamp-text - InfiniteList (infinite-list): Auto-loading list that fetches more items near the bottom. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/infinite-list.json docs: https://gear5-ui.vercel.app/components/infinite-list - VirtualGrid (virtual-grid): Windowed grid for rendering thousands of items efficiently. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/virtual-grid.json docs: https://gear5-ui.vercel.app/components/virtual-grid - ResponsiveContainer (responsive-container): Container that adapts layout based on breakpoint. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/responsive-container.json docs: https://gear5-ui.vercel.app/components/responsive-container - CardGroup (card-group): Grid of cards with consistent spacing and alignment. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/card-group.json docs: https://gear5-ui.vercel.app/components/card-group - SplitPane (split-pane): Resizable two-panel layout with draggable divider. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/split-pane.json docs: https://gear5-ui.vercel.app/components/split-pane - AccordionNested (accordion-nested): Accordion supporting multiple levels of nested sections. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/accordion-nested.json docs: https://gear5-ui.vercel.app/components/accordion-nested - CollapsiblePanel (collapsible-panel): Single collapsible content panel with smooth animation. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/collapsible-panel.json docs: https://gear5-ui.vercel.app/components/collapsible-panel - AspectCard (aspect-card): Card that maintains a fixed aspect ratio for media content. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/aspect-card.json docs: https://gear5-ui.vercel.app/components/aspect-card - FeaturedCard (featured-card): Highlighted card with image, title, and description. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/featured-card.json docs: https://gear5-ui.vercel.app/components/featured-card - PricingCard (pricing-card): Pricing tier display with features list and CTA button. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/pricing-card.json docs: https://gear5-ui.vercel.app/components/pricing-card - TestimonialCard (testimonial-card): Customer quote with avatar, name, and role. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/testimonial-card.json docs: https://gear5-ui.vercel.app/components/testimonial-card - HeroSection (hero-section): Full-width hero with heading, subtext, and call-to-action. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/hero-section.json docs: https://gear5-ui.vercel.app/components/hero-section - CtaBand (cta-band): Call-to-action banner with heading and action button. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/cta-band.json docs: https://gear5-ui.vercel.app/components/cta-band - DividerSection (divider-section): Content section with decorative divider between segments. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/divider-section.json docs: https://gear5-ui.vercel.app/components/divider-section - ContainerNarrow (container-narrow): Narrow-centred content column for reading-focused layouts. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/container-narrow.json docs: https://gear5-ui.vercel.app/components/container-narrow ## Forms & input - Field (field): A text field with label, description, and error wired to assistive technology. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/field.json docs: https://gear5-ui.vercel.app/components/field - ResilientForm (resilient-form): A form that keeps drafts, explains uncertain submissions, and gives errors a focusable summary. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/resilient-form.json docs: https://gear5-ui.vercel.app/components/resilient-form - Switch (switch): A binary toggle built on role=switch, not a disguised checkbox. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/switch.json docs: https://gear5-ui.vercel.app/components/switch - Checkbox (checkbox): A checkbox with a real, clickable, bound label. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/checkbox.json docs: https://gear5-ui.vercel.app/components/checkbox - RadioGroup (radio-group): A fieldset/legend group of real radio inputs. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/radio-group.json docs: https://gear5-ui.vercel.app/components/radio-group - Slider (slider): A native range input with an RTL-correct thumb direction. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/slider.json docs: https://gear5-ui.vercel.app/components/slider - Rating (rating): A star rating, read-only or editable, announced as one value. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/rating.json docs: https://gear5-ui.vercel.app/components/rating - SearchField (search-field): A search input with a clear button that returns focus correctly. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/search-field.json docs: https://gear5-ui.vercel.app/components/search-field - TagInput (tag-input): A free-text tag list that announces additions and removals. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/tag-input.json docs: https://gear5-ui.vercel.app/components/tag-input - PasswordField (password-field): A password field with an accessible visibility toggle and strength meter. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/password-field.json docs: https://gear5-ui.vercel.app/components/password-field - OtpInput (otp-input): One-time-code entry wired for platform SMS autofill. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/otp-input.json docs: https://gear5-ui.vercel.app/components/otp-input - NumberField (number-field): A numeric field with increment/decrement buttons for motor-impaired users. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/number-field.json docs: https://gear5-ui.vercel.app/components/number-field - HoneypotField (honeypot-field): A bot trap invisible to real users without trapping keyboard or screen reader users. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/honeypot-field.json docs: https://gear5-ui.vercel.app/components/honeypot-field - Select (select): A native select — fully accessible, in every language, at zero extra bytes. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/select.json docs: https://gear5-ui.vercel.app/components/select - FileUpload (file-upload): A drag-and-drop zone that is a real keyboard-activatable button first. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/file-upload.json docs: https://gear5-ui.vercel.app/components/file-upload - Calendar (calendar): A month grid in the reader's own calendar system and week start. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/calendar.json docs: https://gear5-ui.vercel.app/components/calendar - TimeField (time-field): A native time input matching the platform's own 12/24-hour convention. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/time-field.json docs: https://gear5-ui.vercel.app/components/time-field - Combobox (combobox): A searchable single-select following the ARIA combobox pattern. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/combobox.json docs: https://gear5-ui.vercel.app/components/combobox - MultiSelect (multi-select): A real multi-select control rendered as removable chips plus toggle buttons. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/multi-select.json docs: https://gear5-ui.vercel.app/components/multi-select - NameFields (name-fields): Given and family name inputs, ordered the way the reader's locale orders them. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/name-fields.json docs: https://gear5-ui.vercel.app/components/name-fields - AddressFields (address-fields): An address form whose field order and required fields follow the country being addressed. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/address-fields.json docs: https://gear5-ui.vercel.app/components/address-fields - SegmentedControl (segmented-control): A real radiogroup with roving tabindex and direction-aware arrow keys. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/segmented-control.json docs: https://gear5-ui.vercel.app/components/segmented-control - CharacterCounter (character-counter): A character counter that counts graphemes, so one emoji costs one, not eleven. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/character-counter.json docs: https://gear5-ui.vercel.app/components/character-counter - CurrencyField (currency-field): A money input that parses the locale's own separators, so "1.234,56" means what a German user meant. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/currency-field.json docs: https://gear5-ui.vercel.app/components/currency-field - UnitField (unit-field): A measurement input shown in the reader's units and always stored in metric. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/unit-field.json docs: https://gear5-ui.vercel.app/components/unit-field - TimezoneSelect (timezone-select): A timezone picker labelled in the reader's language and ordered by current offset. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/timezone-select.json docs: https://gear5-ui.vercel.app/components/timezone-select - ErrorSummary (error-summary): The focusable list of what went wrong, at the top of a form — usable with any form library. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/error-summary.json docs: https://gear5-ui.vercel.app/components/error-summary - PasswordStrength (password-strength): Visual password strength meter with labelled feedback. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/password-strength.json docs: https://gear5-ui.vercel.app/components/password-strength - PhoneNumberField (phone-number-field): Phone input with country code selector and locale-aware formatting. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/phone-number-field.json docs: https://gear5-ui.vercel.app/components/phone-number-field - CreditCardField (credit-card-field): Credit card number, expiry, and CVC inputs with auto-advance. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/credit-card-field.json docs: https://gear5-ui.vercel.app/components/credit-card-field - PinInput (pin-input): Separate digit fields for PIN entry with auto-focus forwarding. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/pin-input.json docs: https://gear5-ui.vercel.app/components/pin-input - ColorPicker (color-picker): HSL/RGB color picker with accessible contrast preview. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/color-picker.json docs: https://gear5-ui.vercel.app/components/color-picker - DateRangePicker (date-range-picker): Dual-calendar date range selection with locale-aware formatting. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/date-range-picker.json docs: https://gear5-ui.vercel.app/components/date-range-picker - CountryPicker (country-picker): Searchable country selector with flag icons and locale names. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/country-picker.json docs: https://gear5-ui.vercel.app/components/country-picker - SignaturePad (signature-pad): Canvas-based signature capture with undo and clear. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/signature-pad.json docs: https://gear5-ui.vercel.app/components/signature-pad - RatingInput (rating-input): Editable star rating with keyboard support and live value. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/rating-input.json docs: https://gear5-ui.vercel.app/components/rating-input - SliderRange (slider-range): Dual-thumb range slider with locale-formatted values. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/slider-range.json docs: https://gear5-ui.vercel.app/components/slider-range - FileSizeUpload (file-size-upload): File upload with size limits and human-readable size display. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/file-size-upload.json docs: https://gear5-ui.vercel.app/components/file-size-upload - MultiStepForm (multi-step-form): Wizard form with step validation, draft saving, and progress. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/multi-step-form.json docs: https://gear5-ui.vercel.app/components/multi-step-form - JsonEditor (json-editor): Syntax-highlighted JSON editor with validation feedback. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/json-editor.json docs: https://gear5-ui.vercel.app/components/json-editor - MarkdownEditor (markdown-editor): Split-pane markdown editor with live preview. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/markdown-editor.json docs: https://gear5-ui.vercel.app/components/markdown-editor - TagsInput (tags-input): Tag entry with autocomplete suggestions and duplicate prevention. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/tags-input.json docs: https://gear5-ui.vercel.app/components/tags-input - OtpTimer (otp-timer): Countdown timer for OTP resend with accessible remaining time. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/otp-timer.json docs: https://gear5-ui.vercel.app/components/otp-timer - SearchAutocomplete (search-autocomplete): Search input with async autocomplete dropdown results. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/search-autocomplete.json docs: https://gear5-ui.vercel.app/components/search-autocomplete - QuantityInput (quantity-input): Numeric quantity with increment, decrement, and manual entry. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/quantity-input.json docs: https://gear5-ui.vercel.app/components/quantity-input - ToggleGroup (toggle-group): A group of toggle buttons with single or multi-select mode. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/toggle-group.json docs: https://gear5-ui.vercel.app/components/toggle-group - CodeInput (code-input): Monospace input for code snippets with tab indentation support. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/code-input.json docs: https://gear5-ui.vercel.app/components/code-input - UrlInput (url-input): URL input with protocol prefix and validation feedback. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/url-input.json docs: https://gear5-ui.vercel.app/components/url-input - EmailChips (email-chips): Email address entry rendered as removable chips with validation. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/email-chips.json docs: https://gear5-ui.vercel.app/components/email-chips - RangeCalendar (range-calendar): Multi-month calendar for selecting date ranges. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/range-calendar.json docs: https://gear5-ui.vercel.app/components/range-calendar - TimeRange (time-range): Start and end time selection with overlap prevention. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/time-range.json docs: https://gear5-ui.vercel.app/components/time-range - CurrencyInput (currency-input): Numeric input with currency symbol and locale formatting. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/currency-input.json docs: https://gear5-ui.vercel.app/components/currency-input ## Accessibility & preferences - VisuallyHidden (visually-hidden): Content for assistive technology only, removed from the visual layout without leaving the accessibility tree. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/visually-hidden.json docs: https://gear5-ui.vercel.app/components/visually-hidden - Kbd (kbd): A single keyboard key, styled and marked up as one. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/kbd.json docs: https://gear5-ui.vercel.app/components/kbd - ThemeToggle (theme-toggle): A light/dark/system toggle that persists its choice. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/theme-toggle.json docs: https://gear5-ui.vercel.app/components/theme-toggle - ConsentBanner (consent-banner): A cookie banner where decline is exactly as easy to press as accept. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/consent-banner.json docs: https://gear5-ui.vercel.app/components/consent-banner - ReducedMotionToggle (reduced-motion-toggle): An in-page opt-in to reduced motion, for people who never touch OS settings. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/reduced-motion-toggle.json docs: https://gear5-ui.vercel.app/components/reduced-motion-toggle - DataSaverToggle (data-saver-toggle): A manual override for the library's constrained-connection behaviour. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/data-saver-toggle.json docs: https://gear5-ui.vercel.app/components/data-saver-toggle - AccessibilityMenu (accessibility-menu): One panel for larger text and higher contrast. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/accessibility-menu.json docs: https://gear5-ui.vercel.app/components/accessibility-menu - TextSizeControl (text-size-control): In-page text scaling for low-vision readers, persisted and announced. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/text-size-control.json docs: https://gear5-ui.vercel.app/components/text-size-control - Heading (heading-level): Headings that know their own level, so a reusable component never breaks the page outline. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/heading-level.json docs: https://gear5-ui.vercel.app/components/heading-level ## Data display - Avatar (avatar): A person's picture, or script-aware initials when there is none. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/avatar.json docs: https://gear5-ui.vercel.app/components/avatar - AvatarGroup (avatar-group): An overlapping avatar stack with an accessible overflow indicator. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/avatar-group.json docs: https://gear5-ui.vercel.app/components/avatar-group - Chip (chip): A dismissible tag with a real accessible name for its remove action. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/chip.json docs: https://gear5-ui.vercel.app/components/chip - Card (card): A bordered content container with header, title, and description parts. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/card.json docs: https://gear5-ui.vercel.app/components/card - Accordion (accordion): Collapsible sections built on the WAI-ARIA Accordion pattern. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/accordion.json docs: https://gear5-ui.vercel.app/components/accordion - Timeline (timeline): A vertical event sequence marked up as a real ordered list. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/timeline.json docs: https://gear5-ui.vercel.app/components/timeline - StatCard (stat-card): A single KPI figure with an optional trend line. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/stat-card.json docs: https://gear5-ui.vercel.app/components/stat-card - CodeBlock (code-block): A code sample, always left-to-right regardless of page direction, with copy. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/code-block.json docs: https://gear5-ui.vercel.app/components/code-block - QuoteBlock (quote-block): A real blockquote/cite pair, not a styled div. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/quote-block.json docs: https://gear5-ui.vercel.app/components/quote-block - VirtualList (virtual-list): Renders only visible rows plus overscan, for smooth scrolling on low-end devices. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/virtual-list.json docs: https://gear5-ui.vercel.app/components/virtual-list - Table (table): A real, sortable table screen readers can navigate by row and column. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/table.json docs: https://gear5-ui.vercel.app/components/table - InfiniteScroll (infinite-scroll): Loads more content near the viewport, and refuses to on constrained connections. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/infinite-scroll.json docs: https://gear5-ui.vercel.app/components/infinite-scroll - MasonryGrid (masonry-grid): A zero-JS masonry layout via CSS columns. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/masonry-grid.json docs: https://gear5-ui.vercel.app/components/masonry-grid - Disclosure (disclosure): A single collapsible section. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/disclosure.json docs: https://gear5-ui.vercel.app/components/disclosure - TreeView (tree-view): A disclosure tree following the ARIA tree pattern, with one tab stop and RTL-aware arrows. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/tree-view.json docs: https://gear5-ui.vercel.app/components/tree-view - SortableTable (sortable-table): A table that sorts text with Intl.Collator, so accents and non-Latin scripts file correctly. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/sortable-table.json docs: https://gear5-ui.vercel.app/components/sortable-table - DataGrid (data-grid): Full-featured data grid with sorting, filtering, and pagination. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/data-grid.json docs: https://gear5-ui.vercel.app/components/data-grid - KanbanBoard (kanban-board): Drag-and-drop kanban board with accessible column management. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/kanban-board.json docs: https://gear5-ui.vercel.app/components/kanban-board - CalendarView (calendar-view): Month, week, and day calendar views for event display. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/calendar-view.json docs: https://gear5-ui.vercel.app/components/calendar-view - TimelineAdvanced (timeline-advanced): Interactive timeline with expandable events and filtering. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/timeline-advanced.json docs: https://gear5-ui.vercel.app/components/timeline-advanced - OrgChart (org-chart): Hierarchical organization chart with collapsible branches. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/org-chart.json docs: https://gear5-ui.vercel.app/components/org-chart - Sparkline (sparkline): Inline mini chart for trend visualization. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/sparkline.json docs: https://gear5-ui.vercel.app/components/sparkline - MetricCard (metric-card): KPI display card with value, label, and trend indicator. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/metric-card.json docs: https://gear5-ui.vercel.app/components/metric-card - ComparisonTable (comparison-table): Side-by-side feature comparison with highlighted differences. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/comparison-table.json docs: https://gear5-ui.vercel.app/components/comparison-table - FaqAccordion (faq-accordion): Expandable FAQ list with search and category filtering. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/faq-accordion.json docs: https://gear5-ui.vercel.app/components/faq-accordion - ChangelogView (changelog-view): Versioned changelog with date grouping and category tags. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/changelog-view.json docs: https://gear5-ui.vercel.app/components/changelog-view - ActivityFeed (activity-feed): Chronological activity stream with relative timestamps. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/activity-feed.json docs: https://gear5-ui.vercel.app/components/activity-feed - Leaderboard (leaderboard): Ranked list with position, score, and avatar display. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/leaderboard.json docs: https://gear5-ui.vercel.app/components/leaderboard - StatGrid (stat-grid): Grid layout for displaying multiple KPI metrics. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/stat-grid.json docs: https://gear5-ui.vercel.app/components/stat-grid - Scorecard (scorecard): Game or assessment score display with breakdown. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/scorecard.json docs: https://gear5-ui.vercel.app/components/scorecard ## Internationalisation - RelativeTime (relative-time): Live, localised relative time ("3 days ago") with the exact timestamp always available. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/relative-time.json docs: https://gear5-ui.vercel.app/components/relative-time - PluralText (plural-text): Grammatically correct plural forms via Intl.PluralRules, not an English if/else. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/plural-text.json docs: https://gear5-ui.vercel.app/components/plural-text - ListText (list-text): "A, B, and C" formatted correctly for the current locale via Intl.ListFormat. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/list-text.json docs: https://gear5-ui.vercel.app/components/list-text - CurrencyText (currency-text): Locale- and currency-correct money formatting via Intl.NumberFormat. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/currency-text.json docs: https://gear5-ui.vercel.app/components/currency-text - LocaleSwitcher (locale-switcher): A native, per-option lang-tagged language switcher. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/locale-switcher.json docs: https://gear5-ui.vercel.app/components/locale-switcher - DirectionalIcon (directional-icon): Mirrors a directional icon (arrows, chevrons) under RTL. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/directional-icon.json docs: https://gear5-ui.vercel.app/components/directional-icon - UnitText (unit-text): Locale-correct unit formatting (distance, data, temperature) via Intl.NumberFormat. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/unit-text.json docs: https://gear5-ui.vercel.app/components/unit-text - CompactNumber (compact-number): A large number shortened the way the reader's locale shortens it — 1.2K, 1.2万, 12 lakh. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/compact-number.json docs: https://gear5-ui.vercel.app/components/compact-number - BytesText (bytes-text): A file size with a translated, locale-positioned unit, in decimal or binary. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/bytes-text.json docs: https://gear5-ui.vercel.app/components/bytes-text - OrdinalText (ordinal-text): An ordinal via Intl.PluralRules — correct at 11th, and silent where suffixes do not apply. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/ordinal-text.json docs: https://gear5-ui.vercel.app/components/ordinal-text - ReadTime (read-time): Estimated reading time, in the locale's own digits and word order. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/read-time.json docs: https://gear5-ui.vercel.app/components/read-time - BidiText (bidi-text): Isolates user-controlled text so a mixed-direction sentence does not reorder around it. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/bidi-text.json docs: https://gear5-ui.vercel.app/components/bidi-text - TruncateText (truncate-text): Truncation that counts user-perceived characters, so emoji and Devanagari clusters are never split. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/truncate-text.json docs: https://gear5-ui.vercel.app/components/truncate-text - DateRangeText (date-range-text): A date range formatted as one range, collapsing shared parts in the locale's own calendar. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/date-range-text.json docs: https://gear5-ui.vercel.app/components/date-range-text ## Overlays - Tooltip (tooltip): A hover/focus label bound with aria-describedby, keyboard accessible. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/tooltip.json docs: https://gear5-ui.vercel.app/components/tooltip - Portal (portal): Renders children into document.body, deferred to a client-only mount. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/portal.json docs: https://gear5-ui.vercel.app/components/portal - Dialog (dialog): A modal with a focus trap, Escape to close, and focus returned on exit. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/dialog.json docs: https://gear5-ui.vercel.app/components/dialog - Drawer (drawer): A modal panel anchored to a screen edge, using logical start/end sides. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/drawer.json docs: https://gear5-ui.vercel.app/components/drawer - Popover (popover): A disclosure panel that closes on outside click and Escape. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/popover.json docs: https://gear5-ui.vercel.app/components/popover - Menu (menu): A dropdown menu following the WAI-ARIA Menu Button pattern. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/menu.json docs: https://gear5-ui.vercel.app/components/menu - ContextMenu (context-menu): A right-click menu also reachable via the keyboard Menu key. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/context-menu.json docs: https://gear5-ui.vercel.app/components/context-menu ## Navigation - Tabs (tabs): Keyboard-navigable tabs whose arrow-key direction flips correctly under RTL. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/tabs.json docs: https://gear5-ui.vercel.app/components/tabs - Breadcrumb (breadcrumb): A landmark trail with the current page marked aria-current. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/breadcrumb.json docs: https://gear5-ui.vercel.app/components/breadcrumb - Pagination (pagination): Page controls with locale-correct numerals. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/pagination.json docs: https://gear5-ui.vercel.app/components/pagination - Stepper (stepper): A wizard's progress, with each step's status in its accessible name. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/stepper.json docs: https://gear5-ui.vercel.app/components/stepper - BackToTop (back-to-top): Appears after scrolling a screenful; honours reduced motion. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/back-to-top.json docs: https://gear5-ui.vercel.app/components/back-to-top - ScrollProgress (scroll-progress): A reading-progress bar with a real accessible value. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/scroll-progress.json docs: https://gear5-ui.vercel.app/components/scroll-progress - TableOfContents (table-of-contents): A jump-list that tracks the visible heading via IntersectionObserver. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/table-of-contents.json docs: https://gear5-ui.vercel.app/components/table-of-contents - KeyboardShortcutsHelp (keyboard-shortcuts-help): A shortcut reference dialog inheriting the focus trap every overlay gets. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/keyboard-shortcuts-help.json docs: https://gear5-ui.vercel.app/components/keyboard-shortcuts-help - CommandPalette (command-palette): A keyboard-first fuzzy launcher following the ARIA combobox pattern. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/command-palette.json docs: https://gear5-ui.vercel.app/components/command-palette - Navbar (navbar): A labelled nav landmark with the current page marked aria-current. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/navbar.json docs: https://gear5-ui.vercel.app/components/navbar - Footer (footer): A simple site footer with locale-aware link list. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/footer.json docs: https://gear5-ui.vercel.app/components/footer - Sidebar (sidebar): A landmark navigation column with a logical-side active indicator. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/sidebar.json docs: https://gear5-ui.vercel.app/components/sidebar - SkipLink (skip-link): The page's first focusable element, visible only once focused. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/skip-link.json docs: https://gear5-ui.vercel.app/components/skip-link - LandmarkNav (landmark-nav): Skip links for every landmark, giving sighted keyboard users the rotor screen readers already have. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/landmark-nav.json docs: https://gear5-ui.vercel.app/components/landmark-nav - BottomNav (bottom-nav): Mobile bottom navigation bar with active indicator. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/bottom-nav.json docs: https://gear5-ui.vercel.app/components/bottom-nav - MegaMenu (mega-menu): Full-width dropdown menu with nested link sections. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/mega-menu.json docs: https://gear5-ui.vercel.app/components/mega-menu - TabsVertical (tabs-vertical): Vertical tab list with arrow-key navigation. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/tabs-vertical.json docs: https://gear5-ui.vercel.app/components/tabs-vertical - TreeNav (tree-nav): Hierarchical navigation with expandable tree branches. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/tree-nav.json docs: https://gear5-ui.vercel.app/components/tree-nav - FilterBar (filter-bar): Horizontal filter chips with active count and clear all. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/filter-bar.json docs: https://gear5-ui.vercel.app/components/filter-bar - AnchorNav (anchor-nav): In-page anchor links with scroll-spy active state. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/anchor-nav.json docs: https://gear5-ui.vercel.app/components/anchor-nav - PageHeader (page-header): Page title with optional subtitle, breadcrumbs, and actions. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/page-header.json docs: https://gear5-ui.vercel.app/components/page-header - AppShell (app-shell): Responsive app layout with sidebar, header, and main content areas. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/app-shell.json docs: https://gear5-ui.vercel.app/components/app-shell - DrawerNav (drawer-nav): Slide-out navigation drawer with focus trap and backdrop. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/drawer-nav.json docs: https://gear5-ui.vercel.app/components/drawer-nav - CommandBar (command-bar): Persistent top bar with quick actions and search. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/command-bar.json docs: https://gear5-ui.vercel.app/components/command-bar - FloatingNav (floating-nav): Floating action navigation that appears on scroll. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/floating-nav.json docs: https://gear5-ui.vercel.app/components/floating-nav - StepIndicator (step-indicator): Linear step progress with current, completed, and pending states. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/step-indicator.json docs: https://gear5-ui.vercel.app/components/step-indicator - CategoryTabs (category-tabs): Scrollable category tabs with overflow indicators. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/category-tabs.json docs: https://gear5-ui.vercel.app/components/category-tabs - StickyHeader (sticky-header): Header that pins to top on scroll with shrink animation. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/sticky-header.json docs: https://gear5-ui.vercel.app/components/sticky-header - ScrollSpy (scroll-spy): Tracks visible section and highlights corresponding nav link. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/scroll-spy.json docs: https://gear5-ui.vercel.app/components/scroll-spy - ScrollToTop (scroll-to-top): Button that scrolls to page top with reduced motion support. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/scroll-to-top.json docs: https://gear5-ui.vercel.app/components/scroll-to-top ## Primitives - cn (cn): Zero-dependency class name joiner. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/cn.json - useNetwork (use-network): Observe online state, Save-Data, and connection quality without hydration mismatches. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/use-network.json - Locale facts (locale): Writing direction, calendar, numbering system, and first day of week for any BCP 47 tag. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/locale.json - LocaleProvider / useLocale (use-locale): Share resolved locale facts through a subtree. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/use-locale.json - announce (announce): Shared ARIA live regions that screen readers actually read. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/announce.json - Intl formatters (format): Memoised Intl formatters plus relative-time formatting. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/format.json - Draft storage (draft-storage): Persist in-progress form input, excluding credentials and payment fields. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/draft-storage.json - sanitizeHref (sanitize): Neutralise javascript: and other executable URL schemes before they reach an href or src. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/sanitize.json - useFocusTrap (use-focus-trap): Traps Tab/Shift+Tab inside a container and restores focus on exit — what makes a modal actually modal for keyboard users. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/use-focus-trap.json - useStoredValue (use-stored-value): A localStorage-backed string via useSyncExternalStore, with no wasted render correcting a server-rendered default. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/use-stored-value.json - useHydrated (use-hydrated): True once the client has taken over from server-rendered markup — the useSyncExternalStore replacement for the useEffect 'mounted' idiom. install: npx shadcn@latest add https://gear5-ui.vercel.app/r/use-hydrated.json ## Machine-readable index https://gear5-ui.vercel.app/r/index.json lists every item as JSON.