Plumeria - Atomic CSS in JS library

Plumeria

Atomic CSS-in-JS

Zero runtime overhead. Full type safety.
Build-time compilation for ultimate performance.

const styles = css.create({
  featureCard: {
    position: 'relative',
    padding: '24px',
    background: 'var(--card-bg)',
    border: '1px solid transparent',
    borderRadius: '12px',
    transition: 'border-color 0.2s, transform 0.2s',
    [ps.hover]: {
      borderColor: 'var(--card-hover-border)',
    },
    [breakpoints.md]: {
      padding: '24px',
    },
  },
});

Atomic CSS

Generates atomic CSS classes at build time. Styles are reused automatically, keeping your CSS bundle minimal.

Turbopack

Native Next.js integration. Instant HMR updates and a development flow that stays in full acceleration.

Type-Safe

Complete TypeScript safety with build-integrated ESLint validation. Detect typos before compiling.

⚡

Build-time Compilation

Styles are compiled to static CSS at build time. Eliminate runtime overhead and deliver instant page loads.