Replies: 2 comments 1 reply
-
In the past I've done typography with tailwind using https://tailwindcss.com/docs/typography-plugin and customizing the styles to my needs in the That said, if you wanted to use a component based approach like above, what I've seen in some other libraries is a generic import { Slot } from "@radix-ui/react-slot";
import { type VariantProps, cva } from "class-variance-authority";
import React from "react";
const typeVariants = cva("text-foreground", {
variants: {
variant: {
body: "text-foreground font-medium",
},
size: {
sm: "text-sm",
md: "text-md",
lg: "text-lg",
},
},
defaultVariants: {
variant: "body",
},
});
export interface TypographyProps
extends React.HTMLAttributes<HTMLElement>,
VariantProps<typeof typeVariants> {
asChild?: boolean;
}
export const Typography = React.forwardRef<
HTMLParagraphElement,
TypographyProps
>(({ variant, className, asChild, ...rest }, ref) => {
const Comp = asChild ? Slot : "p";
return (
<Comp
ref={ref}
className={typeVariants({ variant, className })}
{...rest}
/>
);
});
Typography.displayName = "Typography"; This will however make everything a |
Beta Was this translation helpful? Give feedback.
-
Hey @jimburch, It's been a while since you asked, and I'm not sure if it's even a better approach, but I simply add the tailwind formatting suggested on shadcn's typography to my globals.css file via the "@apply" decorator so that I can keep my semantic OCD in check 😜. Here is what it looks like:
You can then use your standard tags on your code. hope this helps. ✌️😎 |
Beta Was this translation helpful? Give feedback.
-
Unless I'm missing something, it doesn't look like the typography components work the same as the others (I only see the examples). So, I used those examples to create two UI components:
And then using
<Heading as="h1">
and<Text as="blockquote">
as custom components.Anyone else doing something like this? Am I making it more complicated than it needs to be. There doesn't seem to be a typical; Typography import like in other libraries.
Beta Was this translation helpful? Give feedback.
All reactions