### Install @docsearch/react Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/crypto/crypto-card.mdx Install the @docsearch/react library before using the example. This is a prerequisite for the crypto card component. ```bash npm i @docsearch/react ``` -------------------------------- ### Install Lexical and @lexical/react Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/plugins/text-editor.mdx Install the necessary libraries for the WYSIWYG editor. Ensure these are installed before using the editor example. ```bash npm install --save lexical @lexical/react ``` -------------------------------- ### Install Clipboard Library Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/plugins/clipboard.mdx Install the clipboard library using npm before using the clipboard example. ```bash npm install clipboard ``` -------------------------------- ### Install @heroicons/react Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/timeline.mdx Before using timeline examples with icons, ensure you have installed the @heroicons/react package. ```bash npm i @heroicons/react ``` -------------------------------- ### Basic Flask App Setup Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/guide/flask.mdx Sets up a basic Flask application with routes for the index page. Ensure you have Flask installed. ```python from flask import Flask, render_template app = Flask(__name__) @app.route("/") @app.route("/index") def index(): return render_template("index.html") if __name__ == '__main__': app.run(debug=True) ``` -------------------------------- ### Create Django Project Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/guide/django.mdx Use this command to start a new Django project. Ensure you have Django installed. ```bash django-admin startproject mysite ``` -------------------------------- ### Install Tiptap Core for WYSIWYG Editor Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/plugins/text-editor.mdx Install the tiptap core package using npm. This is a prerequisite for using the WYSIWYG editor example. ```bash npm install --save @tiptap/core ``` -------------------------------- ### Install Tiptap Editor Plugins Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/plugins/text-editor.mdx Run this command to install the necessary Tiptap plugins for extending the text editor's functionality. Ensure you have npm installed. ```bash npm install --save @tiptap/extension-placeholder @tiptap/starter-kit @tiptap/extension-paragraph @tiptap/extension-bold @tiptap/extension-underline @tiptap/extension-link @tiptap/extension-bullet-list @tiptap/extension-ordered-list @tiptap/extension-blockquote ``` -------------------------------- ### Install Lexical Plugins Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/plugins/text-editor.mdx Run this command to install the necessary Lexical plugins for the text editor. ```bash npm install --save @lexical/list @lexical/rich-text @lexical/code @lexical/link @lexical/selection @lexical/utils ``` -------------------------------- ### Install Dependencies with PNPM Source: https://github.com/creativetimofficial/material-tailwind/blob/main/CONTRIBUTING.md Use this command to install all project dependencies after cloning the repository. ```bash pnpm i ``` -------------------------------- ### Initialize Text Editor with Plugins Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/plugins/text-editor.mdx This example demonstrates how to initialize a text editor instance with specific plugins enabled. Ensure the necessary JavaScript files for the editor and its plugins are included in your project. ```javascript const editor = new Editor({ el: '#editor', height: '500px', placeholder: 'Your content here', plugins: [ 'fullscreen', 'link', 'image', 'lists', 'codesample', 'table', 'autolink', 'autosave', 'charmap', 'codesample', 'directionality', 'emoticons', 'fullscreen', 'help', 'image', 'importcss', 'insertdatetime', 'link', 'lists', 'mediaembed', 'nonbreaking', 'pagebreak', 'preview', 'print', 'save', 'searchreplace', 'spellchecker', 'tabfocus', 'template', 'textcolor', 'textpattern', 'visualblocks', 'visualchars', 'wordcount' ], toolbar: 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | help', // ... other configurations }); ``` -------------------------------- ### Install ApexCharts and React-ApexCharts Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/plugins/charts.mdx Install the necessary libraries for using charts with Material Tailwind. This command is required before implementing any chart examples. ```bash npm i apexcharts react-apexcharts ``` -------------------------------- ### Initialize Nuxt.js Project Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/guide/nuxt.mdx Use this command to create a new Nuxt.js project. Refer to the official Nuxt.js documentation for detailed setup instructions. ```bash npx nuxi@latest init ``` -------------------------------- ### Create Vite Project Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/guide/react-vite.mdx Use this command to initialize a new project with Vite. ```bash npm create vite@latest ``` -------------------------------- ### Add Product Modal Example Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/modal.mdx This example demonstrates how to implement a modal for adding products, including input fields and a footer with an 'Add Product' button. ```jsx import React from "react"; import { Button, Dialog, DialogHeader, DialogBody, DialogFooter, Input, } from "@material-tailwind/react"; export function AddProduct() { const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(!open); return ( <> Add New Product
); } ``` -------------------------------- ### Icon Button Colors Example Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/icon-button.mdx Use these examples to create icon buttons with different colors like blue, red, green, and amber for your Tailwind CSS project. Ensure proper Tailwind CSS setup for these classes to apply correctly. ```html ``` ```html ``` ```html ``` ```html ``` -------------------------------- ### Run Development Server Source: https://github.com/creativetimofficial/material-tailwind/blob/main/packages/create-material-tailwind/templates/next/README.md Start the development server for the Next.js project. Open http://localhost:3000 in your browser to view the application. ```bash npm run dev # or yarn dev # or pnpm dev ``` -------------------------------- ### Default Stepper Example Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/stepper.mdx A basic stepper component with numbered steps. Use this for simple multi-step processes. Ensure @heroicons/react is installed if using icons. ```jsx import React from "react"; import { Stepper, Step, Button } from "@material-tailwind/react"; export function DefaultStepper() { const [activeStep, setActiveStep] = React.useState(0); const [isLastStep, setIsLastStep] = React.useState(false); const [isFirstStep, setIsFirstStep] = React.useState(false); const handleNext = () => !isLastStep && setActiveStep((cur) => cur + 1); const handlePrev = () => !isFirstStep && setActiveStep((cur) => cur - 1); return (
setIsLastStep(value)} isFirstStep={(value) => setIsFirstStep(value)} > setActiveStep(0)}>1 setActiveStep(1)}>2 setActiveStep(2)}>3
); } ``` -------------------------------- ### HTML Input with Label Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/input.mdx This example demonstrates an input field with a clear label positioned above it, specifying the required input. It guides the user on what information to enter. ```html
``` -------------------------------- ### Contact Popover Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/popover.mdx Use this example of a popover component to help users get the help they need easier. It displays contact information within the popover. ```jsx import { Popover, PopoverHandler, PopoverContent, Avatar, Button, Typography, List, ListItem, ListItemPrefix, } from "@material-tailwind/react"; export default function Example() { return (
Tania Andrew General Manager
ABC Construction 00 123 456 789 contact@example.com ); } ``` -------------------------------- ### Create Qwik Project Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/guide/qwik.mdx Use this command to create a new Qwik project. Refer to the Qwik Official Documentation for more details. ```bash npm create qwik@latest ``` -------------------------------- ### Basic Text Editor Setup Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/plugins/text-editor.mdx A minimal setup for a text editor instance. This is useful for simple text input fields where rich text formatting is not required. ```javascript const editor = new Editor({ el: '#editor', height: '500px', placeholder: 'Your content here', // ... other configurations }); ``` -------------------------------- ### Default Speed Dial Example Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/speed-dial.mdx A basic Speed Dial component with a plus icon that expands to reveal action buttons. Ensure @heroicons/react is installed for icons. ```jsx import { IconButton, SpeedDial, SpeedDialHandler, SpeedDialContent, SpeedDialAction, } from "@material-tailwind/react"; import { PlusIcon, HomeIcon, CogIcon, Square3Stack3DIcon, } from "@heroicons/react/24/outline"; export function DefaultSpeedDial() { return (
); } ``` -------------------------------- ### Add React to Astro Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/guide/astro.mdx Install React.js into your Astro project, as @material-tailwind/react is a React UI library. See Astro's React integration guide for more information. ```bash npx astro add react ``` -------------------------------- ### Default Dialog Example Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/dialog.mdx This example demonstrates a basic dialog with a button to open it, a backdrop, and content. It's useful for simple informational pop-ups or confirmations. ```html
Its a simple dialog.
The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.
``` -------------------------------- ### HTML Simple Registration Form Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/form.mdx Use this example for a user-friendly and responsive sign-up form. Input fields are styled for a cohesive look, and placeholder text guides users. ```html

Sign Up

Nice to meet you! Enter your details to register.

Don't have an account? Sign up

``` -------------------------------- ### Default Clipboard Example Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/plugins/clipboard.mdx This snippet demonstrates a basic clipboard functionality where text can be copied to the clipboard using an icon button. It utilizes the `useCopyToClipboard` hook from `usehooks-ts`. Ensure `usehooks-ts` is installed. ```jsx import React from "react"; import { IconButton, Typography } from "@material-tailwind/react"; import { useCopyToClipboard } from "usehooks-ts"; import { CheckIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline"; export function ClipboardDefault() { const [value, copy] = useCopyToClipboard(); const [copied, setCopied] = React.useState(false); return (
npm i @material-tailwind/react setCopied(false)} onClick={() => { copy("npm i @material-tailwind/react"); setCopied(true); }} > {copied ? ( ) : ( )}
); } ``` -------------------------------- ### Drawer Placement Example Source: https://github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/drawer.mdx Demonstrates how to use the 'placement' prop to position the Drawer component. Includes examples for top, right, bottom, and left placements, each with its own state management and close button. ```jsx import React from "react"; import { Drawer, Button, Typography, IconButton, } from "@material-tailwind/react"; export function DrawerPlacement() { const [openTop, setOpenTop] = React.useState(false); const [openRight, setOpenRight] = React.useState(false); const [openBottom, setOpenBottom] = React.useState(false); const [openLeft, setOpenLeft] = React.useState(false); const openDrawerTop = () => setOpenTop(true); const closeDrawerTop = () => setOpenTop(false); const openDrawerRight = () => setOpenRight(true); const closeDrawerRight = () => setOpenRight(false); const openDrawerBottom = () => setOpenBottom(true); const closeDrawerBottom = () => setOpenBottom(false); const openDrawerLeft = () => setOpenLeft(true); const closeDrawerLeft = () => setOpenLeft(false); return (
Material Tailwind
Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines.
Material Tailwind
Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines.
Material Tailwind
```