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>
  );
}

React Native (Expo)

For mobile apps, use the @medway-ui/native package. It exposes the same component API as @medway-ui/core, built on top of NativeWind and @rn-primitives. Follow the steps below to configure it in an Expo project.

1. Install the native library and peer dependencies


npx expo install @medway-ui/native nativewind react-native-reanimated react-native-svg @react-native-community/datetimepicker

2. Create a Tailwind configuration file

Create a tailwind.config.js in your project root. Include the @medway-ui/native source in content so its classes are processed, and reuse the design tokens from @medway-ui/core.

tailwind.config.js


const {
  colors,
  fontFamily,
  fontSize,
  fontWeight,
  lineHeight,
  borderRadius,
  boxShadow,
} = require("@medway-ui/core/tokens");
 
module.exports = {
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./node_modules/@medway-ui/native/src/**/*.{ts,tsx}",
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors,
      fontFamily,
      fontSize,
      fontWeight,
      lineHeight,
      borderRadius,
      boxShadow,
    },
  },
};

3. Configure Babel

babel.config.js


module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

4. Configure Metro

metro.config.js


const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");
 
const config = getDefaultConfig(__dirname);
 
module.exports = withNativeWind(config, { input: "./global.css" });

5. Create your global stylesheet

global.css


@tailwind base;
@tailwind components;
@tailwind utilities;

6. Import the styles and design tokens

In your root _layout.tsx, import the design tokens CSS and your global stylesheet:

app/_layout.tsx


import "@medway-ui/core/tokens.css";
import "./global.css";

After this setup, import components the same way as on web:


import { Button, Input, Alert, Badge } from "@medway-ui/native";