open-index/open-npm huggingface dataset:
npm package: @gustavojobs/cra-template-basic
Description: The basic template for Create React App.
Author: Gustavo jobstraibizer
Latest version: 1.0.0

# Template básico ReactJS

Template simples para iniciar projetos ReactJS.

## Requisitos

- node
- create-react-app
- npm

## Uso

Crie um novo projeto React utilizando o seguinte comando:

```sh
$ npx create-react-app [ProjectName] --template @gustavojobs/basic
```

Espere a conclusão.

## Licença

MIT
npm package: @gustavojosemelo/n8n-nodes-cnpj-biz-api
Description: n8n community node for CNPJ.biz API v2 — Search Brazilian companies by CNPJ, filter by activities, location, legal nature, and more.
Author: Gustavo José Melo
Latest version: 0.0.3

# @gustavojosemelo/n8n-cnpj-biz-api

n8n community node para a API [CNPJ.biz](https://cnpj.biz) v2 — Consulte dados de empresas brasileiras diretamente nos seus workflows n8n.

## Recursos

- **Empresa** — Buscar por CNPJ, contar por filtro, listar com dados completos
- **Atividade (CNAE)** — Listar e buscar atividades econômicas
- **Natureza Jurídica** — Listar e buscar naturezas jurídicas
- **Localidade** — Listar e buscar países, estados e cidades
- **Bairro** — Listar e buscar bairros por localidade
- **Conta** — Consultar saldo de créditos

## Instalação

### Via n8n Community Nodes

1. Acesse **Settings → Community Nodes**
2. Instale: `@gustavojosemelo/n8n-cnpj-biz-api`

### Via npm (self-hosted)

```bash
cd ~/.n8n
npm install @gustavojosemelo/n8n-cnpj-biz-api
```

## Credencial

Você precisa de uma **API Key** do CNPJ.biz. Cadastre-se em [cnpj.biz](https://cnpj.biz) para obter sua chave.

Na configuração de credenciais do n8n, selecione **CNPJ.biz API** e cole sua chave.

## Uso

### Buscar Empresa por CNPJ

Informe o CNPJ (apenas números) e opcionalmente inclua filiais.

### Listar Empresas por Filtro

Use o campo **Filtros (JSON)** para montar filtros avançados. Exemplo:

```json
{
  "atividades": [365, 1361],
  "atividade_tipo": ["principal", "secundaria"],
  "situacao": ["ativa"],
  "porte_empresa": ["ME", "EPP"],
  "localidades": [
    { "tipo": "cidade", "cidade": "Campina Grande", "estado": "PB", "pais": "BR" }
  ],
  "ddd": ["83"]
}
```

### Campos de filtro disponíveis

| Campo | Tipo | Exemplo |
|---|---|---|
| `atividades` | number[] | `[365, 1361]` |
| `atividade_tipo` | string[] | `["principal", "secundaria"]` |
| `natureza_juridica` | number[] | `[4, 36]` |
| `tipo` | string[] | `["1", "2"]` |
| `porte_empresa` | string[] | `["MEI", "ME", "EPP", "DEMAIS"]` |
| `situacao` | string[] | `["ativa"]` |
| `regime_tributario` | string[] | `["Simples Nacional", "Lucro Real"]` |
| `capital_minimo` | string | `"1.000,00"` |
| `capital_maximo` | string | `"1.000.000,00"` |
| `razao_fantasia` | string[] | `["ltda", "confeitaria"]` |
| `localidades` | object[] | Ver exemplo acima |
| `bairros` | object[] | `[{"bairro": "Centro", "cidade": "SP", "estado": "SP"}]` |
| `cep` | string[] | `["02020-000"]` |
| `ddd` | string[] | `["11"]` |
| `data_abertura_inicio` | string | `"18/01/2020"` |
| `data_abertura_fim` | string | `"20/06/2023"` |
| `contato` | string | `"telefoneoucelularouemail"` |
| `avancado` | string[] | `["numero", "email", "sememailcontab", "exportei"]` |

## Autor

**Gustavo José Melo** — [gustavo@universonext.com.br](mailto:gustavo@universonext.com.br)

## Licença

MIT
npm package: @gustavojosemelo/n8n-nodes-constant-contact-sharp-spring-api
Description: n8n community node for SharpSpring API v1
Author: Your Name
Latest version: 1.0.3

# n8n-nodes-sharpspring

Nó comunitário n8n para a **SharpSpring API v1/v1.2** (Marketing Automation).

## Recursos suportados

### Lead
| Operação | Descrição |
|---|---|
| Create | Cria um novo lead |
| Get | Busca lead por ID |
| Get Many | Lista leads com filtros |
| Get Many by Date Range | Lista leads por período de criação/atualização |
| Update | Atualiza um lead (incluindo campos personalizados) |
| Delete | Remove um lead |

### Opportunity
| Operação | Descrição |
|---|---|
| Create | Cria uma nova oportunidade |
| Get | Busca oportunidade por ID |
| Get Many | Lista oportunidades com filtros |
| Get Many by Date Range | Lista oportunidades por período |
| Update | Atualiza uma oportunidade (incluindo campos personalizados) |
| Delete | Remove uma oportunidade |

## Dropdowns dinâmicos

Os campos abaixo são carregados automaticamente da sua conta via API:

- **Deal Stage** → busca em `getDealStages`
- **Owner** → busca em `getUsers`
- **Account** → busca em `getAccounts`
- **Campaign** → busca em `getCampaigns`
- **Custom Fields (Lead)** → busca campos personalizados com `relationship = lead`
- **Custom Fields (Opportunity)** → busca campos personalizados com `relationship = opportunity`

## Autenticação

A API SharpSpring usa `accountID` + `secretKey` passados como query string em cada requisição.

1. No SharpSpring, vá em **Settings → API → Public API**
2. Gere ou copie seu **Account ID** e **Secret Key**
3. No n8n, crie uma credencial **SharpSpring API** e preencha os campos

## API Reference

Base URL: `https://api.sharpspring.com/pubapi/{version}/`

- **v1**: timestamps baseados no timezone da conta
- **v1.2**: timestamps em UTC (recomendado)

Todas as requisições usam `POST` com JSON no corpo, no formato:
```json
{
  "method": "createLeads",
  "params": { "objects": [ {...} ] },
  "id": "uuid-aqui"
}
```

## Instalação

```bash
cd ~/.n8n/custom
npm install n8n-nodes-sharpspring
```

Ou via Settings → Community Nodes no n8n.

## Build

```bash
npm install
npm run build
```
npm package: @gustavojosemelo/n8n-nodes-printnode-api
Description: n8n community node to manage printers and print jobs via the PrintNode API
Author: Gustavo José de Melo
Latest version: 0.2.0

# @gustavojosemelo/n8n-nodes-printnode-api

[![npm version](https://badge.fury.io/js/@gustavojosemelo%2Fn8n-nodes-printnode-api.svg)](https://www.npmjs.com/package/@gustavojosemelo/n8n-nodes-printnode-api)

An n8n community node to interact with the [PrintNode API](https://www.printnode.com/en/docs/api/curl). Manage computers, printers, and print jobs directly from your n8n workflows.

## Features

- **Account** — Retrieve information about the authenticated account
- **Computers** — List, get, and delete computers connected to PrintNode
- **Printers** — List and get printers (all, by ID, or by computer)
- **Print Jobs** — Create, list, get, delete print jobs and check their states

### Print Job content types supported

| Type | Description |
|---|---|
| `pdf_uri` | Print a PDF from a public URL |
| `pdf_base64` | Print a PDF from base64-encoded content |
| `raw_uri` | Send raw printer commands from a URL |
| `raw_base64` | Send raw printer commands from base64 content |

## Installation

In your n8n instance, go to **Settings → Community Nodes → Install** and enter:

```
@gustavojosemelo/n8n-nodes-printnode-api
```

## Credentials

1. Sign up at [printnode.com](https://app.printnode.com/login/register)
2. Generate an API Key at [app.printnode.com/apikeys](https://app.printnode.com/apikeys)
3. In n8n, create a **PrintNode API** credential and paste your API Key

## Example: Send a PDF URL to print

| Field | Value |
|---|---|
| Resource | Print Job |
| Operation | Create |
| Printer ID | `34` |
| Title | `Invoice #1234` |
| Content Type | PDF (URL) |
| Content URL | `https://example.com/invoice.pdf` |

## Resources

- [PrintNode API Reference](https://www.printnode.com/en/docs/api/curl)
- [n8n Community Nodes](https://docs.n8n.io/integrations/community-nodes/)

## License

MIT
npm package: @gustavokissel-ignite-ui/react
Description: This is a React UI library that contains components such as:
Latest version: 1.0.1

 ## React UI Library

This is a React UI library that contains components such as:

- Avatar
- Box
- Button
- Checkbox
- Heading
- MultiStep
- Text
- TextInput
- TextArea

### Installation

To install the library, run the following command:

```
npm install @ignite-ui/react
```

### Usage

To use the library, import the components you need into your project. For example:

```
import { Avatar } from '@ignite-ui/react'
```

Then, you can use the components in your JSX code. For example:

```
<Avatar />
```

### Styling

The library uses Stitches for styling. To style a component, you can use the `styled` function. For example:

```
const StyledAvatar = styled(Avatar, {
  backgroundColor: 'red',
})
```

Then, you can use the styled component in your JSX code. For example:

```
<StyledAvatar />
```

### License

This library is licensed under the MIT license.
npm package: @gustavokissel-ignite-ui/tokens
Description: This package contains the design tokens used in Ignite UI.
Latest version: 1.0.1

 ## Ignite UI Tokens

This package contains the design tokens used in Ignite UI.

### Installation

To install the package, run the following command:

```
npm install @ignite-ui/tokens
```

### Usage

To use the tokens, import them into your project. For example:

```
import { colors } from '@ignite-ui/tokens';

const MyComponent = () => {
  return <div style={{ backgroundColor: colors.ignite500 }}>Hello World!</div>;
};
```

### Tokens

The package includes the following tokens:

* Colors
* Font sizes
* Font weights
* Fonts
* Line heights
* Radii
* Space

### License

This package is licensed under the MIT license.
npm package: @gustavolmo/react-window-manager
Description: A flexible window management system for React applications.
Latest version: 0.4.2

# React Window Manager (RWM)

A flexible window management system for React applications.

---

## INSTALL RWM

### 1. Install Dependencies

Install React Window Manager along with React and React DOM.

React and React DOM (v19+) are peer dependencies.

```bash
pnpm add @gustavolmo/react-window-manager
pnpm add react react-dom
```

```bash
npm install @gustavolmo/react-window-manager
npm install react react-dom
```

```bash
yarn add @gustavolmo/react-window-manager
yarn add react react-dom
```

---

### 2. Import Default Styles

The library includes its own compiled CSS. Import it once at your application root:

```ts
import "@gustavolmo/react-window-manager/index.css"
```

---

## QUICK START

### 1. Create a Window

Call `createWindowStore()` to create a new window instance.

```ts
const myWindow1 = createWindowStore()
const myWindow2 = createWindowStore()
```

Each instance contains everything needed to render and control a window.

---

### 2. Render the Window

All windows must be rendered inside `WorkspaceLayout`.

This component acts as:

* The rendering surface
* The coordinate system
* The stacking context for all windows

```tsx
import { WorkspaceLayout } from "@gustavolmo/react-window-manager"

// ...

<WorkspaceLayout>
  {/* any valid code */}

  <myWindow1.Window>
    {/* any valid code */}
  </myWindow1.Window>

  <myWindow2.Window>
    {/* any valid code */}
  </myWindow2.Window>
</WorkspaceLayout>
```

---

### 3. Adjusting the Workspace Layout

By default, the workspace layout is fixed with full width and height. You can override this using `className`.

All windows will adjust their coordinates accordingly.

To prevent visual overflow outside the workspace layout, elements placed outside must have a higher `z-index` than the total number of windows.

Example:

```tsx
// Example with Tailwind (regular CSS also works)

<section className="fixed w-full h-full flex flex-col">
  <WorkspaceLayout className="h-full w-full grow">
    {/* any valid code */}
  </WorkspaceLayout>

  <nav className="w-full h-12 bg-neutral-900 flex gap-2 px-4 z-50">
    {/* any valid code */}
  </nav>
</section>
```

---

### 4. Control the Window

Use the `.Button` property from the window store to control visibility.

Buttons can be placed anywhere and can control the same window from multiple locations.

```tsx
<myWindow1.Button>
  {/* any valid code */}
</myWindow1.Button>
```

---

### 5. Defaults

The default setup includes:

* Built-in styling
* Docking panel
* Resize edge detection

No additional configuration is required for basic usage.

---

## FURTHER READING

For advanced usage patterns and API details:

Full documentation:
https://gustavolmo.github.io/react-window-manager/
npm package: @gustavonobreza/create-typescript-setup
Description: To start the project run ``yarn`` or ``npm install``
Author: Gustavo Alexandre Nobre Mesquita
Latest version: 1.0.3

# Template to your Typescript Node project
## 1.0.1

### Express 5.0.* - Express is a minimal and flexible Node.js web application framework.

### Babel @7.13.* - To build project and get it ready for production.

### Jest @26.6.* - Jest is a delightful JavaScript Testing Framework with a focus on simplicity. Using TS-JEST make it works with Typescipt.

### Supertest @6.1.* - A library for testing Node.js HTTP servers.

### Ts-node-dev 1.1.* - Compiles your TS app and restarts when files are modified. Like a nodemon + ts-node.

 To start the project run ``yarn`` or ``npm install``
npm package: @gustavoprazeres/meu-design-system
Description: Meu primeiro design system
Author: Gustavo Prazeres Matos Moreira
Latest version: 1.0.0

# Meu Design Tokens

Pacote de aprendizado com design tokens básicos.

## Instalação
```bash
npm install @seu-usuario/meu-design-tokens
```

## Uso
```javascript
const { getToken } = require('@seu-usuario/meu-design-tokens');
console.log(getToken('colors.primary'));
```
npm package: @gustavotoyota/quasar
Description: Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
Author: Razvan Stoenescu
Latest version: 2.10.5

![Quasar Framework logo](https://cdn.quasar.dev/logo-v2/header.png)

# Quasar Framework UI Package

> Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!

<img src="https://img.shields.io/npm/v/quasar?label=quasar">

[![Join the chat at https://chat.quasar.dev](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://chat.quasar.dev)
<a href="https://forum.quasar.dev" target="_blank"><img src="https://img.shields.io/badge/community-forum-brightgreen.svg"></a>
[![https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg](https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg)](https://good-labs.github.io/greater-good-affirmation)

Please submit a PR to https://github.com/quasarframework/quasar-awesome with your website/app/Quasar tutorial/video etc. Thank you!

## Supporting Quasar
Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome [backers](https://github.com/rstoenescu/quasar-framework/blob/dev/backers.md).

**Please read our manifest on [Why donations are important](https://quasar.dev/why-donate)**. If you'd like to become a donator, check out [Quasar Framework's Donator campaign](https://donate.quasar.dev).

## Documentation

Head on to the Quasar Framework official website: [https://quasar.dev](https://quasar.dev)

## Stay in Touch

For latest releases and announcements, follow on Twitter: [@quasarframework](https://twitter.com/quasarframework)

## Chat Support

Ask questions at the official community Discord server: [https://chat.quasar.dev](https://chat.quasar.dev)

## Community Forum

Ask questions at the official community forum: [https://forum.quasar.dev](https://forum.quasar.dev)

## Contributing

I'm excited if you want to contribute to Quasar under any form (report bugs, write a plugin, fix an issue, write a new feature). Please read the [Contributing Guide](../CONTRIBUTING.md).

## Semver
Quasar is following [Semantic Versioning 2.0](https://semver.org/).

## License

Copyright (c) 2015-present Razvan Stoenescu

[MIT License](http://en.wikipedia.org/wiki/MIT_License)
npm package: @gustavotoyota/quasar-app-vite
Description: Quasar Framework App CLI with Vite
Author: Razvan Stoenescu
Latest version: 1.1.10

![Quasar Framework logo](https://cdn.quasar.dev/logo-v2/header.png)

# Quasar Framework App CLI with Vite (Local)

> Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!

<img src="https://img.shields.io/npm/v/%40quasar/app-vite?label=@quasar/app-vite">

[![Join the chat at https://chat.quasar.dev](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://chat.quasar.dev)
<a href="https://forum.quasar.dev" target="_blank"><img src="https://img.shields.io/badge/community-forum-brightgreen.svg"></a>
[![https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg](https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg)](https://good-labs.github.io/greater-good-affirmation)

Please submit a PR to https://github.com/quasarframework/quasar-awesome with your website/app/Quasar tutorial/video etc. Thank you!

## Supporting Quasar
Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome [backers](https://github.com/rstoenescu/quasar-framework/blob/dev/backers.md).

**Please read our manifest on [Why donations are important](https://quasar.dev/why-donate)**. If you'd like to become a donator, check out [Quasar Framework's Donator campaign](https://donate.quasar.dev).

## Documentation

Head on to the Quasar Framework official website: [https://quasar.dev](https://quasar.dev)

## Stay in Touch

For latest releases and announcements, follow on Twitter: [@quasarframework](https://twitter.com/quasarframework)

## Chat Support

Ask questions at the official community Discord server: [https://chat.quasar.dev](https://chat.quasar.dev)

## Community Forum

Ask questions at the official community forum: [https://forum.quasar.dev](https://forum.quasar.dev)

## Contributing

I'm excited if you want to contribute to Quasar under any form (report bugs, write a plugin, fix an issue, write a new feature). Please read the [Contributing Guide](../CONTRIBUTING.md).

## Semver
Quasar is following [Semantic Versioning 2.0](https://semver.org/).

## License

Copyright (c) 2015-present Razvan Stoenescu

[MIT License](http://en.wikipedia.org/wiki/MIT_License)
npm package: @gustavotoyota/tiptap-extension-collaboration-cursor
Description: collaboration cursor extension for tiptap
Latest version: 2.0.0-beta.205

# @tiptap/extension-collaboration-cursor
[![Version](https://img.shields.io/npm/v/@tiptap/extension-collaboration-cursor.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-collaboration-cursor)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-collaboration-cursor.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
[![License](https://img.shields.io/npm/l/@tiptap/extension-collaboration-cursor.svg)](https://www.npmjs.com/package/@tiptap/extension-collaboration-cursor)
[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)

## Introduction
tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.

## Official Documentation
Documentation can be found on the [tiptap website](https://tiptap.dev).

## License
tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).
npm package: @gustcss/vite
Description: Vite plugin for GustCSS
Latest version: 0.5.1

# @gustcss/vite

Vite plugin for [GustCSS](https://www.npmjs.com/package/gustcss) - Lightning-fast CSS utility generator.

## Installation

```bash
npm install gustcss @gustcss/vite
```

## Usage

### Basic Setup

In your `vite.config.js` or `vite.config.ts`:

```javascript
import { defineConfig } from 'vite'
import gustcss from '@gustcss/vite'

export default defineConfig({
  plugins: [
    gustcss({
      output: 'src/styles/utility.css',
    }),
  ],
})
```

### Import Generated CSS

In your main entry file (e.g., `src/main.js`):

```javascript
import './styles/utility.css'
```

### Configuration

#### Using Plugin Options

```javascript
export default defineConfig({
  plugins: [
    gustcss({
      content: ['./src/**/*.{js,ts,jsx,tsx,vue,astro}'],
      output: 'src/styles/utility.css',
      config: './gustcss.config.json', // Optional: path to config file
    }),
  ],
})
```

#### Using Config File

Create `gustcss.config.json` in your project root:

```json
{
  "content": ["./src/**/*.{js,ts,jsx,tsx,vue,astro}"],
  "output": "src/styles/utility.css",
  "darkMode": "class",
  "theme": {
    "extend": {
      "colors": {
        "brand": "#3B82F6"
      }
    }
  }
}
```

## Features

### ⚡️ Development Mode

- Watches your source files for changes
- Regenerates CSS automatically
- Hot Module Replacement (HMR) support

### 🚀 Production Build

- Generates optimized CSS at build time
- Only includes utilities used in your code
- No runtime overhead

## How It Works

1. The plugin scans files specified in the `content` array
2. Extracts utility class names from your code
3. Generates CSS for those utilities on-demand
4. Outputs to the specified CSS file
5. Watches for changes in development mode

## Framework Support

Works with all Vite-supported frameworks:

- ⚛️ React
- 🖖 Vue
- 🔺 Astro
- 💎 Solid
- 🔥 Svelte
- 📦 Vanilla JS

## Example

**Input** (your component):
```jsx
<div className="p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
  Hello GustCSS!
</div>
```

**Output** (`src/styles/utility.css`):
```css
.p-4 { padding: 1rem; }
.bg-blue-500 { background-color: #3b82f6; }
.text-white { color: #ffffff; }
.rounded-lg { border-radius: 0.5rem; }
.hover\:bg-blue-600:hover { background-color: #2563eb; }
```

## Requirements

- Node.js >= 18.0.0
- Vite ^4.0.0 || ^5.0.0 || ^6.0.0

## Related Packages

- [gustcss](https://www.npmjs.com/package/gustcss) - CLI tool
- [@gustcss/postcss](https://www.npmjs.com/package/@gustcss/postcss) - PostCSS plugin

## License

MIT
npm package: @gusth/number-formatter
Description: [![Build Status](https://travis-ci.org/gusth/number-formatter.svg?branch=master)](https://travis-ci.org/gusth/number-formatter) [![Coverage Status](https://coveralls.io/repos/github/gusth/number-formatter/badge.svg?branch=master)](https://coveralls.io/git
Author: Gustavo Andrade
Latest version: 0.0.3

[![Build Status](https://travis-ci.org/gusth/number-formatter.svg?branch=master)](https://travis-ci.org/gusth/number-formatter)
[![Coverage Status](https://coveralls.io/repos/github/gusth/number-formatter/badge.svg?branch=master)](https://coveralls.io/github/gusth/number-formatter?branch=master)

Number Formatter
=========

A small library that adds commas to numbers

## Installation

  `npm install @gusth/number-formatter`

## Usage

    var numFormatter = require('@gusth/number-formatter')
    var formattedNum = numFormatter(35666)

  Output should be '35,666'

## Tests

  `npm tests`

## Contributing

In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.
npm package: @guswpm/damerau-levenshtein
Description: Just a raw Damerau Levenshtein implementation, nothing more
Author: gustaveWPM
Latest version: 1.2.1

# Damerau-Levenshtein

Raw Damerau-Levenshtein distance in TypeScript.

## API

```ts
damerauLevenshtein(a: string, b: string): number
```

Returns the Damerau-Levenshtein distance (insert, delete, substitute, transpose).

---

```ts
lazyDamerauLevenshtein(a: string, b: string, limit: number, sentinelValue = limit + 1): number
```

Skips full computation if min possible distance > limit.  
If so, returns limit + 1.
npm package: @gutenye/antd-mobile
Description: 基于 React 的移动设计规范实现
Latest version: 0.9.12

<p align="center">
  <a href="http://mobile.ant.design">
    <img width="320" src="https://zos.alipayobjects.com/rmsportal/XyhtJExcOrXZnLv.png">
  </a>
</p>

# Ant Design Mobile [![](https://img.shields.io/travis/ant-design/ant-design-mobile.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design-mobile) [![npm package](https://img.shields.io/npm/v/antd-mobile.svg?style=flat-square)](https://www.npmjs.org/package/antd-mobile) [![NPM downloads](http://img.shields.io/npm/dm/antd-mobile.svg?style=flat-square)](https://npmjs.org/package/antd-mobile) [![Dependency Status](https://david-dm.org/ant-design/ant-design-mobile.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design-mobile)

A configurable Mobile UI specification and React-based implementation.

## Features

- Follow Ant Design Mobile UI specification.
- Configurable UI style for different products.
- Support web and native usages based on React Native.
- Develop in TypeScript.

## Demo

### mobile web demo

<img width="250" src="https://zos.alipayobjects.com/rmsportal/dLMGiKuyFLBfYfm.png" />

http://mobile.ant.design/kitchen-sink/

### react native demo

<img width="250" src="https://cloud.githubusercontent.com/assets/1698185/18130654/6ba4ccea-6fc2-11e6-9aa1-0a53cd74d9e1.png" />

## Install & Usage

[introduce](docs/react/introduce.zh-CN.md#安装)

## Browser Support

- `iOS`
- `Android 4.0+`

## Links

- [Home Page](http://mobile.ant.design)
- [Developer Instruction](http://github.com/ant-design/ant-design-mobile/blob/master/development.md)
- [React components](http://github.com/react-component/)

## Contributing

We welcome all contributions, please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design-mobile/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design-mobile/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design-mobile/issues). If you'd like to improve code, check out the [Development Instruction](https://github.com/ant-design/ant-design-mobile/blob/master/development.md) and have a good time! :)