---
type: doc
title: Typography
description: Native Liquid typography with readable CSS and shared data-slot parts.
---

> Native Liquid and CSS. Install from `https://ui.full.dev/r/liquid/{name}.json`; see [layout setup](/liquid/docs/installation.md). No Tailwind or consuming build.

```liquid title="liquid/examples/typography.liquid"
<article class='typeset'>
  <h2>Your collection</h2>
  <p>Readable text uses the same semantic tokens as the rest of your theme.</p>
  <ul>
    <li>Product details</li>
    <li>Care instructions</li>
  </ul>
  <blockquote>Add your own content here.</blockquote>
</article>
```

## Installation

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/typography.json
```

Follow the [one-time layout setup](/liquid/docs/installation/). A full `components` install already includes this item.

## Usage

After this install, render these once in the layout head before theme overrides and other modules. The full `ui` hook already includes them. The command also installs the parts used in this example.

```liquid
{% render 'ui-init' %}
{% render 'ui-typography' %}
```

The preview and its Usage tab render the same native Liquid source. Use `data-slot` for parts, `data-variant` for variants and `data-size` for sizes. Keep your store's labels, translations and Shopify data in your theme.

## Parts

`typography`, `typography-a`, `typography-blockquote`, `typography-h1`, `typography-h2`, `typography-h3`, `typography-h4`, `typography-inline-code`, `typography-large`, `typography-lead`, `typography-list`, `typography-muted`, `typography-p`, `typography-small`, `typography-table`, `typography-table-cell`, `typography-table-container`, `typography-table-head`, `typography-table-row`.

[Component source](https://github.com/fulldotdev/ui/tree/main/liquid/components/typography.liquid) · [Theming](/liquid/docs/theming/)

## Variants

`muted`.

## Sizes

`lg`, `sm`.

## Install what this page shows

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/typography.json
```