DOCSEARCHbyAlgolia
Submit Docs

TW Elements

repository·master·Indexed 11 days ago

https://github.com/mdbootstrap/tw-elements

A library of over 500 open-source, interactive UI components and 117+ design blocks tailored for Tailwind CSS. Version 2.0.0 supports dark mode, easy customization, and includes components for forms, navigation, data display, and layout. It provides a Tailwind CSS plugin and a JavaScript library for managing interactive elements like dropdowns, carousels, and offcanvas panels.

Tokens
15.7K
Snippets
41
Records
58
Agent score
94%

What's inside TW Elements

  1. Overview of TW Elements

    master
    TW Elements is a large collection of over 500 free, interactive UI components and 117+ design blocks specifically built for Tailwind CSS. It is designed for both personal and commercial use and features support for dark mode, easy theming, and high customization capabilities.

  3. Explore TW Elements components

    master
    TW Elements provides a comprehensive collection of UI components built with Tailwind CSS. These components cover various categories including forms, navigation, data display, and interactive elements. You can find detailed documentation, implementation guides, and live demos for each component on the official TW Elements website.

  4. Install and use MDB GO / CLI

    master

    The MDB GO / CLI allows you to create, deploy, and host projects using a single command-line interface.

    1. Install the CLI globally:
      npm install -g mdb-cli
    2. Log in to your MDB account:
      mdb login
    3. Initialize a new project and select Tailwind Elements:
      mdb init tailwind-elements-free
    4. Navigate to the project directory and install dependencies:
      npm install
    5. Start the development server:
      npm start
    6. Deploy your project:
      mdb publish
    npm install -g mdb-cli
mdb login
mdb init tailwind-elements-free
npm install
npm start
mdb publish

  5. Install TW Elements via NPM

    master

    To use TW Elements in a standard web project, follow these steps:

    1. Ensure Node.js (LTS) and TailwindCSS are installed.
    2. Install the package using npm:
      npm install tw-elements
    3. Configure tailwind.config.js to include the TW Elements plugin and ensure the content array includes the library's JavaScript files to support dynamic component classes.
    4. Load the JavaScript functionality using either a direct script tag or a bundler import.
    npm install tw-elements

  6. Load TW Elements JavaScript

    master

    After installation, you need to load the TW Elements logic. You can do this in two ways:

    1. Bundler version (Recommended for modern workflows): Import the package directly in your entry JavaScript file:

    import 'tw-elements';

    2. Script tag version: Include the UMD bundled file in your HTML:

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

  7. Use TW Elements via CDN

    master

    For quick testing without installing packages, add the following scripts and styles to your HTML template.

    In the <head> section: Include the Google Fonts, the TW Elements CSS, and the Tailwind CSS CDN with a basic configuration.

    Before the closing </body> tag: Include the TW Elements UMD bundled JavaScript file.

    <!-- In <head> -->
<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>

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

  8. How component instances are managed

    master

    TW Elements uses a data-driven approach to manage component instances. Each component class provides static utility methods to interact with elements without needing to track the instances manually in your own code.

    Instance Management Patterns

    1. getInstance(element): Retrieves the existing instance associated with a DOM element. Returns undefined if no instance exists.
    2. getOrCreateInstance(element, options?): The preferred way to interact with a component. It returns the existing instance if available, or creates a new one with the provided options if it doesn't exist.
    3. dispose(): Every component provides a dispose() method to clean up DOM modifications, event listeners, and internal data to prevent memory leaks.
    // The standard pattern for using any TW Elements component:
const el = document.querySelector('#my-component');
const instance = ComponentClassName.getOrCreateInstance(el, { /* options */ });

// Later...
instance.dispose();

  9. How the Focus Trap works

    master

    The FocusTrap utility is an accessibility feature that restricts keyboard focus to a specific container (e.g., a Modal or Offcanvas). This prevents users from accidentally tabbing out of the active component into the background page.

    Core Logic:

    • It monitors keydown events (specifically the Tab key).
    • When a user reaches the last focusable element and presses Tab, focus is wrapped back to the first element.
    • When a user reaches the first element and presses Shift + Tab, focus is wrapped to the last element.
    • It can be configured to only trap focus within elements that are currently visible (onlyVisible option).

  10. How the Backdrop utility works

    master

    The backdrop utility is used to create overlay elements (like those used in Modals or Offcanvas). It can be configured to be visible or invisible, and animated.

    Configuration Options:

    • isVisible: boolean - Whether the backdrop is actually rendered in the DOM.
    • isAnimated: boolean - Whether to use animations when showing/hiding.
    • rootElement: (element|string) - The element to which the backdrop is appended. Defaults to body.
    • clickCallback: (function|null) - A callback function executed when the backdrop is clicked.
    • backdropClasses: (array|string|null) - Custom Tailwind CSS classes to apply to the backdrop element.

  11. How Tooltip works with Popper.js

    master

    The Tooltip component uses @popperjs/core for positioning. It automatically manages the lifecycle of the Popper instance.

    When show() is called, a tooltip element is created based on the template config, and Popper is initialized to position that element relative to the trigger element. The placement option determines the initial position, and fallbackPlacements allows Popper to find a suitable position if the preferred one is obstructed.

    Custom Popper configurations can be passed via the popperConfig option to fine-tune behavior like modifiers, offsets, and boundaries.

  12. Configure tailwind.config.js for TW Elements

    master

    TW Elements operates as a Tailwind CSS plugin. You must add it to your plugins array and extend the content array to include the library's JS files so that Tailwind can scan and generate the necessary classes for dynamic components.

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