Getting Started

To get started with this project, please follow the steps below:

1. Install Medway UI library and Icons

First of all, you need to install the @medway-ui/core and @medway-ui/icons libraries in your project. You can install it by running in your project root:


yarn add @medway-ui/core @medway-ui/icons

2. Install Tailwind CSS v3

Make sure you have Tailwind CSS version 3 installed in your project. You can install it by running:


yarn add -D tailwindcss@3 tailwindcss-animate

3. Create a tailwind configuration file

Create a tailwind.config.ts (if you don’t have one) file in your project root. This file will be used to configure the Tailwind and insure that the Medway UI components are available in your project.

tailwind.config.ts


import type { Config } from "tailwindcss";
import animate from "tailwindcss-animate";
import {
  animation,
  borderRadius,
  boxShadow,
  colors,
  container,
  content,
  fontFamily,
  fontSize,
  fontWeight,
  keyframes,
  lineHeight,
  screens,
} from "@medway-ui/core/tokens";
 
const config: Config = {
  darkMode: ["class"],
  content: [...content],
  theme: {
    extend: {
      colors: {
        ...colors,
      },
      fontFamily: {
        ...fontFamily,
      },
      fontSize: {
        ...fontSize,
      },
      fontWeight: {
        ...fontWeight,
      },
      lineHeight: {
        ...lineHeight,
      },
      borderRadius: {
        ...borderRadius,
      },
      container: {
        center: true,
        screens: {
          ...container,
        },
      },
      boxShadow: {
        ...boxShadow,
      },
      keyframes: {
        ...keyframes,
      },
      animation: {
        ...animation,
      },
    },
    screens: {
      ...screens,
    },
  },
  plugins: [animate],
};
 
export default config;

4. Configure your global styles

Ensure you have a globals.css or similar file in your project. Inside this file, add the following import at the top:

globals.css


@tailwind base;
@tailwind components;
@tailwind utilities;
@import "@medway-ui/core/tokens.css";

This will include the design tokens required for the project.

Then add the following code to your globals.css file or customize it as you need:

globals.css


@layer base {
  * {
    @apply box-border border-gray-stroke-muted;
  }
  body {
    @apply h-full overflow-x-hidden bg-background text-foreground antialiased;
  }
  main {
    @apply mx-auto h-full w-full max-w-screen-mobile px-4 py-12 desktop:max-w-screen-desktop desktop:px-8 tablet:max-w-screen-tablet tablet:px-6;
  }
}

5. Use Montserrat as your main font

Ensure you have Montserrat as your main font. You can add it to your global layout like this if you’re using Next.js:

layout.tsx


import { Montserrat } from "next/font/google";
 
const mainFontFamily = Montserrat({
  weight: ["400", "500", "600", "700"],
  style: ["normal", "italic"],
  subsets: ["latin"],
  display: "swap",
  variable: "--font-montserrat",
});
 
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="pt-BR" dir="ltr" suppressHydrationWarning>
      <body className={`${mainFontFamily.variable}`}>
          {children}
      </body>
    </html>
  );
}