The only special note here is that there is a bundled CSS file that needs to be imported alongside the usual React components. Most bundlers are able to ingest CSS, so this import statement should suffice:
import "@determinate-systems/ui/reset.min.css";
import "@determinate-systems/ui/index.min.css";And, add this to your <head> so fonts work:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>Run these two commands in two separate terminals. (Storybook needs to see the CSS, so it's better to have Rollup complete its CSS work.)
npm run watchnpm run storybook
Remember to use npm run format:fix to match Prettier's expected formatting style.
The CSS generated by this includes the tailwind CSS reset sheet, preflight.
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}