Open-code aq-ui accessible component family for Bubble.
This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.
aq-uipnpm dlx aq-ui@alpha add bubbleImport the parts you need, then jump to an export for its contract.
import { Bubble } from "@/components/ui/bubble"
<Bubble />Open-code aq-ui accessible component family for Bubble.
const Bubble = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & { align?: "start" | "end" }>(…)React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & { align?: "start" | "end" }| Name | Type | Default |
|---|---|---|
align? | "start" | "end" | "start" |
Content export for composing Bubble.
const BubbleContent = React.forwardRef<React.ComponentRef<"div">, useRender.ComponentProps<"div">>(…)useRender.ComponentProps<"div">Public const export from Bubble.
const BubbleGroup = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)React.ComponentProps<"div">Public const export from Bubble.
const BubbleReactions = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div"> & { align?: "start" | "end" side?: "top" | "bottom" }>(…)React.ComponentProps<"div"> & { align?: "start" | "end" side?: "top" | "bottom" }| Name | Type | Default |
|---|---|---|
align? | "start" | "end" | "end" |
side? | "top" | "bottom" | "bottom" |
utils
@base-ui/react@^1.7.0, class-variance-authority@^0.7.1