Mini Apps UI Kit

https://github.com/worldcoin/mini-apps-ui-kit
Admin
A React components library and UI kit for building mini applications.
Tokens:4,254
Snippets:33
Trust Score:9.5
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start Development Server with pnpm, npm, yarn, or bun

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/examples/nextjs/README.md

Commands to start the Next.js development server using pnpm, npm, yarn, or bun.

```bash
pnpm dev
```

```bash
npm run dev
```

```bash
yarn dev
```

```bash
bun dev
```

--------------------------------

### Install Dependencies with pnpm, npm, yarn, or bun

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/examples/nextjs/README.md

Commands to install project dependencies using different package managers like pnpm, npm, yarn, or bun.

```bash
pnpm install
```

```bash
npm install
```

```bash
yarn install
```

```bash
bun install
```

--------------------------------

### Build Storybook for Production

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/README.md

Generates a static build of the Storybook documentation and component examples, suitable for deployment as a static website.

```bash
pnpm build:sb
```

--------------------------------

### Run Next.js Example App in Development

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/README.md

Starts the Next.js example application in development mode. This command specifically runs without hot reload, which might be useful for specific debugging scenarios.

```bash
pnpm dev
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/README.md

Installs all project dependencies using the pnpm package manager. This is a prerequisite for running any other development commands.

```bash
pnpm install
```

--------------------------------

### Run Storybook in Development Mode

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/README.md

Starts the Storybook development server, which allows for interactive development and visualization of UI components. Changes are typically reflected with hot reloading.

```bash
pnpm dev:sb
```

--------------------------------

### Install and Use Iconoir React Icons

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/README.md

Instructions for installing the 'iconoir-react' package and using its icons within React components. Iconoir provides a large set of customizable SVG icons.

```bash
npm install iconoir-react
# or
yarn add iconoir-react
```

--------------------------------

### Configure Tailwind CSS for UI Kit Plugin

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/examples/nextjs/README.md

Integrates the Worldcoin Mini Apps UI Kit's Tailwind CSS plugin into the Tailwind configuration file (`tailwind.config.ts`) and ensures the UI Kit's path is included.

```typescript
import { uiKitTailwindPlugin } from "@worldcoin/mini-apps-ui-kit-react";

export default {
  // ... other config options
  plugins: [uiKitTailwindPlugin],
};

// Ensure your content array includes the UI Kit's path:
content: [
  // ... other paths
  "./node_modules/mini-apps-ui-kit/**/*.{js,ts,jsx,tsx}",
],
```

--------------------------------

### Apply Fonts in Next.js HTML

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/examples/nextjs/README.md

Applies the imported Google Fonts (Rubik, Sora, DM_Mono) to the root HTML element in a Next.js application.

```typescript
<html lang="en" className={`${rubik.className} ${sora.className} ${dmMono.className}`}>
```

--------------------------------

### Render Iconoir Icon in React Component

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/README.md

Example of importing and rendering an Iconoir icon component within a React component. Icons can be customized with width and height props.

```jsx
import { Home } from 'iconoir-react';

function MyComponent() {
  return <Home width={24} height={24} />;
}
```

--------------------------------

### Import Fonts in Next.js layout.tsx

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/examples/nextjs/README.md

Imports and configures Google Fonts (DM_Mono, Rubik, Sora) for use in a Next.js application's layout.

```typescript
import { DM_Mono, Rubik, Sora } from "next/font/google";

const rubik = Rubik({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700", "800", "900"],
  style: ["normal", "italic"],
  variable: "--font-sans",
});

const sora = Sora({
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800"],
  variable: "--font-display",
});

const dmMono = DM_Mono({
  weight: ["300", "400", "500"],
  subsets: ["latin"],
  variable: "--font-mono",
});
```

--------------------------------

### Preview Built Storybook

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/README.md

Serves the production-ready Storybook build locally, allowing for previewing the final output before deployment. This command should be run after 'pnpm build:storybook'.

```bash
pnpm preview:sb
```

--------------------------------

### Build Components Library for Production

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/README.md

Compiles the React components library for production deployment. This process typically involves transpilation and bundling for optimized distribution.

```bash
pnpm build
```

--------------------------------

### Importing React Components and Assets

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/stories/documentation/Spacing.mdx

This snippet demonstrates importing necessary React components and various image assets from local files for use within the documentation or application. It sets up the foundational imports for rendering UI elements and displaying associated images.

```javascript
import { Meta } from "@storybook/blocks";
import Section from "./components/Section";
import moduleImage from './static/spacing/module.jpg';
import mainImage from './static/spacing/main.jpg';
import sectionImage from './static/spacing/sections.jpg';
import searchImage from './static/spacing/search-bar.jpg';
import buttonImage from './static/spacing/button.jpg';
import statesImage from './static/spacing/states.jpg';
import bottomMenuImage from './static/spacing/bottom-menu.jpg';
import mainTitleImage from './static/spacing/main-title.jpg';
import buttonActiveImage from './static/spacing/button-active.jpg';
```

--------------------------------

### Git Branching for Feature Development

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/README.md

Standard Git commands for creating a new branch to work on a new feature. It involves checking out the main branch and creating a new branch from it.

```bash
git checkout -b feature/your-feature
```

--------------------------------

### Create a Changeset for Versioning

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/README.md

Generates a changeset file to describe changes made to the project's packages. This is part of the version management workflow using the changesets tool.

```bash
pnpm changeset
```

--------------------------------

### Import Mini Apps UI Kit Styles

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/README.md

This code snippet shows how to import the necessary styles for the Mini Apps UI Kit in your application's entry point, ensuring proper styling of components.

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

--------------------------------

### Commit Changes with Git

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/README.md

Stages and commits the tracked changes in the repository with a descriptive commit message.

```bash
git commit -m 'Add some feature'
```

--------------------------------

### Storybook Configuration for Typography

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/stories/Typography.mdx

This snippet shows the Storybook configuration for the Typography component, importing necessary modules and setting up the meta information. It defines how stories for typography variations are organized and displayed.

```javascript
import { Meta, Story, Canvas } from '@storybook/blocks';
import { Typography } from '../src/components/Typography';
import * as TypographyStories from './Typography.stories';
import { TypographyListItem } from "./documentation/components/TypographyListItem";

<Meta of={TypographyStories}/>
```

--------------------------------

### Push Feature Branch to Remote Repository

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/README.md

Uploads the local feature branch and its commits to the remote repository, making them available for collaboration and pull requests.

```bash
git push origin feature/your-feature
```

--------------------------------

### Section Component Usage for Spacing Descriptions

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/stories/documentation/Spacing.mdx

This snippet illustrates the usage of a custom `Section` component to document various spacing rules. Each usage defines a title for the spacing concept and includes a descriptive text explaining the spacing value and its purpose. Images are passed as props to visually represent the spacing context.

```javascript
<Section title="4px layout system" image={moduleImage}>
  By establishing `4px` as the foundational measurement, it simplifies spacing, sizing, and alignment across all components, making designs easier to adapt to different screen sizes and resolutions. This system encourages uniformity in padding, margins, and element dimensions, resulting in a structured, clean, and balanced appearance. Ideal for modern UI kits.
</Section>

<Section title="Main paddings" image={mainImage}>
  Padding is set to a default of `24px`, providing ample breathing room around elements while maintaining a clean and structured appearance.
</Section>

<Section title="Sections" image={sectionImage}>
  The default space between sections is set to `40px`. This larger spacing helps to create clear separation between distinct areas of content.

  `16px` spacing between subheadlines and their associated content. This deliberate spacing provides a clear visual connection between headers and their content.
</Section>

<Section title="Search bar" image={searchImage}>
  The default space between the header and the search bar should be always `16px`.
</Section>

<Section title="Button" image={buttonImage}>
  Buttons are positioned with a `32px` space from the iOS bottom bar, ensuring optimal accessibility and a comfortable tap area.
</Section>

<Section title="Button with active keyboard" image={buttonActiveImage}>
  Buttons are placed `24px` above the active keyboard. This spacing ensures that buttons remain easily accessible and visually distinct, even when the keyboard is active, preventing accidental taps or overlap.
</Section>

<Section title="States" image={statesImage}>
  The bottom menu is positioned with a `20px` padding from the iOS bottom bar, ensuring a comfortable buffer that enhances touch accessibility while aligning with native iOS design guidelines. 

  Additionally, there is a minimum padding of `8px` from the top of the menu, providing necessary breathing room.
</Section>

<Section title="Bottom menu" image={bottomMenuImage}>
  It is recommended to position the bottom menu with a `20px` padding from the iOS bottom bar to create a comfortable buffer that enhances touch accessibility and aligns with native iOS design guidelines. Additionally, a minimum padding of `8px` from the top of the menu is advised to provide necessary breathing room.
</Section>

<Section title="Main title Spacing" image={mainTitleImage}>
  The vertical space between the top page and the title should be `64px`, ensuring a safe area between these two elements.

  The space between the main title and subtitle should be `16px`.
</Section>
```

--------------------------------

### Storybook Meta Configuration

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/stories/documentation/Spacing.mdx

Configures the Storybook meta information for the Spacing documentation page. It specifies the title that will appear in the Storybook UI, categorizing this documentation under 'Documentation/Spacing'.

```javascript
<Meta title="Documentation/Spacing" />
```

--------------------------------

### Display Typography Story

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/stories/Typography.mdx

Renders the 'Display1' typography style using Storybook. This is part of the typography system, showcasing large, prominent text for titles or key headings.

```javascript
<div style={{marginTop: 20, marginBottom: 80}}>
  <TypographyListItem>
    <Story of={TypographyStories.Display1} />
  </TypographyListItem>
</div>
```

--------------------------------

### Headings Typography Stories

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/stories/Typography.mdx

Renders various heading styles (Heading1 to Heading4) using Storybook. These components are essential for structuring content and establishing visual hierarchy within the application.

```javascript
<div style={{marginTop: 20, marginBottom: 80}}>
  <TypographyListItem>
    <Story of={TypographyStories.Heading1} />
  </TypographyListItem>
  <TypographyListItem>
    <Story of={TypographyStories.Heading2} />
  </TypographyListItem>
  <TypographyListItem>
    <Story of={TypographyStories.Heading3} />
  </TypographyListItem>
  <TypographyListItem>
    <Story of={TypographyStories.Heading4} />
  </TypographyListItem>
</div>
```

--------------------------------

### Integrate ESLint with React Plugin

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/README.md

Integrates the ESLint React plugin to enable recommended rules for React and JSX runtime. It also sets the React version for accurate linting.

```javascript
// 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,
  },
});
```

--------------------------------

### Body Typography Stories

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/stories/Typography.mdx

Renders body text styles (Body1 to Body4) using Storybook. These are the primary styles for paragraph content and general text within the application.

```javascript
<div style={{marginTop: 20, marginBottom: 80}}>
  <TypographyListItem>
    <Story of={TypographyStories.Body1} />
  </TypographyListItem>
  <TypographyListItem>
    <Story of={TypographyStories.Body2} />
  </TypographyListItem>
  <TypographyListItem>
    <Story of={TypographyStories.Body3} />
  </TypographyListItem>
  <TypographyListItem>
    <Story of={TypographyStories.Body4} />
  </TypographyListItem>
</div>
```

--------------------------------

### Labels Typography Stories

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/stories/Typography.mdx

Renders label styles (Label1 and Label2) using Storybook. Labels are typically used for form elements or short descriptive text.

```javascript
<div style={{marginTop: 20, marginBottom: 80}}>
  <TypographyListItem>
    <Story of={TypographyStories.Label1} />
  </TypographyListItem>
  <TypographyListItem>
    <Story of={TypographyStories.Label2} />
  </TypographyListItem>
</div>
```

--------------------------------

### Displaying Token Colors in React (JavaScript)

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/stories/documentation/Colors.mdx

This snippet illustrates how to render token-specific colors, such as Worldcoin, Digital Dollars, Bitcoin, and Ethereum, within a React application. Similar to primary and specialty colors, it maps over the respective imported color objects and displays them using the 'Color' component, relying on Tailwind CSS for visual presentation.

```javascript
import { worldcoin, digitalDollars, bitcoin, ethereum } from "../../src/tailwind/index";
import { Color } from "./components/Color";

// ... in a React component

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(worldcoin).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(digitalDollars).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(bitcoin).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(ethereum).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>
```

--------------------------------

### Displaying Primary Colors in React (JavaScript)

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/stories/documentation/Colors.mdx

This snippet demonstrates how to dynamically render a list of primary colors (Gray, Success, Error, Warning, Info) using React. It maps over imported color objects and displays each color's name and value using a 'Color' component. This approach relies on Tailwind CSS for styling and expects color definitions to be objects where keys are color names and values are CSS color strings.

```javascript
import { gray, success, error, warning, info } from "../../src/tailwind/index";
import { Color } from "./components/Color";

// ... in a React component

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(gray).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(success).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(error).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(warning).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(info).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>
```

--------------------------------

### Subtitles Typography Stories

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/stories/Typography.mdx

Renders subtitle styles (Subtitle1 to Subtitle4) using Storybook. Subtitles are used to provide secondary information or introduce sections of content.

```javascript
<div style={{marginTop: 20, marginBottom: 80}}>
  <TypographyListItem>
    <Story of={TypographyStories.Subtitle1} />
  </TypographyListItem>
  <TypographyListItem>
    <Story of={TypographyStories.Subtitle2} />
  </TypographyListItem>
  <TypographyListItem>
    <Story of={TypographyStories.Subtitle3} />
  </TypographyListItem>
  <TypographyListItem>
    <Story of={TypographyStories.Subtitle4} />
  </TypographyListItem>
</div>
```

--------------------------------

### Configure ESLint for Type Aware Lint Rules

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/README.md

This configuration enables type-aware lint rules in ESLint for improved code quality. It requires specifying the project's tsconfig files and setting the tsconfig root directory.

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

--------------------------------

### Displaying Specialty Colors in React (JavaScript)

Source: https://github.com/worldcoin/mini-apps-ui-kit/blob/main/packages/mini-apps-ui-kit-react/stories/documentation/Colors.mdx

This snippet shows how to display specialty colors like World Blue, Carrot Orange, Purple, Green, and Blue in a React application. It iterates through imported color objects (e.g., `worldBlue`, `carrotOrange`) and renders them using a 'Color' component. This pattern is consistent with displaying primary colors, utilizing Tailwind CSS for layout and styling.

```javascript
import { worldBlue, carrotOrange, purple, green, blue } from "../../src/tailwind/index";
import { Color } from "./components/Color";

// ... in a React component

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(worldBlue).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(carrotOrange).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(purple).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(green).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>

<div className="flex flex-wrap gap-4 pb-20">
  {Object.entries(blue).map(([key, value]) => (
    <Color key={key} name={key} color={value} />
  ))}
</div>
```
Tokens:
Raw