mdbootstrap/tailwind-elements

𝙃𝙪𝙜𝙚 collection of Tailwind MIT licensed (free) components, sections and templates 😎

TW Elements

TW Elements is a huge collection of free, interactive components for Tailwind CSS.

500+ UI components 117+ design blocks Dark mode support Easy theming & customization Simple, 1 minute install Free for personal & commercial use Get started with TW Elements now!

---

Table of Contents

• Table of Contents
• Community
• Coming soon
• Components
• Design blocks
• Installation

---

Community

• Motivate us with some words of encouragament ❤️
• Share your ideas & feature requests 💡
• Aks for help & help others in our community support 🙏
• Engage, discuss & have fun in our community 💬

If you want to help the project grow, start by simply sharing it with your peers!

• Share via Dev.to
• Share via Twitter
• Share via Facebook
• Share via LinkedIn
• Share via Pinterest
• Share via Reddit
• Share via StumbleUpon
• Share via Vkontakte
• Share via Weibo
• Share via Hackernews
• Share via Gmail
• Share via email

Thank you!

---

Coming soon

Check out the upcoming features - make sure to join the waiting list in order to get early access!

Drag & drop builder	Templates

---

Components

A collection of stunning components made with attention to the smallest details. Forms, cards, buttons, and hundreds of others – in TW Elements you will find all the essential elements necessary for every project.

Datepicker	Dropdown	Modal
Charts	Tooltips	Carousel
Accordion	Tabs	Stepper
Timepicker	Footer	Navbar
Alerts	Avatar	Badges
Button group	Buttons	Cards
Chips	Collapse	Gallery
Jumbotron	Link	List group
Notifications	Paragraphs	Placeholders
Popover	Progress	Rating
Scroll to top	Social buttons	Spinners
Timeline	Toast	Tooltip
Video	Video carousel	Checkbox
File input	Input group	Login form
Radio	Range	Registration form
Search	Select	Switch
Textarea	Tables	Ripple
Animations	Masks	Shadows
Datatables	Lightbox	Rating
Scrollbar	Popconfirm	More coming soon

---

Design blocks

Responsive Landing page blocks built with Tailwind CSS. Plenty of design blocks examples such as Teams, services, projects, faq, and many more.

Hero	Pricing	Call to action
Features	Contact	News/blog
Team	Stats	Testimonials
Content	Newsletter	Projects
Headers	FAQ	Logo Clouds
Banners	Mega Menu	More coming soon

---

Integrations

TW Elements integrations with popular technologies.

• Django Integration
• Angular Integration
• Express Integration
• Laravel Integration
• Next Integration
• Nuxt Integration
• Django Integration
• Remix Integration
• Solid Integration
• Svelte Integration
• Sveltekit Integration
• Vue Integration

---

Installation

NPM

1. Before starting the project make sure to install Node.js (LTS) and TailwindCSS.

2. Run the following command to install the package via NPM:

npm install tw-elements

3. TW Elements is a plugin and should be included inside the tailwind.config.js file. It is also recommended to extend the content array with a js file that loads dynamic component classes:

module.exports = {
  content: ["./src/**/*.{html,js}", "./node_modules/tw-elements/js/**/*.js"],
  plugins: [require("tw-elements/plugin.cjs")],
  darkMode: "class",
};

4. Dynamic components will work after adding the js file:

<script src="./TW-ELEMENTS-PATH/js/tw-elements.umd.min.js"></script>

Alternatively, you can import it in the following way (bundler version):

import 'tw-elements';

MDB GO / CLI

Create, deploy and host anything with a single command.

1. To start using MDB GO / CLI install it with one command:

npm install -g mdb-cli

2. Log into the CLI using your MDB account:

mdb login

3. Initialize a project and choose Tailwind Elements from the list:

mdb init tailwind-elements-free

4. Install the dependencies (inside the project directory):

npm install

5. Run the app:

npm start

6. Publish when you're ready:

mdb publish

CDN

You can easily test TW Elements by adding CDN scripts to your classic HTML template without the need for installing any packages.

Add the stylesheet files below in the head section:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/css/tw-elements.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    darkMode: "class",
    theme: {
      fontFamily: {
        sans: ["Roboto", "sans-serif"],
        body: ["Roboto", "sans-serif"],
        mono: ["ui-monospace", "monospace"],
      },
    },
    corePlugins: {
      preflight: false,
    },
  };
</script>

Require the js bundled file right before the body closing tag:

<script src="https://cdn.jsdelivr.net/npm/tw-elements/js/tw-elements.umd.min.js"></script>

tailwind-elements's Issues

Model popup cannot initialize.

The Model Popup has issue that produce error onclick model:
The console log Error:
Uncaught TypeError: this._element is undefined value modal.js:312 value modal.js:194 o modal.js:83 value base-component.js:53 Io modal.js:429 t event-handler.js:119 gt event-handler.js:215 on event-handler.js:249 <anonymous> modal.js:403 Webpack 3 modal.js:312:4

add prefix to tailwind.config.js not work

Hello, after I add a prefix to tailwind.config.js, Tailwind-Elements will not work.
Does it not support prefixes?

// tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./node_modules/tw-elements/dist/js/**/*.js",
  ],
  prefix: 'I__',
  theme: {
    extend: {},
  },
  plugins: [require("tw-elements/dist/plugin")],
};

is it possible to wrap scrollable content inside a fixed div?

I want to keep fixed a custom scroll on bottom page.

But when I set a position fixed the scroll disappear.

Thanks in advance.

Dynamic require of "tw-elements/dist/plugin" is not supported

• package.json

"devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
    "@tsconfig/svelte": "^2.0.1",
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.13",
    "sass": "^1.51.0",
    "svelte": "^3.44.0",
    "svelte-check": "^2.2.7",
    "svelte-preprocess": "^4.9.8",
    "tailwindcss": "^3.0.24",
    "tslib": "^2.3.1",
    "typescript": "^4.5.4",
    "vite": "^2.9.7"
  },
  "dependencies": {
    "tw-elements": "^1.0.0-alpha12"
  }

• tailwind.config.cjs

module.exports = {
  content: [
    './index.html',
    './src/**/*.{svelte,js,ts}'
  ],
  theme: {
    extend: {},
  },
  plugins: [require('tw-elements/dist/plugin')],
};

• Error: Dynamic require of "tw-elements/dist/plugin" is not supported

Toast dismissing not working

It's not possible to have the Toast either automatically hide, or be able to dismiss it manually.
Even the basic example from https://tailwind-elements.com/docs/standard/components/toast/ doesn't work.

It's not an issue with the JS lib not being loaded in correctly, because other components works just fine (i.e alerts dismissing and dropdowns)

Apologies if I'm doing anything wrong, but I've been going around scratching my head about this for a little while now, so appreciate any advice!

Missing type declaration files

Hi, I've added this to a React Typescript project and am getting the following error:

Could not find a declaration file for module 'tw-elements'. '/Users/microsoft/code/Azure-Kusto-WebUX/node_modules/tw-elements/dist/js/index.min.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/tw-elements` if it exists or add a new declaration (.d.ts) file containing `declare module 'tw-elements';`ts(7016)

Of course, @types/tw-elements doesn't exist. Is there a plan to create it?

Reinitialize Datepicker after it was placed in the DOM via AJAX

How can I reinitialize the datepicker after a corresponding input field has been placed in the DOM via Ajax? Unfortunately I can't find any instructions or JS documentation.

Ripple does not work on Firefox 105

None of the ripple-effects on TE ripple doc page seem to work in Firefox. No color and no drop effect. All works however on the Bootstrap page

Using FF v105 on Ubuntu 20.04 LTS

nextjs error - ReferenceError: document is not defined error

nextjs error - ReferenceError: document is not defined error, please fix this bug

Site + All component bug ( automaticly hide ).

Hello i want to install your library but in your website i can't copy nothing.
All button 'show code' automaticly hide when we click it.
when i install the library all component with dynamic status automaticly hide when i click.
I test in my computer and in my mobile : same problem.
Can you see whats going on ? thanks you.

Modal "hidden" class remaining active

Hello, love the library!

The library works fine for me, with the exception of: using the example modal code (below) my overlay darkens but the hidden class remains on the modal html, so it doesn't become visible to the user, could anyone suggest a solution?

"tailwindcss": "^2.0.3",
"tw-elements": "^1.0.0-alpha12"

<!-- Button trigger modal -->
<button type="button" class="px-6
      py-2.5
      bg-blue-600
      text-white
      font-medium
      text-xs
      leading-tight
      uppercase
      rounded
      shadow-md
      hover:bg-blue-700 hover:shadow-lg
      focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
      active:bg-blue-800 active:shadow-lg
      transition
      duration-150
      ease-in-out" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog relative w-auto pointer-events-none">
    <div
      class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
      <div
        class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
        <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">Modal title</h5>
        <button type="button"
          class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
          data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body relative p-4">
        Modal body text goes here.
      </div>
      <div
        class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
        <button type="button" class="px-6
          py-2.5
          bg-purple-600
          text-white
          font-medium
          text-xs
          leading-tight
          uppercase
          rounded
          shadow-md
          hover:bg-purple-700 hover:shadow-lg
          focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0
          active:bg-purple-800 active:shadow-lg
          transition
          duration-150
          ease-in-out" data-bs-dismiss="modal">Close</button>
        <button type="button" class="px-6
      py-2.5
      bg-blue-600
      text-white
      font-medium
      text-xs
      leading-tight
      uppercase
      rounded
      shadow-md
      hover:bg-blue-700 hover:shadow-lg
      focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
      active:bg-blue-800 active:shadow-lg
      transition
      duration-150
      ease-in-out
      ml-1">Save changes</button>
      </div>
    </div>
  </div>
</div>

Missing instruction about CSS

Hello, thanks for the library!
I've followed your instructions from here, but could not get the date picker to work. As I've inspected, it requires some specific CSS, so could you specify the correct way to include all necessary styles?

Thanks

Change the language in Datepicker component

ReferenceError: document is not defined

In next js when I try to import tw-elements the app is getting crashed and giving an message "ReferenceError: document is not defined"

align right dropdown menu

can't find in the docs the support for this. js is using inset and not possible to override using right-0

TimePicker Disabled

How i can disabled timepicker?

Accordion open but doesnt close with v-for vuejs

              Why is the accordion been opened but it doenst close? Help, please!

<h2 class="mb-0 accordion-header" :id="heading${index+1}5"> <button class="relative flex items-center w-full px-5 py-4 text-base text-left text-gray-800 transition bg-white border-0 rounded-none accordion-button collapsed focus:outline-none" type="button" data-bs-toggle="collapse" :data-bs-target="#collapse${index+1}5" aria-expanded="false" :aria-controls="collapse${index+1}5`">

                Title
                
              </button>
            </h2>
            <div :id="`collapse${index+1}5`" class="accordion-collapse collapse"
              :aria-labelledby="`heading${index+1}5`">`
              
              
              i'm trying the Always Open: https://tailwind-elements.com/docs/standard/components/accordion/

Can't get TimePicker to work

Hi, I'm trying to create a time picker component, I have copy-pasted the second example from here and nothing happens when I click. I can confirm that I've correctly set up Tailwind Elements (following the instructions on the website) because I've successfully rendered a date picker that opens the modal on click.

I did notice that the time picker uses the data-mdb-toggle attribute, and I don't have MDB installed.

Thanks in advance for any help.

React Carousel doesn't start INTERVAL always FALSE, wrong configuration

Hi, there is a problem with configuration that receive tw-elements.

Here the import:
import 'tw-elements';

Usage:

....<div data-bs-ride='carousel' data-bs-interval='1000' id='carousel' className='carousel slide carousel-fade relative'>....

The slide is showing and also the indicators, on click it works, but it doesn't starts AUTOMATICALLY.

In debugging mode if we look inside config, there is an error:

The config is 👍

{
    "ride": "carousel",
    "interval": false,
    "target": "#carousel",
    "slideTo": 1
}

so why interval is set to false?

If I set new config it seems it takes them

<div data-bs-ride='carousel' data-bs-interval='1000' data-bs-touch='true' data-bs-pause='hover' data-bs-wrap='true' id='carousel' className='carousel slide carousel-fade relative'>
on the class carousel:

{
    "ride": "carousel",
    "interval": false,
    "touch": true,
    "pause": "hover",
    "wrap": true,
    "target": "#carousel",
    "slideTo": 1
}

Any idea?

Dropdown menu not working

Drop-down doesn't work in tailwindcss 3+, please check compatibility

Datepicker and Timepicker not working on nextjs

I have copied the html and all the stuffs installed but the components are not working and showing correctly

Here is my code:
<div className="flex justify-center"> <div className="timepicker relative form-floating mb-3 xl:w-96"> <input type="text" className="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" placeholder="Select a date" /> <label htmlFor="floatingInput" className="text-gray-700"> Select a time </label> </div> </div>

How clone and initialize TW element via vanilla JS?

Hey there, Tailwind lovers! :-)

Could you help me with the simple question please?
I cannot find in the docs how to call and init the Datepicker (or any other component) via vanilla JS programmably?
What I do... I do the clone of a form with cloneNode method like this:

1. I have hidden HTML template with Tailwind Element Datepicker:

<template id="temp">
  <form>
    <div class="datepicker relative mb-3" data-mdb-toggle-button="false">
      <input type="text" placeholder="Select a date" data-mdb-toggle="datepicker" />
      <label class="text-gray-700">Select a date</label>
    </div>
  </form>
</template>

2. When user clicks some button somewhere in the page "+ Add new form", then the new form will be added to the page. There can be many forms as user wants. So I want to use this template to clone it and insert new and new and new nodes to the page:

import 'tw-elements'
let newForm = document.querySelector("#temp").content.cloneNode(true); // clone the <form>
     newForm.appendChild(document.body); // add to the <body>

After these manipulations the new form added to the page, but the Datepicker does not work, it does not initialize.
As I understood, I should call the initialization of the element programmably via JS like this:

let datePicker = newForm.querySelect('.datepicker');
datePicker.tweDatePicker(); // smth like that maybe

Right? But how?

Icons used on Sidenav Page

Wich Icon-Pack is used on the Sidenav Examples Page?
https://tailwind-elements.com/docs/standard/navigation/sidenav/

Their is no option available for changing timepicker top color, bg color, text color

Their is no option available for changing timepicker top color, bg color, text color, I am using latest version of Tailwind-Elements.

https://tailwind-elements.com/docs/standard/forms/timepicker/

<div class="flex justify-center">
  <div class="timepicker relative form-floating mb-3 xl:w-96">
    <input type="text"
      class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
      placeholder="Select a date" />
    <label for="floatingInput" class="text-gray-700">Select a time</label>
    <button tabindex="0" type="button" class="timepicker-toggle-button" data-mdb-toggle="timepicker">
      <i class="fas fa-clock timepicker-icon"></i>
    </button>
  </div>
</div>

No component code is being copied

Impact :
Whole website.
How to replicate :
Go to any of the component and click on copy code button
Expected Outcome :
Should be able to copy the code on clipboard.
Real Outcome :
Not able to copy the code as code snippet is hiding withing on second.

Workaroud :
Tested on Mozzila /Chrome/Edge - Ubuntu /Windows

Stepper is not working at all

I was trying to use the stepper from https://tailwind-elements.com/docs/standard/components/stepper/. it is not working at all.
Can you please let me know what is the issue and how can i solve it?

thanks

Trigger Modal using JS

Hello,

Thanks for the wonderful library. I was going through the documentation but I couldn't find any way to trigger the modal with JS.

I have a project coming in where the front-end will be in Vue3. Is there any way I can achieve it?

ReferenceError: document is not defined

NextJS applications fail to load when attempting to import tw-elements; this is because the document object is not available when using server-side rendering.

This comment seems to imply that the fix will be to wrap all references to document in a check to ensure it's defined.

if(!(typeof document === "undefined")) {
  // Handle document-related logic here
}

Hover on mega menu items

Hi,

Congrats for this awesome library. Very useful. I have an issue with the mega menu component.
How can i fire the dropdown on mouse hover. Also i want to have the current dropdown parent (in the main navbar) underlined.

Is there any option that can solve this problem?

Thanks.

Overriding $primary and other vars?

Newbie Q: I cant find in the docs how to override the _variables. Such as the $primary theme color?

Windi CSS

Does it work with Windi CSS? I tried to install and configure it with Windi CSS in vite.config.js. The date picker does not pop up any calendar.

deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1

I am getting the above warning with TW-Elements. Apparently [email protected] is still part of the dependencies.

However, within the dependencies, @popperjs/core can be found in it too.

Does it mean [email protected] can be removed from the dependencies list?

Dropdown Position bottom-end

how to make this dropdown position to bottom-end ?

when i inspect element on the dropdown i found this data-popper-placement="bottom-start"

in MDBootstrap it can use class .dropdown-menu-end

but it doesn't work

Focus-trap on modal not work.

Hi, I just used tailwind-elements to layout my web page. There is one problem that bothers me, namely focus-trap (in this case on modal) not working. But on the documentation it seems to work https://tailwind-elements.com/docs/standard/components/modal. I don't know what's wrong here, but I've tried repeatedly installing using NPM or CDN. However, the focus-trap still doesn't work.

popover-arrow and tooltip-arrow are missing

These elements seem to be missing their CSS styles.
Even in the documentation examples are missing: https://tailwind-elements.com/docs/standard/components/popover/ and https://tailwind-elements.com/docs/standard/components/tooltip/

Had to add these CSS styles to fix Popover:

.popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}
.bs-popover-top .popover-arrow::after {
  border-top-color: rgb(48, 52, 54);
  left: -8px;
}
.bs-popover-bottom .popover-arrow::after {
  border-bottom-color: rgb(48, 52, 54);
  left: -8px;
}
.bs-popover-start .popover-arrow::after {
  border-left-color: rgb(48, 52, 54);
}
.bs-popover-end .popover-arrow::after {
  border-right-color: rgb(48, 52, 54);
}

I have not fixed tooltips yet.

Cannot read properties of undefined (reading 'getBoundingClientRect') in NextJS

I'm using NextJS and I put a dropdown button on a menu. When I run the app using yarn dev, everything works fine. But if I build the app and run using yarn start this error appears and the position of the dropdown is wrong.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')

NextJS installation procedure

Need help with installing this in NextJS.

Example code for Datepicker is wrong

https://tailwind-elements.com/docs/standard/forms/datepicker/

The example text is wrong. <input type="text" should be <input type="date"

Originally posted by @sageworksstudio in #1048 (comment)

Timepicker hours and mins are not aligned in a circle

I am trying to use any of the date pickers mentioned here : https://tailwind-elements.com/docs/standard/forms/timepicker/.
Unfortunately the hours and mins are displayed inline as you can see here : https://imgur.com/nab8VcQ.
I'm not sure if i followed an installation step incorrectly .
Any help is much appreciated 👍

Tailwind Elements and Angular

Issue

Hi everybody!
I tried to add Tailwind Elements to my Angular project to be able to use some of your components (eg: Date picker).

Unfortunately, it doesn't seem to work. I have some elements working (like the date picker field is transformed to a kinda material looking floating input). But when I click on it, my date picker calendar isn't fired.

I followed the steps given in the NPM installation guide :
1- I have Node installed and TailwindCss in my project
2- Installed Tailwind Elements via npm :

npm install tw-elements

3- Added that code in my tailwind.config.ts file :

module.exports = {
  content: ['./src/**/*.{html,js}', './node_modules/tw-elements/dist/js/**/*.js'],
  plugins: [
    require('tw-elements/dist/plugin')
  ]
}

4- I'm kinda stuck on point 4 though... They ask to add in the index.html file this script call :

<script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>

What I tried

1- Add that javascript script code (the above one)... But I can't really do that in an Angular project (I tried but it doesn't work).
2- I tried as well to add this index.min.js file in my project and declare it in my angular.json file on the "scripts" section (doesn't work either).
3- I tried as well to call this script via a CDN (doesn't work).

So if someone has an idea to make Tailwind Elements work in an Angular project, I'll take any hint ;)

Example for CSS Tabs has wrong code

The example code in https://tailwind-elements.com/docs/standard/navigation/tabs/#buttons contains no buttons but a href links.
I think it's the code of the basic example?

The carousel component doesn't work on NextJS

Carousel wont work with NextJS. The JSX is exactly the same as I had in a CRA project and it has stopped working.

<div id="MoviesHeroCarousel" className="carousel slide relative" data-bs-ride="carousel">
	<div className="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-1 lg:mb-4 z-20">
		{movies.map((movie, index) => (
			<button
				key={index}
				type="button"
				data-bs-target="#MoviesHeroCarousel"
				data-bs-slide-to={index}
				className={`${index === 0 ? "active" : ""} h-[5px] lg:h-[3px]`}
				aria-current={index === 0 ? "true" : "false"}
				aria-label={`Slide ${index + 1}`}
			  ></button>
		))}
	</div>
	<div className="carousel-inner relative w-full overflow-hidden">
		{movies.map((movie, index) => (
			<div
				key={index}
				className={`carousel-item float-left ${
					index === 0 ? "active" : ""
				} w-full py-8 relative after:content-[''] after:bg-slate-500 after:w-full after:h-full after:bg-opacity-60 after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:z-[1] bg-cover bg-center`}
				style={{ backgroundImage: `url(https://image.tmdb.org/t/p/w780${movie.obj.backdrop_path})` }}
			>
				<div className="flex flex-col lg:flex-row justify-center items-center mx-auto lg:max-w-cs relative z-10 px-6 lg:px-cs ">
					<img
						loading="lazy"
						src={`https://image.tmdb.org/t/p/w342${movie.obj.poster_path}`}
						alt={movie.type === "movie" ? movie.obj.title : movie.obj.name}
						className="w-44 lg:w-72 h-64 lg:h-96 object-cover rounded-xl shadow-2xl lg:mr-6 mb-2 lg:mb-0"
					/>
					<div>
						<h2 className="text-sm font-bold text-gray-400">{movie.title}</h2>
						<h1 className="text-xl lg:text-5xl font-bold text-white">{movie.type === "movie" ? movie.obj.title : movie.obj.name}</h1>
						<p className="pt-3 pb-2 text-white">{movie.obj.overview}</p>
						<Link href={`${movie.type === "tv" ? "/tv" : "/movie"}/${movie.obj.id}`}>
							<a className="btn">Show me</a>
						</Link>
					</div>
				</div>
			</div>
		))}
	</div>
	<button
		className="carousel-control-prev absolute top-0 bottom-0 w-5 lg:w-8 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0 z-20"
		type="button"
		data-bs-target="#MoviesHeroCarousel"
		data-bs-slide="prev"
	>
		<span className="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
		<span className="visually-hidden">Previous</span>
	</button>
	<button
		className="carousel-control-next absolute top-0 bottom-0 w-5 lg:w-8 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0 z-20"
		type="button"
		data-bs-target="#MoviesHeroCarousel"
		data-bs-slide="next"
	>
		<span className="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
		<span className="visually-hidden">Next</span>
	</button>
 </div>

DatePicker Not Working in inertiajs

Hello.. I tried to install tw-elements through npm and yet date picker isn't working.. im using inertiajs of laravel

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
        './node_modules/tw-elements/dist/js/**/*.js'
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                cyan: colors.cyan,
            }
        },
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/line-clamp'),
        require('tw-elements/dist/plugin')
    ],
};

Accordion styling doesn't kick in until interactions and sometimes reverts back to default

accordion.mp4

I'm trying our [email protected] (really nice work to the team!) and my accordion element functions correctly but the styling is a bit off. Specifically, the styling does not kick in until there's an interaction with the component, and occasionally, it reverts back to the default styling after an interaction.

Looking at the Chrome inspector, it seems as if the correct tailwind classes are there all the time. I'm not using the aria labels currently - could that be causing the bug? Anyway, I thought it would be useful to report it. Thanks!

ReferenceError: document is not defined

NextJS applications fail to load when attempting to import tw-elements; this is because the document object is not available when using server-side rendering.

This comment seems to imply that the fix will be to wrap all references to document in a check to ensure it's defined.

if(!(typeof document === "undefined")) {
  // Handle document-related logic here
}

TWE website no longer shows code blocks

As of today, none of the elements show code on the website, see for example the button and click on <> show code.

It will show for one second and then disappear. Tested on Firefox 106, Ubuntu. The issue seems:

.collapse {
  visibility: collapse;
}

`document` is not defined. SvelteKit

// __layout.svelte
<script>
import "tw-elements";
</script>

<slot />

// tailwind.config.cjs
module.exports = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/tw-elements/dist/js/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("tw-elements/dist/plugin")],
};

This results in a document is not defined error in Svelte-Kit

Closing DatePicker modal window by pressing the Escape key seems to be broken

Opening the date picker on any of these examples and then pressing esc to close it will throw an error in the dev console:

in laravel i am getting this issue path not found

T http://127.0.0.1:8000/TW-ELEMENTS-PATH/dist/js/index.min.js net::ERR_ABORTED 404 (Not Found)

decrease tw-elements.js size

• would be nice for an ala cart mode or way to have a smaller .js size