shadcn.io is not affiliated with official shadcn/ui

Components

Free

Float for React

Q: How do I choose where a Float sits in React?

Set placement. The default is top-end. The nine values pair top, middle, or bottom with start, center, or end. The root sets data-placement to the same value. The Placement demo shows all nine. Start and end refer to the inline edges of the parent. There is no separate offset prop. The placement hangs the child about halfway outside the box.

Q: Can people activate what is inside a Float?

Yes. The root uses pointer-events-auto, so a badge or button that hangs outside the parent still receives the click. Float itself is not a button. If the child is a control, that control keeps Enter and Space, which is what the Accessibility section describes. A count that is not a control should not be given a click handler on the float.

Q: How do I restyle a Float?

Edit components/ui/float. Each placement sets the inset and the translation that hangs the child outside the parent. Override that with a class if you want it fully inside the box, or to change z-10. The part is a div with data-slot float and data-placement. Decorative icons inside the badge should be hidden from assistive tech.

Q: Can one parent have more than one Float?

Yes. Render one Float per corner, each with its own placement. They do not avoid each other. Two floats with the same placement occupy the same point. The parent is still the positioning context for every one of them. Give each a different placement when they should be read as separate markers.

Pin a badge or other marker to the corner of a button so a count stays visible. For React with Base UI, when that marker should not open on hover.

A small marker, usually a count, fixed to the edge of the control it belongs to.

Use it when that marker should stay on the control instead of opening on hover. A sentence that appears only on hover belongs in a Tooltip. In React, Base UI only places the child, so the parent needs relative or the marker can jump to an ancestor.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

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

Enter: Activate the focused control.
Space: Activate the focused control.

Demos

Placement

placement picks one of nine anchors: top, middle, or bottom, crossed with start, center, or end. The default, top-end, is the usual corner for a count in both directions. Start and end follow the inline axis, so there is no separate left and right. The child hangs about halfway outside the box, there is no offset prop, and two markers on one placement share a point.

PreviewCode

FAQ

How do I choose where a Float sits in React?

Set placement. The default is top-end. The nine values pair top, middle, or bottom with start, center, or end. The root sets data-placement to the same value. The Placement demo shows all nine. Start and end refer to the inline edges of the parent. There is no separate offset prop. The placement hangs the child about halfway outside the box.

Why is my Float in the wrong place?

Float is absolutely positioned. The parent needs its own position, usually relative, as the usage wraps the button. Without that, the float anchors to some farther positioned ancestor. It uses z-10, so a later sibling with a higher stack can still cover it. Pass a class if you need to pull it back inside the parent.

Can people activate what is inside a Float?

Yes. The root uses pointer-events-auto, so a badge or button that hangs outside the parent still receives the click. Float itself is not a button. If the child is a control, that control keeps Enter and Space, which is what the Accessibility section describes. A count that is not a control should not be given a click handler on the float.

Should I use Float or a Badge?

Use Float to pin something to the edge of a parent, and put a Badge inside it for a count, as the usage does. The badge does not position itself. For a hint that opens on hover and is portaled away from the parent, use a Tooltip. Float stays visible. It does not open or close.

How do I restyle a Float?

Edit components/ui/float. Each placement sets the inset and the translation that hangs the child outside the parent. Override that with a class if you want it fully inside the box, or to change z-10. The part is a div with data-slot float and data-placement. Decorative icons inside the badge should be hidden from assistive tech.

Can one parent have more than one Float?

Yes. Render one Float per corner, each with its own placement. They do not avoid each other. Two floats with the same placement occupy the same point. The parent is still the positioning context for every one of them. Give each a different placement when they should be read as separate markers.

How do I install Float in React?

Run the command in the Installation section above. It adds Float to your ui folder. Badge and Button, used in the usage, come from their own pages. Float has no provider and no open state to wire up. The command uses the shadcn CLI.

API Reference

Float

<div> data-slot="float"

PropType

The corner or edge it floats at, such as top-end.

Type: "bottom-center" | "bottom-end" | "bottom-start" | "middle-center" | "middle-end" | "middle-start" | "top-center" | "top-end" | "top-start"
Default: "top-end"

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-placement?string

Mirrors placement.

With other components

Free
Badge
Feedback
A count on a corner
Free
Avatar
Media
The anchor
Free
Button
Buttons
An action on the edge
Free
Tooltip
Overlays
Name the floating mark
Free
Card
Layout
The surface it sits on
Free
Marker
Media
A pin on the content

Free
Hover Card
Overlays
A preview on hover
Free
Popover
Overlays
A layer on click
Free
Dropdown Menu
Menus
A menu from the anchor
Free
Frame
Layout
A box around the content
Free
Item
Layout
A row with a corner mark
Free
Aspect Ratio
Layout
The box the float sits on

All 105 components