Material Tailwind React

https://www.material-tailwind.com/docs/v3/react/
Admin
Material Tailwind React is a free and open-source UI component library built with React and Tailwind...
Tokens:160,651
Snippets:750
Trust Score:9
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install Material Tailwind Package

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

Installs the Material Tailwind library, specifically the beta version, into your project. This package provides pre-built UI components. Ensure Node.js and npm are installed.

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

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

### Create React App Project Setup

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

Command to create a new Create React App project. This is the initial step for setting up a new React application.

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

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

### Create a New Remix Project

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

This command initializes a new Remix project. Ensure you have Node.js and npm installed. This is the first step in setting up your Remix application.

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

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

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

### Create Gatsby Project

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

Initializes a new Gatsby project. This command sets up the basic structure for a Gatsby application. Ensure you have Node.js and npm installed.

```bash
npx gatsby new my-new-project
```

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

### Install Tailwind CSS in Remix Project

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

Installs Tailwind CSS, PostCSS, and Autoprefixer as development dependencies and initializes Tailwind CSS configuration files. This is crucial for styling your Remix application.

```bash
npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init --ts -p  
```

```bash
npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init --ts -p  
```

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

### Install and Initialize Tailwind CSS

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

Installs Tailwind CSS as a development dependency and initializes it by creating a `tailwind.config.js` file. This is essential for using Tailwind CSS in the project.

```bash
npm install -D tailwindcss && npx tailwindcss init
```

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

### Create Vite Project with React Template

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

This command initializes a new Vite project with the React template. Ensure you have Node.js and npm installed. This is the first step in setting up your project environment.

```bash
npm create vite@latest my-project -- --template react
```

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

### Install @material-tailwind/react

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

Installs the Material Tailwind React library, which provides pre-built components and utilities for React applications using Tailwind CSS. Ensure you install the beta version as specified.

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

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

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

### Example Material Tailwind Button in Next.js

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

Demonstrates how to import and use the Button component from Material Tailwind within a Next.js application. This serves as a basic example of integrating Material Tailwind components.

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

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

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

### Install Tailwind CSS and PostCSS

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

Installs Tailwind CSS, PostCSS, and Autoprefixer as development dependencies. It also generates the `tailwind.config.js` and `postcss.config.js` files. These are essential for styling your application.

```bash
npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p
```

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

### Install @docsearch/react Dependency for React

Source: https://www.material-tailwind.com/docs/v3/react/plugins/algolia-search

Installs the necessary @docsearch/react library for implementing Algolia search functionality in React projects. This is a prerequisite for using the Algolia search demo.

```bash
npm install @docsearch/react
```

```bash
npm install @docsearch/react
```

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

### Add React to Astro Project

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

Integrates React support into an existing Astro project. This allows you to use React components within your Astro application. Ensure Astro is installed before running this command.

```bash
npx astro add react
```

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

### Add Tailwind CSS to Astro Project

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

Installs and configures Tailwind CSS for your Astro project. This enables utility-first CSS styling. This command assumes Astro is already set up.

```bash
npx astro add tailwind
```

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

### Install Lexical Dependencies for Tailwind CSS WYSIWYG Editor in React

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

Installs the necessary lexical library and its associated plugins required for the WYSIWYG text editor functionality in a React and Tailwind CSS project. Ensure these dependencies are installed before implementing the editor.

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

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

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

### React Skeleton Loading Indicator Example

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

This example demonstrates a basic implementation of a skeleton loading indicator in a React project using Material Tailwind components. It mimics content structure with placeholder elements and requires the '@material-tailwind/react' library.

```jsx
"use client";

import { Typography } from "@material-tailwind/react";
 
export default function SkeletonDemo() {
  return (
    <div className="max-w-full animate-pulse">
      <Typography
        as="div"
        variant="h1"
        className="mb-4 h-3 w-56 rounded-full bg-gray-300"
      >
        &nbsp;
      </Typography>
      <Typography
        as="div"
        variant="paragraph"
        className="mb-2 h-2 w-72 rounded-full bg-gray-300"
      >
        &nbsp;
      </Typography>
      <Typography
        as="div"
        variant="paragraph"
        className="mb-2 h-2 w-72 rounded-full bg-gray-300"
      >
        &nbsp;
      </Typography>
      <Typography
        as="div"
        variant="paragraph"
        className="mb-2 h-2 w-72 rounded-full bg-gray-300"
      >
        &nbsp;
      </Typography>
      <Typography
        as="div"
        variant="paragraph"
        className="mb-2 h-2 w-72 rounded-full bg-gray-300"
      >
        &nbsp;
      </Typography>
    </div>
  );
}
```

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

### Install Tailwind CSS Dependency

Source: https://www.material-tailwind.com/docs/v3/react/plugins/algolia-search

This section details the installation of Tailwind CSS, a necessary dependency for Material Tailwind. It outlines the commands required to add Tailwind CSS to your project.

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

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

### Install Form Dependencies (npm)

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

Installs the 'react-hook-form', '@hookform/resolvers', and 'zod' libraries required for creating functional forms with validation in React projects. These are essential for handling form state and implementing validation logic.

```bash
npm install react-hook-form @hookform/resolvers zod
```

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

### React Checkbox Component Examples

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

Demonstrates the implementation of the Material Tailwind CSS Checkbox component in React. Includes examples for a default checkbox and a pre-checked checkbox, along with associated labels for user interaction.

```jsx
import { Checkbox, Typography } from "@material-tailwind/react";

export default function CheckboxDemo() {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <Checkbox id="default-checkbox">
          <Checkbox.Indicator />
        </Checkbox>
        <Typography
          as="label"
          htmlFor="default-checkbox"
          className="cursor-pointer text-foreground"
        >
          Default Checkbox
        </Typography>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id="checked-checkbox">
          <Checkbox.Indicator />
        </Checkbox>
        <Typography
          as="label"
          htmlFor="checked-checkbox"
          className="cursor-pointer text-foreground"
        >
          Checked Checkbox
        </Typography>
      </div>
    </div>
  );
}
```

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

### Create Astro Project using npm

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

Initializes a new Astro project. This command is the first step in setting up your Astro environment. No specific dependencies are required beyond Node.js and npm.

```bash
npm create astro@latest my-project
```

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

### Install Tailwind CSS for Gatsby

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

Installs Tailwind CSS, PostCSS, and Autoprefixer as development dependencies for your Gatsby project, along with the gatsby-plugin-postcss. It also initializes Tailwind CSS with a PostCSS configuration file.

```bash
npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss && npx tailwindcss init -p
```

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

### Initialize Lexical Composer and Rich Text Plugin in React

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

Sets up the Lexical editor environment using LexicalComposer and RichTextPlugin. It defines a placeholder component and handles editor element positioning. Dependencies include React, Lexical core and plugins, and Material Tailwind components.

```jsx
"use client";

import * as React from "react";
import { createPortal } from "react-dom";
import {
  Menu,
  Card,
  Input,
  Button,
  IconButton,
  Typography,
} from "@material-tailwind/react";
import {
  Bold,
  Code,
  EditPencil,
  Italic,
  Link,
  NavArrowDown,
  Text,
  TextSize,
  TextSquare,
  List as ListIcon,
} from "iconoir-react";

// lexical
import {
  $getSelection,
  $isRangeSelection,
  FORMAT_TEXT_COMMAND,
  $createParagraphNode,
  SELECTION_CHANGE_COMMAND,
} from "lexical";
import {
  $isListNode,
  REMOVE_LIST_COMMAND,
  INSERT_UNORDERED_LIST_COMMAND,
} from "@lexical/list";
import {
  QuoteNode,
  HeadingNode,
  $isHeadingNode,
  $createHeadingNode,
} from "@lexical/rich-text";
import { ListItemNode, ListNode } from "@lexical/list";
import {
  AutoLinkNode,
  LinkNode,
  $isLinkNode,
  TOGGLE_LINK_COMMAND,
} from "@lexical/link";
import { CodeHighlightNode, CodeNode } from "@lexical/code";
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
import { $wrapNodes, $isAtNodeEnd } from "@lexical/selection";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";

const LowPriority = 1;

const blockTypeToBlockName = {
  code: "Code",
  h1: "Large Heading",
  h2: "Small Heading",
  h3: "Heading",
  h4: "Heading",
  h5: "Heading",
  ol: "Numbered List",
  paragraph: "Normal",
  quote: "Quote",
  ul: "Bulleted List",
};

function Placeholder() {
  return (
    <Typography
      as="div"
      className="pointer-events-none absolute left-3 top-2 inline-block select-none overflow-hidden text-base text-foreground"
    >
      Play around with the editor...
    </Typography>
  );
}

function getSelectedNode(selection) {
  const anchor = selection.anchor;
  const focus = selection.focus;
  const anchorNode = selection.anchor.getNode();
  const focusNode = selection.focus.getNode();
  if (anchorNode === focusNode) {
    return anchorNode;
  }
  const isBackward = selection.isBackward();
  if (isBackward) {
    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
  } else {
    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
  }
}

function positionEditorElement(editor, rect) {
  if (rect === null) {
    editor.style.opacity = "0";
    editor.style.top = "-1000px";
    editor.style.left = "-1000px";
  } else {
    editor.style.opacity = "1";
    editor.style.top = `${rect.top + rect.height + window.pageYOffset + 10}px`;
    editor.style.left = `${rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2}px`;
  }
}

function FloatingLinkEditor({ editor }) {
  const editorRef = React.useRef(null);
  const inputRef: any = React.useRef(null);
  const mouseDownRef = React.useRef(false);
  const [linkUrl, setLinkUrl] = React.useState("");
  const [isEditMode, setEditMode] = React.useState(false);
  const [lastSelection, setLastSelection] = React.useState(null);

  const updateLinkEditor = React.useCallback(() => {
    const selection: any = $getSelection();
    if ($isRangeSelection(selection)) {
      const node = getSelectedNode(selection);
      const parent = node.getParent();
      if ($isLinkNode(parent)) {
        setLinkUrl(parent.getURL());
      } else if ($isLinkNode(node)) {
        setLinkUrl(node.getURL());
      } else {
        setLinkUrl("");
      }
    }
    const editorElem = editorRef.current;
    const nativeSelection: any = window.getSelection();
    const activeElement = document.activeElement;

    if (editorElem === null) {
      return;
    }

    const rootElement = editor.getRootElement();
    if (
      selection !== null &&
      !nativeSelection.isCollapsed &&
      rootElement !== null &&
      rootElement.contains(nativeSelection.anchorNode)
    ) {
      const domRange = nativeSelection.getRangeAt(0);
      let rect;
      if (nativeSelection.anchorNode === rootElement) {
        let inner = rootElement;
        while (inner.firstElementChild != null) {
          inner = inner.firstElementChild;
        }
        rect = inner.getBoundingClientRect();
      } else {
        rect = domRange.getBoundingClientRect();
      }

```

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

### Create Next.js Project with Tailwind CSS

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

This command initializes a new Next.js project and automatically configures Tailwind CSS. It's the first step in integrating Material Tailwind with Next.js.

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

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

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

### Lexical Editor Toolbar Initialization and Event Handling

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

Initializes Lexical editor commands for selection changes and update listeners. It registers commands for updating the toolbar when the editor state or selection changes, ensuring the UI reflects the current editor state. Dependencies include the Lexical editor instance and an updateToolbar function.

```javascript
return mergeRegister(
      editor.registerUpdateListener(({ editorState }) => {
        editorState.read(() => {
          updateToolbar();
        });
      }),
      editor.registerCommand(
        SELECTION_CHANGE_COMMAND,
        (_payload, newEditor) => {
          updateToolbar();
          return false;
        },
        LowPriority,
      ),
    );
  }, [editor, updateToolbar]);
```

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

### React Tailwind CSS Image - Basic Implementation

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

This example demonstrates a basic and responsive image implementation using React and Tailwind CSS. It's suitable for displaying media content on your website. No external dependencies are required beyond React and Tailwind CSS.

```jsx
export default function ImageDemo() {
  return (
    <img
      src="https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2832&amp;q=80" 
      alt="nature-image"
      className="h-96 w-full object-cover object-center"
    />
  );
}
```

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

### Configure Tailwind CSS with Material Tailwind Plugin (TypeScript)

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

Adds the Material Tailwind configuration (`mtConfig`) and template paths to your `tailwind.config.ts` file. This step is necessary after installing the library to enable Material Tailwind's styles and components.

```typescript
import type { Config } from 'tailwindcss'  

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

export default {  
  content: [  
    "./app/**/*.{js,jsx,ts,tsx}",  
    "./node_modules/@material-tailwind/react/**/*.{js,ts,jsx,tsx}"  
  ],  
  theme: {  
    extend: {},  
  },  
  plugins: [mtConfig],  
} satisfies Config  
```

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

### Lexical Composer Configuration

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

Defines the configuration for the Lexical composer, including the editor namespace, error handling, and registered node types. This setup is essential for initializing the Lexical editor with specific features like headings, lists, code blocks, and links.

```javascript
const editorConfig = {
  namespace: "MyEditor",
  onError(error) {
    throw error;
  },
  nodes: [
    HeadingNode,
    ListNode,
    ListItemNode,
    QuoteNode,
    CodeNode,
    CodeHighlightNode,
    AutoLinkNode,
    LinkNode,
  ],
};

export default function TextEditorDemo() {
  return (
    <LexicalComposer initialConfig={editorConfig}>
      <Card
        variant="outline"
      >
```

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

### Breadcrumb Component Anatomy (React)

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

Shows the anatomy of the rewritten Breadcrumb component in Material Tailwind v3 for React. This example demonstrates the usage of Breadcrumb with its Link and Separator sub-components. The component has been renamed from Breadcrumbs to Breadcrumb and offers enhanced flexibility.

```jsx
import { Breadcrumb } from "@material-tailwind/react";

<Breadcrumb>
  <Breadcrumb.Link />
  <Breadcrumb.Separator />
  <Breadcrumb.Link />
</Breadcrumb>
```

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

### Configure Tailwind CSS with Material Tailwind

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

Sets up the `tailwind.config.mjs` file to include Material Tailwind's configuration and template paths. This ensures Material Tailwind components are correctly processed by Tailwind CSS. Requires the `@material-tailwind/react` package to be installed.

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

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "./node_modules/@material-tailwind/react/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [mtConfig],
}
```

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

### Checkbox Component Anatomy (React)

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

Presents the anatomy of the rewritten Checkbox component in Material Tailwind v3 for React. The example shows how to import and use the Checkbox component along with its Indicator sub-component. This component has been redesigned for greater flexibility and ease of use.

```jsx
import { Checkbox } from "@material-tailwind/react";

<Checkbox>
  <Checkbox.Indicator />
</Checkbox>
```

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

### Dialog Component Anatomy (React)

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

Illustrates the anatomy of the rewritten Dialog component in Material Tailwind v3 for React. The example shows how to import and use the Dialog component with its Trigger, Overlay, Content, and DismissTrigger sub-components. This component is designed for flexibility and supports controlled/uncontrolled states.

```jsx
import { Dialog } from "@material-tailwind/react";

<Dialog>
  <Dialog.Trigger />
  <Dialog.Overlay>
    <Dialog.Content>
      <Dialog.DismissTrigger />
    </Dialog.Content>
  </Dialog.Overlay>
</Dialog>
```

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

### Customize Select Component Sizes in React

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

This example showcases how to implement different sizes (small, medium, large) for the Material Tailwind CSS Select component using the `size` prop. This allows for flexible UI design based on the number of options and available space. The component requires '@material-tailwind/react' to be installed.

```jsx
import { Select } from "@material-tailwind/react";

export default function SelectSizes() {
  return (
    <div className="flex w-72 flex-col items-center gap-4">
      <Select size="sm">
        <Select.Trigger placeholder="Size. e.g. small" />
        <Select.List>
          <Select.Option>Size Small</Select.Option>
          <Select.Option>Size Medium</Select.Option>
          <Select.Option>Size Large</Select.Option>
        </Select.List>
      </Select>
      <Select size="md">
        <Select.Trigger placeholder="Size. e.g. medium" />
        <Select.List>
          <Select.Option>Size Small</Select.Option>
          <Select.Option>Size Medium</Select.Option>
          <Select.Option>Size Large</Select.Option>
        </Select.List>
      </Select>
      <Select size="lg">
        <Select.Trigger placeholder="Size. e.g. large" />
        <Select.List>
          <Select.Option>Size Small</Select.Option>
          <Select.Option>Size Medium</Select.Option>
          <Select.Option>Size Large</Select.Option>
        </Select.List>
      </Select>
    </div>
  );
}
```

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

### Implement React Tailwind CSS List with Icons

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

This example shows how to create a `List` component with icons using React and Material Tailwind. It utilizes `List.ItemStart` to prepend icons to list items, enhancing visual appeal and functionality, especially for dashboard navigation. It requires an icon library like 'iconoir-react'.

```jsx
import { List } from "@material-tailwind/react";
import { Bin, Mail, Settings } from "iconoir-react";

export default function ListWithIcon() {
  return (
    <List>
      <List.Item>
        <List.ItemStart>
          <Mail className="h-5 w-5" />
        </List.ItemStart>
        Inbox
      </List.Item>
      <List.Item>
        <List.ItemStart>
          <Bin className="h-5 w-5" />
        </List.ItemStart>
        Trash
      </List.Item>
      <List.Item>
        <List.ItemStart>
          <Settings className="h-5 w-5" />
        </List.ItemStart>
        Settings
      </List.Item>
    </List>
  );
}
```

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

### React Video Component with Autoplay using Tailwind CSS

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

This React component demonstrates how to implement an autoplaying video using Tailwind CSS. The `autoPlay` attribute is added to the video tag, causing the video to start playing automatically when the page loads. It's useful for engaging users immediately with video content.

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

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

### Algolia Search Demo with React and Material Tailwind

Source: https://www.material-tailwind.com/docs/v3/react/plugins/algolia-search

Demonstrates how to integrate Algolia search into a React application using the @docsearch/react library and Material Tailwind components. It features a custom input field that triggers the search interface upon interaction or a keyboard shortcut.

```jsx
import { DocSearch } from "@docsearch/react";
import { KeyCommand, Search } from "iconoir-react";
import { Input } from "@material-tailwind/react";

const APP_ID = "37KXIBLNGX";
const INDEX_NAME = "material-tailwind";
const API_KEY = "8cc5688018e14bad2a2528eea41fbb35";

export default function AlgoliaSearchDemo() {
  return (
    <div className="group w-72">
      <Input
        readOnly
        placeholder="Input"
        className="group-hover:border-primary group-hover:ring-primary/10 group-focus:border-primary group-focus:ring-primary/10"
      >
        <Input.Icon>
          <Search className="h-full w-full" />
        </Input.Icon>
        <kbd className="absolute right-[6px] top-1/2 flex -translate-y-[calc(50%+0.5px)] items-center gap-1 rounded border border-surface bg-surface-light px-1.5 py-1 text-[11px] font-semibold text-black shadow-[0_1.5px_0_0] shadow-surface dark:text-white">
          <KeyCommand className="h-2.5 w-2.5 stroke-2" />K
        </kbd>
        <div className="absolute inset-0 m-0 w-full opacity-0 [&_>_button]:m-0 [&_>_button]:w-full [&_>_button]:rounded-none">
          <DocSearch indexName={INDEX_NAME} apiKey={API_KEY} appId={APP_ID} />
        </div>
      </Input>
    </div>
  );
}
```

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

### Tooltip Component Structure in React

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

Demonstrates the basic structure and anatomy of the Tooltip component in React using Material Tailwind. It shows how to import and use the Tooltip, Trigger, Content, and Arrow sub-components.

```jsx
import { Tooltip } from "@material-tailwind/react";

<Tooltip>
  <Tooltip.Trigger />
  <Tooltip.Content>
    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip>
```

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

### Radio Component Anatomy (React)

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

Presents the anatomy of the Radio component, including Radio.Item and Radio.Indicator. This component has been rewritten for enhanced flexibility.

```jsx
import { Radio } from "@material-tailwind/react";  

<Radio>
  <Radio.Item>
    <Radio.Indicator />
  </Radio.Item>
</Radio>
```

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

### React Line Chart with Material Tailwind and ApexCharts

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

This React component visualizes data using a line chart powered by ApexCharts and styled with Material Tailwind. It dynamically adjusts chart colors based on the application's theme and uses Next.js dynamic imports for server-side rendering optimization. Dependencies include react, next/dynamic, @material-tailwind/react, iconoir-react, apexcharts, and next-themes.

```jsx
"use client";

import * as React from "react";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
import { Card, Typography } from "@material-tailwind/react";
import { SelectFace3d } from "iconoir-react";
import type { ApexOptions } from "apexcharts";
import { useTheme } from "next-themes";

function rgbToHex(rgb) {
  return (
    "#" +
    rgb
      .map((x) => {
        const hex = parseInt(x, 10).toString(16);
        return hex.length === 1 ? "0" + hex : hex;
      })
      .join("")
  );
}

export default function LineChart() {
  const { theme } = useTheme();
  const [vars, setVars] = React.useState<CSSStyleDeclaration | null>(null);

  React.useEffect(() => {
    const cssVarValue = window.getComputedStyle(document.documentElement);

    setVars(cssVarValue);
  }, [theme]);

  const chartColor = vars
    ? rgbToHex(vars.getPropertyValue("--color-primary").split(" "))
    : "";
  const textColor = vars
    ? rgbToHex(vars.getPropertyValue("--color-foreground").split(" "))
    : "";
  const lineColor = vars
    ? rgbToHex(vars.getPropertyValue("--color-surface").split(" "))
    : "";

  const chartConfig = React.useMemo(
    () =>
      ({
        type: "line",
        height: 240,
        series: [
          {
            name: "Sales",
            data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
          },
        ],
        options: {
          chart: {
            toolbar: {
              show: false,
            },
          },
          title: {
            show: "",
          },
          dataLabels: {
            enabled: false,
          },
          colors: [chartColor],
          stroke: {
            curve: "smooth",
            lineCap: "round",
          },
          markers: {
            size: 0,
          },
          xaxis: {
            axisTicks: {
              show: false,
            },
            axisBorder: {
              show: false,
            },
            labels: {
              style: {
                colors: textColor,
                fontSize: "12px",
                fontFamily: "inherit",
                fontWeight: 400,
              },
            },
            categories: [
              "Apr",
              "May",
              "Jun",
              "Jul",
              "Aug",
              "Sep",
              "Oct",
              "Nov",
              "Dec",
            ],
          },
          yaxis: {
            labels: {
              style: {
                colors: textColor,
                fontSize: "12px",
                fontFamily: "inherit",
                fontWeight: 400,
              },
            },
          },
          grid: {
            show: true,
            borderColor: lineColor,
            strokeDashArray: 5,
            xaxis: {
              lines: {
                show: true,
              },
            },
            padding: {
              top: 5,
              right: 20,
            },
          },
          fill: {
            opacity: 0.8,
          },
          tooltip: {
            theme: "dark",
          },
        },
      }) as ApexOptions,
    [chartColor, textColor, lineColor],
  );

  return (
    <Card>
      <Card.Header className="m-0 flex flex-wrap items-center gap-4 p-4">
        <Card
          color="primary"
          className="grid h-16 w-16 shrink-0 place-items-center rounded-md text-primary-foreground md:h-20 md:w-20"
        >
          <SelectFace3d className="h-6 w-6 md:h-8 md:w-8" />
        </Card>
        <div>
          <Typography type="h6">Line Chart</Typography>
          <Typography className="mt-1 max-w-sm text-foreground">
            Visualize your data in a simple way using the
            @material-tailwind/react chart plugin.
          </Typography>
        </div>
      </Card.Header>
      <Card.Body>
        <Chart {...chartConfig} />
      </Card.Body>
    </Card>
  );
}

```

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

### Input Component Anatomy (React)

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

Illustrates the basic anatomy of the Input component, which has been rewritten for flexibility. It shows the inclusion of an optional Input.Icon.

```jsx
import { Input } from "@material-tailwind/react";  

<Input>
  <Input.Icon />
</Input>
```
Tokens:
Raw