Snippet

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

#

Import

Snippet - The code snippet component with a copy button, that times out after 5 seconds.

import { Snippet } from "@dreamy-ui/react";

#

Usage

$ pnpm install @dreamy-ui/react @dreamy-ui/system

<Snippet>
	pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>

#

Variants

$ pnpm install @dreamy-ui/react @dreamy-ui/system

$ pnpm install @dreamy-ui/react @dreamy-ui/system

<Snippet variant="bordered">
	pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>
<Snippet variant="solid">
	pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>

#

Sizes

$ pnpm install @dreamy-ui/react @dreamy-ui/system

$ pnpm install @dreamy-ui/react @dreamy-ui/system

$ pnpm install @dreamy-ui/react @dreamy-ui/system

<Snippet size="sm">
	pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>
<Snippet size="md">
	pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>
<Snippet size="lg">
	pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>

#

Schemes

primary

$ pnpm install @dreamy-ui/react @dreamy-ui/system

secondary

$ pnpm install @dreamy-ui/react @dreamy-ui/system

success

$ pnpm install @dreamy-ui/react @dreamy-ui/system

warning

$ pnpm install @dreamy-ui/react @dreamy-ui/system

info

$ pnpm install @dreamy-ui/react @dreamy-ui/system

error

$ pnpm install @dreamy-ui/react @dreamy-ui/system

none

$ pnpm install @dreamy-ui/react @dreamy-ui/system

{["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 install @dreamy-ui/react @dreamy-ui/system
		</Snippet>
	</Stack>
))}

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

$ pnpm install @dreamy-ui/react @dreamy-ui/system

<Snippet disableTooltip>
	pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>

Slider

Switch

Dreamy UI

Your UI