Skip to content
aq-ui
Back to ComponentsComponent

Bubble

Open-code aq-ui accessible component family for Bubble.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add bubble

API reference

SSR-safe

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

import { Bubble } from "@/components/ui/bubble"

<Bubble />

Bubble

constSource L50

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" }>(…)
Props type
React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & { align?: "start" | "end" }

Props

NameTypeDefault
align?"start" | "end""start"
<Bubble />

BubbleContent

constSource L73

Content export for composing Bubble.

const BubbleContent = React.forwardRef<React.ComponentRef<"div">, useRender.ComponentProps<"div">>(…)
Props type
useRender.ComponentProps<"div">
<BubbleContent />

BubbleGroup

constSource L8

Public const export from Bubble.

const BubbleGroup = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<BubbleGroup />

BubbleReactions

constSource L117

Public const export from Bubble.

const BubbleReactions = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div"> & { align?: "start" | "end" side?: "top" | "bottom" }>(…)
Props type
React.ComponentProps<"div"> & { align?: "start" | "end" side?: "top" | "bottom" }

Props

NameTypeDefault
align?"start" | "end""end"
side?"top" | "bottom""bottom"
<BubbleReactions />

Registry dependencies

utils

Package dependencies

@base-ui/react@^1.7.0, class-variance-authority@^0.7.1

Files

  • components/ui/bubble.tsx

Source