### 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
```
--------------------------------
### 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 ;
}
```
--------------------------------
### 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";
```
--------------------------------
### 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
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.
Padding is set to a default of `24px`, providing ample breathing room around elements while maintaining a clean and structured appearance.
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.
The default space between the header and the search bar should be always `16px`.
Buttons are positioned with a `32px` space from the iOS bottom bar, ensuring optimal accessibility and a comfortable tap area.
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.
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.
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.
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`.
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
{Object.entries(worldcoin).map(([key, value]) => (
))}
{Object.entries(digitalDollars).map(([key, value]) => (
))}
{Object.entries(bitcoin).map(([key, value]) => (
))}
{Object.entries(ethereum).map(([key, value]) => (
))}
```
--------------------------------
### 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
{Object.entries(gray).map(([key, value]) => (
))}
{Object.entries(success).map(([key, value]) => (
))}
{Object.entries(error).map(([key, value]) => (
))}
{Object.entries(warning).map(([key, value]) => (
))}
{Object.entries(info).map(([key, value]) => (
))}
```
--------------------------------
### 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
```
--------------------------------
### 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
{Object.entries(worldBlue).map(([key, value]) => (
))}
{Object.entries(carrotOrange).map(([key, value]) => (
))}
{Object.entries(purple).map(([key, value]) => (
))}
{Object.entries(green).map(([key, value]) => (
))}
{Object.entries(blue).map(([key, value]) => (
))}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.