🎉 Sora UI is now part of the shadcn/ui registry ecosystem.
Sora UI

Section CTA

A chip-style call-to-action link with sliding label and rotating icon chips on hover.

Made by Axyl
Loading...

Installation

Usage

import { SectionCta } from '@/components/sora-ui/buttons/section-cta';

export default function Page() {
  return (
    <>
      <SectionCta href="/docs" label="Explore components" />

      <SectionCta variant="inverted" href="/docs" label="View docs" />

      <SectionCta
        asChild
        variant="outline"
        duration={0.5}
        labelOffset={-32}
        labelOffsetLg={-40}
      >
        <a href="/pricing">Custom anchor</a>
      </SectionCta>
    </>
  );
}

Props

PropTypeDefault
asChild?
boolean
false
children?
string | ReactElement
-
label?
string
-
variant?
"accent" | "inverted" | "outline" | "ghost"
"accent"
size?
"sm" | "default" | "lg"
"default"
duration?
number
0.7
ease?
[number, number, number, number]
[0.77, 0, 0.175, 1]
labelOffset?
number
-
labelOffsetLg?
number
-
startChipRestRotate?
number
-45
startChipActiveRotate?
number
0
endChipRestRotate?
number
0
endChipActiveRotate?
number
-45
startChipRestScale?
number
0
startChipActiveScale?
number
1
endChipRestScale?
number
1
endChipActiveScale?
number
0
icon?
ReactNode
-
startIcon?
ReactNode
-
endIcon?
ReactNode
-
className?
string
-
groupClassName?
string
-
chipClassName?
string
-
labelClassName?
string
-
startChipClassName?
string
-
endChipClassName?
string
-
iconClassName?
string
-

Credits

Inspired by Annnimate.

Built by Axyl. The source code will be available on GitHub soon.

Last updated: 6/9/2026