PopoverDisplays rich content in a portal, triggered by a button.

Install the component from your command line.

npm install @raystack/apsara

Anatomy

Import all parts and piece them together.

import { Popover } from '@raystack/apsara'


<Popover>
  <Popover.Trigger asChild>
    <Button variant="secondary" outline>Popover</Button>
  </Popover.Trigger>
  <Popover.Content css={{ padding: '$3' }} side="top">
    <Text size="2" css={{ lineHeight: '18px' }}>
      The other main improvement is with tables, which we'll probably use a lot. With
      horizontal overflow on small devices and when zoomed in.
    </Text>
  </Popover.Content>
</Popover>