https://github.com/logicalclocks/quartz
Logical Clocks Design System — NPM Package
https://github.com/logicalclocks/quartz
Last synced: 4 months ago
JSON representation
Logical Clocks Design System — NPM Package
- Host: GitHub
- URL: https://github.com/logicalclocks/quartz
- Owner: logicalclocks
- Created: 2020-08-28T08:56:59.000Z (almost 6 years ago)
- Default Branch: dev
- Last Pushed: 2026-01-27T09:45:38.000Z (5 months ago)
- Last Synced: 2026-01-27T22:34:13.585Z (5 months ago)
- Language: TypeScript
- Size: 84.8 MB
- Stars: 4
- Watchers: 4
- Forks: 22
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.MD
Awesome Lists containing this project
README
# quartz-design-system
> Logical Clocks Design System Library
[](https://www.npmjs.com/package/@logicalclocks/quartz) [](https://standardjs.com)
The current repo is the implementation of the library of the design system of Logical Clocks, so called Quartz.
- NPM package of React components TS
- use storybook as documentation
- use Rebass as a base CSS frame and Emotion for overwriting style
The DS is first experimented on Figma before being implemented:
[https://www.figma.com/file/mvY1f3xMXUEd6szvT82FxB/Feature-Store?node-id=327%3A0](https://www.figma.com/file/mvY1f3xMXUEd6szvT82FxB/Feature-Store?node-id=327%3A0)
## Github Pages
An online version of the Storybook can be found here: [Quartz Storybook](https://logicalclocks.github.io/quartz).
The version deployed corresponds to the `dev` branch and is updated on every new commit.
## How to use the package?
### Installation
NPM
```bash
npm install --save @logicalclocks/quartz
```
Yarn
```bash
yarn add @logicalclocks/quartz
```
### Usage
```tsx
import { ThemeProvider, Button } from '@logicalclocks/quartz';
const App = () => (
My button
);
```
Since components are built on `rebass`, those have extended props from `Box` or `Flex' components.
It means that you can add some extra styles if they needed.
For example:
```tsx
Button
```
Put ThemeProvider Context on the top of components tree to provide the default theme.
The library has peer dependencies which need to be installed in a main project:
```json
{
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
```
## How to develop components for the package?
Run `yarn storybook`
Put new component in
## How to build?
Run `yan build`
## License
AGPL-3.0 Licence © [logicalclocks](https://github.com/logicalclocks)
## Run locally
Run `yarn storybook`
## Build locally
Run `yarn build-dev`
## Troubleshooting
Delete `node_modules` and `dist` folders then follow **Build locally** or **Run locally** instruction
## On repo update
Follow **Build locally** or **Run locally** instruction
## Using locally
You can use the library locally with the help of [yalc](https://github.com/wclr/yalc).
Just run `yarn publish-local` here and then do a `yalc link @logicalclocks/quartz` wherever you wanna use it.
To publish changes you can do `yarn dlx yalc push`. After that, the changes will be "published" to the local registry.