Components
Typography
A collection of typography components
import { Typography } from '@/components/ui/typography'export default function TypographyDemo() { const text = 'The quick brown fox jumps over the lazy dog.' return ( <article className='flex w-full flex-col'> <Typography variant='h1'>H1. Heading 1</Typography> <Typography variant='h2'>H2. Heading 2</Typography> <Typography variant='h3'>H3. Heading 3</Typography> <Typography variant='h4'>H4. Heading 4</Typography> <Typography>{text}</Typography> <Typography variant='blockquote'>{text}</Typography> <Typography variant='code'>{text}</Typography> <Typography variant='ul'> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </Typography> <Typography variant='ol'> <li>Ordered item 1</li> <li>Ordered item 2</li> <li>Ordered item 3</li> </Typography> <figure> {/* oxlint-disable-next-line next/no-img-element */} <img src='https://images.unsplash.com/photo-1700199849610-dd069b1719c2?q=80&w=1931&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' alt='demonstration of typography styles' className='mx-auto w-1/2 rounded-md object-cover' /> <Typography variant='caption' render={<figcaption />}> Figure 1. A sample image demonstrating typography styles. </Typography> </figure> </article> )}Installation
CLI
npx shadcn add https://ui.tiesen.id.vn/r/typography.jsonnpx shadcn add https://ui.tiesen.id.vn/r/typography.jsonpnpm dlx shadcn add https://ui.tiesen.id.vn/r/typography.jsonbunx --bun shadcn add https://ui.tiesen.id.vn/r/typography.jsonManual
Copy and paste the following code into your project.
import type { VariantProps } from 'class-variance-authority'import { cva } from 'class-variance-authority'import { cn } from '@/lib/utils'const typographyVariants = cva('text-base font-normal', { variants: { variant: { h1: 'scroll-m-20 text-4xl font-extrabold tracking-tight text-balance', h2: 'my-4 scroll-m-20 text-2xl font-bold tracking-tight text-balance', h3: 'my-2 scroll-m-20 text-xl font-semibold tracking-tight text-balance', h4: 'my-2 scroll-m-20 text-lg font-semibold tracking-tight text-balance', p: 'text-justify leading-7 text-pretty', small: 'block text-sm leading-none font-medium tracking-wide', ul: 'my-4 ml-6 list-disc text-base [&>li]:mt-2 [&>li]:first:mt-0', ol: 'my-4 ml-6 list-decimal text-base [&>li]:mt-2 [&>li]:first:mt-0', blockquote: 'my-4 inline-block border-l-2 pl-6 italic before:content-["“"] after:content-["”"]', code: 'relative w-fit rounded-sm border border-accent bg-accent/40 px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium text-accent-foreground', caption: 'mt-1 block text-center text-sm tracking-wide text-muted-foreground', }, }, defaultVariants: { variant: 'p', },})interface TypographyProps extends React.ComponentProps<'p'>, VariantProps<typeof typographyVariants> { as?: React.ElementType}function Typography({ className, variant = 'p', as, ...props}: TypographyProps) { const Comp = as ?? variant ?? 'p' return ( <Comp data-slot='typography' className={cn(typographyVariants({ variant }), className)} {...props} /> )}export { Typography, typographyVariants }Features
- Heading: A versatile heading component that supports multiple levels (h1-h6) with consistent styling.
- Paragraph: A simple paragraph component that ensures consistent spacing and typography across your application.
- Text: A basic text component for inline text elements, allowing for consistent font sizes and styles.
- Responsive Design: All typography components are designed to be responsive, ensuring they look great on all screen sizes.
- Customizable: Easily customize the typography components with additional props for styling and class names to fit your design needs.
