Package Imports - Seventh UI CSS

Package Name

Use @seventh-ui/css as the public package name. The scoped name keeps the CSS library tied to the Seventh UI family and leaves room for future sibling packages.

@seventh-ui/css

Install From Seventh Registry

The package will be publicly installable from the Seventh Verdaccio registry at https://npm.seventh.com.br/. Configure the package scope once, then install without login.

npm config set @seventh-ui:registry https://npm.seventh.com.br/
npm install @seventh-ui/css

Runtime Packages

This package does not ship JavaScript behavior. Future runtime and framework packages should install beside it, import the CSS contract, and add behavior without duplicating component styles.

npm install @seventh-ui/css

# Planned sibling packages
npm install @seventh-ui/jsvanilla
npm install @seventh-ui/react
npm install @seventh-ui/vuejs
npm install @seventh-ui/angular

See JavaScript Derivatives for the implementation contract.

Full Import

Use the full entrypoint for prototypes, documentation, and internal tools where convenience is more important than the smallest browser payload.

import "@seventh-ui/css";

Granular CSS

Use core tokens plus only the layout or components needed by the application view.

import "@seventh-ui/css/core.css";
import "@seventh-ui/css/layout.css";
import "@seventh-ui/css/components/button.css";
import "@seventh-ui/css/components/input.css";

Icon Categories

Import the full icon helper only when the application needs the complete catalog. Prefer category entrypoints for production screens.

import "@seventh-ui/css/icons/user.css";
import "@seventh-ui/css/icons/access.css";

Raw Assets

Bundler-managed icons and illustrations can use raw SVG paths. Colored illustrations are opt-in and are not referenced by the default CSS.

import userOutline from "@seventh-ui/css/icons/svg/user/user-outline.svg";
import warningTriangle from "@seventh-ui/css/illustrations/svg/warning-triangle-outline.svg";

Install Size vs Browser Delivery

Installing @seventh-ui/css may place all CSS and SVG assets in node_modules. Browser delivery is controlled by the imports chosen by the application build.

import "@seventh-ui/css/core.css";
import "@seventh-ui/css/components/button.css";