<Snippet.Root>
	<Snippet.Header />
	<Snippet.Body>pnpm dlx dreamy add --all</Snippet.Body>
</Snippet.Root>

import { Button, Snippet } from "@dreamy-ui/react";
import { useState } from "react";
 
const commands = {
	npm: "npx dreamy init",
	pnpm: "pnpm dlx dreamy init",
	yarn: "yarn dlx dreamy init",
	bun: "bunx dreamy init",
} as const;
 
function InstallSnippet() {
	const [pm, setPm] = useState<keyof typeof commands>("pnpm");
	const command = commands[pm];
 
	return (
		<Snippet.Root>
			<Snippet.Header>
				{(Object.keys(commands) as Array<keyof typeof commands>).map((name) => (
					<Button
						key={name}
						variant="link"
						size="sm"
						color={pm === name ? "fg" : "fg.medium"}
						onClick={() => setPm(name)}
					>
						{name}
					</Button>
				))}
			</Snippet.Header>
			<Snippet.Body codeString={command}>{command}</Snippet.Body>
		</Snippet.Root>
	);
}

import { LuLink } from "react-icons/lu";
 
<Snippet.Root>
	<Snippet.Header icon={LuLink} />
	<Snippet.Body>pnpm dlx dreamy add --all</Snippet.Body>
</Snippet.Root>

import { Icon, IconButton, Snippet } from "@dreamy-ui/react";
import { useSnippetContext } from "@dreamy-ui/react";
import { LuCheck, LuCopy } from "react-icons/lu";
 
function CustomCopyButton() {
	const { copy, copied } = useSnippetContext();
 
	return (
		<IconButton
			aria-label="Copy"
			icon={<Icon as={copied ? LuCheck : LuCopy} boxSize="4" />}
			onClick={() => copy()}
			variant="link"
		/>
	);
}
 
<Snippet.Root>
	<Snippet.Header hideCopyButton>
		<CustomCopyButton />
	</Snippet.Header>
	<Snippet.Body>pnpm dlx dreamy add --all</Snippet.Body>
</Snippet.Root>

<Snippet.Root size="sm">
	<Snippet.Header />
	<Snippet.Body>pnpm dlx dreamy add --all</Snippet.Body>
</Snippet.Root>