Add Stepper

I appologize in advance if I don't understand exactly how is supposed to be done or couldn't find the proper solution in the docs, feel free to close issue with an answer or a link, but I don't think the input and checkbox components have props to be controlled, the input doesnt have a value prop nor the checkbox has a checked prop.

Any ways to control them?
There is neither a prop to pass { ...props } to the inside component as they often are wrapped in a div or a label inside a div, how would we go about this?

I want to use it in Vite create react app. But it doesn't work

It seems the I can overide the className prop for every other component except Modals. I am trying to position the modal at the bottom of the screen and change the background colour.

Expected Behavior

Should be able to use in TS project without any errors saying it Could not find a declaration file for module @material-tailwind/react/*`.

Current Behavior

I cannot use it in TS project as seen here:

Possible Solution

Add native TS support or create typings.

Steps to Reproduce (for bugs)

1. Create empty NextJS/React app with TS support
2. Install material-tailwind
3. Import material component

Your Environment

Current version of material-tailwind. NextJS TS project.

I just wanna ask that stable release of material-tailwind is not released yet so
Can I use @material-tailwind for a serious project?

I am using NextJS with TypeScript and Material-UI but Material-UI is not working properly with the tailwindcss.

can i change custom color for input or inputicon?

Your issue may already be reported!
Please search on the issue tracker before creating one.

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

Tried to test it out in Next Js

Installed using:
yarn add @material-tailwind/react -E

on _app.js
added:
import "@material-tailwind/react/tailwind.css";

Below code should display a white square in the center of the page with a gray background.

<div className="flex flex-col justify-center min-h-screen bg-gray-100">
  <div className="sm:mx-auto">
	<div className="p-20 bg-white rounded-lg shadow-lg" />
  </div>
</div>

The square wont show.

Vertical centering will not trigger even following the login example classes used.

I was using an example of tooltip for talwind-react components and found that there is an typing error which needs to be fixed
https://material-tailwind.com/documentation/react/tooltips

Doc says to: import TooltipsContent from "@material-tailwind/react/TooltipsContent";

and used as: Tooltip bottom

If someone is copying the code they will see an error

How to hide password in a Input ?

Expected Behavior

If possible, change the label "Completed" in progress bar, percentage = true

Current Behavior

No API yet to edit this

Possible Solution

<Progress
  color="lightGreen"
  value="100"
  percentage={true}
  percentageLabel="Compressed" # suggestion
/>

Your Environment

• Version used: 1.0.7
• Browser Name and version: chrome
• Operating System and version (desktop or mobile): desktop
• Link to your project:

How can I make it so that the dropdown closes when an item is clicked?

Hello, I cannot remove the mb-3 rule from the navbars.
Is there an elegant way to do it ?

Your issue may already be reported!
Please search on the issue tracker before creating one.

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

Copied the example from the docs

Got this

Expected Behavior

I was expecting the Icon.js module to be able to use the family property with the " "family: 'font-awesome' " not " family: 'material-icons' "

Current Behavior for material-tailwind-dashboard-react-main > Component > Setting.js

it always uses the default setting for material-icons

Icon.defaultProps = {
family: 'material-icons',
size: 'base'
};

Possible Solution

to make it work I had to modify

Icon.defaultProps = {
family: 'font-awesome',
size: 'base'
};

in
node_modules > @material-tailwind > react >Icon.js line 81 otherwise I can not use fontawesome

then I restarted the app for it to be effective

Your Environment

yes my public > index.html includes these lines

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
  integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
  crossorigin="anonymous"
/>

• Version used: 14
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): Linux
• Link to your project: localhost only... sorry

How can we change the buttonText with selected dropdown items? Should we use useEffect in every dropdown components to handle change?

Whenever the Input field is in focus, a border appears apart from the variant border style. is there any way to remove or disable it if it is present intentionally as a design? otherwise, if it's a bug please fix it as soon as possible
by the way, I am using the latest version

  "dependencies": {
    "@material-tailwind/react": "^1.0.3",
  }

and my tailwind.config.js file looks like

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

module.exports = withMT({
  content: ["./src/**/*.{js,jsx,ts,tsx}"],

  theme: { ...  },
  plugins: [],
  });

I installed @material-tailwind/html but I can't find the material-tailwind.js mention on the documentation.

i just created a fresh project to test out material tailwind few of the components (like buttons) worked but as soon as i add dialog component from example it throws this error

i was using react 18 project with typescript

`<Dropdown
color="dark"

    buttonText=" All Categories"
    buttonType="outline"

  >`

Overide ClassName for Modal Component not working at all?
any suggestion

example :

 <Navbar color="lightBlue" className="flex flex-wrap items-center justify-between py-2.5 px-3 mb-0">

Hello,
I have used old version and it run well until new version come out. I follow instruction to install new version, however I get error:

...\node_modules\@material-tailwind\react\index.js:1
export * from "./components/Accordion";
^^^^^^
SyntaxError: Unexpected token 'export'
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@material-tailwind/react (...\.next\server\pages\_app.js:216:18)

Here is my _app.js code:

import '../styles/globals.css'
import 'tailwindcss/tailwind.css'
import '@material-tailwind/react'
import React from 'react';
import App from 'next/app';
import MainLayout from '../components/mainlayout';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const Layout = Component.Layout || Component.DefaultLayout;

    return (
      <MainLayout>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </MainLayout>
    );
  }
}

export default MyApp;

this is tailwind.config.js

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

module.exports = withMT({
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './src/layouts/**/*.{html,js}',
    './src/index.html',
    { raw: '<div class="font-bold">', extension: 'html' },
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

Expected Behavior

After starting a fresh project with the next.js tailwindCSS starter template and installing the material-tailwind package as per the docs, I created a heading which I expect to be aligned to the left from medium screens and up.

The code used is as follows:

<h1 className="text-center text-3xl md:text-left">Hello</h1>

Current Behavior

Instead I get the text centered at all screen sizes (breakpoints). This happens with multiple components within my fresh application.

Possible Solution

The only way I can get the application to work as intended is to remove the line importing the material tailwind CSS in the _app.js file and keep the tailwindcss/tailwind.css style import.

My _app.js file is as follows:

import Head from 'next/head';
import 'tailwindcss/tailwind.css';
// removing the below line makes the breakpoints work as intended
import '@material-tailwind/react/tailwind.css';

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Head>
                <link
                    href="https://fonts.googleapis.com/icon?family=Material+Icons"
                    rel="stylesheet"
                />
            </Head>
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;

Steps to Reproduce (for bugs)

1. npx create-next-app -e with-tailwindcss my-project
2. npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
3. npx tailwindcss init -p
4. npm i -E @material-tailwind/react
5. Import the material CSS file so your _app.js looks like so:

import Head from 'next/head';
import 'tailwindcss/tailwind.css';
import '@material-tailwind/react/tailwind.css';

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Head>
                <link
                    href="https://fonts.googleapis.com/icon?family=Material+Icons"
                    rel="stylesheet"
                />
            </Head>
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;

6. In index.js create a component as follows:

export default function Home() {
    return (
            <div>
                <h1 className="text-center text-3xl md:text-left">Hello</h1>
            </div>
    );
}

7. Once you view it in your browser and resize, you can see that text does not realign.

Context

I was watching a live coding session on YT and I saw the programmer run into this problem and not resolve it so I just had a quick look.

Your Environment

• Version used: ^0.3.4
• Browser Name and version: Chrome version 91.0.4472.114
• Operating System and version (desktop or mobile): Mac
• Link to your project:

For filled (default) buttons (but not gradient), navbar and CardHeaders it was noticed that the "light-blue" and "orange" colours currently do not correctly render and show as white instead. This may also be present in other elements, but was simply where it had noticeably occurred during development using the application. Was on 1.0.3 of @material-tailwind@react.

Your issue may already be reported!
Please search on the issue tracker before creating one.

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

Is there any way to chnage collapse/explan icon from +/- to drop down like arrow up and down icon

Thanks

Good Morning,

Very good work with the Material kit it is just magnificent (Especially the Button).

So I would like to contribute with some component ideas that I think are essential to start using the Material kit in production.

1. Spiners - I know it's not hard to do, but it would take several minutes if the lib already came with them.
   

2. Skeleton - Same as spiners.
   

3. Badge - Same as Skeleton.
   

4. Pagination - This one is already more boring, it would be top if it came with the lib.
   

5. Autocomplete - Much more boring to do but it makes the sites look much more professional.
   

Now we get to the extras part, it was great to have but it wouldn't be a priority.

7. Rating - To be able to rate the projects (5 stars XD)
   

8. Slider - You can do some funny things.
   

9. Stepper - Very useful for splitting forms.
   

Now dreamed.

9. Mockup - Mobile, PC, Code screens. Very useful in certain scenarios.
   
   
   

Similar to this issue #77

Steps taken:

1. Already had tailwind css added as a devDependency
2. npm i @material-tailwind/react
3. added wrapping to tailwind config file:
   
4. imported material-tailwind on _app.js file after all other style sheets
   
5. npm run dev returns this error:
   "error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css
   /mnt/c/Users/jon/Documents/GitHub/homehelpdesk/homehelpdesk/node_modules/@material-tailwind/react/index.js:1
   export * from "./components/Accordion";
   ^^^^^^

SyntaxError: Unexpected token 'export'"

Package.json:

Tried reinstalling material-tailwind, moving material-tailwind from dependencies to devDependencies, tried importing Button from material-tailwind (same error occurs)

It might just be something in my setup but I have yet to find anything relating to this issue anywhere beside the other issue thread linked above (double checked my import statement) which was correct yet issue still persisted.

some help would be appreciated :)

In trying to use the Popover component in a Nextjs codebase,

import Popover from '@material-tailwind/react/Popover'
...
<Popover placement='left' ref={targetRef}>
  <PopoverContainer>
    <PopoverHeader>{prop.title}</PopoverHeader>
    <PopoverBody>{prop.description}</PopoverBody>
  </PopoverContainer>
</Popover>

I get the following error in Nextjs:

wait  - compiling...
error - ./node_modules/tippy.js/dist/svg-arrow.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@material-tailwind/react/Popover.js

Nextjs doesn't like it when a package is importing a CSS file from another module. See: https://nextjs.org/docs/messages/css-npm

Hi,

After i installed material-tailwind i noticed a change in colors name and colors themselves , how can i keep tailwind default colors instead ?

thank you

The tabs are not responsive. It moves out of the screen.

In React, if I set a Button or IconButton with "hidden={true}", it still appears. Removing the class "inline-block" they use solves that issue.

SO: Ubuntu 22.04
Environment:
nextjs: 12.1.6
react: 18
typescript: 4.6.4

Commands:
yarn add @material-tailwind/html

require('material-tailwind/plugin') <- Add to tailwind config

Error:

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./src/styles/globals.css
Error: Cannot find module 'material-tailwind/plugin'
Require stack:
- /home/pedro/www/next-template/tailwind.config.js
- /home/pedro/www/next-template/node_modules/tailwindcss/lib/lib/setupTrackingContext.js
- /home/pedro/www/next-template/node_modules/tailwindcss/lib/index.js
- /home/pedro/www/next-template/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
- /home/pedro/www/next-template/node_modules/next/dist/build/webpack/config/blocks/css/index.js
- /home/pedro/www/next-template/node_modules/next/dist/build/webpack/config/index.js
- /home/pedro/www/next-template/node_modules/next/dist/build/webpack-config.js
- /home/pedro/www/next-template/node_modules/next/dist/server/dev/hot-reloader.js
- /home/pedro/www/next-template/node_modules/next/dist/server/dev/next-dev-server.js
- /home/pedro/www/next-template/node_modules/next/dist/server/next.js
- /home/pedro/www/next-template/node_modules/next/dist/server/lib/start-server.js
- /home/pedro/www/next-template/node_modules/next/dist/cli/next-dev.js
- /home/pedro/www/next-template/node_modules/next/dist/bin/next

I have been using it for long and also do copy and paste from docs and i suddenly see these are vanished with new docs.

Please Include React Functionality

Your issue may already be reported!
Please search on the issue tracker before creating one.

Expected Behavior

Importing a Button should work like so:

import Button from '@material-tailwind/react/Button'

Current Behavior

When opening the page, this error occurs. No, I'm not using TS

event - compiled client and server successfully in 47 ms (263 modules)
/Users/dillonbarnes/Documents/Coding/React/google-docs-clone/node_modules/@material-tailwind/react/index.js:3
export { default as Alert } from './Alert.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1026:15)
    at Module._compile (node:internal/modules/cjs/loader:1061:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@material-tailwind/react (/Users/dillonbarnes/Documents/Coding/React/google-docs-clone/.next/server/pages/_app.js:43:18)
    at __webpack_require__ (/Users/dillonbarnes/Documents/Coding/React/google-docs-clone/.next/server/webpack-runtime.js:33:42)
error - SyntaxError: Unexpected token 'export'
/Users/dillonbarnes/Documents/Coding/React/google-docs-clone/node_modules/@material-tailwind/react/index.js:3
export { default as Alert } from './Alert.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1026:15)
    at Module._compile (node:internal/modules/cjs/loader:1061:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@material-tailwind/react (/Users/dillonbarnes/Documents/Coding/React/google-docs-clone/.next/server/pages/_app.js:43:18)
    at __webpack_require__ (/Users/dillonbarnes/Documents/Coding/React/google-docs-clone/.next/server/webpack-runtime.js:33:42)

Possible Solution

... Sorry, I don't know.

Steps to Reproduce (for bugs)

Here's a link: https://docs.dillonb07.studio - It crashed on Vercel so the link won't work.

1. Create a next.js project with these dependencies:

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@material-tailwind/react": "0.3.4",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.1",
    "tailwindcss": "^3.0.7"
  }
}

2. Import @material-tailwind/react/Button on a page. I'm inside of a component, but I don't think that matters.
3. Run the server and visit the page.

Context

Trying to use a button as decoration in a website

Your Environment

• Version used: Latest - 0.3.4
• Browser Name and version: Irrelevant - Chrome 99.0.4844.51 (Official Build) (x86_64)
• Operating System and version (desktop or mobile): macOS Catalina 10.15.7
• Link to your project: https://github.com/DillonB06/google-docs-clone

Your issue may already be reported!
Please search on the issue tracker before creating one.

Expected Behavior

Text should be padded somehow not to go over the placeholder when scrolled but rather always stay below it

Current Behavior

Text clips the upper boundary of text area and it just looks bad

Possible Solution

Steps to Reproduce (for bugs)

hello
how to install material-tailwind HTML properly? when I try to run
npm run watch
I got error material-tailwind/plugin not found

Your issue may already be reported!
Please search on the issue tracker before creating one.

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

How do I add an icon to the dropdown component? You seem to have done this somehow on the documentation site at the header, but I can't figure out how.

First off, great library! Thanks a lot for all your hard work. I would PR this fix myself, but I'm not familiar enough with React yet.

Expected Behavior

Standard Material UI Components allow for the passing of refs via the inputRef prop. The Material Tailwind version should as well.

Current Behavior

If you add a ref via inputRef to a Material Tailwind Input Component, you receive the following error: "Warning: React does not recognize the inputRef prop on a DOM element.".

Possible Solution

Unfortunately, I'm not sure how to solve this issue.

Steps to Reproduce (for bugs)

1. Create reference using useRef().
2. Add reference as inputRef prop to <Input> Component.

Context

The goal here is to allow a hotkey to focus the input in question. There are workarounds, but given this is a deviation from the expected behavior of Material Components, I believe everyone would appreciate a fix.

Your Environment

"react": "^17.0.2",
"@material-tailwind/react": "0.3.4",

This is a feature request to be able to import components on one line like so:

import { Icon, H1, Image, Dropdown, DropdownItem } from '@material-tailwind/react'

A very minor thing, but would be nice to have.

Thank you

Any plans to add a select component ?

Since this is using Tailwind, we should be able to override classes on components. For example, I'd love to change the bg color of a popover, but I can't. Will this be supported?

Your issue may already be reported!
Please search on the issue tracker before creating one.

Expected Behavior

When passing rows to <Textarea rows={2} /> it should work.

Current Behavior

rows="7" is hardcoded in Textarea.js

Possible Solution

rows=rest.rows || "7" in Textarea.js

Context

In my project, I don't need this big Textarea. 2 or 3 rows are sufficient.

I'm looking for good TailwindCSS Components for Angular. Roughly how long until this will be available for Angular?