Dev Design LibraryUtility Components
Dev Design Library indexes 144 utility components from 41 open-source UI libraries, with the most coming from Chakra UI, Kinetics, Lobe UI, Ark UI and Amicro Micro Transitions. Each one links to its page with the source code, a live preview where available, the library license and the install command.
Showing 120 of 144, a mix from every library. Open a library to see all of its components.
Directionshadcn/ui · ReactA provider component that sets the text direction for your application.
PortalMUI / Material UI · React
Client OnlyChakra UI · ReactUsed to render content only on the client side.
Focus TrapHeadless UI · React
Color SwatchReact Spectrum · ReactA ColorSwatch displays a preview of a selected color.
Visually HiddenRadix Themes · React
Client OnlyArk UI · ReactRender content only on the client side.
Preset swatchesReUI · ReactRound label colors to pick from, a plus that opens the full picker, and a live label preview.
Keep Togetherpdfcn · ReactKeep Together PDF component (forme)
Fade DownAmicro Micro Transitions · ReactFade with downward translation.
Color SwatchesLobe UI · ReactDisplays selectable color swatches with an optional picker for custom colors.
color-swatchIntent UI · Reactcolor-swatch
Pull To RefreshbeUI · ReactNative-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.
Connecting Real DataSpectrum UI · ReactWiring any chart to a real source: fetch in an effect, SWR or React Query, server components, and streaming — with…
Font Picker ControlToolcraft · React
SupportPanel UI · React NativeThe screen a person arrives on when they need help.
Command-03 - PaletteShadcn Space · ReactPalette command component with groups and separators
Text Glitch PortalPixel Perfect · ReactRGB split plus scale blur then collapse into clean text.
Focus Breath WidgetOpenSourceUI · React
Circuit BreakerKinetics · HTML/CSSA physical arm throws closed, open, then half-open to probe
Webgl Error BoundaryComponentry · React
Smooth ScrollObsidianUI · React
Client OnlyShark UI · ReactRender content only on the client side.
Orbkit Core (WebGPU)ShaderCN · ReactCore engine for GPU-powered shader orbs using vgpu
Morph SurfaceSona UI · ReactAn unstyled layout primitive that grows, shrinks, clips, and updates the content of one persistent consumer-styled…
Portalsv-efferd · Svelte
Liquid Glassglasscn · ReactLow-level refractive glass wrapper used by liquid-refract components.
Color SwatchesUI Lab · ReactThe ring glides to the color you pick and the color floods the preview from that side.
Safe areaHextaUI · ReactA pointer safe triangle that keeps submenus and flyouts open while the cursor travels diagonally toward them.
Capability GateLocalMode · ReactA true gate: renders its children only when the device meets a stated requirement (e.g. requires="webgpu"), otherwise…
Motion AdjusterCojeev UI · ReactProvides live controls for the shared motion settings and editable body profiles used across the library.
Preset ScopeFLX UI · ReactActivates a preset for a subtree by writing the data-preset attribute. Required by every preset.- Webgl PortalAtelier UI · React
Middle TruncateHalaska UI · React
Command paletteMetal UI · React + SwiftUI⌘K: a 560 frost plate with a 44 field well, sections of 36 rows with matches marked, a raised selected row with a…
DirectionSpaceUI · ReactAccessible Direction primitive component for Space UI.
Aria ItemReScript shadcn · ReScript
Expandable Book Search PaletteCue Foundations · React
Liquid GlassOpaline · ReactThe primitive behind every glass component. Refracts the backdrop through an SVG displacement map, with a frosted…
Image CropperReactFrame · ReactAn image cropper with a draggable, resizable crop box, aspect presets or a circle mask for avatars, keyboard nudging…
Focus Trapark-cn · ReactA shadcn-style focus trap utility built with Ark UI primitives.
Color SwatchChakra UI · ReactUsed to preview a color
PortalHeadless UI · React
Color Swatch PickerReact Spectrum · ReactA ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
EnvironmentArk UI · ReactSet up components for custom environments like iframes, Shadow DOM, or Electron.
Support copilot draftReUI · ReactA drafted support reply with the order and policy lookups behind it, and Regenerate replaying them.
Page Breakpdfcn · ReactPage Break PDF component (forme)
Fade InAmicro Micro Transitions · ReactBasic fade entrance animation.
Config ProviderLobe UI · ReactConfigures library-wide CDN resource resolution and the motion runtime for descendant components.
color-swatch-pickerIntent UI · Reactcolor-swatch-picker
Scroll TobeUI · ReactButton that smooth-scrolls to a target (offset, selector or element) via the active SmoothScroll provider…
Palette ControlToolcraft · React
Transform Box FrameOpenSourceUI · React
Confidence SettleKinetics · HTML/CSSA score overshoots, then settles on the true value
Download TriggerShark UI · ReactTrigger file downloads programmatically.
Drag SelectUI Lab · ReactDraw a box across files to select them, like the desktop.
Chrome AI Download GateLocalMode · ReactThe gate a user sees when a Chrome Built-in AI capability exists but its on-device model has not been fetched yet…
AppearanceCojeev UI · ReactChoose from six coordinated palettes and adjust reading contrast across the application.- Webgl ProviderAtelier UI · React
SmoothSpaceUI · ReactAudio-reactive fluid WebGL orb. Swap ambient, microphone, or file input, change the texture, and toggle grain.
Base ItemReScript shadcn · ReScript
Pixel Perfect Command PaletteCue Foundations · React
Formatark-cn · ReactShadcn-style format utilities (Byte, Time, RelativeTime) built with Ark UI primitives.
Download TriggerChakra UI · ReactUsed to trigger a download of a file.
Tailwind Color SwatchReact Spectrum · React
Focus TrapArk UI · ReactTrap focus within a specified container.
Sectionpdfcn · ReactSection PDF component (forme)
Fade UpAmicro Micro Transitions · ReactFade with upward translation.
Font LoaderLobe UI · ReactThe FontLoader component is used to load fonts from a provided URL. It creates a link element with the given URL and…
Smooth ScrollbeUI · ReactSmooth-scroll provider over Lenis with a useSmoothScroll hook exposing scroll offset, progress and velocity…
Style Guide Color PickerToolcraft · React
Transform Plus FrameOpenSourceUI · React
Elastic LassoKinetics · HTML/CSSDrag a selection field across the constellation
FormatShark UI · ReactFormat numbers, bytes, and time with Intl API.
Spring PlaygroundUI Lab · ReactTune a spring and watch its overshoot and settle, plotted live.
Mode Error BoundaryLocalMode · ReactA React error boundary that isolates a render failure in its subtree: it catches the error, renders a compact…
DirectionCojeev UI · ReactSets a text direction for a subtree and shares it with direction-aware primitives.
Motion EffectSpaceUI · React
Highlightark-cn · ReactA shadcn-style text highlight utility built with Ark UI primitives.
Environment ProviderChakra UI · ReactUsed to render components in iframes, Shadow DOM, or Electron.
Tailwind Color Swatch PickerReact Spectrum · React
FrameArk UI · ReactUsed to render a component in an iframe
Stackpdfcn · ReactStack PDF component (forme)
Scale InAmicro Micro Transitions · ReactScale transition from small to actual size.
FreezeLobe UI · ReactPrevents DOM updates in descendant content through React Suspense, primarily to keep exit animations visually stable.
Popover PositionbeUI · React
Float BobKinetics · HTML/CSSA card hovers and bobs with a shadow that breathes beneath — pure CSS
Image CropperShark UI · ReactCrop and transform images.
PresenceCojeev UI · ReactMotionPresence keeps keyed children mounted for their exits. MotionSurface adds coordinated lifecycle states to an…
Locale Providerark-cn · ReactA shadcn-style locale provider utility built with Ark UI primitives.
ForChakra UI · ReactUsed to loop over an array and render a component for each item.
Vanilla Color SwatchReact Spectrum · React
HighlightArk UI · ReactUsed to emphasize specific words or phrases within a larger body of text.
Keep Togetherpdfcn · ReactKeep Together PDF component (takumi)
Scroll RevealAmicro Micro Transitions · ReactReveal content block as it scrolls into viewport.
Motion ProviderLobe UI · ReactMotionProvider lets you choose which motion component (motion or m) Lobe UI uses.
Focus RelayKinetics · HTML/CSSA shared focus ring leaps between fields with a spring morph
PresenceShark UI · ReactAnimate components on mount and unmount.
Presenceark-cn · ReactA shadcn-style presence utility built with Ark UI primitives.
Format ByteChakra UI · ReactUsed to format bytes to a human-readable format
Vanilla Color Swatch PickerReact Spectrum · React
HotkeysArk UI · ReactRegister keyboard shortcuts, sequences and scopes, and read them back to build a command palette.
Page Breakpdfcn · ReactPage Break PDF component (takumi)
Slide LeftAmicro Micro Transitions · ReactSlide in from right to left.
Theme ProviderLobe UI · ReactThemeProvider is a component that provides a theme to all the child components. It supports theme customization…
Gesture ChordKinetics · HTML/CSSTap the keys in sequence to arm a shortcut
ShowShark UI · ReactConditionally render content based on a boolean value.
Format NumberChakra UI · ReactUsed to format numbers to a specific locale and options
LocaleArk UI · ReactLocale provider for setting the locale and direction of the app.
Sectionpdfcn · ReactSection PDF component (takumi)
Slide RightAmicro Micro Transitions · ReactSlide in from left to right.
Focus ScopeLobe UI · React
Hover Intent GateKinetics · HTML/CSSA deliberate hover quietly unlocks the action
Skip NavShark UI · ReactLets keyboard users skip to main content.
Locale ProviderChakra UI · ReactUsed for globally setting the locale
PresenceArk UI · ReactHelps control the rendering and unmounting of your content based on a given state.
Stackpdfcn · ReactStack PDF component (takumi)
Sticky RevealAmicro Micro Transitions · ReactApple-style scroll-linked side sticky content reveal.
Base Ui Focus ScopeLobe UI · React
Hover LiftKinetics · HTML/CSSSurface rises with a soft cast shadow