Breaking News: Grepper is joining You.com. Read the official announcement!

Headless Ui

Stephen Muchendu answered on March 26, 2023 Popularity 10/10 Helpfulness 1/10

answer Headless Ui

Headless Ui

Comment

Headless Ui

import { useState } from 'react'
import { Dialog } from '@headlessui/react'

function MyDialog() {
  let [isOpen, setIsOpen] = useState(true)

  return (
    <Dialog
      open={isOpen}
      onClose={() => setIsOpen(false)}
      className="relative z-50"
    >
      {/* The backdrop, rendered as a fixed sibling to the panel container */}
      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />

      {/* Full-screen container to center the panel */}
      <div className="fixed inset-0 flex items-center justify-center p-4">
        {/* The actual dialog panel  */}
        <Dialog.Panel className="mx-auto max-w-sm rounded bg-white">
          <Dialog.Title>Complete your order</Dialog.Title>

          {/* ... */}
        </Dialog.Panel>
      </div>
    </Dialog>
  )
}

Example

Popularity 10/10 Helpfulness 1/10 Language whatever

Source: headlessui.com

Tags: headless-ui whatever

Link to this answer
Share Copy Link

Contributed on Mar 26 2023

Stephen Muchendu

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

Headless Ui

Contents

More Related Answers

Headless Ui

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.