Get started

Install

Add the package:

pnpm add reseter.css@3.0.1

npm install reseter.css@3.0.1

Or load that same release from a CDN, then your stylesheet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css@3.0.1/dist/index.min.css">
<link rel="stylesheet" href="/styles.css">

Put reseter ahead of your own CSS so your rules win. With a bundler, that means importing the package first:

import "reseter.css";
import "./styles.css";

For a smaller file that skips forms, links, and dialogs, use reseter.css/mini or https://cdn.jsdelivr.net/npm/reseter.css@3.0.1/dist/mini.min.css — see Full vs mini.

Supported npm import paths are listed in package.json exports (package root, ./mini, and explicit dist/ / css/ subpaths). Prefer import "reseter.css" in application code; use dist/ paths when a tool copies files from node_modules without resolving exports.

Frameworks

Import reseter.css for the full build, or reseter.css/mini for the smaller subset. Other published subpaths (dist/*, css/*) are listed in package.json exports — prefer the package root import in app code.

pnpm add reseter.css

// src/main.jsx or src/index.jsx
import "reseter.css";
import "./app.css";

// main.js
import "reseter.css";
import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";

createApp(App).mount("#app");

// main.js (Svelte 5+)
import "reseter.css";
import { mount } from "svelte";
import App from "./App.svelte";

mount(App, { target: document.getElementById("app") });

// main.js (Svelte 4)
import "reseter.css";
import App from "./App.svelte";

new App({ target: document.getElementById("app") });

// src/routes/+layout.js (SvelteKit)
import "reseter.css";
import "../app.css";

// app/layout.tsx (App Router)
import "reseter.css";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

// pages/_app.js (Pages Router)
import "reseter.css";
import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

// nuxt.config.ts
export default defineNuxtConfig({
  css: ["reseter.css", "~/assets/css/main.css"],
});

---
// src/layouts/Base.astro
import "reseter.css";
import "../styles/global.css";
---
<html lang="en">
  <head><!-- … --></head>
  <body><slot /></body>
</html>

// app/root.tsx
import { Links, Outlet } from "@remix-run/react";
import "reseter.css";
import stylesheet from "~/styles/app.css?url";

export const links = () => [{ rel: "stylesheet", href: stylesheet }];

export default function App() {
  return (
    <html>
      <head><Links /></head>
      <body><Outlet /></body>
    </html>
  );
}

// angular.json — styles array in build options
"styles": [
  "reseter.css",
  "src/styles.css"
]

// main.js / index.js / root.tsx
import "reseter.css";
import "./style.css";

{% load static %}
<link rel="stylesheet" href="{% static 'css/index.min.css' %}">
<link rel="stylesheet" href="{% static 'css/site.css' %}">

/*
 *= require reseter
 *= require_tree .
 */

// resources/js/app.js
import "reseter.css";
import "../css/app.css";

function theme_reseter() {
  wp_enqueue_style(
    'reseter',
    get_template_directory_uri() . '/assets/index.min.css',
    [],
    '3.0.1'
  );
  wp_enqueue_style('theme', get_stylesheet_uri(), ['reseter']);
}
add_action('wp_enqueue_scripts', 'theme_reseter');

// eleventy.config.js
export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy({
    "node_modules/reseter.css/dist/index.min.css": "css/index.min.css",
  });
}

<link rel="stylesheet" href="{{ '/css/index.min.css' | url }}">

import "reseter.css";
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  /* your tokens */
`;

Full vs mini

Choose full when the page uses native forms, links, dialogs, or the reset’s typography defaults. Choose mini when a UI library already styles controls and you only need the shared layout base: border-box, heading scale, lists, and responsive media.

Load one build, not both.