Styling

There are three supported levels of customization.

1. Theme the default stylesheet

Import the stylesheet, then override variables after the import:

import '@jcees-forms/css/style.css'
import './forms-theme.css'

/* forms-theme.css */
.contact-form {
  --jcees-form-font-family: Inter, sans-serif;
  --jcees-form-primary: #724e91;
  --jcees-form-primary-hover: #583a70;
  --jcees-form-focus: #d9c9e7;
  --jcees-form-radius: 12px;
  --jcees-form-gap: 1.25rem;
}

.contact-form .jc-form {
  max-width: 52rem;
}

2. Override individual classes

.checkout .jc-fieldset {
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
}

.checkout .jc-button-submit {
  width: 100%;
  text-transform: uppercase;
}

3. Supply all styling yourself

Do not import @jcees-forms/css/style.css. The renderer still outputs every default jc-* class, so your own stylesheet can target the hooks listed below. You can also replace the class-name map through config.classNames when required by an existing design system.