` to
+ keep your HTML valid.
+
+- **Use Text for short pieces of text content.** Including a couple of HTML tags
+ shouldn't cause any harm, but keep in mind Text is not intended to wrap
+ complex HTML structures or even React components.
+
+## Number of Lines
+
+Specify how many `lines` of text should be visible if content doesn't fit its
+container. If the number of lines is exceeded, the content is truncated and
+appended by an ellipsis (`β¦`).
+
+```docoff-react-preview
+React.createElement(() => {
+ const [lines, setLines] = React.useState(1);
+ return (
+
+ );
+});
+```
+
+## Word Wrapping
+
+There are three possible ways of controlling wrapping of long words if they do
+not fit on a line. Set `wordWrapping` to one of the following values:
+
+- `normal`: Do not force any wrapping (default behavior).
+
+- `long-words`: To prevent overflow, an otherwise unbreakable string of
+ characters β like a long word or URL β may be broken at any point if there are
+ no otherwise-acceptable break points in the line.
+
+- `anywhere`: Create a break at the exact place where text would otherwise
+ overflow its container (even if putting an entire word on its own line would
+ negate the need for a break).
+
+π [Read more about wrapping and breaking text at MDN.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text)
+
+### Hyphens
+
+The `hyphens` option specifies how words should be hyphenated when text wraps
+across multiple lines. It can prevent hyphenation entirely, hyphenate at
+manually-specified points within the text, or let the browser automatically
+insert hyphens where appropriate.
+
+π The `auto` setting's behavior depends on the language being properly tagged
+to select the appropriate hyphenation rules. **You must specify a language**
+using the `lang` HTML attribute (e.g.
+[on `` tag](/docs/getting-started/usage#full-example)) to guarantee that
+automatic hyphenation is applied in that language.
+
+π [Manually suggested line break opportunities](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#suggesting_line_break_opportunities)
+will override automatic break point selection in `auto` mode when present.
+
+π [Read more about `hyphens` CSS property at MDN.](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)
+
+```docoff-react-preview
+React.createElement(() => {
+ const [hyphens, setHyphens] = React.useState('none');
+ const [wordWrapping, setWordWrapping] = React.useState('normal');
+ return (
+
+ );
+});
+```
+
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded either to the
+`
` or to the `` HTML element in case that `blockLevel` is set to
+`true`. This enables making the component interactive and helps to improve its
+accessibility.
+
+π Refer to the MDN reference for the full list of supported attributes of the
+[span] and [div] element.
+
+## API
+
+
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[span]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span#attributes
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
diff --git a/src/lib/components/Text/Text.jsx b/src/components/Text/Text.jsx
similarity index 100%
rename from src/lib/components/Text/Text.jsx
rename to src/components/Text/Text.jsx
diff --git a/src/lib/components/Text/Text.scss b/src/components/Text/Text.scss
similarity index 100%
rename from src/lib/components/Text/Text.scss
rename to src/components/Text/Text.scss
diff --git a/src/lib/components/Text/__tests__/Text.test.jsx b/src/components/Text/__tests__/Text.test.jsx
similarity index 100%
rename from src/lib/components/Text/__tests__/Text.test.jsx
rename to src/components/Text/__tests__/Text.test.jsx
diff --git a/src/lib/components/Text/_helpers/getRootClampClassName.js b/src/components/Text/_helpers/getRootClampClassName.js
similarity index 100%
rename from src/lib/components/Text/_helpers/getRootClampClassName.js
rename to src/components/Text/_helpers/getRootClampClassName.js
diff --git a/src/lib/components/Text/_helpers/getRootHyphensClassName.js b/src/components/Text/_helpers/getRootHyphensClassName.js
similarity index 100%
rename from src/lib/components/Text/_helpers/getRootHyphensClassName.js
rename to src/components/Text/_helpers/getRootHyphensClassName.js
diff --git a/src/lib/components/Text/_helpers/getRootWordWrappingClassName.js b/src/components/Text/_helpers/getRootWordWrappingClassName.js
similarity index 100%
rename from src/lib/components/Text/_helpers/getRootWordWrappingClassName.js
rename to src/components/Text/_helpers/getRootWordWrappingClassName.js
diff --git a/src/lib/components/Text/index.js b/src/components/Text/index.js
similarity index 100%
rename from src/lib/components/Text/index.js
rename to src/components/Text/index.js
diff --git a/src/components/TextArea/README.md b/src/components/TextArea/README.md
new file mode 100644
index 00000000..08f05906
--- /dev/null
+++ b/src/components/TextArea/README.md
@@ -0,0 +1,359 @@
+# TextArea
+
+TextArea enables users to add longer text to a form.
+
+## Basic Usage
+
+To implement the TextArea component, you need to import it first:
+
+```js
+import { TextArea } from '@react-ui-org/react-ui';
+```
+
+And use it:
+
+```docoff-react-preview
+
+```
+
+See [API](#api) for all available options.
+
+## General Guidelines
+
+- Use **short and descriptive labels**, ideally nouns rather than seemingly
+ polite phrases like _Please enter your message_. Short labels will help your
+ users accomplish their task faster.
+
+- Only make the TextArea's label invisible when there is **another visual
+ clue** to guide users through filling the input. Using the first option as
+ label is not recommended either β it disappears once user makes their choice.
+
+- When a short label is not enough, use **help texts to guide users** before
+ they enter anything.
+
+- Optionally you can **pre-fill your text fields with a placeholder** to give
+ users an example of what they're expected to fill in. Just remember the
+ placeholder disappears once a value is entered so don't put anything important
+ there. Usually, en example value starting with βEg.β works best.
+
+- Use **clear, calm error messages** when there's a problem with what they
+ entered. Be positive and focus on solutions to make the error message helpful.
+
+- Ensure the height of a text area **fits within mobile screen sizes.**
+
+## Design Variants
+
+To satisfy the design requirements of your project, all input fields in React UI
+come in **two design variants** to choose from: outline and filled. Both can be
+further [customized](#theming) with CSS custom properties.
+
+```docoff-react-preview
+
+
+```
+
+## Sizes
+
+Aside from the default (medium) size, two additional sizes are available: small
+and large.
+
+```docoff-react-preview
+
+
+
+
+
+
+```
+
+Full-width fields span the full width of a parent:
+
+```docoff-react-preview
+
+
+```
+
+## Input Size
+
+The default width of all inputs is 240 px, and it can be
+[customized](/docs/customize/theming/overview) with a CSS custom property.
+However, you can also **control the size of individual text areas** using
+the `rows` and `cols` properties. Additionally, text areas are vertically
+resizable by users.
+
+π Remember that the `cols` and `rows` HTML attributes **do not limit on how
+many characters** the user can enter. Use the
+[`maxlength` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Min_and_max_length)
+to achieve that effect.
+
+```docoff-react-preview
+
+
+```
+
+## Invisible Label
+
+In some cases, it may be convenient to visually hide the field label. The label
+remains accessible to assistive technologies.
+
+While it may be acceptable for login screens with just a few fields or other
+simple forms, it's dangerous to hide labels from users in most cases. Keep in
+mind you should **provide another visual clue** so users know what to fill into
+the input.
+
+```docoff-react-preview
+
+
+```
+
+## Horizontal Layout
+
+The default vertical layout is very easy to use and work with. However, there
+are situations where horizontal layout suits better β and that's why React UI
+supports this kind of layout as well.
+
+```docoff-react-preview
+
+
+
+
+
+
+```
+
+## Help Text
+
+You may provide an additional help text to clarify how the input should be
+filled.
+
+```docoff-react-preview
+
+
+
+
+
+
+```
+
+## States
+
+### Validation States
+
+Validation states visually present the result of validation of the input. You
+should always **provide a help text for states other than valid** so users know
+what happened and what action they should take or what options they have.
+
+```docoff-react-preview
+