### Start Demo Application (npm) Source: https://tw-elements.com/docs/standard/getting-started/local-installation Starts the TW Elements demo application. This command requires that dependencies have been installed and assumes Step 1 (repository cloning) has been completed. ```bash npm start ``` -------------------------------- ### Install Bun and Check Version Source: https://tw-elements.com/docs/standard/getting-started/quick-start Ensures Bun is installed and accessible in your environment. This is a prerequisite for using Bun for project management and installations. ```shell bun --version ``` -------------------------------- ### Start Documentation Server (npm) Source: https://tw-elements.com/docs/standard/getting-started/local-installation Launches the local documentation server for TW Elements. This requires Hugo to be installed and dependencies to be set up. It's recommended to run 'npm run build' beforehand. ```bash npm run docs:start ``` -------------------------------- ### Link CSS and Install TW Elements Source: https://tw-elements.com/docs/standard/getting-started/quick-start Links the compiled CSS file in the HTML head and installs the `tw-elements` package using Bun. This makes the TW Elements library available for use in your project. ```html ... ... ``` ```shell bun install tw-elements ``` -------------------------------- ### Create Vite Project with Bun Source: https://tw-elements.com/docs/standard/getting-started/quick-start Initializes a new Vite project using the 'create vite' command with Bun. It selects the 'Vanilla' framework and 'JavaScript' variant, then installs dependencies. ```shell bun create vite my-project cd my-project bun install ``` -------------------------------- ### Install Tailwind CSS and Initialize Source: https://tw-elements.com/docs/standard/getting-started/quick-start Installs Tailwind CSS, PostCSS, and Autoprefixer as development dependencies using Bun. It then initializes Tailwind CSS, creating the `tailwind.config.js` file. ```shell bun install -D tailwindcss postcss autoprefixer bunx tailwindcss init -p ``` -------------------------------- ### Create and Run SvelteKit Application Source: https://tw-elements.com/docs/standard/integrations/sveltekit-integration These commands set up a new SvelteKit project and start the development server. Ensure you have Node.js LTS installed. This snippet uses npm for package management. ```bash npm create svelte@latest my-project cd my-project npm install npm run dev ``` -------------------------------- ### Create Vite Project and Install Dependencies Source: https://tw-elements.com/docs/standard/getting-started/quick-start Initializes a new Vite project using npm and installs Tailwind CSS with its peer dependencies (PostCSS and Autoprefixer). This sets up the basic structure for a modern web application. ```bash npm create vite@latest my-project cd my-project npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` -------------------------------- ### Publish the Project using MDB CLI (Terminal) Source: https://tw-elements.com/docs/standard/getting-started/quick-start Once your project is ready, this command deploys and publishes your application using the MDB CLI. This makes your project accessible online. ```bash mdb publish ``` -------------------------------- ### Link CSS and Install TW Elements Package Source: https://tw-elements.com/docs/standard/getting-started/quick-start Links the main CSS file (`style.css`) within the `index.html` head and installs the `tw-elements` package using npm. This makes the TW Elements library available for use in the project. ```html ... ... ``` ```bash npm install tw-elements ``` -------------------------------- ### Install MDB CLI Globally (Terminal) Source: https://tw-elements.com/docs/standard/getting-started/quick-start This command installs the MDB GO / CLI tool globally on your system using NPM. This CLI tool allows for creating, deploying, and hosting projects with a single command. ```bash npm install -g mdb-cli ``` -------------------------------- ### Update package.json for Bun Development Server Source: https://tw-elements.com/docs/standard/getting-started/quick-start This JSON snippet modifies the `scripts` section of a `package.json` file to utilize `bunx` for starting the development server and building the project. This allows for faster script execution using the Bun runtime. ```json "scripts": { "dev": "bunx --bun vite", "build": "bunx --bun vite build" } ``` -------------------------------- ### Install Project Dependencies (npm) Source: https://tw-elements.com/docs/standard/getting-started/local-installation Installs all project dependencies listed in the 'package.json' file using npm. Ensure Node.js (LTS) is installed and you are in the project's root directory. ```bash npm install ``` -------------------------------- ### Start Development Server Source: https://tw-elements.com/docs/standard/getting-started/optimization Starts the development server for the project, allowing for live reloading and testing. This is a standard npm script command. ```bash npm start ``` -------------------------------- ### Install Documentation Dependencies (npm) Source: https://tw-elements.com/docs/standard/getting-started/local-installation Installs dependencies specifically required for running the TW Elements documentation. This command should be run after the main project dependencies. ```bash npm run docs:install ``` -------------------------------- ### Run Development Server with Bun Source: https://tw-elements.com/docs/standard/getting-started/quick-start This terminal command initiates the development server for a Vite project using Bun. It ensures that Tailwind CSS is correctly connected and the application is served locally for development. ```bash bun run dev ``` -------------------------------- ### Install Django Source: https://tw-elements.com/docs/standard/integrations/django-integration Installs the Django web framework using pip, the Python package installer, within the activated virtual environment. ```bash pip install django ``` -------------------------------- ### Initialize a New Project with TW Elements using MDB CLI (Terminal) Source: https://tw-elements.com/docs/standard/getting-started/quick-start This command initializes a new project using the MDB CLI, specifically choosing 'tailwind-elements' as the project type. This sets up a new project configured for TW Elements. ```bash mdb init tailwind-elements ``` -------------------------------- ### Install Project Dependencies Source: https://tw-elements.com/docs/standard/getting-started/optimization Installs all the necessary project dependencies listed in the package.json file. This is a standard command for Node.js projects. ```bash npm install ``` -------------------------------- ### Initialize TW Elements Components with initTWE Method (JavaScript) Source: https://tw-elements.com/docs/standard/getting-started/quick-start This snippet demonstrates how to import and use the initTWE method to initialize TW Elements components, such as Input. It shows how to pass options like 'allowReinits' to the initialization method. This is useful for dynamic applications with routing. ```javascript import { Input, initTWE } from "tw-elements"; initTWE({ Input }, { allowReinits: true }); ``` -------------------------------- ### Install remix-utils Source: https://tw-elements.com/docs/standard/integrations/remix-integration Installs the `remix-utils` library, which provides helper components like `ClientOnly` for managing client-side rendering in Remix applications. ```bash npm i remix-utils ``` -------------------------------- ### Install i18next Dependencies Source: https://tw-elements.com/docs/standard/getting-started/internationalization Installs the necessary i18next framework and fetch backend plugin for loading translation resources. Requires Node.js and npm. ```bash npm install --save-dev i18next i18next-fetch-backend ``` -------------------------------- ### Add Carousel Component and Initialize TW Elements Source: https://tw-elements.com/docs/standard/getting-started/quick-start Includes an example of a carousel component in HTML and instructs to call the `initTWE` method in your JavaScript. This demonstrates how to use TW Elements components and initialize them. ```html

``` ```javascript import { initTWE } from "tw-elements"; initTWE(); ``` -------------------------------- ### Initialize Django Project Source: https://tw-elements.com/docs/standard/integrations/django-integration Creates a new Django project named 'mysite' within a 'src' directory. This command should be run after creating the 'src' folder. ```bash mkdir src cd src django-admin startproject mysite . ``` -------------------------------- ### Create New Next.js App Source: https://tw-elements.com/docs/standard/integrations/next-integration Command to create a new Next.js application using npx. This command initiates the project setup process. Ensure Node.js LTS (18.x.x or higher) is installed. The setup includes options for TypeScript, ESLint, `src/` directory, and App Router. ```bash npx create-next-app@latest cd my-project ``` -------------------------------- ### Initialize TW Elements Components (JavaScript) Source: https://tw-elements.com/docs/standard/navigation/navbar Demonstrates how to import and initialize TW Elements components like Collapse and Dropdown for ES module users. Ensure 'tw-elements' is installed as a dependency. ```javascript import { Collapse, Dropdown, initTWE, } from "tw-elements"; initTWE({ Collapse, Dropdown }); ``` -------------------------------- ### Log in to MDB CLI (Terminal) Source: https://tw-elements.com/docs/standard/getting-started/quick-start This command authenticates you with the MDB CLI using your MDB account credentials. This step is necessary before you can use other MDB CLI functionalities like initializing a project. ```bash mdb login ``` -------------------------------- ### Navigate to Directory (Bash) Source: https://tw-elements.com/docs/standard/getting-started/local-installation Navigates to a specified directory in the terminal using the 'cd' command. This is a prerequisite for cloning the repository or installing dependencies. ```bash cd /path/to/directory ``` -------------------------------- ### Initialize TW Elements Carousel in JavaScript Source: https://tw-elements.com/docs/standard/getting-started/quick-start This JavaScript code snippet imports the necessary Carousel component and initialization function from the 'tw-elements' library. It then calls `initTWE` to activate the carousel functionality on the page. ```javascript import { Carousel, initTWE } from "tw-elements"; initTWE({ Carousel } ); ``` -------------------------------- ### Install TW Elements Source: https://tw-elements.com/docs/standard/integrations/express-integration Installs the TW Elements library as a project dependency. Ensure you have npm or yarn installed. ```bash npm install tw-elements ``` -------------------------------- ### Create and Run Nuxt App Source: https://tw-elements.com/docs/standard/integrations/nuxt-integration Commands to create a new Nuxt application and start the development server. Requires Node.js LTS. ```bash npx nuxi init my-project cd my-project npm run dev ``` -------------------------------- ### Initialize TW Elements JavaScript Components Source: https://tw-elements.com/docs/standard/getting-started/quick-start Demonstrates how to import and initialize TW Elements JavaScript components, such as the Carousel, within a Vite project. It requires calling the `initTWE` function with the desired components. ```javascript import { initTWE } from "tw-elements"; initTWE(); // Or to initialize multiple components: // import { Carousel, Tooltip, Input } from "tw-elements"; // initTWE({ Carousel, Tooltip, Input }); ``` -------------------------------- ### Create New Remix Project Source: https://tw-elements.com/docs/standard/integrations/remix-integration Initializes a new Remix project and navigates into the project directory. Requires Node.js LTS or higher. ```bash npx create-remix@latest my-project cd my-project ``` -------------------------------- ### Require TW Elements UMD JavaScript Bundle Source: https://tw-elements.com/docs/standard/getting-started/quick-start Include this script tag just before the closing body tag in your HTML to load the TW Elements UMD JavaScript file. This is recommended for use without a bundler. ```html ```