@ciromaciel/components-kit
Marketing site components — hero, pricing, feature splits and footer — built on React and Mantine, in a monochrome, sharp-edged aesthetic.
Installation
bun add @ciromaciel/components-kit
Peers: @mantine/core, @mantine/hooks, @tabler/icons-react, react,
react-dom. @mantine/charts is optional.
Import the stylesheet once, at your application entry point:
import '@ciromaciel/components-kit/style.css'
Quick start
import { MantineProvider } from '@mantine/core'
import { theme, Hero, FeatureSplit, Pricing, FAQ, Footer } from '@ciromaciel/components-kit'
function App() {
return (
<MantineProvider theme={theme}>
<Hero
subtitle="Landing pages"
title="No code, no plugins."
description="Your landing page live in two minutes."
cta={{ label: 'Get started', href: '/signup' }}
/>
<FeatureSplit /* ... */ />
<Pricing /* ... */ />
<FAQ /* ... */ />
<Footer />
</MantineProvider>
)
}
Components are config-driven: pass data objects rather than nested JSX.
Fundos: dois tons de palco, um de superfície
Uma página usa exatamente dois tons de fundo para os seus palcos, no claro e no escuro:
| Token | Mantine | Claro | Escuro |
|---|---|---|---|
SECTION_BACKGROUNDS.white | gray.0 | #FFFFFF | #0B0F12 (o fundo da página) |
SECTION_BACKGROUNDS.gray | gray.1 | #F9FAFB | #12181D |
Palco é toda faixa ou seção de largura inteira, o fundo da página, a barra
do cabeçalho (inclusive o cartão fixo que fica sobre a página), o painel de
menus e o menu de navegação do celular, o rodapé, as páginas legais e a 404. Os
componentes recebem background="white" | "gray" e resolvem com
resolveBackground. As faixas alternam os dois tons.
O white do Mantine não é tom de palco: no escuro ele é #1A2127, a
superfície elevada. Serve só para o que flutua ou fica sobre um palco como
cartão: cartões, modais, gavetas laterais sobre o conteúdo, menus suspensos,
popovers, a caixa de um formulário dentro de uma faixa. Para cartões, use
resolveCardBackground.
Uma gaveta ou modal que é palco (o menu do celular de um cabeçalho) recebe a
classe rlg-stage: o tema pinta todo Paper com o white elevado direto no
estilo do elemento, e a classe devolve o tom da página.
Por quê: em 21/10/2026 o cartão fixo do cabeçalho e a faixa da newsletter usavam
bg="white", e no escuro a página mostrava três tons (#0B0F12, #12181D,
#1A2127). Nunca bg="white" numa faixa, barra, rodapé ou página.
Components
Layout and structure — Layout, Header, Navbar, Footer, Section.
Marketing sections — Hero, SocialProof, FeatureSplit, FeaturesGrid,
StatsGrid, ProductGrid, PlatformShelf, Steps, Comparison,
CriteriaList, Callout, FounderCard.
Conversion — Pricing, FAQ, Testimonials, CTABanner, SecondaryCTA,
LeadForm, TrustBadge, SeloExclusivo.
Status and states — StatusBoard, StatusIndicator, AuthLoader,
NotFound.
Legal pages — LegalPrivacy, LegalTerms, LegalSecurity.
Primitives — SectionHeader, MediaBlock, CTAButton, CodeBlock,
Wordmark, BrandLogo.
Theme, hooks and config — theme, useServiceStatus, SECTION_BACKGROUNDS,
resolveBackground.
Development
bun install
bun run dev # demo
bun run build # build the library
Links
MIT © Ciro Cesar Maciel