npm Installation

Install CSS Tags, load its layered CSS, enable global custom-tag types, and add exported themes.

The package root is the complete entry point

Install once, then import the layered CSS and optional global declarations from the published package.

npm install css-tags

index.css exportedtypes exported

npm install css-tags

/* app.css */
@import "css-tags";

// env.d.ts
/// <reference types="css-tags" />

More examples

Each example introduces a different part of the shipped API.

Use a pinned browser import without a build step

Pinning the package version keeps static prototypes and examples reproducible.

Browser entryhttps://cdn.jsdelivr.net/npm/css-tags@0.1.0/index.css

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/css-tags@0.1.0/index.css"
>

CSS Tags ships as the css-tags package. Its root entry is the complete layered stylesheet and exposes the custom-tag DOM and JSX declarations.

Package-ready semantic UI

The npm entry loads the same real library used by this preview.

Installed from npm

One CSS import, typed custom tags

Components, layouts, tokens, and semantic defaults share one layered entry point.

Ready

<card>
  <card-body>
    <layout-stack gap="var(--space-sm)">
      <eyebrow>Installed from npm</eyebrow>
      <card-header>One CSS import, typed custom tags</card-header>
      <card-content>
        <p>Components, layouts, tokens, and semantic defaults share one layered entry point.</p>
      </card-content>
      <badge class="stack-intrinsic" status="success">Ready</badge>
    </layout-stack>
  </card-body>
</card>

Install

npm install css-tags

Import from CSS:

@import "css-tags";

Or from JavaScript when your bundler supports CSS side-effect imports:

import "css-tags";

For a no-build page:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-tags@0.1.0/index.css">

Full type safety

The package root exposes types/css-tags.d.ts. If your framework does not discover global package declarations automatically, add this once:

/// <reference types="css-tags" />

This types document.createElement("card"), global JSX custom tags, and finite attributes such as badge status and layout side. Class and data-* hosts stay native elements and use the framework’s normal HTML typings.

Public entry points

css-tags: complete layered stylesheet and declarations
css-tags/index.css: explicit complete stylesheet
css-tags/types: declaration file
css-tags/components/*.css: component-level CSS
css-tags/core/*.css, css-tags/layouts/*.css, and css-tags/themes/*.css
css-tags/carousel.js and css-tags/view-transition.js: optional behavior

Prefer the complete entry point unless you are deliberately reproducing the dependency and layer order in index.css.

Add a generated theme

@import "css-tags";
@import "./my-theme.css";

The theme creator emits @layer css-tags-theme. Loading the generated file after the package appends that layer after the library, so the exported tokens win without !important or selector escalation.

What gets published

The package includes runtime CSS, optional JavaScript helpers, declarations, README, and license. It excludes demos, website source, build output, and development scripts. The release check uses npm pack --dry-run to inspect the exact tarball before publishing.