Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Popover } from "@hua-labs/hua";

children*React.ReactNode-docs:components.popover.props.children
trigger*React.ReactNode-docs:components.popover.props.trigger
openboolean-docs:components.popover.props.open
onOpenChange(open: boolean) => void-docs:components.popover.props.onOpenChange
position"top" | "bottom" | "left" | "right""bottom"docs:components.popover.props.position
align"start" | "center" | "end""center"docs:components.popover.props.align
offsetnumber8docs:components.popover.props.offset
disabledbooleanfalsedocs:components.popover.props.disabled

docs:common.basicUsagetsx
1// Via framework (recommended)
2import { Popover, Button } from '@hua-labs/hua';
3// Or direct import
4// import { Popover } from '@hua-labs/ui/overlay';
5 
6<Popover trigger={<Button>Open</Button>}>
7  <p>This is the popover content.</p>
8</Popover>
docs:components.popover.codeExamples.positionstsx
1<Popover trigger={<Button>Top</Button>} position="top">
2  <p>Content above the trigger</p>
3</Popover>
4 
5<Popover trigger={<Button>Right</Button>} position="right">
6  <p>Content to the right</p>
7</Popover>
docs:components.popover.codeExamples.formtsx
1<Popover trigger={<Button>Edit</Button>}>
2  <div className="space-y-4">
3    <h4 className="font-medium">Edit Item</h4>
4    <Input placeholder="Name" />
5    <Button size="sm">Save</Button>
6  </div>
7</Popover>
docs:components.popover.codeExamples.controlledtsx
1const [open, setOpen] = useState(false);
2 
3<Popover
4  open={open}
5  onOpenChange={setOpen}
6  trigger={<Button>Controlled</Button>}
7>
8  <p>Controlled popover content</p>
9  <Button size="sm" onClick={() => setOpen(false)}>
10    Close
11  </Button>
12</Popover>

  • Tooltip -
  • Dropdown -
  • Modal -

  • •docs:components.popover.accessibility.outsideClick: docs:components.popover.accessibility.outsideClickDesc
  • •docs:common.accessibility.focusManagement: docs:components.popover.accessibility.focusManagementDesc
  • •docs:components.popover.accessibility.arrowIndicator: docs:components.popover.accessibility.arrowIndicatorDesc
ConfirmModalDropdown