Quick Start

To start using this design system you will need to import some files in your current project or start from scratch using our template (scroll down in this page to view it).

Tooling

Astro uses NPM scripts for its build system. Our package.json includes convenient methods for working with the framework, including compiling code, running tests, and more.

To use our build system and use Sass to customize your website you'll need a copy of Astro Ecommerce source files and Node. Follow these steps and you should be ready to rock:

• Download and install Node.js, which we use to manage our dependencies.
• Navigate to the root / directory and run npm install to install our local dependencies.

When completed, you'll be able to run the various commands provided from the command line.

Using Gulp

Installation

Learn how to use AstroLaunch UI components from this documentation to quickly and easily create elegant and flexible pages using Tailwind CSS.

AstroLaunch UI is working with @material-tailwind/react and Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation.

First you need to create a new project using astro, for more details check the Astro Official Documentation

npm create astro@latest

Then you need to install Tailwind CSS since @material-tailwind/react is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project. To install tailwind css in your astro project run the below command, for more details check the Astro Integration with Tailwind CSS

npx astro add tailwind

Then you need to install React.JS since @material-tailwind/react is a UI Components library for React and you need to add react.js to your astro project. To install react.js in your astro project run the below command, for more details check the Astro Integration with React.JS

npx astro add react

Install @material-tailwind/react as a dependency using NPM by running the following command:

npm i @material-tailwind/react

Install @material-tailwind/react as a dependency using Yarn by running the following command:

yarn add @material-tailwind/react

Install @material-tailwind/react as a dependency using PNPM by running the following command:

pnpm i @material-tailwind/react

Once you install @material-tailwind/react you need to wrap your tailwind css configurations with the withMT() function coming from @material-tailwind/react/utils.

const withMT = require("@material-tailwind/react/utils/withMT");
 
module.exports = withMT({
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
});

If you're using monorepo in your project you need to add the theme and components paths to your tailwind.config.js.

const withMT = require("@material-tailwind/react/utils/withMT");
 
module.exports = withMT({
  content: [
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

@material-tailwind/react comes with a theme provider that set's the default theme/styles for components or to provide your own theme/styles to your components. By default you don't need to wrap your project with the ThemeProvider but in case if you want to provide your own theme then you need to do the following in a Astro project.

First create a new file theme-provider.jsx on the src/components directory of your project and put the below code inside that file.

import { ThemeProvider as MTThemeProvider } from "@material-tailwind/react";
 
export function ThemeProvider({ children }) {
  return <MTThemeProvider>{children}</MTThemeProvider>;
}
 
export default ThemeProvider;

Then import the theme-provider component to the pages/index.astro file and wrap all the elements inside the body with the theme-provider.

---
import { ThemeProvider } from "../components/theme-provider";
---
 
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <ThemeProvider>
      <!-- Other elements and components goes there -->
    </ThemeProvider>
  </body>
</html>

Since most of the components from @material-tailwind/react are interactive you need to use the client:load directive to enable those interactivities.

Create a new file dropdown-menu.jsx on the src/components directory of your project and put the below code inside that file.

import {
  Menu,
  MenuHandler,
  MenuList,
  MenuItem,
  Button,
} from "@material-tailwind/react";
 
export default function DropdownMenu() {
  return (
    <Menu>
      <MenuHandler>
        <Button>Open Menu</Button>
      </MenuHandler>
      <MenuList>
        <MenuItem>Menu Item 1</MenuItem>
        <MenuItem>Menu Item 2</MenuItem>
        <MenuItem>Menu Item 3</MenuItem>
      </MenuList>
    </Menu>
  );
}

Then import the dropdown-menu component to the pages/index.astro file.

---
import DropdownMenu from "../components/dropdown-menu";
---
 
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <DropdownMenu client:load />
  </body>
</html>

Now you're good to go and use @material-tailwind/react in your project.

---
import DropdownMenu from "../components/dropdown-menu";
---
 
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <DropdownMenu client:load />
  </body>
</html>