ComponentsButtons
Ink Fill Button
A smooth ink-fill animation button with character-by-character text lighting effect.
Installation
bunx shadcn@latest add https://jackui.com/r/InkFillBtn.jsonnpx shadcn@latest add https://jackui.com/r/InkFillBtn.jsonpnpm dlx shadcn@latest add https://jackui.com/r/InkFillBtn.jsonThe CLI will automatically install the required dependencies and copy the component file into your project at:
components/jackui/buttons/InkFillBtn.tsxUsage
"use client";
import React from "react";
import InkFillBtn from "@/components/jackui/buttons/InkFillBtn";
export function InkFillBtnDemo() {
return (
<div className="flex h-40 w-full items-center justify-center">
<InkFillBtn />
</div>
);
}Props
| Prop | Type | Description |
|---|---|---|
children | React.ReactNode | Optional. The content to render inside the button. Default: "Initialize App". |
variant | "dark" | "light" | "coral" | "neon" | Optional. Sizing variant adjusting the color theme. Default: "dark". |
tag | string | Optional. A small text tag displayed alongside the children text. |
...props | React.ButtonHTMLAttributes<HTMLButtonElement> | Optional. Any additional standard HTML button element properties (e.g. onClick, disabled, className) can be passed and are spread onto the button. |
Interactive Terminal
A highly polished, self-playing developer terminal featuring smooth typewriter loops, 3D hover elevations, and dynamic console output simulations.
Smoke Flare Button
A design-engineered interactive button with volumetric atmospheric smoke plumes, anamorphic optical lens flare, cursor-reactive caustic rim reflections, and cohesive light & dark modes.