{"id":20795543,"url":"https://github.com/zepdev/zeppelin-element-library-react","last_synced_at":"2026-04-26T07:33:06.886Z","repository":{"id":57170912,"uuid":"186985618","full_name":"zepdev/zeppelin-element-library-react","owner":"zepdev","description":"React Components library based on the zeppelin-element-library","archived":false,"fork":false,"pushed_at":"2023-09-15T14:19:32.000Z","size":7485,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":5,"default_branch":"development","last_synced_at":"2025-12-26T20:12:22.977Z","etag":null,"topics":["design-system"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zepdev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-16T08:28:40.000Z","updated_at":"2023-09-18T13:39:25.000Z","dependencies_parsed_at":"2024-11-18T00:47:00.756Z","dependency_job_id":null,"html_url":"https://github.com/zepdev/zeppelin-element-library-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zepdev/zeppelin-element-library-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zepdev%2Fzeppelin-element-library-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zepdev%2Fzeppelin-element-library-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zepdev%2Fzeppelin-element-library-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zepdev%2Fzeppelin-element-library-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zepdev","download_url":"https://codeload.github.com/zepdev/zeppelin-element-library-react/tar.gz/refs/heads/development","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zepdev%2Fzeppelin-element-library-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32289926,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T06:26:00.361Z","status":"ssl_error","status_checked_at":"2026-04-26T06:25:58.791Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["design-system"],"created_at":"2024-11-17T16:22:20.536Z","updated_at":"2026-04-26T07:33:06.869Z","avatar_url":"https://github.com/zepdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A React Component and Icon Library using Zeppelin Element Library\n\n## ⚠️ This Design System is deprecated and no longer maintained. npm packges will stay available, but please make sure to opt out until 2025 ⚠️\n\nPlease see (Zeppelin Design System)[https://live-zds.zepdev.net/] for more detailed information.\n\ninstall\n\n```\nyarn add @zlab-de/zel-react\n```\n\n## Getting Started: Components\n\nThis library requires the import of **\\*zel.css** for apply all styles from the Zeppelin Element Library.\n\n```\n// MyComponent.jsx\nimport React from 'react'\nimport Button from '@zlab-de/zel-react/Button'\n\nfunction MyComponent(){\n    return(\n        \u003cdiv\u003e\n            \u003cButton color=\"primary\"\u003eClick Me!\u003c/Button\u003e\n        \u003c/div\u003e\n    )\n}\n\nexport default MyComponent\n\n// App.js\nimport React, { Component } from 'react';\nimport \"@zlab-de/zel-react/zel.css\"\nimport MyComponent from \"./MyComponent\"\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cMyComponent /\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\n## guidelines.json from Zeppelin Element Library\n\nThis repository also have a **guidelines.json** file available for you to help with styling. This file contains the following information (see the guidelines section for more information); colors, spacing, and typography specifications. Its intended use if for users using a CSS-in-JS solution to be able to call colors and spacing easier.\n\nExample with React-JSS Theming\n\n```\nimport React from 'react'\nimport withStyles, {ThemeProvider} from 'react-jss'\nimport theme from '@zlab-de/zel-react/guidelines.json'\n\nconst styles = theme =\u003e ({\n  div: {\n    marginBottom: `${ theme.spacing.component.xxl.rem }rem`,\n    color: theme.colors.primary.indigoBlue.hex,\n  },\n})\n\nfunction MyComponent(){\n    return(\n        \u003cdiv className={classes.div}\u003e\n            i'm a component\n        \u003c/div\u003e\n    )\n}\n\nexport default withStyles(styles)(MyComponent)\n\nconst App = () =\u003e (\n  \u003cThemeProvider theme={theme}\u003e\n    \u003cStyledButton\u003eI am a button with green background\u003c/StyledButton\u003e\n  \u003c/ThemeProvider\u003e\n)\n```\n\n## Props\n\nAny alternative props that you wish to pass to a component (ie inline styles) will always be passed to the outer element of that component. For example, see the code for Tag below.\n\n```\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport ZepiconsClose from '@zlab-de/zel-react-icons/ZepiconsClose';\n\nconst Tag = ({ className: classNameProp, children, onClose, ...other }) =\u003e {\n  return (\n    \u003cspan className={clsx(classNameProp, 'zep-tag')} {...other}\u003e\n      {children}\n      \u003cbutton onClose={onClose} aria-label=\"close\" className=\"zep-tag__button\"\u003e\n        \u003cZepiconsClose className=\"zep-tag__icons\" /\u003e\n      \u003c/button\u003e\n    \u003c/span\u003e\n  );\n};\n\nTag.propTypes = {\n  className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n  children: PropTypes.string\n};\n\nexport default Tag;\n```\n\n## Build files\n\nThis project uses the build files from Material UI (../../babel.config.js). To build this package successfully, you must first clone the Material UI repository and then add this package into @material-ui/packages/.\n\nNote if we remove Downshift, please update the rollup file. We had to change ForwardRef to isForwardRef.\n\nPublish TO NPM from build folder after running yarn build\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzepdev%2Fzeppelin-element-library-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzepdev%2Fzeppelin-element-library-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzepdev%2Fzeppelin-element-library-react/lists"}