V2 missing Text component?

[lucksp]

I am new to NextUI. Am I missing something with v2 library: Is there no longer a Text component?

It seems like v1 offered it, but I cannot locate anything inside the @nextui-org/ package. Is it named something different? I followed the instructions for Next specific install.

[Ferouk]

It's not documented, so I presume it has been omitted! I'm unclear as to why or whether it will be reintroduced in the future.

[andyengle]

+1 on this one. Text looked like a decent feature, but it's nowhere to be found in v2.

[tylerthedeveloper]

following

[Leykwan132]

following

[J4v4Scr1pt]

My guess it that with just a <span>, <h1>, <p> etc. and Tailwind you can achieve the same functionality as this Text-component provided.
I can't see any use of it as of v2 imo.

[akhargha]

Following. Would be a useful feature.

[J4v4Scr1pt]

To those that want this component, just out of curiosity could you explain a use case with a Tex-component. That you can't achieve the same way with regular TW and e.g a <span>. 😊

[akhargha]

I could be wrong (because I am very new to all of this), but isn't that the whole point of UI component libraries like NextUI? You could theoretically replicate most components in NextUI using regular CSS/TW?

[J4v4Scr1pt]

This is good to discuss maybe helps them to decide 😊. Yes you are correct about you cold theoretically re-create any component with TW. But if you check the docs of the Text component and it's props all you do is set attributes that set some small css. Most of these classes already exists in TW, then in a new Text component you would pass a prop to set a TW class that you could do your self from the start. And we are talking about small things, no advanced classes etc. NextUI depends on TW so you have access to all these classes from the start.
That's why my 2cent is that there is no need of a component like this. But that's just me ofc, 😁.

[dvzrd]

One use case I've encountered that needed a Text component was when I needed to render a span with the same styles as a heading element. For example:

<Text as="span" variant="h2">span with h2 styles</Text>

This way screen readers would still register it as a span and there wouldn't be any accessibility issues - if you want a large heading in your footer and you have an h3 above it or something like that. This is an edge case however, and I can't really justify having a whole component for this reason.

I was able to solve most of my typography related issues by overriding the style resets with a stylesheet that I import after tailwindcss/base styles. You'll need to add the postcss-import plugin in postcss.config to be able to import separate stylesheets.

Here's an example:

@layer base {
  h1 {
    @apply
      font-headline
      font-bold
      text-11xl
      md:text-16xl
      xl:text-22xl;
  }

  h2 {
    @apply
      font-headline
      font-bold
      text-9xl
      md:text-14xl
      xl:text-19xl;
  }
  
  h3 {
    @apply
      font-headline
      font-bold
      text-7xl
      md:text-11xl
      xl:text-15xl;
  }
  
  h4 {
    @apply
      font-headline
      font-semibold
      text-5xl
      md:text-9xl
      xl:text-13xl;
  }
  
  h5 {
    @apply
      font-headline
      font-semibold
      text-4xl
      md:text-7xl
      xl:text-10xl;
  }
  
  h6 {
    @apply
      font-headline
      font-semibold
      text-3xl
      md:text-5xl
      xl:text-8xl;
  }

  p {
    @apply
      font-body
      font-normal
      text-base
      md:text-md
      xl:text-lg;
  }

  button {
    @apply
      font-headline
      uppercase
      tracking-wide;
  }
}

@import "tailwindcss/base";
@import "./typography.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

And for edge cases I would map repeating patterns of tailwind utils to an object or style module and add them in using tv or cva when needed.

[J4v4Scr1pt]

Good example 👍

[muazhari]

Roughly, when the typography components will be released?

[wingkwong]

we didn't include the Text as component in v2 because Tailwind already has utilities for that, you could even use the typography plugin and use native html elements.

https://tailwindcss.com/docs/typography-plugin