Getting StartedIntroduction SOONInstallation SOONChange log SOONRoadmap SOON

ContainerFlex SOONGrid SOONSticky SOONSeparator SOONAspect Ratio SOONVisually Hidden SOON

DialogPopover SOONTooltipDropdown Menu SOONContext Menu SOONHover Card SOON

Link SOONNavigation Menu SOONBreadcrumbs SOONPagination SOONStepper SOON

Collapsible SOONAccordion SOONTabs SOON

H1 SOONH2 SOONH3 SOONH4 SOONH5 SOONH6 SOONP SOONSpan SOONEm SOONI SOONStrong SOONB SOONQ SOONBlockquote SOONUl SOONOl SOONKbd SOONCode SOONTable of Contents SOON

Media

Icon SOONAvatar SOONAvatar Group SOONImage SOONVideo SOON

Notifications

Notification SOONNotification Panel SOONToast SOONAlert SOON

Status

Spinner SOONProgress Bar SOON

Buttons

Button SOONBurger Button SOONButton Group SOON

Data Display

Article Preview SOONBadge SOONCard SOONCommand Line SOONTable SOONTag SOONTag Group SOONTag Picker SOONTestimonial SOONProduct Tile SOONSkeleton SOONStatistic SOON

Data Entry

Address Input SOONCheckbox SOONCalendar Input SOONCalendar Range Input SOONColor Picker SOONCurrency Input SOONCredit Card Input SOONDate Input SOONDate Picker SOONDate Range Input SOONDate Range Picker SOONFieldset SOONFile Input SOONFile Dropzone SOONFile Picker SOONLabel SOONPin Input SOONPhone Number Input SOONRadio Button SOONRadio Group SOONRange Slider SOONRating SOONSearch Input SOONSwitch SOONSegmented Control SOONSelect SOONSlider SOONText Input SOONTextarea SOONToggle SOONToggle Group SOONURL Input SOON

Forms

TBD SOON

Q

A short inline quotation.

Features

Drop-in replacement for the native <q> element.
Automatically inherits the parent's design tokens (just like a normal q tag).

Parts and their API

Q

A short inline quotation.

Props

Prop	Type	Default	Description
weight	enum: black, extrabold, bold, semibold, medium, normal, light, extralight, thin	No default value	The font weight.
size	enum: 4xl, 3xl, 2xl, xl, lg, md, sm, xs	No default value	The font size.
align	enum: left, center, or right	No default value	The text alignment.
tracking	enum: tighter, tight, normal, wide, wider, or widest	size-dependent	The letter spacing.

Usage

QExample.tsx

<P>
	When Dave asks HAL to open the pod bay door, HAL answers: <Q>I'm sorry, Dave. I'm afraid I can't do that.</Q>
</P>

Here's the <Q /> component in action.

When Dave asks HAL to open the pod bay door, HAL answers: I'm sorry, Dave. I'm afraid I can't do that.

Source

Get all-access

Styling

tailwind.css

/* ### Typography ### */
@layer components {
	/* Q */
	.q {
		@apply before:content-['“'] after:content-['”'];
	}
}