Introducing Oatmeal
Our new multi-theme marketing site kit
UI BlocksTemplatesUI Kit

Elements

A commercial license is required to use Tailwind Plus Elements.

Tailwind Plus Elements is a JavaScript UI component library that powers all the interactive behavior in our HTML snippets. It has no dependencies on JavaScript frameworks like React, and works with any modern stack—Next.js, Rails, Laravel, Svelte, Astro, or even plain HTML.

Available components

Tailwind Plus Elements includes the following UI components:

Browser support

Elements targets the same modern browsers supported by Tailwind CSS v4.0, and relies on the following minimum versions:

  • Chrome 111 (released March 2023)
  • Safari 16.4 (released March 2023)
  • Firefox 128 (released July 2024)

Installing in your project

Using CDN

The easiest way to install Elements is via the CDN. To do this, add the following script to your project's <head> tag:

<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>

Using npm

Alternatively, if you have a build pipeline you can also install it via npm:

npm install @tailwindplus/elements

Next, import Elements into your root layout:

import '@tailwindplus/elements';

Using with React

If you’re using React, we recommend using the npm installation method along with the React-specific exports directly. This will ensure Elements is loaded at the right time to not clash with hydration:

npm install @tailwindplus/elements

Now, instead of using the custom elements directly, you can use the React-specific components. For example, instead of using <el-disclosure>, use <ElDisclosure>:

import { ElDisclosure } from '@tailwindplus/elements/react'
import { useId } from 'react'

export default function MyAccordion() {
  let id = useId()

  return (
    <>
      <button command="--toggle" commandfor={id}>
        How do you make holy water?
      </button>
      <ElDisclosure id={id} hidden>
        You boil the hell out of it.
      </ElDisclosure>
    </>
  )
}

Detecting when ready

Sometimes you may want to add additional functionality to the Elements' components using JavaScript. To do this you must ensure that Elements has been loaded and is ready before interacting with it. You can do this by listening to the elements:ready event on the window object:

function myFunction() {
  let autocomplete = document.getElementById('autocomplete')
  // Do something with the autocomplete element
}

if (customElements.get('el-autocomplete')) {
  myFunction()
} else {
  window.addEventListener('elements:ready', myFunction)
}

Documentation for LLMs

If you're using Cursor, Copilot, Claude, or any other LLM, all of the Elements documentation is also available in Markdown format.