XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Kinetic Click

Previous: KbdNext: Label

Plays a particle burst when the element it wraps is clicked.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import { KineticClick } from "xiod-ui/kinetic-click";

API Reference

Detailed documentation of properties and options.

KineticClick

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
children
ReactNode
–

The content of the component.

color
string
KbdLabel
currentColor

The colour of the effect, as a CSS colour. currentColor takes it from the clicked element, as colorFrom sets.

colorFrom
"text"|"auto"|"background"|"border"
auto

Which colour of the clicked element to use when color is currentColor. auto uses the first of its text, background and border colours that isn't a neutral grey, so a white-text button still gets a coloured effect.

count
number
–

How many particles, ripples or shapes each click creates. Each effect has its own default.

duration
number
–

How long the effect lasts, in milliseconds. Each effect has its own default.

size
number
–

How large the effect is, in pixels: a particle's size, or a ripple's largest radius. Each effect has its own default.

trigger
"click"|"mousedown"
mousedown

When the effect plays: as soon as the button is pressed (mousedown), or when it is released (click).

variant
"ripple"|"matrix"|"spark"|"embers"|"quantum"|"tesseract"|"blackhole"|"firework"|"shatter"|"warp"|"smoke"|"supernova"|"holosphere"|"flowfield"|"synapse"|"diffusion"|"rain"|"binary"|"fission"|"bullettime"
spark

The effect that plays where the user clicks.