Supremely responsive UI components for React, built from the ground up with SSR and accessibility in mind for the sashaphoto family of websites.
npm install tbsuiThis library also provides numerous common components such as modals, cards, and navigation bars which are provided as minimal blank slates with only the necessary styling. It is assumed that on the target site, CSS variables will be set to configure the look of this library.
"use-client". For simpler, SSR friendly components, check out tbsui-ssr- NPM: npm i --save tbsui
- Yarn: yarn add tbsui
- PNMP: pnpm i tbsui
Reactive * .tsx) are driven by framer-motion's Motion Values. All Reactive components in this library assume an input range of 0 -> 1.useTransform hook, this library provides several advanced transforms which allow motion values to be much more useful. These hooks can be powerfully paired with their corresponding curve editors to allow visual real-time design and tuning of animations, right in place.useKeyframeCurveTransform allows the user to animate based on motion values in the same way they would in any popular animation software.useBezierTransform which, with it's novel density histogram UI let's designers stretch and squeeze the relative duration of parts of an animation. For instance, the bezier curve could be made to squeeze the majority of the points towards the end of the animation, resulting in a fast move through the first values, and then a lingering move near the end.