shadcn.io is not affiliated with official shadcn/ui

Shadcn Float for React and Tailwind

Anchor an element to the edge of a container.

Installation

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

pnpm dlx shadcn@latest add https://kit.dev/r/float.json

npx shadcn@latest add https://kit.dev/r/float.json

yarn shadcn@latest add https://kit.dev/r/float.json

Install the following dependencies:

bun add @ark-ui/react tailwind-variants

pnpm add @ark-ui/react tailwind-variants

npm install @ark-ui/react tailwind-variants

yarn add @ark-ui/react tailwind-variants

Copy and paste the following code into your project.

components/ui/float.tsx

"use client";

import { ark } from "@ark-ui/react/factory";
import type React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";

const floatVariants = tv({
  base: ["pointer-events-auto absolute z-10"],
  variants: {
    placement: {
      "top-start": "-translate-1/2 inset-s-0 top-0",
      "top-center": "-translate-1/2 top-0 left-1/2",
      "top-end": "inset-e-0 top-0 translate-x-1/2 -translate-y-1/2",
      "middle-start": "-translate-1/2 inset-s-0 top-1/2",
      "middle-center": "-translate-1/2 top-1/2 left-1/2",
      "middle-end": "inset-e-0 top-1/2 translate-x-1/2 -translate-y-1/2",
      "bottom-start": "inset-s-0 bottom-0 -translate-x-1/2 translate-y-1/2",
      "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2",
      "bottom-end": "inset-e-0 bottom-0 translate-x-1/2 translate-y-1/2",
    },
  },
  defaultVariants: {
    placement: "top-end",
  },
});

interface FloatProps
  extends React.ComponentProps<typeof ark.div>,
    VariantProps<typeof floatVariants> {}

export const Float = (props: FloatProps) => {
  const { placement = "top-end", className, ...rest } = props;

  return (
    <ark.div
      className={cn(floatVariants({ placement }), className)}
      data-placement={placement}
      data-slot="float"
      {...rest}
    />
  );
};

Update the import paths to match your project setup.

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

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Placement

API Reference

Float

div

PropType

AttributeType

File Upload

Floating Panel