Design

Card#

The card class#

Adding card to elements add background and spacing to it. More features will come to the selector later.

content

Card as Dialog#

Apply a shadow and it is ready to be a dialog.

content

Combining with Dialog from @headlessui/react, we can easily create a basic dialog pattern.

import { useState } from "react";
import { Dialog } from "@headlessui/react";
 
<button
  className="btn btn-purple-p-4 px-8"
  onClick={() => setIsOpen(true)}
>
  <span class="label">Show Dialog</span>
</button>
 
<Dialog
  open={isOpen}
  onClose={() => setIsOpen(false)}
  className="relative z-50"
>
  {/* The backdrop of the dialog */}
  <div className="fixed inset-0 bg-grey-900/80" aria-hidden="true" />
  {/* The container centers its children (i.e. the card). */}
  <div className="fixed inset-0 flex items-center justify-center p-4">
    {/* the card here */}
    <Dialog.Panel className="card">
      <Dialog.Title className="section-title">Dialog.Title</Dialog.Title>
    </Dialog.Panel>
  </div>
</Dialog>