{"id":20127597,"url":"https://github.com/cube-js/cubejs-ui-kit","last_synced_at":"2025-06-25T07:03:37.789Z","repository":{"id":48588499,"uuid":"281198469","full_name":"cube-js/cubejs-ui-kit","owner":"cube-js","description":"DEPRECATED UI Kit for Cube website","archived":false,"fork":false,"pushed_at":"2021-07-19T11:34:18.000Z","size":743,"stargazers_count":6,"open_issues_count":0,"forks_count":3,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-06T18:46:39.393Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://cubejs-uikit.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cube-js.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-20T18:41:52.000Z","updated_at":"2022-08-26T21:10:36.000Z","dependencies_parsed_at":"2022-09-04T13:00:28.415Z","dependency_job_id":null,"html_url":"https://github.com/cube-js/cubejs-ui-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cube-js/cubejs-ui-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-js%2Fcubejs-ui-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-js%2Fcubejs-ui-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-js%2Fcubejs-ui-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-js%2Fcubejs-ui-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cube-js","download_url":"https://codeload.github.com/cube-js/cubejs-ui-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-js%2Fcubejs-ui-kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261823685,"owners_count":23215140,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T20:22:38.427Z","updated_at":"2025-06-25T07:03:37.769Z","avatar_url":"https://github.com/cube-js.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cube.js UI Kit\n\nUI Kit for Cube.js website and other projects.\n\nUI Kit is based on [Numl Design System](https://github.com/tenphi/numl) and injects it into the project.\n\nTo learn more about Numl+React integration read the [documentation](https://numl.design/guide/integration/react).\n\n## Showcase\n\nShowcase is a playground to see all the components in one place. Also it's used to present a design system solutions.\n\nInstall dependencies:\n\n```bash\n$ npm i\n```\n\nAdd **CeraPro** font to the `src/assets/fonts` folder:\n\n* `CeraPro-Regular.woff2`\n* `CeraPro-Medium.woff2`\n\nRun showcase:\n\n```bash\n$ npm start\n```\n\n## Integration\n\nInstall via npm:\n\n```bash\nnpm install cubejs-uikit jsx-native-events --save-dev\n```\n\n### For Gatsby projects\n\nAdd the following code to the `gatsby-ssr.js` file:\n\n```javascript\nimport React from \"react\";\n\nexport const onRenderBody = ({ setHeadComponents }) =\u003e {\n    if (process.env.BUILD_STAGE === `build-html`) {\n        const css = `\n*:not(:defined) { visibility: hidden; }\n@font-face {\n    font-family: \"CeraPro\";\n    src: url(./assets/fonts/CeraPro-Regular.woff2);\n    font-weight: 300;\n}\n\n@font-face {\n    font-family: \"CeraPro\";\n    src: url(./assets/fonts/CeraPro-Regular.woff2);\n    font-weight: 400;\n}\n\n@font-face {\n    font-family: \"CeraPro\";\n    src: url(./assets/fonts/CeraPro-Medium.woff2);\n    font-weight: 500;\n}\n\n@font-face {\n    font-family: \"CeraPro\";\n    src: url(./assets/fonts/CeraPro-Medium.woff2);\n    font-weight: 600;\n}\n\n@font-face {\n    font-family: \"CeraPro\";\n    src: url(./assets/fonts/CeraPro-Medium.woff2);\n    font-weight: 700;\n}\n`;\n\n        setHeadComponents([\u003cstyle\u003e{css}\u003c/style\u003e]);\n    }\n}\n```\n\nWhere `./assets/fonts/CeraPro-Medium.woff2` is a public path to **CeraPro** font.\n\n### For other projects\n\nInclude the following CSS in your application:\n\n```css\n*:not(:defined) { visibility: hidden; }\n@font-face {\n    font-family: \"CeraPro\";\n    src: url(./assets/fonts/CeraPro-Regular.woff2);\n    font-weight: 300;\n}\n\n@font-face {\n    font-family: \"CeraPro\";\n    src: url(./assets/fonts/CeraPro-Regular.woff2);\n    font-weight: 400;\n}\n\n@font-face {\n    font-family: \"CeraPro\";\n    src: url(./assets/fonts/CeraPro-Medium.woff2);\n    font-weight: 500;\n}\n\n@font-face {\n    font-family: \"CeraPro\";\n    src: url(./assets/fonts/CeraPro-Medium.woff2);\n    font-weight: 600;\n}\n\n@font-face {\n    font-family: \"CeraPro\";\n    src: url(./assets/fonts/CeraPro-Medium.woff2);\n    font-weight: 700;\n}\n```\n\nWhere `./assets/fonts/CeraPro-Medium.woff2` is your local (or public) path to **CeraPro** font.\n\n## Usage\n\nImport UI Kit to your React project:\n\n```javascript\n// index.js / gatsby-browser.js for Gatsby\nimport UIKit from 'cubejs-uikit';\n\nUIKit.init();\n```\n\nEither you can pass options to the `init()` method or/and subscribe to it.\n\n```javascript\nUIKit.init({\n  scheme: 'auto' // 'light' by default\n}).then(() =\u003e {\n  // UI Kit is initialized\n});\n```\n\nUse simplified\n\nImport UI Components to your application. It's required to use `Root` component to wrap your application.\n\n```jsx\nimport Root from 'cubejs-uikit/dist/Root';\nimport Topbar from 'cubejs-uikit/dist/Topbar';\n\nexport default function App() {\n  return \u003cRoot\u003e\n    \u003cTopbar/\u003e\n    \u003cnu-block\u003eOther content\u003c/nu-block\u003e\n  \u003c/Root\u003e;\n}\n```\n\n## Available components\n\n* **Root** - A root component to wrap your application with.\n* **Section** - A section component.\n* **Card** - A card component.\n* **Grid** - A card component.\n\n## Available blocks\n\n* **Topbar** - A top bar component with a row of links.\n* **Hero** - A card block component.\n* **Footer** - A footer block component with copyright, links and \"get in touch\" section.\n* **SubscriptionBlock** - A subscription block. A simple form to subscribe user to our updates.\n* **CardBlock** - A card block.\n* **FeatureBlock** - A block with feature list.\n* **SmallSignUpCard** - A small signup card block with dark background.\n* **BigSignUpCard** - A big signup card block with white background.\n* **SwitchBlock** - A block with button group to switch sections each with text and image.\n\n## Contribution\n\n### Add new component/block\n\n- Add a new file `{ComponentName}.jsx` in `src/components` folder with your component.\n- Add a new line to `list.js` file in the root with component name.\n- Add an example of usage to the **Showcase** component in `src/showcase/index.jsx`.\n- Add a new line to the **Available components** section.\n- Add a documentation `docs/${ComponentName}.md` file for the component. \n\n### Run showcase and test your work\n\n```bash\n$ npm start\n```\n\nThen navigate to `https://localhost:1234/` in your browser to open Showcase.\n\n### Create pull request\n\nCommit your work to the new branch and create pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcube-js%2Fcubejs-ui-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcube-js%2Fcubejs-ui-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcube-js%2Fcubejs-ui-kit/lists"}