Popover.

Useful context, close to the action.

import { Popover, Button, TextField } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <Popover
      label="Display preferences"
      trigger={<Button variant="secondary">Preferences</Button>}
    >
      <TextField label="Workspace name" defaultValue="Studio" />
    </Popover>
  );
}

Installation

npm install luminescent

Import luminescent/style.css once at your application root. The example above uses the same package implementation as Storybook.

Variants and states

Use the preview controls to explore the supported variants, sizes, disabled/loading states and reduced motion. Controls appear only where the component exposes the corresponding prop. Theme and glow apply to every component.

Controlled and uncontrolled state

State contract: open / defaultOpen / onOpenChange. Omit the controlled prop to let the component own its initial state; supply a value and callback when your application owns it. Native uncontrolled fields and state-backed form controls participate in form reset. Controlled state must be reset by the application.

import { useState } from "react";
import { Popover, Button } from "luminescent";


export function ControlledExample() {
  const [value, setValue] = useState(false);
  return (
    <Popover
      label="Preferences"
      open={value}
      onOpenChange={setValue}
      trigger={<Button>Preferences</Button>}
    >
      Your preferences.
    </Popover>
  );
}

API reference

Generated from the source TypeScript interfaces. Native attributes, className, style, aria-* and data-* also pass through to the documented element. Import PopoverProps from the package for the full inherited contract.

Accessibility and keyboard

Radix nonmodal dialog with focus management, collision positioning, Escape/outside dismissal and trigger focus restoration. Required label names the surface. Content may contain native controls. Keep information essential to the page outside the popover.

Keep labels meaningful and test application-level contrast, focus order and screen-reader output. See the accessibility guide for composition requirements.

Theme customization

import { LuminescentProvider, Popover, Button, TextField } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <LuminescentProvider theme="light" accent="violet" glow="subtle">
      <Popover
        label="Display preferences"
        trigger={<Button variant="secondary">Preferences</Button>}
      >
        <TextField label="Workspace name" defaultValue="Studio" />
      </Popover>
    </LuminescentProvider>
  );
}

Switch between light and dark in the preview, or open the playground for a larger workspace. Custom CSS variables can override spacing, color, typography and effects.

Related components