Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

A simple 8-bit dialog component

Open in

Installation

pnpm dlx shadcn@canary add https://8bitcn.com/r/8bit-dialog.json

Usage

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/8bit/dialog";

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open Dialog</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-[425px]">
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription className="text-xs">
        Make changes to your profile here. Click save when you're
        done.
      </DialogDescription>
    </DialogHeader>

    <Label>Name</Label>
    <Input placeholder="Project name" className="max-w-72" />

    <Label>Framework</Label>
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Framework" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="next">Next.js</SelectItem>
        <SelectItem value="svelte">SvelteKit</SelectItem>
        <SelectItem value="astro">Astro</SelectItem>
        <SelectItem value="nuxt">Nuxt.js</SelectItem>
      </SelectContent>
    </Select>
    <DialogFooter>
      <Button size="sm">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>