Component factory for utility-first UI

Typed layer for class names. For React and SolidJS.

Native

SomeButton.jsx

const SomeButton = ({ isLoading, ...props }) => {
  const activeClass = isLoading ? 'bg-blue-400 text-white' : 'bg-blue-800 text-blue-200'
 
  return (
    <button
      {...props}
      className={`transition-all mt-5 border md:text-lg text-normal ${someConfig.transitionDurationEaseClass} ${activeClass} ${
        props.className || ''
      }`}
    >
      {props.children}
    </button>
  )
}

Marmo

SomeButton.js

const SomeButton = ma.button`
  text-normal
  md:text-lg
  mt-5
  border-1
  transition-all
  ${someConfig.transitionDurationEaseClass}
  ${({ $isLoading }) => $isLoading && 'opacity-90 pointer-events-none'}
`

clsx

SomeButton.jsx

import clsx from 'clsx'
 
const SomeButton = ({ isLoading, className, ...props }) => (
  <button
    {...props}
    className={clsx(
      'transition-all mt-5 border md:text-lg text-normal',
      someConfig.transitionDurationEaseClass,
      isLoading && 'bg-blue-400 text-white',
      !isLoading && 'bg-blue-800 text-blue-200',
      className
    )}
  />
)

Extension and Transformation

Extend

Create a new component based on an existing one, while adding or overriding styles. Best for creating variations of a component without duplicating code.

SubmitButton.jsx

import ma from '@marmo/react'
 
const Button = ma.button`
  rounded-md px-4 py-2
  bg-primary text-primary-content
`
 
const SubmitButton = ma.extend(Button)`
  w-full
  ${({ $loading }) => $loading && 'pointer-events-none opacity-60'}
`
 
const FormActions = () => (
  <SubmitButton type="submit" $loading>
    Saving…
  </SubmitButton>
)

Read "extend" docs

Transform

Let's you modify the props of a component before they are passed down to the underlying element. Or transform them on the spot.

LinkButton.jsx

import ma from '@marmo/react'
 
const Button = ma.button`
  rounded-md px-4 py-2
  bg-primary text-primary-content
`
 
const LinkButton = ma.transform(Button).a`
  inline-flex no-underline
`
 
const Navigation = () => <LinkButton href="/docs">Read the docs</LinkButton>
// short version: use the "$_as" prop
const OtherNavigation = () => (
  <Button $_as="a" href="/docs">
    Read the docs
  </Button>
)

Read "transform" docs

Advanced Styling with Variants

Seen and loved for in CVA: Create reusable components with different styles and behaviors based on props.

Examples

<Alert />

<Alert $isActive />

<Alert $severity="warning" />

<Alert $severity="warning" $isActive />

<Alert $severity="error" />

<Alert $severity="error" $isActive />

* Examples are using tailwindcss + daisyUI

Native

StyledAlert.jsx

import 'react'
 
const severityClasses = {
  warning: 'bg-warning/20 text-warning',
  info: 'bg-info/20 text-info',
  error: 'bg-error/20 text-error'
}
 
const Alert = ({ severity = 'info', isActive = false, className, ...props }) => {
  const classes = [
    isActive ? 'custom-class-active' : 'custom-class-inactive',
    'p-4',
    'rounded-md',
    severityClasses[severity],
    isActive
      ? 'border border-current/50 shadow-xl shadow-current/20'
      : 'border border-current/20 border-dashed',
    className
  ]
    .filter(Boolean)
    .join(' ')
 
  return <div {...props} className={classes} />
}

Marmo

StyledAlert.js

import ma from '@marmo/react'
 
const Alert = ma.div.variants({
  base: ({ $isActive }) => `p-4 rounded-md ${$isActive ? 'shadow-lg' : ''}`,
  variants: {
    $severity: {
      info: 'bg-info text-info-content',
      warning: 'bg-warning text-warning-content',
      error: ({ style, $ringColor }) =>
        `bg-error text-error-content ${style({ outlineColor: $ringColor })}`
    },
    $outlined: {
      true: 'outline outline-2',
      false: 'outline-none'
    }
  },
  defaultVariants: {
    $severity: 'info',
    $outlined: false
  }
})

CVA

StyledAlert.jsx

import 'react'
import { cva } from 'class-variance-authority'
 
const alertVariants = cva('p-4 rounded-md', {
  variants: {
    severity: {
      warning: 'bg-warning/20 text-warning',
      info: 'bg-info/20 text-info',
      error: 'bg-error/20 text-error'
    },
    isActive: {
      true: 'custom-class-active border border-current/50 shadow-xl shadow-current/20',
      false: 'custom-class-inactive border border-current/20 border-dashed'
    }
  },
  defaultVariants: {
    severity: 'info',
    isActive: false
  }
})
 
const Alert = ({ severity, isActive, className, ...props }) => {
  return <div {...props} className={alertVariants({ severity, isActive, className })} />
}

Learn more about variants