Docs

Getting started

Introduction

Components

Blockquote Input Selector File Drop Floating Label

Blockquote

Display a quote or a component that looks like a quote.

Any application that can be written in JavaScript, will eventually be written in JavaScript

Jeff Atwood

<script lang="ts">
	import Blockquote from '$lib/components/customize/Blockquote.svelte';
</script>

<Blockquote>
	<p slot="content">
		Any application that can be written in JavaScript, will eventually be written in JavaScript
	</p>
	<span slot="author">Jeff Atwood</span>
</Blockquote>

Installation

Set up shadcn-svelte if you haven't

Copy this code

<script lang="ts">
	import { cn } from '$lib/utils.js';

	export let contentClass: string = '';
	export let authorClass: string = '';
</script>

<div
	class={cn(
		"relative rounded-lg border-l-8 border-l-gray-700 bg-gray-100 py-5 pl-16 pr-5 font-sans text-lg italic leading-relaxed text-gray-500 before:absolute before:left-3 before:top-3 before:font-serif before:text-6xl before:text-gray-700 before:content-['“']",
		contentClass
	)}
>
	<slot name="content" />
	<div class={cn('mt-5 pr-4 text-right font-bold not-italic text-gray-700', authorClass)}>
		<slot name="author" />
	</div>
</div>

Adjust the import to match your project

Props

Property Type Default Description

contentClass string - Additional classes to style the content block

authorClass string - Additional classes to style the author name

Slots

<slot name="content"> : Display content

<slot name="author"> : Display author's name