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. Runtime and framework packages should install beside it, consume the CSS contract, and add behavior without duplicating component styles.

npm install @seventh-ui/css

# Install the selected runtime or framework package according to its own docs.

See JavaScript Derivatives for the implementation contract.

Browser Bundle Order

Legacy and static applications must expose npm artifacts from a public directory and load them in the contract order. The contract is exported as @seventh-ui/css/contracts/runtime-integration.json.

<link rel="stylesheet" href="<public path to @seventh-ui/css/dist/seventh-ui.css>">

<!-- Render normal Seventh UI markup here. -->

<script defer src="<public path to the selected runtime bundle>"></script>

Runtime bundles must not embed the CSS by default. The CSS package owns visual classes and assets; JavaScript packages own behavior.

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 Imports

Use the full icon catalog only for prototypes and documentation. Prefer category entrypoints for icon-heavy screens, or individual icon entrypoints for production screens that need a small subset.

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

import "@seventh-ui/css/icons/base.css";
import "@seventh-ui/css/icons/individual/file-system-asterisk-failed.css";

Individual icon CSS does not import the base helper. Import @seventh-ui/css/icons/base.css once, then import each icon used by the view.

Colored icons are separate from the monochrome mask contract. Prefer raw SVG paths; use colored CSS helpers only when a static or legacy screen benefits from class-based background images.

import ptBrFlag from "@seventh-ui/css/icons-colored/svg/languages/languages-pt-br-square.svg";
import seventhLogo from "@seventh-ui/css/icons-colored/svg/brand/brand-seventh-logo.svg";

import "@seventh-ui/css/icons-colored/base.css";
import "@seventh-ui/css/icons-colored/brand.css";
import "@seventh-ui/css/icons-colored/languages.css";

Raw Assets

Bundler-managed icons and illustrations can use raw SVG paths. Colored icons preserve their internal palette; colored illustrations remain opt-in and are not referenced by the default CSS.

import userOutline from "@seventh-ui/css/icons/svg/user/user-outline.svg";
import ptBrFlag from "@seventh-ui/css/icons-colored/svg/languages/languages-pt-br-square.svg";
import seventhLogo from "@seventh-ui/css/icons-colored/svg/brand/brand-seventh-logo.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";