Pular para o conteúdo principal

O que é o PlugStore?

O PlugStore é um framework pronto de catálogo e e-commerce para React. Um comando entrega uma loja completa — rotas, grade de produtos, filtros, busca, carrinho, lista de desejos, comparador, checkout, páginas de conta, PWA e SEO — que você molda depois na marca que precisa.

Não é uma biblioteca de componentes para você montar uma loja. É a loja, com cada parte exposta para você trocar o que quiser.

npm create plug-store minha-loja

Os três pacotes​

Tudo é publicado sob a licença Apache-2.0. Os três sobem juntos, sempre no mesmo número de versão.

PacoteO que é
@neverleans-labs/plug-store-coreO framework: CatalogApp, providers, contextos, hooks, páginas, componentes, checkout e PWA.
@neverleans-labs/plug-store-themesOs 50 temas e o utilitário defineTheme para marcas próprias.
create-plug-storeA CLI que gera um projeto já configurado.

Duas formas de usar​

Pronto para usar. Renderize <CatalogApp />, passe um objeto de configuração, e a loja funciona. É o que a CLI gera.

import { CatalogApp } from '@neverleans-labs/plug-store-core';
import '@neverleans-labs/plug-store-core/dist/index.css';

export default function App() {
return (
<CatalogApp
defaultTheme="beauty"
config={{ companyName: 'Bloom Cosméticos', currency: 'BRL' }}
/>
);
}

Headless. Envolva a sua própria interface em <CatalogProvider /> e consuma os contextos e hooks direto — useCart, useCheckout, useProducts, useTheme. Você fica com a máquina de estado e os adaptadores de pagamento, sem nada do layout.

Veja Como funciona para entender a relação entre os dois.

O que faz diferença​

  • 50 temas que são de fato diferentes. Cada um carrega paleta, tipografia, layout de hero, estilo de card e textos próprios. A loja de café não parece a de eletrônicos.
  • Pix que escaneia. O checkout emite um BR Code EMV/BCB real, com o CRC-16 exigido pela especificação, então o app do banco resolve para a sua chave. Veja Pagamentos Pix.
  • Checkout por WhatsApp. Para o número enorme de lojas brasileiras que fecham pedido no chat, o pedido vira uma mensagem já preenchida.
  • Seu backend, não o nosso. Um data provider são cinco funções assíncronas. Aponte a loja para REST, Supabase, Firebase, Prisma ou GraphQL.

A metade brasileira dessa lista é a parte com que framework global não se incomoda. Feito para o Brasil diz exatamente o que vem na caixa e onde acaba.

Quando não usar o PlugStore​

Ser honesto aqui economiza uma semana sua:

  • Você precisa de um ERP ou marketplace completo. O PlugStore é a vitrine. Não tem conciliação de estoque, split de pagamento entre vendedores nem emissão de nota fiscal.
  • Você precisa de renderização no servidor para SEO em escala. O PlugStore é uma SPA React que roda no cliente. Ele emite JSON-LD e meta tags corretos, o que basta para a maioria dos catálogos, mas se busca orgânica é seu principal canal de aquisição com milhares de SKUs, prefira um starter de commerce em Next.js.
  • Você precisa de confirmação automática de pagamento. O Pix embutido é estático: ele cria uma cobrança válida, mas nada avisa o seu app de que o dinheiro entrou. Conciliação exige integração com um PSP, que você pluga pela interface de adaptadores.
  • Você quer um kit de UI headless. Se você só quer primitivos sem estilo, use Radix ou shadcn/ui direto — o PlugStore é opinativo sobre a vitrine.

Licença e a camada paga​

O framework, a CLI, os 50 temas, os data providers, o checkout (Pix incluído) e o motor de PWA são Apache-2.0, permanentemente. Tudo documentado neste site é gratuito.

Existe um estudo de camada comercial separada para agências — integrações mantidas e ferramentas de operação, não componentes atrás de paywall. Nada descrito nesta documentação depende dela.

"Mantido" é palavra que todo projeto usa, então aqui ela está escrita como verificações que você pode rodar, não como promessa: veja Como isto é mantido, com as falhas incluídas.

Se uma das paredes acima é o que separa você de uma loja no ar, diga qual. Estamos mapeando em quais as pessoas realmente esbarram antes de construir qualquer coisa.

Próximos passos​