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 { Float } from "@/components/ui/float";

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

Placement

API Reference

Float

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`

File Upload

Floating Panel