Github

CSS-in-JS with zero runtime

Type-safe compile time Atomic CSS-in-JS with zero runtime.

Button.ts
import { style } from '@navita/css';
 
const button = style({
  background: 'hotpink',
  color: 'white',
});
 
document.write(`
  <button class="${button}">
    Click me!
  </button>
`);

Getting Started

How to get started with Navita

It's extremely easy to get started with Navita. This guide will show you how!

Installation

npm install @navita/css --save

Bundler Integration

Like other Zero-runtime CSS-in-JS libraries, Navita requires a bundler to work. We might publish a runtime adapter in the future — but there are better projects for that. Upvote this issue if you need it.

Currently, we provide integrations for the following bundlers:

After installing the integration to your project, you can start to use Navita!

Example

example.ts
import { style } from '@navita/css';
 
const button = style({
  background: 'hotpink',
  color: 'white',
});

This creates a class for each css rule and registers them into the stylesheet engine. The bundler will then emit the styles during the build.

Navita doesn't require special file extensions to work — You can co-locate your styles with your components!

Motivation

On This Page