Component Lib

myapp-components-Thing.ts

import {Thing as BaseThing} from 'shared/components/Thing'

export const Thing = styled(BaseThing, {
  // This app needs Things in upper case
  textTransform: 'uppercase'
})

shared-components-Thing.ts

import {Thing as ThingPrimitive} from 'shared/primitives/Thing'

export const Thing = styled(ThingPrimitive, {
  display: 'flex',
  borderColor: '$border',
  height: '$thing',
  ...
})

shared-primitives-Thing.tsx

const Thing = (props) => {
  const [on, setOn] = useState(false)
  return (
    <button data-state={on ? "on" : "off"} onClick={() => setOn(on => !on)} {...props} />
  )
}