You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: docs/framework/react/guides/ui-libraries.md
+6-6
Original file line number
Diff line number
Diff line change
@@ -5,15 +5,15 @@ title: UI Libraries
5
5
6
6
# Usage of TanStack Form with UI Libraries
7
7
8
-
TanStack Form is a headless library, offering you complete flexibility to style it as you see fit. It's compatible with a wide range of UI libraries, including `Tailwind`, `Material-UI`, `Mantine`, or even plain CSS.
8
+
TanStack Form is a headless library, offering you complete flexibility to style it as you see fit. It's compatible with a wide range of UI libraries, including `Tailwind`, `MaterialUI`, `Mantine`, or even plain CSS.
9
9
10
-
This guide focuses on `Material-UI` and `Mantine`, but the concepts are applicable to any UI library of your choice.
10
+
This guide focuses on `MaterialUI` and `Mantine`, but the concepts are applicable to any UI library of your choice.
11
11
12
12
## Prerequisites
13
13
14
14
Before integrating TanStack Form with a UI library, ensure the necessary dependencies are installed in your project:
15
15
16
-
- For `Material-UI`, follow the installation instructions on their [official site](https://mui.com/material-ui/getting-started/).
16
+
- For `MaterialUI`, follow the installation instructions on their [official site](https://mui.com/material-ui/getting-started/).
17
17
- For `Mantine`, refer to their [documentation](https://mantine.dev/).
18
18
19
19
Note: While you can mix and match libraries, it's generally advisable to stick with one to maintain consistency and minimize bloat.
@@ -87,9 +87,9 @@ export default function App() {
87
87
- By following these steps, you can seamlessly integrate Mantine components with TanStack Form.
88
88
- This methodology is equally applicable to other components, such as `Checkbox`, ensuring consistent integration across different UI elements.
89
89
90
-
## Usage with `Material-UI`
90
+
## Usage with Material UI
91
91
92
-
The process for integrating Material-UI components is similar. Here's an example using TextField and Checkbox from Material-UI:
92
+
The process for integrating MaterialUI components is similar. Here's an example using TextField and Checkbox from MaterialUI:
93
93
94
94
```tsx
95
95
<Field
@@ -125,4 +125,4 @@ The process for integrating Material-UI components is similar. Here's an example
125
125
```
126
126
127
127
- The integration approach is the same as with Mantine.
128
-
- The primary difference lies in the specific Material-UI component properties and styling options.
128
+
- The primary difference lies in the specific MaterialUI component properties and styling options.
0 commit comments