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 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";