Install & Quick Start

Base Install

• React >=16.8 or SolidJS >=1.8.
• package manager: npm, yarn, or pnpm.

npm install @marmo/react

npm install @marmo/solid

Quick start

Create a Marmo component, declare a typed styling prop, and render it like any other framework component.

import ma from '@marmo/react'
 
const Greeting = ma.p`
  text-lg
  ${({ $excited }) => ($excited ? 'font-bold' : 'font-normal')}
`
 
const App = () => <Greeting $excited>Hello Marmo</Greeting>
 
export default App

Pair Marmo with your styling system

Marmo is style-agnostic. It does not include CSS or prescribe how your application should look.

Its benefits become especially visible when paired with utility-first CSS frameworks such as Tailwind CSS: classes, variants, responsive states, and component logic can be expressed through one typed component API.

You can also use Marmo with CSS Modules, global CSS, or any existing class-based design system.

Learn the API

Start small or make it foundational

Marmo can be introduced one component at a time. You can use it for a single button, alongside existing components, or as the foundation of an entire design system.

While its API is intentionally small, adopting Marmo broadly can shape how components, variants, styling props, and class composition are structured throughout your codebase.

There is no need to migrate everything at once. Start with a few reusable components and expand where the abstraction improves consistency and readability.