Components
Loading preview...
Display a snippet of copyable code for the command line.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/snippetimport React from "react";
import { Snippet } from "@/components/ui/snippet";
export const Default = () => (
<div className="flex gap-2 flex-col w-1/2">
<div className="font-bold text-xl dark:text-white">Default</div>
<Snippet text="npm init next-app" />
</div>
);
export const Inverted = () => (
<div className="flex gap-2 flex-col w-1/2">
<div className="font-bold text-xl dark:text-white">Inverted</div>
<Snippet text="npm init next-app" dark />
</div>
);
export const MultiLine = () => (
<div className="flex gap-2 flex-col w-1/2">
<div className="font-bold text-xl dark:text-white">Multi-line</div>
<Snippet text={["cd project", "now"]} />
</div>
);
export const NoPrompt = () => (
<div className="flex gap-2 flex-col w-1/2">
<div className="font-bold text-xl dark:text-white">No prompt</div>
<Snippet text="npm init next-app" prompt={false} />
</div>
);
export const Callback = () => (
<div className="flex gap-2 flex-col w-1/2">
<div className="font-bold text-xl dark:text-white">Callback</div>
<Snippet
text="npm init next-app"
onCopy={() => alert("You copied the text!")}
/>
</div>
);
export const CustomWidth = () => (
<div className="flex gap-2 flex-col w-1/2">
<div className="font-bold text-xl dark:text-white">Custom width</div>
<Snippet text="npm init next-app" width="300px" />
</div>
);
export const Variants = () => (
<div className="flex flex-col gap-2 w-1/2">
<div className="font-bold text-xl dark:text-white">Variants</div>
<Snippet text="npm init next-app" type="success" />
<Snippet text="npm init next-app" type="error" />
<Snippet text="npm init next-app" type="warning" />
</div>
);