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
Override default scss variables to style the library! If you want to use default values, import default-values.scss
pnpm i tbsui-ssr- 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
- 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} />
}