Tbsui-ssr NPM | npm.io

TBSUI SSR

A library of components which can all be shipped with zero javascript using NextJS. For more complex components, including reactive animations, checkout tbsui.

What this library won't do

Add interactivity and event listeners (onClick(), onChange(), etc)
Use State and Lifecycle Effects (useState(), useReducer(), useEffect(), etc)
Use browser-only APIs
Use custom hooks that depend on state, effects, or browser-only APIs

Customization

Override default scss variables to style the library! If you want to use default values, import default-values.scss

Installation

pnpm i tbsui-ssr

Features

Zero client side JS -- these components are css only
100% NextJS 13 Compatible
⚛️ React 18
📚 Storybook 7 - Components preview
🖌️ SCSS Modules
⏩ Vite - Run and build the project blazingly fast!
⚡ Vitest - Components Unit Testing
📐 ESLint & Prettier - Formatting and Linting
🌟 Typescript
🐶 Husky & Lint Staged - Pre-commit Hooks
⏰ Release Please — Generate the changelog with the release-please workflow
👷 Github Actions — Releasing versions to NPM
Initial components setup using Atomic Design

Using the library in a React frontend app (NextJS)

Install the library running pnpm i tbsui-ssr
In your root layout / _app.tsx, import the stylesheets as follows:

/*
You must specify css variables to theme this library, and provide a `tailwind-compatible.scss` file which defines tailwind-style values (or use the `default-variables.css` file from tbsui-ssr/dist/assets).
*/
import 'tbsui-ssr/dist/assets/default-variables.css' // Use defaults or specify your own compatible variables based on `default-variables.scss` and `tailwind-compatible.scss`

import 'tbsui-ssr/dist/assets/popup-message.css' // and or the stylesheets for whatever components you wish to use

Then, wherever you like, use the components as follows:

import { PopupMessage } from 'tbsui-ssr'

const MyComponent = () => {
  return <PopupMessage message="Hello World!" type="success" position="top-right" duration={5000} />
}