Introduction

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

1. Install Design System library

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


yarn add @medway-ui

2. Install Tailwind CSS v4

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


yarn add -D tailwindcss@latest

3. 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


@import "tailwindcss";
@import "tw-animate-css";
@import '@medway-ui/assets/css/tokens.css';

This will include the design tokens required for the project.

4. 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="en" dir="ltr" suppressHydrationWarning>
      <body className={`${mainFontFamily.variable} antialiased`}>
          {children}
      </body>
    </html>
  );
}