Bubble
Message content in contrasting conversational surfaces.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Bubble
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/bubble.json'Usage
A complete example using the installed component and hook paths.
Bubble usage
"use client";import { Bubble, BubbleContent, BubbleGroup } from "@/components/ui/bubble";const BubblePreview = function BubblePreview() { return ( <BubbleGroup className="w-full"> <Bubble variant="secondary"> <BubbleContent>How does this surface look?</BubbleContent> </Bubble> <Bubble align="end"> <BubbleContent>Try the dark theme too.</BubbleContent> </Bubble> </BubbleGroup> ); };export default function Demo() { return <BubblePreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
BubbleGroup
BubbleGroup props
React.ComponentProps<"div">Bubble
Bubble props
React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & { align?: "start" | "end"; }- variant
- "default"
- align
- "start"
BubbleContent
BubbleContent props
useRender.ComponentProps<"div"> & { sound?: boolean }- sound
- true
BubbleReactions
BubbleReactions props
React.ComponentProps<"div"> & { align?: "start" | "end"; side?: "top" | "bottom";}- side
- "bottom"
- align
- "end"