Snippet

Snippet provides a simple way to display code snippets with a copy button.

#

Installation

npx dreamy add snippet

pnpm dlx dreamy add snippet

yarn dlx dreamy add snippet

bunx dreamy add snippet

#

Usage

$ pnpm dlx dreamy add --all

<Snippet>
	pnpm dlx dreamy add --all
</Snippet>

#

Variants

$ pnpm dlx dreamy add --all

$ pnpm dlx dreamy add --all

<Snippet variant="bordered">
	pnpm dlx dreamy add --all
</Snippet>
<Snippet variant="solid">
	pnpm dlx dreamy add --all
</Snippet>

#

Sizes

$ pnpm dlx dreamy add --all

$ pnpm dlx dreamy add --all

$ pnpm dlx dreamy add --all

<Snippet size="sm">
	pnpm dlx dreamy add --all
</Snippet>
<Snippet size="md">
	pnpm dlx dreamy add --all
</Snippet>
<Snippet size="lg">
	pnpm dlx dreamy add --all
</Snippet>

#

Schemes

primary

$ pnpm dlx dreamy add --all

secondary

$ pnpm dlx dreamy add --all

success

$ pnpm dlx dreamy add --all

warning

$ pnpm dlx dreamy add --all

info

$ pnpm dlx dreamy add --all

error

$ pnpm dlx dreamy add --all

none

$ pnpm dlx dreamy add --all

{["primary", "secondary", "success", "warning", "info", "error", "none"].map((scheme) => (
	<Stack
		key={scheme}
		direction={{
			base: "column",
			md: "row"
		}} 
		alignItems={{
			base: "start",
			md: "center"
		}}`
		w='full'
	>
		<Text minW={20}>{scheme}</Text>	
		<Snippet key={scheme} scheme={scheme} w='full'>
			pnpm dlx dreamy add --all
		</Snippet>
	</Stack>
))}

You can disable the "Copy To Clipboard" tooltip by using the disableTooltip prop.

$ pnpm dlx dreamy add --all

<Snippet disableTooltip>
	pnpm dlx dreamy add --all
</Snippet>

Slider

Spinner

Dreamy UI

Your UI