Plumeria
Styling System

That Disappears

Predictable · Composable · Fast

Get StartedInstallation
const styles = style.create({
  featureCard: {
    position: 'relative',
    padding: '24px',
    background: 'var(--card-bg)',
    borderRadius: '16px',
    boxShadow: 'var(--card-shadow), var(--card-cut-glass)',
    transition: 'border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease',
    [pseudos.hover]: {
      borderColor: 'var(--card-hover-border)',
      transform: 'translateY(-2px)',
    },
    [breakpoints.md]: {
      padding: '24px',
    },
  },
});
Atom SVG Icon

Atomic CSS

Styles are reused keeping CSS bundle is always minimal.

Feather SVG Icon

Lightweight

0 bytes before compression.
1 byte minified with brotli.

⚡

Build-time Compilation

Styles compile to atomic class names at build time.

Eslint SVG Icon

Linting

Build-integrated oxlint validation. Detect typos before compiling.