Skip to main content

​
Installation

    ​
    Usage

    showLineNumbers
    import { ShinyButton } from "@/components/ui/shiny-button"
    showLineNumbers
    <ShinyButton>Shiny Button</ShinyButton>

    ​
    Props

    PropTypeDefaultDescription
    childrenReact.ReactNode-The content of the button.
    classNamestring-Additional class names for the button.
    …restExtends both MotionProps and React.HTMLAttributes<HTMLElement>-Supports all motion and HTML attributes.

    ​
    Examples

    ​
    Custom Styling

    showLineNumbers
    <ShinyButton className="bg-blue-500 text-white">
  Custom Shiny Button
</ShinyButton>

    ​
    With Motion Props

    showLineNumbers
    <ShinyButton 
  whileHover={{ scale: 1.05 }}
  transition={{ duration: 0.2 }}
>
  Hover to Scale
</ShinyButton>

    Build docs developers (and LLMs) love

    Get started for freeTalk to us