A simple component.
This React component simplifies writing text using shadcn-ui and TailwindCSS. You can simply copy and paste it without needing to add any other dependencies.
I originally started with mobile app development. When I ventured into web service development, I wasn’t very familiar with using HTML tags and wanted a more intuitive way to develop. That’s why I decided to create this.
This component allows you to reuse text elements across your application, making maintenance easier by centralizing style updates in one component.
With this component, you can use variants like h1, p, or tr without needing to remember the exact HTML tags. When using this component, you can simply rely on previews.
The variant values correspond to standard HTML tags while being easily manageable within a single component.
The component-based approach offers a more intuitive way to manage text, simplifying the process of applying styles consistently throughout the app.
install shadcn-ui. Refer to shadcn-ui Docs for installation instructions.
This component example is optimized for projects using TailwindCSS and shadcn-ui. However, it’s a React component that can be used in any project.
Copy and pate the /src/components/ui/Text.tsx file into the ui folder of your project.
import Text from "@/components/ui/Text";
<Text variant="p">Hello.</Text>You can freely apply custom styles that don’t need to be reused using the className.
To make the custom styles reusable, add the variant to the Text.tsx file.
If you don’t need custom fonts, you can skip this. In this example, the font files are located in the /public/fonts directory, and the font is specified in global.css. You can define the fonts based on your project structure, allowing you to use the font of your choice.