Overlay Components - Dynamic UI

DModal

Modal dialog component with animations and composable structure.

Basic Usage

import DModal from '@dynamic-framework/ui-react';
import { AnimatePresence } from 'framer-motion';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <DButton text="Open Modal" onClick={() => setIsOpen(true)} />
      
      <AnimatePresence>
        {isOpen && (
          <DModal name="exampleModal" onClose={() => setIsOpen(false)}>
            <DModal.Header>Modal Title</DModal.Header>
            <DModal.Body>
              Modal content goes here
            </DModal.Body>
            <DModal.Footer>
              <DButton text="Close" onClick={() => setIsOpen(false)} />
            </DModal.Footer>
          </DModal>
        )}
      </AnimatePresence>
    </>
  );
}

Props

name

string

required

Unique modal identifier

staticBackdrop

boolean

default:"false"

Prevents closing on backdrop click

scrollable

boolean

default:"false"

Makes modal body scrollable

centered

boolean

default:"false"

Vertically centers modal

fullScreen

boolean

default:"false"

Full screen modal

fullScreenFrom

ModalFullScreenFrom

Breakpoint for full screen - ‘sm’, ‘md’, ‘lg’, ‘xl’, or ‘xxl’

size

ModalSize

Modal size - ‘sm’, ‘lg’, or ‘xl’

transition

Transition

Custom Framer Motion transition

Subcomponents

DModal.Header

Modal header section

DModal.Body

Modal body section (main content) Modal footer section (typically for actions)

Examples

Basic
Sizes
Centered
Scrollable
Full Screen

<AnimatePresence>
  {isOpen && (
    <DModal name="confirmModal">
      <DModal.Header>Confirm Action</DModal.Header>
      <DModal.Body>
        Are you sure you want to proceed?
      </DModal.Body>
      <DModal.Footer>
        <DButton 
          text="Cancel" 
          variant="outline"
          onClick={() => setIsOpen(false)} 
        />
        <DButton 
          text="Confirm" 
          color="primary"
          onClick={handleConfirm} 
        />
      </DModal.Footer>
    </DModal>
  )}
</AnimatePresence>

// Small
<DModal name="smallModal" size="sm">
  <DModal.Body>Small modal</DModal.Body>
</DModal>

// Large
<DModal name="largeModal" size="lg">
  <DModal.Body>Large modal</DModal.Body>
</DModal>

// Extra Large
<DModal name="xlModal" size="xl">
  <DModal.Body>Extra large modal</DModal.Body>
</DModal>

<DModal name="centeredModal" centered>
  <DModal.Header>Centered Modal</DModal.Header>
  <DModal.Body>
    This modal is vertically centered
  </DModal.Body>
</DModal>

<DModal name="scrollableModal" scrollable>
  <DModal.Header>Long Content</DModal.Header>
  <DModal.Body>
    {/* Long content that scrolls */}
    <p>Paragraph 1...</p>
    <p>Paragraph 2...</p>
    {/* ... more content ... */}
  </DModal.Body>
</DModal>

// Always full screen
<DModal name="fullModal" fullScreen>
  <DModal.Header>Full Screen</DModal.Header>
  <DModal.Body>Full screen modal</DModal.Body>
</DModal>

// Full screen on small devices
<DModal name="responsiveModal" fullScreen fullScreenFrom="md">
  <DModal.Body>Full screen below md breakpoint</DModal.Body>
</DModal>

TypeScript Interface

type Props = BaseProps & PropsWithChildren<{
  name: string;
  staticBackdrop?: boolean;
  scrollable?: boolean;
  centered?: boolean;
  fullScreen?: boolean;
  fullScreenFrom?: ModalFullScreenFrom;
  size?: ModalSize;
  transition?: Transition;
}>;

type ModalSize = 'sm' | 'lg' | 'xl';
type ModalFullScreenFrom = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

DOffcanvas

Offcanvas panel that slides in from any edge of the viewport.

Basic Usage

import DOffcanvas from '@dynamic-framework/ui-react';
import { AnimatePresence } from 'framer-motion';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <DButton text="Open Menu" onClick={() => setIsOpen(true)} />
      
      <AnimatePresence>
        {isOpen && (
          <DOffcanvas name="menu" openFrom="end">
            <DOffcanvas.Header>
              <h5>Menu</h5>
              <DButtonIcon 
                icon="X" 
                ariaLabel="Close"
                onClick={() => setIsOpen(false)} 
              />
            </DOffcanvas.Header>
            <DOffcanvas.Body>
              Navigation content
            </DOffcanvas.Body>
          </DOffcanvas>
        )}
      </AnimatePresence>
    </>
  );
}

Props

name

string

required

Unique offcanvas identifier

openFrom

OffcanvasPositionToggleFrom

default:"end"

Edge to open from - ‘top’, ‘bottom’, ‘start’, or ‘end’

staticBackdrop

boolean

default:"false"

Prevents closing on backdrop click

scrollable

boolean

default:"false"

Allows body scroll when offcanvas is open

transition

Transition

Custom Framer Motion transition

Subcomponents

DOffcanvas.Header

Offcanvas header section

DOffcanvas.Body

Offcanvas body section Offcanvas footer section

Examples

From End (Right)
From Start (Left)
From Top
From Bottom

<AnimatePresence>
  {isOpen && (
    <DOffcanvas name="sideMenu" openFrom="end">
      <DOffcanvas.Header>Menu</DOffcanvas.Header>
      <DOffcanvas.Body>
        <nav>
          <a href="#">Home</a>
          <a href="#">Profile</a>
          <a href="#">Settings</a>
        </nav>
      </DOffcanvas.Body>
    </DOffcanvas>
  )}
</AnimatePresence>

<DOffcanvas name="leftPanel" openFrom="start">
  <DOffcanvas.Header>Filters</DOffcanvas.Header>
  <DOffcanvas.Body>
    <p>Filter options here</p>
  </DOffcanvas.Body>
</DOffcanvas>

<DOffcanvas name="topNotifications" openFrom="top">
  <DOffcanvas.Header>Notifications</DOffcanvas.Header>
  <DOffcanvas.Body>
    <p>Recent notifications</p>
  </DOffcanvas.Body>
</DOffcanvas>

<DOffcanvas name="bottomSheet" openFrom="bottom">
  <DOffcanvas.Header>Actions</DOffcanvas.Header>
  <DOffcanvas.Body>
    <DButton text="Option 1" />
    <DButton text="Option 2" />
  </DOffcanvas.Body>
</DOffcanvas>

TypeScript Interface

type Props = BaseProps & PropsWithChildren<{
  name: string;
  staticBackdrop?: boolean;
  scrollable?: boolean;
  openFrom?: OffcanvasPositionToggleFrom;
  transition?: Transition;
}>;

type OffcanvasPositionToggleFrom = 'top' | 'bottom' | 'start' | 'end';

DPopover

Popover component with floating UI positioning.

Basic Usage

import DPopover from '@dynamic-framework/ui-react';

function App() {
  const [open, setOpen] = useState(false);
  
  return (
    <DPopover
      open={open}
      setOpen={setOpen}
      renderComponent={(isOpen) => (
        <DButton text="Toggle Popover" />
      )}
    >
      <div className="p-3">
        <h6>Popover Title</h6>
        <p>Popover content goes here</p>
      </div>
    </DPopover>
  );
}

Props

open

boolean

required

Controls popover visibility

setOpen

(open: boolean) => void

Callback to update open state

renderComponent

(open: boolean) => ReactElement

required

Function that renders the trigger element

adjustContentToRender

boolean

default:"false"

Adjusts popover width to content

Examples

Basic
User Menu
Form Help

function BasicPopover() {
  const [open, setOpen] = useState(false);
  
  return (
    <DPopover
      open={open}
      setOpen={setOpen}
      renderComponent={(isOpen) => (
        <DButtonIcon 
          icon="Info" 
          ariaLabel="Info"
        />
      )}
    >
      <div className="p-3">
        <p>Additional information here</p>
      </div>
    </DPopover>
  );
}

<DPopover
  open={menuOpen}
  setOpen={setMenuOpen}
  renderComponent={(isOpen) => (
    <DAvatar name="John Doe" />
  )}
>
  <div className="p-2">
    <div className="p-2">John Doe</div>
    <hr />
    <DButton text="Profile" variant="link" />
    <DButton text="Settings" variant="link" />
    <DButton text="Logout" variant="link" />
  </div>
</DPopover>

<div className="d-flex align-items-center gap-2">
  <DInput label="Password" type="password" />
  <DPopover
    open={helpOpen}
    setOpen={setHelpOpen}
    renderComponent={() => (
      <DButtonIcon icon="HelpCircle" ariaLabel="Help" />
    )}
  >
    <div className="p-3" style={{ maxWidth: '250px' }}>
      <h6>Password Requirements</h6>
      <ul>
        <li>At least 8 characters</li>
        <li>One uppercase letter</li>
        <li>One number</li>
      </ul>
    </div>
  </DPopover>
</div>

TypeScript Interface

type Props = BaseProps & PropsWithChildren<{
  renderComponent: (open: boolean) => ReactElement<unknown>;
  open: boolean;
  setOpen?: (open: boolean) => void;
  adjustContentToRender?: boolean;
}>;

DTooltip

Tooltip component with customizable triggers and positioning.

Basic Usage

import DTooltip from '@dynamic-framework/ui-react';

function App() {
  return (
    <DTooltip 
      Component={<DButton text="Hover me" />}
      placement="top"
    >
      This is a tooltip
    </DTooltip>
  );
}

Props

Component

ReactNode

required

Element that triggers the tooltip

placement

Placement

default:"top"

Tooltip position - ‘top’, ‘bottom’, ‘left’, ‘right’, etc.

withHover

boolean

default:"true"

Trigger on hover

withFocus

boolean

default:"false"

Trigger on focus

withClick

boolean

default:"false"

Trigger on click

open

boolean

default:"false"

Controlled open state

size

ComponentSize

Tooltip size - ‘sm’ or ‘lg’

offSet

number

Distance from trigger element

padding

number

Padding for shift middleware

Examples

Basic
Placements
Click Trigger
Icon Tooltips

<DTooltip Component={<DButton text="Hover" />}>
  Helpful tooltip text
</DTooltip>

<DTooltip Component={<DButton text="Top" />} placement="top">
  Top tooltip
</DTooltip>

<DTooltip Component={<DButton text="Right" />} placement="right">
  Right tooltip
</DTooltip>

<DTooltip Component={<DButton text="Bottom" />} placement="bottom">
  Bottom tooltip
</DTooltip>

<DTooltip Component={<DButton text="Left" />} placement="left">
  Left tooltip
</DTooltip>

<DTooltip 
  Component={<DButtonIcon icon="Info" ariaLabel="Info" />}
  withHover={false}
  withClick={true}
>
  Click the icon to see this tooltip
</DTooltip>

<DTooltip Component={<DButtonIcon icon="Save" ariaLabel="Save" />}>
  Save changes
</DTooltip>

<DTooltip Component={<DButtonIcon icon="Edit" ariaLabel="Edit" />}>
  Edit item
</DTooltip>

<DTooltip Component={<DButtonIcon icon="Delete" ariaLabel="Delete" />}>
  Delete item
</DTooltip>

TypeScript Interface

export type Props = BaseProps & PropsWithChildren<{
  childrenClassName?: string;
  offSet?: number;
  padding?: number;
  withHover?: boolean;
  withFocus?: boolean;
  withClick?: boolean;
  open?: boolean;
  size?: ComponentSize;
  placement?: Placement;
  Component: ReactNode;
}>;

DDropdown

Dropdown menu component with action items.

Basic Usage

import DDropdown from '@dynamic-framework/ui-react';

function App() {
  const actions = [
    {
      label: 'Edit',
      icon: 'Edit',
      onClick: () => console.log('Edit clicked')
    },
    {
      label: 'Delete',
      icon: 'Trash',
      color: 'danger' as const,
      onClick: () => console.log('Delete clicked')
    },
  ];
  
  return <DDropdown actions={actions} />;
}

Props

actions

DropdownAction[]

required

Array of dropdown actions

Custom toggle element renderer

className

string

Additional CSS classes

DropdownAction Interface

label

string

required

Action label

onClick

() => void

Click handler for button actions

href

string

Link URL (renders as anchor)

icon

string

Icon name

color

'default' | 'danger' | 'success' | 'warning' | 'info'

Action color variant

disabled

boolean

Disables the action

isDivider

boolean

Renders as divider instead of action

Examples

Basic Actions
With Links
Custom Toggle
Disabled Items

const actions = [
  {
    label: 'View',
    icon: 'Eye',
    onClick: () => handleView()
  },
  {
    label: 'Edit',
    icon: 'Edit',
    onClick: () => handleEdit()
  },
  { isDivider: true },
  {
    label: 'Delete',
    icon: 'Trash',
    color: 'danger',
    onClick: () => handleDelete()
  },
];

<DDropdown actions={actions} />

const actions = [
  {
    label: 'Profile',
    href: '/profile',
    icon: 'User'
  },
  {
    label: 'Settings',
    href: '/settings',
    icon: 'Settings'
  },
  { isDivider: true },
  {
    label: 'Logout',
    onClick: handleLogout,
    icon: 'LogOut'
  },
];

<DDropdown actions={actions} />

<DDropdown
  actions={actions}
  dropdownToggle={({ open, toggle }) => (
    <DButton 
      text="Actions"
      iconEnd="ChevronDown"
      onClick={toggle}
    />
  )}
/>

const actions = [
  {
    label: 'Available Action',
    onClick: () => {}
  },
  {
    label: 'Disabled Action',
    onClick: () => {},
    disabled: true
  },
];

<DDropdown actions={actions} />

TypeScript Interface

export type DropdownAction = {
  onClick?: () => void;
  href?: string;
  disabled?: boolean;
  icon?: string;
  color?: 'default' | 'danger' | 'success' | 'warning' | 'info';
  isDivider?: boolean;
  label: string;
};

type Props = {
  actions: DropdownAction[];
  dropdownToggle?: ((props: { open: boolean, toggle: () => void }) => React.ReactNode);
  className?: string;
};

Get Started

Core Concepts

Components

Styling

Hooks & Utilities

Examples

​DModal

​Basic Usage

​Props

​Subcomponents

​DModal.Header

​DModal.Body

​DModal.Footer

​Examples

​TypeScript Interface

​DOffcanvas

​Basic Usage

​Props

​Subcomponents

​DOffcanvas.Header

​DOffcanvas.Body

​DOffcanvas.Footer

​Examples

​TypeScript Interface

​DPopover

​Basic Usage

​Props

​Examples

​TypeScript Interface

​DTooltip

​Basic Usage

​Props

​Examples

​TypeScript Interface

​DDropdown

​Basic Usage

​Props

​DropdownAction Interface

​Examples

​TypeScript Interface

Build docs developers (and LLMs) love

DModal

Basic Usage

Props

Subcomponents

DModal.Header

DModal.Body

DModal.Footer

Examples

TypeScript Interface

DOffcanvas

Basic Usage

Props

Subcomponents

DOffcanvas.Header

DOffcanvas.Body

DOffcanvas.Footer

Examples

TypeScript Interface

DPopover

Basic Usage

Props

Examples

TypeScript Interface

DTooltip

Basic Usage

Props

Examples

TypeScript Interface

DDropdown

Basic Usage

Props

DropdownAction Interface

Examples

TypeScript Interface