Skip to content

TheBigSasha/tbsui-ssr

Repository files navigation

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.

  • 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

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} />
}

Author

Alexander Aleshchenko

License

MIT