Components
Loading preview...
Enhanced shadcn/ui dialog
npx shadcn@latest add https://21st.dev/r/originui/dialogimport { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
function Component() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Feedback</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Send us feedback</DialogTitle>
<DialogDescription>
Watch{" "}
<a className="text-foreground hover:underline" href="#">
tutorials
</a>
, read Origin UI‘s{" "}
<a className="text-foreground hover:underline" href="#">
documentation
</a>
, or join our{" "}
<a className="text-foreground hover:underline" href="#">
Discord
</a>{" "}
for community help.
</DialogDescription>
</DialogHeader>
<form className="space-y-5">
<Textarea
id="feedback"
placeholder="How can we improve Origin UI?"
aria-label="Send feedback"
/>
<div className="flex flex-col sm:flex-row sm:justify-end">
<Button type="button">Send feedback</Button>
</div>
</form>
</DialogContent>
</Dialog>
);
}
export { Component };