---
title: Text | UI
description: Text allows the rendering of text and paragraphs within an interface
pageTitle: Text
pageDescription: Text allows the rendering of text and paragraphs within an interface.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="components/Typography/Text" />

import { Text } from './Text';
import { Center } from '../../Layout/Center/Center';
import { transformedCode } from '../../../utils';
import Wrapper from '../../Wrapper';

import { AppProvider, CodePreview, Table } from '@gluestack/design-system';

# Installation

This command copies the `Text` component to your project.

```jsx
npx install @gluestack-ui add text
```

## Import

```jsx
// import the component from your component folder
import { Text } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
<Text>
  Text
</Text>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Text,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

```jsx
export default () => <Text></Text>;
```

## API Reference

### Text

It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text#props) component.

<br />
<br />

## Examples

### Text Sizes

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
function App() {
  const sizes = [
    'xs',
    'sm',
    'md',
    'lg',
    'xl',
    '2xl',
    '3xl',
    '4xl',
    '5xl',
    '6xl',
  ];
  return (
    <Wrapper>
      <Center>
        {sizes.map((size) => (
          <Text size={size}>{size}</Text>
        ))}
      </Center>
    </Wrapper>
  );
};
`,
      scope: { Wrapper, Center, Text },
      argsType: {},
    }}
  />
</AppProvider>

# Advanced

## Customizing the Text

For customizing the Text, you have to map styled view to Text. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import { Root } from '../components/core/text/styled-components';

// mapping the Text to root component
const Text = Root;

// Using the text component
export default () => <Text />;
```

Default styling of the component can be found in the `components/core/text` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Text/index.tsx) of the styled `Text` component.