Flow Button

Buttons

About

Button with a stitched ring border whose conic gradient rotates on hover, in primary and secondary variants.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Flow Button to your project and fits it to your theme.

Code

How Flow Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { PrimaryFlowButton, SecondaryFlowButton } from '@/components/ui/flow-button'

const settings = {
  label: 'Flow Button',
  showSecondary: true
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }

  return (
    <div className='flex min-h-60 w-full flex-wrap items-center justify-center gap-4 bg-background p-8'>
      <PrimaryFlowButton>{s.label}</PrimaryFlowButton>
      {s.showSecondary && <SecondaryFlowButton>{s.label}</SecondaryFlowButton>}
    </div>
  )
}