radix_ui_popover_primitive_basic_quickstart_example.ts

1import React from 'react';
2import * as Popover from '@radix-ui/react-popover';
3import './styles.css';
4
5const PopoverDemo = () => (
6  <Popover.Root>
7    <Popover.Trigger className="PopoverTrigger">Show info</Popover.Trigger>
8    <Popover.Portal>
9      <Popover.Content className="PopoverContent" sideOffset={5}>
10        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
11          <p className="Text" style={{ marginBottom: 10 }}>
12            Radix UI Primitives are unstyled, accessible components.
13          </p>
14          <Popover.Close className="PopoverClose" aria-label="Close">
15            Close
16          </Popover.Close>
17        </div>
18        <Popover.Arrow className="PopoverArrow" />
19      </Popover.Content>
20    </Popover.Portal>
21  </Popover.Root>
22);
23
24export default PopoverDemo;