Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jackyef/flair
Collections of ready-to-use, accessible React components. Dark-mode and SSR support included.
https://github.com/jackyef/flair
accessibility dark-theme react ui
Last synced: about 2 months ago
JSON representation
Collections of ready-to-use, accessible React components. Dark-mode and SSR support included.
- Host: GitHub
- URL: https://github.com/jackyef/flair
- Owner: jackyef
- License: mit
- Created: 2021-05-04T13:44:30.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-10T03:48:57.000Z (over 2 years ago)
- Last Synced: 2024-07-10T12:06:34.513Z (2 months ago)
- Topics: accessibility, dark-theme, react, ui
- Language: TypeScript
- Homepage: https://flair.jackyef.com
- Size: 1.64 MB
- Stars: 9
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-made-by-indonesian - flair-kit monorepo - `Collections of ready-to-use, accessible React components. Dark-mode and SSR support included.` *by [Jacky Efendi](https://github.com/jackyef)* (F)
- made-in-indonesia - flair-kit monorepo - `Collections of ready-to-use, accessible React components. Dark-mode and SSR support included.` *by [Jacky Efendi](https://github.com/jackyef)* (F)
README
# `flair-kit` monorepo
## Getting started
We are using `pnpm` with workspaces. If you haven't, please install `pnpm@6`
```
npm install -g pnpm@6
```
After that, install the project dependencies using `pnpm`
```
pnpm i
```
Start developing!
```
pnpm dev
```
## Tools used
- [goober](https://github.com/cristianbote/goober)
- [swc](https://github.com/swc-project/swc)
- [Headless UI](https://github.com/tailwindlabs/headlessui)
- [Reach UI](https://github.com/reach/reach-ui)
- [ColorBox](https://colorbox.io/)
## Deploying on Vercel
- Set build command to:
```
cd ../../ && pnpm build
```
- Set install command to:
```
npm i pnpm -g && cd ../../ && pnpm i
```
- Set root directory to:
```
packages/website
```
## Releasing
Releasing is done manually currently by following these steps.
- Bump `packages/flair-kit/package.json` version number
- Create a git tag based on the version number
```
git tag [email protected]
```
- Push the git tag
```
git push origin [email protected]
```
- Publish package to `npm`
```
pnpm publish --filter flair-kit
```
## References
- https://design.lyft.com/re-approaching-color-9e604ba22c88
- https://github.com/adobe/react-spectrum/tree/main/packages/%40react-spectrum
- https://medium.com/sfl-newsroom/typography-scaling-from-the-design-perspective-45d82f77ba95
- https://www.invisionapp.com/inside-design/guide-to-design-systems/
- https://www.youtube.com/watch?v=Hx02SaL_IH0&ab_channel=Netlify
- https://www.figma.com/community/file/857042825430121164
- https://www.figma.com/file/a3d84cjuqRO3E7BdcdpbpL/Build-it-in-Figma%3A-Design-Systems-%E2%80%94%C2%A0Components-Continued...-(Community)?node-id=10%3A68
- https://www.figma.com/file/RJ7UawmJppVqby1o3qbkBK/Starter-Design-System-(Community)?node-id=0%3A1
- https://coolors.co/ffee88-758bfd-00cc99-ef233c-2d3047
- https://houdini.how/