@worldcoin/mini-apps-ui-kit-react

React components UI Kit library for Mini Apps

⚠️ Security Notice: This library has not been reviewed for security vulnerabilities. Use in production environments is discouraged until a security audit has been completed.

Getting Started

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

Tailwind Configuration

./styles/globals.css: is the main entrypoint for the tailwind css styles
./public/globals.css: compiled tailwind css styles
./src/tailwind: tailwind plugin with uiKit tailwind presets

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});

Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
Optionally add ...tseslint.configs.stylisticTypeChecked
Install eslint-plugin-react and update the config:

// eslint.config.js
import react from "eslint-plugin-react";

export default tseslint.config({
  // Set the react version
  settings: { react: { version: "18.3" } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs["jsx-runtime"].rules,
  },
});

Font Configuration

The library uses three fonts:

Rubik as the sans-serif font for body text and subtitles (--font-sans)
Sora as the display font for headings and numbers (--font-display)
DM Mono as the monospace font (--font-mono)

Embed the following code in the <head> of your html to load the fonts:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@600&display=swap"
  rel="stylesheet"
/>

Or use the following code to load the fonts via CSS:

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@100..800&display=swap");

Importing Styles

To use the UI Kit components with their proper styling, you need to import the styles in your application. Add the following import statement to your application's entry point (e.g., app/layout.tsx for Next.js or main.tsx for Vite):

import "@worldcoin/mini-apps-ui-kit-react/styles.css";