@ieltsrealtest/ui

Reusable React UI components for the IELTS Real Test platform, built with TypeScript and styled using Tailwind CSS.

Installation

npm i @ieltsrealtest/ui

Setup Notes

tailwind.config.js

content: [
  "./node_modules/@ieltsrealtest/ui-components/dist/**/*.{js,ts,jsx,tsx}"
]

globals.css

@import "tailwindcss";
@config "../../tailwind.config.js";

next.config.ts (optional for Figma-hosted images)

images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "ieltsrealtest.s3.us-east-1.amazonaws.com",
        port: "",
        pathname: "/**",
      },
      {
        protocol: "https",
        hostname: "ieltsrealtest.s3.us-east-1.amazonaws.com",
        port: "",
        pathname: "/**",
      },
    ],
  },

Usage

import { Header, Footer, Discussions } from "@ieltsrealtest/ui";

Discussions usages: - page: + example: