@esnet/packets-ui-web

Framework-agnostic Web Components for the Packets Design System, a cross-organizational UI library from ESnet.

Installation

npm install @esnet/packets-ui-css @esnet/packets-ui-web

Packets ships styles separately. You must install @esnet/packets-ui-css alongside the Web Components package.

Peer dependencies

npm install antd lucide

Setup

1. Add the fonts

Add this to your <head>:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Signika:[email protected]&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
  rel="stylesheet"
/>

2. Import the styles and components

import "@esnet/packets-ui-css/styles.css";
import "@esnet/packets-ui-web";

3. Add the root class

Add the packets class to your app's root element:

<body class="packets"></body>

Optionally add dark or light:

<body class="packets dark"></body>

Usage

Web Components work in any HTML environment or JavaScript framework:

<pkts-button variant="primary">Save</pkts-button>
<pkts-alert variant="success">Changes saved.</pkts-alert>
<pkts-avatar initials="JD" size="medium" color="grape"></pkts-avatar>

Or in JavaScript:

import "@esnet/packets-ui-css/styles.css";
import "@esnet/packets-ui-web";

const button = document.createElement("pkts-button");
button.setAttribute("variant", "primary");
button.textContent = "Save";
document.body.appendChild(button);

Available Components

Buttons

• pkts-button: button; variants primary, secondary, branded, tertiary, destructive
• pkts-button-group: horizontal or vertical button group
• pkts-icon-button: icon-only button with the same variants

Form Inputs

• pkts-input-text: text input
• pkts-input-email: email input
• pkts-input-password: password input
• pkts-input-number: number input
• pkts-input-search: search input
• pkts-input-checkbox: checkbox input
• pkts-input-switch: toggle switch
• pkts-input-radio-button: radio button
• pkts-input-date: date input
• pkts-input-date-picker / pkts-input-date-picker-date / pkts-input-date-picker-time: date picker and sub-components
• pkts-input-date-range: date range picker

Display

• pkts-alert: alert messages; variants error, warning, success, info
• pkts-avatar: user avatar with initials; sizes small, medium, large
• pkts-badge: badge/tag
• pkts-breadcrumbs: breadcrumb navigation
• pkts-card: card container
• pkts-chip: chip tag
• pkts-chip-group: group of chips
• pkts-comma-separated-list: comma-separated list
• pkts-data-table: data table
• pkts-datum: label/value pair
• pkts-divider: horizontal divider
• pkts-icon: icon display

Layout

• pkts-form-section: form section layout
• pkts-module: module container
• pkts-title-section: title section layout

Navigation

• pkts-tabs: tab navigation

Utility

• pkts-spinner: loading spinner

Dark Mode

Toggle dark mode by adding or removing the dark class on the root element:

document.body.classList.toggle("dark");

Related Packages

| Package | Description | | ---------------------------------------------------------------------------------- | ------------------------------------------ | | @esnet/packets-ui-css | CSS-only components, no framework required | | @esnet/packets-ui-react | React components |

License

MIT. See the root repository for full license details.