🚀 Start UI [web] is an opinionated frontend starter repository created & maintained by the BearStudio Team and other contributors. It represents our team's up-to-date stack that we use when creating web apps for our clients.
pnpm install
pnpm devThe documentation uses Nextra from Vercel, so it's based on NextJS. You can check the documentation for more information.
For keep consistency between all documentation's screenshots, make sure to follow up these rules :
- Desktop screenshots dimensions are 1280x800
- Mobile screenshots dimensions are 390x844 (iPhone 12 Pro)
- Screenshots have to be with application in dark mode
- Put every feature/guide's screenshots in a folder named like
my-featureinpublic/images/screenshots/my-feature - Import screenshots using
@/screenshots/my-feature/my-screenshotpath
Here is a tutorial for make perfect screenshots for this documentation (with Google Chrome)
- If set, deactivate scrollbar always display
- Go to start-ui [web], and then go the page you want to screen
- Open the developer tools, and open device toolbar
-
- For desktop screenshot, set dimensions manually at 1280x800 (you can create a custom device with these dimensions).
- For mobile screenshot, set dimensions to iPhone 12 Pro (or manually at 390x844)
- Click on three dots on the right of device toolbar and click on "Capture screenshot"
- The screenshot is download with dimensions defined
Some components have been developed and could be used in documentation pages.
A component to display images as content of Nextra Tabs component. It is used to display screenshots as desktop or mobile version.
Flex container that allows to define direction and gap.
Horizontal Stack which will become vertical when the device width is lower than breakpoint prop (default is to 768px)
Component based on Nextra Callout, to warn user that a page is not yet written.