Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Float for React Radix UI

Anchor an element to the edge of a container.

Framework
UI library
9+

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/float.json

Usage

import { BellIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Float } from "@/components/ui/float";
<div className="relative">
  <Button size="icon-lg" variant="outline">
    <BellIcon />
  </Button>
  <Float>
    <Badge pill size="sm" variant="default">
      9+
    </Badge>
  </Float>
</div>

Accessibility

KeyDescription
Enter
Activate the focused control.
Space
Activate the focused control.

Demos

Placement

API Reference

Float

div

PropType
AttributeType