Float

Anchor an element to the edge of a container.

Installation


pnpm dlx shadcn@latest add @shark/float


import { Float } from "@/components/ui/float";


<div className="relative">
  <Float placement="top-end">
    {/** floated content **/}
  </Float>
</div>

top-start

top-center

top-end

middle-start

middle-center

middle-end

bottom-start

bottom-center

bottom-end

Prop	Type	Default
`placement`	`"top-start" \| "top-center" \| "top-end" \| "middle-start" \| "middle-center" \| "middle-end" \| "bottom-start" \| "bottom-center" \| "bottom-end"`	`"top-end"`
`className`	`string`	-
`asChild`	`boolean`	`false`

On This Page