@worldcoin/mini-apps-ui-kit-react v0.0.8
@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
parserOptionsproperty like this:
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
tsconfigRootDir: import.meta.dirname,
},
},
});- Replace
tseslint.configs.recommendedtotseslint.configs.recommendedTypeCheckedortseslint.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";Import Methods
The library supports two different import methods:
Default Import
Import components from the main entry point:
import { Button } from "@worldcoin/mini-apps-ui-kit-react";This method is simpler but includes all components in your bundle, even if you're not using them.
Component-Level Import
Import components directly from their individual modules:
import { Button } from "@worldcoin/mini-apps-ui-kit-react/Button";This method enables tree-shaking and reduces your final bundle size by only including the components you actually use. Recommended for production applications where bundle size is a concern.
Icons
The library uses Hugeicons for its icon system. To use icons in your project, you'll need to install the React package:
npm install @hugeicons/react
# or
yarn add @hugeicons/reactThen you can import and use icons in your components:
import { HomeIcon } from '@hugeicons/react';
function MyComponent() {
return <HomeIcon size={24} />;
}Hugeicons provides a comprehensive set of icons across various categories including:
- Navigation & UI elements
- Social media
- Business & Finance
- Communication
- Technology
- And many more...
You can browse the complete icon set at hugeicons.com.
Hugeicons is available under various license options. Please refer to their website for detailed licensing information.