Material Tailwind React

https://www.material-tailwind.com/docs/react
Admin
Material Tailwind React is a comprehensive UI component library that combines Material Design with...
Tokens:325,043
Snippets:859
Trust Score:9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Test Genezio Project Locally (Frontend)

Source: https://www.material-tailwind.com/docs/react/guide/genezio

Installs frontend dependencies and starts the development server for the client-side application. This command should be run in the client directory (`genezio-project/client`).

```bash
cd genezio-project/client
npm install
npm run dev
```

--------------------------------

### Install @docsearch/react for React Projects

Source: https://www.material-tailwind.com/docs/react/crypto/crypto-card

This command installs the `@docsearch/react` library, which is used for implementing global search functionality in React projects. Ensure you have Node.js and npm installed.

```bash
npm i @docsearch/react
```

--------------------------------

### Install and Login to Genezio CLI

Source: https://www.material-tailwind.com/docs/react/guide/genezio

Installs the Genezio command-line interface globally and logs the user into their Genezio account. This is a prerequisite for managing Genezio projects.

```bash
npm install genezio -g
genezio login
```

--------------------------------

### Use Material Tailwind Button Component

Source: https://www.material-tailwind.com/docs/react/guide/remix

Example of how to import and use the Button component from `@material-tailwind/react` in a Remix project. This demonstrates basic component usage after setup.

```javascript
import MaterialTailwind from "@material-tailwind/react";
const { Button } = MaterialTailwind;

export default function Example() {
  return <Button>Button</Button>;
}
```

--------------------------------

### Create New Remix Project

Source: https://www.material-tailwind.com/docs/react/guide/remix

Command to create a new Remix project. This is the initial step before integrating Material Tailwind.

```bash
npx create-remix@latest
```

--------------------------------

### Install ApexCharts for React

Source: https://www.material-tailwind.com/docs/react/plugins/charts

Installs the necessary `apexcharts` and `react-apexcharts` libraries for creating charts in a React project. Ensure these are installed before using the provided chart examples.

```bash
npm i apexcharts react-apexcharts
```

--------------------------------

### Install Dependencies for React Checkout Form

Source: https://www.material-tailwind.com/docs/react/form

Installs the necessary dependencies (@heroicons/react and use-react-countries) for the React checkout form example.

```bash
npm i @heroicons/react use-react-countries
```

--------------------------------

### Create Vite Project

Source: https://www.material-tailwind.com/docs/react/guide/vite

Command to create a new project using Vite. This is the first step in setting up a new React project with Vite.

```bash
npm create vite@latest
```

--------------------------------

### Create React App Project Setup

Source: https://www.material-tailwind.com/docs/react/guide/cra

Initializes a new project using Create React App. This is the first step before installing Material Tailwind.

```bash
npx create-react-app my-app
```

--------------------------------

### Theme Provider Setup in React Application

Source: https://www.material-tailwind.com/docs/react/guide/vite

Wraps the entire React application with the `ThemeProvider` component from @material-tailwind/react in the main entry file (e.g., `src/main.jsx`). This component sets default styles and allows custom theming for Material Tailwind components.

```javascript
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

import { ThemeProvider } from "@material-tailwind/react";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

```

--------------------------------

### Create Next.js Project

Source: https://www.material-tailwind.com/docs/react/guide/next

Command to create a new Next.js project. Ensure Tailwind CSS is selected during setup for automatic installation.

```bash
npx create-next-app@latest
```

--------------------------------

### Test Genezio Project Locally (Backend)

Source: https://www.material-tailwind.com/docs/react/guide/genezio

Starts the Genezio local development server for the backend. This command should be run in the main project directory (`genezio-project`).

```bash
cd genezio-project
genezio local
```

--------------------------------

### Install @heroicons/react for Material Tailwind Stepper

Source: https://www.material-tailwind.com/docs/react/stepper

This command installs the @heroicons/react package, which is used in the Material Tailwind Stepper component examples for icon integration. Ensure this is installed before using icon-based steppers.

```bash
npm i @heroicons/react
```

--------------------------------

### React Tailwind CSS Autoplay Video Component

Source: https://www.material-tailwind.com/docs/react/video

This example demonstrates how to configure a video component in React with Tailwind CSS to automatically start playing. It includes controls and a fallback for unsupported browsers.

```jsx
export default function Example() {
  return (
    <video className="h-full w-full rounded-lg" controls autoPlay>
      <source src="https://docs.material-tailwind.com/demo.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}
```

--------------------------------

### Integrate ThemeProvider in Remix Client Entry

Source: https://www.material-tailwind.com/docs/react/guide/remix

Wraps the Remix application with the `ThemeProvider` from `@material-tailwind/react` in the `app/entry.client` file. This step is crucial for applying default Material Tailwind themes and styles to all components in the application.

```typescript
import { RemixBrowser } from "@remix-run/react";
import { startTransition } from "react";
import { hydrateRoot } from "react-dom/client";
import { ThemeProvider } from "@material-tailwind/react";

startTransition(() => {
  hydrateRoot(
    document,
    <ThemeProvider>
      <RemixBrowser />
    </ThemeProvider>
  );
});
```

--------------------------------

### Clone Material Tailwind React Genezio Template

Source: https://www.material-tailwind.com/docs/react/guide/genezio

Clones a pre-configured Genezio project template that includes @material-tailwind/react. This repository serves as a starting point for new projects.

```bash
git clone https://github.com/Genez-io/weather-typescript-template
```

--------------------------------

### Install @material-tailwind/react with PNPM

Source: https://www.material-tailwind.com/docs/react/guide/astro

Installs the @material-tailwind/react library as a project dependency using pnpm. This is another alternative package manager for installing the library.

```bash
pnpm i @material-tailwind/react
```

--------------------------------

### Install @material-tailwind/react with NPM

Source: https://www.material-tailwind.com/docs/react/guide/astro

Installs the @material-tailwind/react library as a project dependency using npm. This command should be run after setting up the Astro project and its core dependencies.

```bash
npm i @material-tailwind/react
```

--------------------------------

### Install @material-tailwind/react with Yarn

Source: https://www.material-tailwind.com/docs/react/guide/astro

Installs the @material-tailwind/react library as a project dependency using Yarn. This is an alternative to npm for package management.

```bash
yarn add @material-tailwind/react
```

--------------------------------

### Install Tailwind CSS in Astro

Source: https://www.material-tailwind.com/docs/react/guide/astro

Installs Tailwind CSS into an existing Astro project. This is a prerequisite for using @material-tailwind/react.

```bash
npx astro add tailwind
```

--------------------------------

### Configure Tailwind CSS with Material Tailwind

Source: https://www.material-tailwind.com/docs/react/guide/remix

Configures Tailwind CSS for a standard project by wrapping the default export with `withMT` from `@material-tailwind/react/utils/withMT`. This enables Material Tailwind's styling capabilities.

```typescript
import type { Config } from "tailwindcss";

import withMT from "@material-tailwind/react/utils/withMT";

export default withMT({
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config);
```

--------------------------------

### Example Drawer Theme Customization in JavaScript/TypeScript

Source: https://www.material-tailwind.com/docs/react/drawer

Provides an example of a theme object for the Drawer component, demonstrating how to customize default props and styles using Tailwind CSS classes.

```javascript
const theme = {
  drawer: {
    defaultProps: {
      size: 300,
      overlay: true,
      placement: "left",
      overlayProps: undefined,
      className: "",
      dismiss: undefined,
      onClose: undefined,
      transition: {
        type: "tween",
        duration: 0.3,
      },
    },
    styles: {
      base: {
        drawer: {
          position: "fixed",
          zIndex: "z-[9999]",
          pointerEvents: "pointer-events-auto",
          backgroundColor: "bg-white",
          boxSizing: "box-border",
          width: "w-full",
          boxShadow: "shadow-2xl shadow-blue-gray-900/10",
        },
        overlay: {
          position: "absolute",
          inset: "inset-0",
          width: "w-full",
          height: "h-full",
          pointerEvents: "pointer-events-auto",
          zIndex: "z-[9995]",
          backgroundColor: "bg-black",
          backgroundOpacity: "bg-opacity-60",
          backdropBlur: "backdrop-blur-sm",
        },
      },
    },
  },
};

```

--------------------------------

### Tailwind CSS Configuration for Monorepo

Source: https://www.material-tailwind.com/docs/react/guide/vite

Configures Tailwind CSS for a monorepo project by including paths to Material Tailwind's components and theme directories within the `tailwind.config.js` file, wrapped with `withMT()`.

```javascript
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});
```

--------------------------------

### Basic Tailwind CSS Component Example (HTML)

Source: https://www.material-tailwind.com/docs/react/what-is-tailwind-css

A simple example of a Tailwind CSS component, demonstrating a user avatar card. This snippet showcases how utility classes are applied directly in the HTML markup to style elements.

```html
<a href="#" class="avatar">
  <img alt="Image placeholder" src="https://docs.material-tailwind.com/img/face-2.jpg" />
</a>
```

--------------------------------

### React Chip Default Example

Source: https://www.material-tailwind.com/docs/react/chip

A basic example of the Material Tailwind Chip component in React. It demonstrates the default appearance and usage.

```javascript
import { Chip } from "@material-tailwind/react";

export function ChipDefault() {
  return <Chip value="chip" />; 
}
```

--------------------------------

### React Textarea Default Example

Source: https://www.material-tailwind.com/docs/react/textarea

A basic React Textarea component example using Material Tailwind. It shows how to implement a simple textarea input field with a label.

```javascript
import { Textarea } from "@material-tailwind/react";

export function TextareaDefault() {
  return (
    <div className="w-96">
      <Textarea label="Message" />
    </div>
  );
}
```

--------------------------------

### React Alert Default Example

Source: https://www.material-tailwind.com/docs/react/alert

A basic example demonstrating the default `Alert` component in React using Tailwind CSS. This snippet shows how to import and render a simple alert message.

```javascript
import { Alert } from "@material-tailwind/react";

export function AlertDefault() {
  return <Alert>A simple alert for showing message.</Alert>;
}
```

--------------------------------

### Install React Day Picker and Date-Fns

Source: https://www.material-tailwind.com/docs/react/plugins/date-picker

Installs the necessary libraries for the date picker functionality. These are `react-day-picker` for the calendar UI and `date-fns` for date manipulation.

```bash
npm i react-day-picker date-fns
```

--------------------------------

### Create New Astro Project

Source: https://www.material-tailwind.com/docs/react/guide/astro

Initializes a new project using Astro. This command is the first step in setting up an Astro project.

```bash
npm create astro@latest
```

--------------------------------

### React Navbar with Dropdown Multilevel Menu Example

Source: https://www.material-tailwind.com/docs/react/navbar

This React component demonstrates a navigation bar with a dropdown and multilevel menu functionality using Material Tailwind. It includes responsive design for different screen sizes, handling of navigation state, and integration of buttons for 'Get Started' and 'Log In'. Dependencies include React and Material Tailwind components like Navbar, Typography, Button, IconButton, and Collapse.

```jsx
export function NavigationbarWithDropdownMultilevelMenu() {
  const [openNav, setOpenNav] = React.useState(false);
 
  React.useEffect(() => {
    window.addEventListener(
      "resize",
      () => window.innerWidth >= 960 && setOpenNav(false),
    );
  }, []);
 
  return (
    <Navbar className="mx-auto max-w-screen-xl px-4 py-2">
      <div className="flex items-center justify-between text-blue-gray-900">
        <Typography
          as="a"
          href="#"
          variant="h6"
          className="mr-4 cursor-pointer py-1.5 lg:ml-2"
        >
          Material Tailwind
        </Typography>
        <div className="hidden lg:block">
          <NavList />
        </div>
        <div className="hidden gap-2 lg:flex">
          <Button size="sm">Get Started</Button>
          <Button variant="outlined" size="sm">
            Log In
          </Button>
        </div>
        <IconButton
          variant="text"
          className="lg:hidden"
          onClick={() => setOpenNav(!openNav)}
        >
          {openNav ? (
            <XMarkIcon className="h-6 w-6" strokeWidth={2} />
          ) : (
            <Bars3Icon className="h-6 w-6" strokeWidth={2} />
          )}
        </IconButton>
      </div>
      <Collapse open={openNav}>
        <NavList />
        <div className="flex w-full flex-nowrap items-center gap-2 lg:hidden">
          <Button size="sm" fullWidth>
            Get Started
          </Button>
          <Button variant="outlined" size="sm" fullWidth>
            Log In
          </Button>
        </div>
      </Collapse>
    </Navbar>
  );
}
```

--------------------------------

### Deploy Genezio Project to Cloud

Source: https://www.material-tailwind.com/docs/react/guide/genezio

Navigates into the cloned Genezio project directory and deploys the project to the Genezio cloud. Upon successful deployment, a URL to access the web application is provided.

```bash
cd weather-typescript-template
genezio deploy
```

--------------------------------

### Image with Caption in React using Material Tailwind

Source: https://www.material-tailwind.com/docs/react/img

This example demonstrates how to display an image with a caption in a React application, utilizing Material Tailwind's `Typography` component for the caption text. It's useful for providing context to images. Requires installation of `@material-tailwind/react`.

```javascript
import { Typography } from "@material-tailwind/react";
 
export function ImgWithCaption() {
  return (
    <figure>
      <img
        className="h-96 w-full rounded-lg object-cover object-center"
        src="https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80"
        alt="nature image"
      />
      <Typography as="caption" variant="small" className="mt-2 text-center font-normal">
        Image caption
      </Typography>
    </figure>
  );
}
```

--------------------------------

### Example Usage of Material Tailwind Button

Source: https://www.material-tailwind.com/docs/react/guide/cra

Demonstrates how to import and use the `Button` component from @material-tailwind/react in a React functional component. This shows a basic implementation after setup.

```javascript
import { Button } from "@material-tailwind/react";

export default function Example() {
  return <Button>Button</Button>;
}
```

--------------------------------

### Tailwind CSS Configuration with Material Tailwind

Source: https://www.material-tailwind.com/docs/react/guide/vite

Configures Tailwind CSS by wrapping your tailwind.config.js with the `withMT()` function from @material-tailwind/react/utils. This enables Material Tailwind's styling capabilities.

```javascript
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
});
```

--------------------------------

### Install Lexical Plugins with npm

Source: https://www.material-tailwind.com/docs/react/plugins/text-editor

Installs essential Lexical plugins for rich text editing, including list, code, link, and utility functionalities. These plugins extend the core editor's capabilities. Run this command in your project's terminal.

```bash
npm install --save @lexical/list @lexical/rich-text @lexical/code @lexical/link @lexical/selection @lexical/utils
```

--------------------------------

### Configure Tailwind CSS for Monorepo

Source: https://www.material-tailwind.com/docs/react/guide/remix

Configures Tailwind CSS for a monorepo project by wrapping the default export with `withMT` and including specific paths for Material Tailwind components and themes in the `content` array. This ensures components within the monorepo are correctly processed.

```typescript
import type { Config } from "tailwindcss";

import withMT from "@material-tailwind/react/utils/withMT";

export default withMT({
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config);
```

--------------------------------

### React Masonry Grid Gallery Component

Source: https://www.material-tailwind.com/docs/react/gallery

This React component creates a responsive masonry grid layout for displaying images. It uses Material Tailwind CSS for styling and can adapt to different screen sizes. The component requires no external dependencies beyond React and Material Tailwind.

```jsx
export function MasonryGridGallery() {
  return (
    <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
      <div className="grid gap-4">
        <div>
          <img
            className="h-auto max-w-full rounded-lg object-cover object-center"
            src="https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
            alt="gallery-photo"
          />
        </div>
        <div>
          <img
            className="h-auto max-w-full rounded-lg object-cover object-center "
            src="https://images.unsplash.com/photo-1629367494173-c78a56567877?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80"
            alt="gallery-photo"
          />
        </div>
        <div>
          <img
            className="h-auto max-w-full rounded-lg object-cover object-center"
            src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
            alt="gallery-photo"
          />
        </div>
      </div>
      <div className="grid gap-4">
        <div>
          <img
            className="h-auto max-w-full rounded-lg object-cover object-center"
            src="https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
            alt="gallery-photo"
          />
        </div>
        <div>
          <img
            className="h-auto max-w-full rounded-lg object-cover object-center"
            src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
            alt="gallery-photo"
          />
        </div>
        <div>
          <img
            className="h-auto max-w-full rounded-lg object-cover object-center "
            src="https://docs.material-tailwind.com/img/team-3.jpg"
            alt="gallery-photo"
          />
        </div>
      </div>
      <div className="grid gap-4">
        <div>
          <img
            className="h-auto max-w-full rounded-lg object-cover object-center"
            src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
            alt="gallery-photo"
          />
        </div>
        <div>
          <img
            className="h-auto max-w-full rounded-lg object-cover object-center "
            src="https://docs.material-tailwind.com/img/team-3.jpg"
            alt="gallery-photo"
          />
        </div>
        <div>
          <img
            className="h-auto max-w-full rounded-lg object-cover object-center"
            src="https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
            alt="gallery-photo"
          />
        </div>
      </div>
      <div className="grid gap-4">
        <div>
          <img
            className="h-auto max-w-full rounded-lg object-cover object-center"
            src="https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
            alt="gallery-photo"
          />
        </div>
        <div>
          <img
            className="h-auto max-w-full rounded-lg object-cover object-center"
            src="https://images.unsplash.com/photo-1629367494173-c78a56567877?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80"
            alt="gallery-photo"
          />
        </div>
      </div>
    </div>
  );
}
```

--------------------------------

### Card Body Theme Customization Example

Source: https://www.material-tailwind.com/docs/react/card

Provides an example of how to customize the theme for the Card Body component in Material Tailwind. This example shows how to set default class names and base padding styles.

```javascript
const theme = {
  cardBody: {
    defaultProps: {
      className: "",
    },
    styles: {
      base: {
        p: "p-6",
      },
    },
  },
};
```

--------------------------------

### Install React.js in Astro

Source: https://www.material-tailwind.com/docs/react/guide/astro

Adds React.js support to an Astro project. Required for integrating @material-tailwind/react, which is a React-based UI library.

```bash
npx astro add react
```

--------------------------------

### React Tabs Component with Image Galleries

Source: https://www.material-tailwind.com/docs/react/gallery

This React component utilizes Material Tailwind's Tabs component to create a tabbed interface. Each tab, representing a framework (e.g., React, Svelte), displays a responsive grid of images fetched from provided URLs. It requires Material Tailwind's Tabs, TabsHeader, Tab, TabsBody, and TabPanel components.

```jsx
import React from "react";
import {
  Tabs,
  TabsHeader,
  TabsBody,
  Tab,
  TabPanel,
} from "@material-tailwind/react";

export function TabsWithContent() {
  const data = [
    {
      label: "React",
      value: "react",
      images: [
        {
          imageLink:
            "https://demos.creative-tim.com/material-kit-pro/assets/img/examples/blog5.jpg",
        },
        {
          imageLink:
            "https://material-taillwind-pro-ct-tailwind-team.vercel.app/img/content2.jpg",
        },
        {
          imageLink:
            "https://images.unsplash.com/photo-1620064916958-605375619af8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1493&q=80",
        },
        {
          imageLink:
            "https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
        },
        {
          imageLink:
            "https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
        },
        {
          imageLink:
            "https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
        },
      ],
    },
    {
      label: "Svelte",
      value: "svelte",
      images: [
        {
          imageLink:
            "https://demos.creative-tim.com/material-kit-pro/assets/img/examples/blog5.jpg",
        },
        {
          imageLink:
            "https://material-taillwind-pro-ct-tailwind-team.vercel.app/img/content2.jpg",
        },
        {
          imageLink:
            "https://images.unsplash.com/photo-1620064916958-605375619af8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1493&q=80",
        },
        {
          imageLink:
            "https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
        },
        {
          imageLink:
            "https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
        },
        {
          imageLink:
            "https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
        },
      ],
    },
  ];
 
  return (
    <Tabs value="react">
      <TabsHeader>
        {data.map(({ label, value }) => (
          <Tab key={value} value={value}>
            {label}
          </Tab>
        ))}
      </TabsHeader>
      <TabsBody>
        {data.map(({ value, images }) => (
          <TabPanel key={value} value={value}>
            <div className="grid grid-cols-2 gap-4 md:grid-cols-3 ">
              {images?.map(({ imageLink }, index) => (
                <div key={index}>
                  <img
                    className="h-40 w-full max-w-full rounded-lg object-cover object-center"
                    src={imageLink}
                    alt="image-photo"
                  />
                </div>
              ))}
            </div>
          </TabPanel>
        ))}
      </TabsBody>
    </Tabs>
  );
}

```
Tokens:
Raw