TW Elements React is included in all our TWE PRO packages.
TW Elements React is a plugin that extends the functionality of the library with many interactive components.
Some of our components (like collapse or modals) include a custom React code. However, they do not require any additional installation, all the necessary code is always included in the example and copied to any Tailwind project with React - it will work.
Manual installation (zip package)
Step 1.
Download the package from orders
Step 2.
Unzip downloaded package and open it in the code editor
Step 3.
Explore our documentation (menu on the left). Choose components you like, copy it to your project and compose your website. And yes, it's that simple!
NPM
NPM is a recommended way to work with TW Elements React and others libraries.
Make sure that you have Node.js installed. In order to verify
that, open a command line and type node -v. If
node is installed you should see it's version in a console.
Prerequisites
1. Before starting the project make sure to install Node.js (LTS) , TailwindCSS and generate gitlab access token.
2. Create a new React app. If you already have one installed, you can jump to the TW Elements React section. We are going to create the app with create-react-app command.
npx create-react-app my-app
3. Navigate to app's directory
cd my-app
4. Install and initialize tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
5. Add the necessary Tailwind directives to your ./src/index.css file
to be able to use Tailwind classes on your website.
@tailwind base;
@layer base {
html {
@apply text-neutral-800;
}
html.dark {
@apply text-neutral-50;
@apply bg-neutral-800;
}
}
@tailwind components;
@tailwind utilities;
TW Elements React
If you installed your app via create-react-app, then your folder structure should look like this. We are going to refer to this structure, but if yours looks different it's not really an issue.
my-project/
├── node_modules/
├── public/
├── src/
│ ├── App.js
│ ├── index.css
│ ├── ...
│ └── index.js
├── package-lock.json
├── package.json
├── ...
└── tailwind.config.js
1. To install TW Elements in your project easily type the following command in the terminal. Remember to swap the access token before starting the installation:
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/twe-react/prd/twe-react-pro-essential
2. TW Elements is a plugin and should be included inside
tailwind.config.js. It is also recommended to extend the
content array with a js files pattern that loads dynamic
component classes:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/tw-elements-react/dist/js/**/*.js"
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [require("tw-elements-react/dist/plugin.cjs")]
}
3. Import TE React css file. Add the following line in your index.js file.
import "tw-elements-react/dist/css/tw-elements-react.min.css";
4. Now you can start working on your app. Dynamic components will work after importing the package inside your components.For example, the collapse component will have proper styles, and toggle the content on button click when we add the code bellow to the App.js file.
import React, { useState } from "react";
import { TECollapse, TERipple } from "tw-elements-react";
export default function App() {
const [show, setShow] = useState(false);
const toggleShow = () => setShow(!show);
return (
<>
<TERipple rippleColor="light">
<a
className="inline-block rounded bg-primary mr-2 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
role="button"
onClick={toggleShow}
>
Link
</a>
</TERipple>
<TERipple rippleColor="light">
<button
type="button"
className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
onClick={toggleShow}
>
Button
</button>
</TERipple>
<TECollapse show={show}>
<div className="block rounded-lg bg-white p-6 shadow-lg dark:bg-neutral-700 dark:text-neutral-50">
Some placeholder content for the collapse component. This panel is
hidden by default but revealed when the user activates the relevant
trigger.
</div>
</TECollapse>
</>
);
}
5. Start the app if you haven't already
npm start
Vite
Node.js version 16.17.0 + / 18.1.0 + installed. Please update if your package
manager asks for it. If you are expecting issues with vite.config.js and you don't want to update the npm, try using the 4.3.9 version of vite.
Vite (French word for "fast", pronounced /vit/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. TW Elements can be imported in Vite applications according to the following procedure:
1. Create a new vite project and enter the newly created directory. You can skip this step if you already have it installed.
npm create vite@latest my-project -- --template react-ts
cd my-project
2. Install tailwind CSS and its dependencies. After that,
init the tailwind with the Tailwind CLI tool to create
tailwind.config.js file.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
3. Go to the tailwind.config.js file and add paths where your
html files are going to be stored. You can change the
index.html location but make sure to change to
root folder
inside the vite.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/tw-elements-react/dist/js/**/*.js"
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [require("tw-elements-react/dist/plugin.cjs")]
}
4. Add the necessary Tailwind directives to your ./src/index.css file
to be able to use Tailwind classes on your website.
@tailwind base;
@layer base {
html {
@apply text-neutral-800;
}
html.dark {
@apply text-neutral-50;
@apply bg-neutral-800;
}
}
@tailwind components;
@tailwind utilities;
5. Install the tw-elements-react package.
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/twe-react/prd/twe-react-pro-essential
6. Import TE React css file. Add the following line in your main.tsx file.
import "tw-elements-react/dist/css/tw-elements-react.min.css";
7. Now you can start working on your app. The collapse component should have proper styles, and toggle the content on button click.
import React, { useState } from "react";
import { TECollapse, TERipple } from "tw-elements-react";
export default function App(): JSX.Element {
const [show, setShow] = useState(false);
const toggleShow = () => setShow(!show);
return (
<>
<TERipple rippleColor="light">
<a
className="inline-block rounded bg-primary mr-2 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
role="button"
onClick={toggleShow}
>
Link
</a>
</TERipple>
<TERipple rippleColor="light">
<button
type="button"
className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
onClick={toggleShow}
>
Button
</button>
</TERipple>
<TECollapse show={show}>
<div className="block rounded-lg bg-white p-6 shadow-lg dark:bg-neutral-700 dark:text-neutral-50">
Some placeholder content for the collapse component. This panel is
hidden by default but revealed when the user activates the relevant
trigger.
</div>
</TECollapse>
</>
);
}
8. TW Elements React should be connected properly to the vite app. You can start the app by running the following command.
npm run dev