Message

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

Preview

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

Andrew · 09:41

Show me a complete Data Grid example.

Delivered

aq assistant · 09:41

The live example includes sorting, filtering, column resize, and keyboard navigation.

Generated in 1.2s

Loading interactive preview…

pnpm dlx aq-ui@alpha add message

SSR-safe

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

import { Message } from "@/components/ui/message"

<Message />

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

const Message = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div"> & { align?: "start" | "end" }>(…)

Name	Type	Default
`align?`	`"start" \| "end"`	`"start"`

Public const export from Message.

const MessageAvatar = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)

Content export for composing Message.

const MessageContent = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)

Footer export for composing Message.

const MessageFooter = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)

Public const export from Message.

const MessageGroup = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)

Header export for composing Message.

const MessageHeader = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)

utils