> ## Documentation Index
> Fetch the complete documentation index at: https://docs.napps.io/llms.txt
> Use this file to discover all available pages before exploring further.

# App theme styles

Napps mobile applications register theme styles as reserved `n-*` classes in the JS UI style
registry. Apply them with the `class` prop on any UI node. This lets your component follow the
merchant's app theme without hard-coding its colors, typography, borders, or safe-area spacing.

```tsx theme={null}
<box class="n-card" style={{ spacing: 8 }}>
  <text class="n-text n-heading">Featured product</text>
  <button class="n-btn n-btn-primary" text="Shop now" />
</box>
```

`class` accepts a space-separated string or an array of class names. Classes apply in order, and
the inline `style` overrides values from those classes. Styles apply to the node itself; they do
not inherit or cascade to child nodes. Unknown class names have no effect until registered.

The host refreshes these styles when the app theme changes. The `n-*` names are reserved: you can
apply them, but `StyleRegistry.registerStyle`, `removeStyle`, and `clearAll` cannot change or
remove them. Register your own classes with a different prefix.

## Theme class reference

| Use | Class names |
| - | - |
| Buttons | `n-btn`, `n-btn-primary`, `n-btn-primary-bg`, `n-btn-primary-border`, `n-btn-primary-radius`, `n-btn-primary-content`, `n-btn-primary-label`, `n-btn-secondary`, `n-btn-secondary-bg`, `n-btn-secondary-border`, `n-btn-secondary-radius`, `n-btn-secondary-content`, `n-btn-secondary-label`, `n-btn-quick-add`, `n-btn-quick-add-icon`, `n-btn-wishlist`, `n-btn-wishlist-icon` |
| Product cards | `n-card`, `n-card-bg`, `n-card-border`, `n-card-radius`, `n-card-padding`, `n-card-padding-x`, `n-card-padding-y`, `n-card-image`, `n-card-content` |
| Text and prices | `n-text`, `n-text-secondary`, `n-text-product`, `n-price`, `n-price-sale`, `n-price-compare` |
| Typography | `n-title`, `n-heading`, `n-subheading`, `n-body-lg`, `n-body-lg-em`, `n-body`, `n-body-em`, `n-body-sm`, `n-body-sm-em` |
| Backgrounds and borders | `n-bg`, `n-bg-gradient`, `n-border`, `n-divider`, `n-tag` |
| Status | `n-error`, `n-success`, `n-warning`, `n-rating` |
| Paging and loading | `n-pager-dot`, `n-pager-dot-active`, `n-pager-dot-media`, `n-pager-dot-media-active`, `n-skeleton` |
| Safe areas | `n-safe-x`, `n-safe-top`, `n-safe-bottom`, `n-safe`, `n-safe-grid-1`, `n-safe-grid-2`, `n-safe-grid-3`, `n-safe-grid-4` |

Bundled classes combine the related single-purpose styles. For example, `n-btn-primary` combines
its background, border, and radius classes; `n-card` combines the card background, border, radius,
and padding. You can use a bundled class or compose the individual classes when you need only part
of the theme style.

The safe-area classes use the app's current inset values. `n-safe-x` applies the theme's horizontal
safe spacing, `n-safe-top` and `n-safe-bottom` apply the current top and bottom clearances, and
`n-safe` combines all three. On mobile, the bottom clearance accounts for the app's bottom bar as
well as the device inset. The grid variants apply the configured horizontal safe spacing for one
through four product columns.

## Read theme values with `AppTheme`

Use the global `AppTheme` API for theme values that do not map to style classes, such as carousel
and grid layout settings and the product card title line limit.

```ts theme={null}
const theme = AppTheme.get();
const subscriptionId = AppTheme.subscribe((nextTheme) => {
  console.log(nextTheme.productCard.titleMaxLines);
});

AppTheme.unsubscribe(subscriptionId);
```

`subscribe` calls your callback immediately with the current values, then again when those values
change. Pass its returned ID to `unsubscribe` when you no longer need updates. For the complete
snapshot shape, see the [`AppTheme` type reference](/typescript-reference/component-services#app-theme).