(Open Source)Here is a new <Text> component.

[bytaesu]

Open Source 'Text' component for shadcn-ui

GitHub repository is 'here'

🙂 What is this.

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.

🤔 Why I built this.

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.

😲 Key points.

1. Highly reusable, maintainable, and customizable

This component allows you to reuse text elements across your application, making maintenance easier by centralizing style updates in one component.

2. You don’t need to remember HTML tags.

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.

3. HTML Tag Matching

The variant values correspond to standard HTML tags while being easily manageable within a single component.

4. Easy to use

The component-based approach offers a more intuitive way to manage text, simplifying the process of applying styles consistently throughout the app.

😀 How to use.

1. Installation

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.

2. Copy and paste

Copy and pate the /src/components/ui/Text.tsx file into the ui folder of your project.

3. Then, use like this.

import Text from "@/components/ui/Text";
    
<Text variant="p">Hello.</Text>

🤩 Advanced use.

1. One time customize.

You can freely apply custom styles that don’t need to be reused using the className.

2. Reusable customize.

To make the custom styles reusable, add the variant to the Text.tsx file.

3. Fonts.

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.