Component Library Package (SiteViewerFrontComponents)

Reusable React components extracted into a standalone npm package. Why this name? This is a package I've made for my web site, if you want to use it feel free to do so but the name will remain the same in honor to this project :)

If you have a problem using this code, I invite you to look at the release notes on storybook. If you think I made a mistake (breaking changes) that was not spotted, well good luck since this project is still and will remain private and is only maintained by myself. I will not take inquieries or issues to fix bugs. If you use this package, you do knowing these drawbacks. I have no will to make this code public and or editable by anyone with or without pull request.

Installation

run npm i site-viewer-front-components

Local

Build

npm install
npm run build

Build output is generated in dist/.

Local package test

npm pack

This creates a .tgz archive that you can install in another project:

npm install ../SiteViewerFrontNpmPackage/site-viewer-front-components-0.1.0.tgz

Usage

import "site-viewer-front-components/styles.css";
import { Button } from "site-viewer-front-components";

Components available

You can find all of them in this storybook and other informations such as Release Notes. There is not a storybook for each version and you cannot change version directly in storybook. This is why I invite you to refer to the release note this will be your only option for previous versions since I do not want to make this code public.

Tailwind theme tokens

The package uses Tailwind v4 with @theme inline in styles.css for theme declaration:

The library theme can be overridden by redefining the CSS variables that are declared under :root in the file Components/styles.css. If you set those same variable names in your application styles, the library components will automatically use your theme values instead.

⚠️ You must import your css file after the import of the site-viewer-front-components/styles.css. If you do it the other way around, your css variables will be override by thos defined in Components/styles.css

Theme variables to override:

• --sw-background
• --sw-background-hover
• --sw-background-soft
• --sw-foreground
• --sw-foreground-hover
• --sw-foreground-soft
• --sw-accent
• --sw-accent-soft
• --sw-destructive
• --sw-destructive-soft
• --sw-success
• --sw-success-soft
• --sw-warning
• --sw-warning-soft
• --sw-font-family
• --sw-radius

Therefore, if you handle your own theme, you can change those variables in your theme to change the rendering of the components of this library based on the one you are currently using.

Example:

@layer base {
  .theme-dark {
    --root-colors-background-hard: #0f1115;
    --root-colors-background-soft: #161a22;
    --root-colors-foreground-soft: #e5e7eb;
    --root-colors-foreground-hard: #f9fafb;
    --sw-background: #0f1115;
  }

  .theme-light {
    --root-colors-background-hard: #ffffff;
    --root-colors-background-soft: #f7f7f8;
    --root-colors-foreground-soft: #1f2937;
    --root-colors-foreground-hard: #111827;
    --sw-background: #ffffff;
  }
}

Font usage and override

Components already use fonts specific to this library and these fonts are shipped with the project.

The package exposes typography through:

• CSS variable: --sw-font-family-main
• CSS variable: --sw-font-family-secondary

To override font from a consuming app you just have to redeclare this CSS variable:

:root {
  --sw-font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

Where "Inter" is a @font-face you previoulsy declared (see styles.css).

If you are using NextJS, you can do something like:

export const AlteHassGroteskRegular = localFont({
  src: [
    {
      path: "../../../public/fonts/AlteHaasGroteskRegular.ttf",
      weight: "400",
      style: "normal",
    },
  ],
  variable: "--sw-font-family",
});

This will override the font under the --sw-font-family variable.

To generate CSS locally:

npm run build:css