Dev Design Library

Sona UI components

A modern UI component library built with React and TailwindCSS to help you build beautiful and accessible web applications faster.

Components
60
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
116
Source
https://github.com/Dinil-Thilakarathne/sona-ui
Website
https://sonaui.com
Install
npx shadcn@latest add @sona-ui/{name}

All Sona UI components

  • Accordion: An accessible Base UI accordion with controlled and uncontrolled state, four visual variants, interruptible disclosure transitions, and…
  • Activity Graph: A keyboard-accessible calendar heatmap with normalized intensity levels and an interruptible shared focus surface.
  • Animated Checkbox: An accessible Base UI checkbox with a drawn checkmark and a restrained animated state change.
  • Animated Dialog: A composable, accessible dialog modal built on Base UI with controlled state, direction-aware enter and exit motion, and reduced-motion…
  • Animated Dropdown: A composable, accessible dropdown menu built on Base UI with controlled state, interruptible hover highlighting, and origin-aware enter…
  • Animated Segmented Control
  • Animated Switch: An interactive iOS-style squish switch built on Base UI Switch primitives, with interruptible press feedback and a shared feedback spring.
  • Animated Tabs: An accessible horizontal tab selector built on Base UI with controlled state, keyboard navigation, disabled items, and a pointer-only…
  • Assignment Cluster
  • Avatar Showcase: A recording-friendly avatar strip with count-aware pacing, deterministic sampling, staggered lanes, and reduced-motion support.
  • BubbleUpButton: The `BubbleUpButton` component provides an interactive button with a fluid "bubble-up" animation effect when hovered. It creates an…
  • Button: A simple action button with subtle press feedback and reduced-motion support.
  • Chip
  • Circular Context Menu: An edge-aware compound context menu that fans a small set of direct actions away from a selected object.
  • Circular Dock Menu: A circular dock menu with controlled state, keyboard dismissal, item callbacks, outside-click handling, and reduced-motion support.
  • Code Block: A plug-and-play syntax-highlighted code block for documentation and developer interfaces.
  • Command Palette Preview
  • Cursor Hover Card
  • Depth Tiles: An infinite layered tile stack with autoplay, depth transitions, and horizontal drag navigation.
  • Dot Orbit Shader: Animated multi-color dots orbiting their cell centers. Supports up to 10 colors with controls for size, spread, and motion. Powered by…
  • Expandable Data Card
  • Expandable Tabs: An accessible Base UI tab selector that expands the active icon into a labeled pill with input-aware layout motion.
  • Expanding Action: A compact action that transforms in place into a short set of related choices with accessible focus management.
  • Fan View: A fanned card menu with controlled state, item callbacks, keyboard dismissal, outside-click handling, and reduced-motion support.
  • Floating Viewer: An in-page media surface that automatically or manually detaches, stays within viewport bounds, snaps to a corner, and restores without…
  • Fluid Slider: A labeled Base UI range control with direct surface selection, a dedicated draggable indicator, and restrained boundary resistance.
  • Fluid Tabs: An accessible Base UI tab selector with a shared active surface that travels fluidly between selections, with capsule and underline…
  • Fluid Tooltip: A grouped Base UI tooltip system with a deliberate first appearance and fast directional handoffs between related controls.
  • Github Star History
  • Hold To Delete Button: A hold-to-confirm destructive button with pointer capture, keyboard activation, cancellation, and reduced-motion support.
  • Image Trail: Spawns a trail of images that follow the cursor across a scoped area, with multiple appearance styles.
  • Lightbox: An accessible image preview that expands from its thumbnail and returns to the same spatial origin when dismissed.
  • LinkPreview: The `LinkPreview` component is an interactive UI element that displays a preview of a link when hovered over. It enhances user experience…
  • Live Activity: A composable activity surface with shared-element transitions, consumer-defined views, and touch expansion gestures.
  • Magnetic: A pointer-aware magnetic wrapper with bounded pull strength, self or parent interaction areas, and reduced-motion support.
  • Magnetic Dock
  • Marquee: A scroll-velocity marquee with seamless loop math, eased hover pause, vertical/horizontal direction, ResizeObserver-based copy count, and…
  • Mesh Gradient Shader: A flowing composition of animated color spots shaped by organic distortion and vortex effects. Powered by Paper Design Shaders.
  • Morph Surface: An unstyled layout primitive that grows, shrinks, clips, and updates the content of one persistent consumer-styled surface.
  • Notification Stack
  • Prototype Action Rail
  • Prototype Avatar Showcase
  • Prototype Circular Context Menu
  • Prototype Morph Surface: Stress tests for the Morph Surface primitive. Página de testes de estresse do primitivo Morph Surface.
  • Prototype Radial Slider
  • Circular Card Marquee: A continuous responsive card marquee that orbits cards around a circular path with configurable speed, direction, controlled pause, and…
  • Radial Card Slider
  • RippleButton: A pointer-aware ripple button with touch-safe feedback, customizable motion, and reduced-motion support.
  • Schedule Chip
  • Section Rail: A compact navigation rail that tracks the reader's position through a long page, revealing labels and editorial context cards on hover and…
  • Smart Breadcrumbs
  • Smart Overflow: A priority-first responsive action group that moves lower-priority actions into an accessible three-dot menu as available width decreases.
  • SpinningText: The `SpinningText` component is a dynamic and visually engaging UI element that animates text in a circular spinning motion. It is highly…
  • Split Text: Splits text into characters, words, or lines and reveals them with a staggered, optionally scroll-triggered animation.
  • Spotlight Card: A card with a radial spotlight glow that follows the cursor.
  • StaggerText: A text component with staggered animation.
  • Stepper: A composable step navigation pattern for guiding people through a small, ordered workflow.
  • Swipe Action Row: A coordinated list-row interaction with two-sided actions, keyboard opening, outside dismissal, and action-owned full swipes.
  • Testimonial Card
  • Text Highlight

Browse by category