text | string | – | The string of characters to be rendered as individual draggable elements. |
direction | "x" | "y" | "both" | "both" | Specifies the axis along which letters can be dragged: horizontal (`x`), vertical (`y`), or both. |
spacing | number | 12 | Spacing (in pixels) between each letter when they are initially laid out. |
verticalCenter | boolean | true | If true, vertically centers the letters in the container. If false, uses a fixed top position. |
containerClassName | string | "" | Optional custom class names for the outer container of the component. |
containerStyle | CSSProperties | {} | Inline styles to apply directly to the container element. |
letterClassName | string | "" | Additional Tailwind or custom class names applied to each draggable letter. |
onDragStart | (char: string, index: number) => void | undefined | Callback function called when a letter drag starts. Receives the character and its index. |
onDragEnd | (char: string, index: number) => void | undefined | Callback function called when a letter drag ends. Receives the character and its index. |