{"id":20388194,"url":"https://github.com/jeric17/arv","last_synced_at":"2025-04-12T10:36:20.465Z","repository":{"id":32982191,"uuid":"146360729","full_name":"jeric17/arv","owner":"jeric17","description":"A UI library that is framework agnostic, same ui kit to any framework","archived":false,"fork":false,"pushed_at":"2023-01-06T02:06:29.000Z","size":2395,"stargazers_count":25,"open_issues_count":14,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-26T05:23:42.107Z","etag":null,"topics":["customelements","shadowdom","stenciljs","uikit","webcomponents"],"latest_commit_sha":null,"homepage":"https://jeric17.github.io/arv/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeric17.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-27T22:22:20.000Z","updated_at":"2023-09-15T07:54:12.000Z","dependencies_parsed_at":"2023-01-14T22:55:31.254Z","dependency_job_id":null,"html_url":"https://github.com/jeric17/arv","commit_stats":null,"previous_names":[],"tags_count":74,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeric17%2Farv","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeric17%2Farv/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeric17%2Farv/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeric17%2Farv/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeric17","download_url":"https://codeload.github.com/jeric17/arv/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248553950,"owners_count":21123556,"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":["customelements","shadowdom","stenciljs","uikit","webcomponents"],"created_at":"2024-11-15T03:07:50.462Z","updated_at":"2025-04-12T10:36:20.348Z","avatar_url":"https://github.com/jeric17.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://badgen.net/bundlephobia/min/arv) ![](https://badgen.net/npm/v/arv)\n\n\u003cimg src=\"https://jeric17.github.io/arv/arv-logo.svg\" width=100px /\u003e\n\n# Arv - A custom-element(shadowdom) UI library\n\n### Inspired by 💪 [Material-ui library](https://material-ui.com/)\n### Made with ❤️ using [Stencil](https://stenciljs.com)\n\nA UI library that is framework agnostic, same ui kit to any framework\n\n## Getting Started 🔥🔥🔥\n\n### React\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport registerServiceWorker from './registerServiceWorker';\n\nimport { defineCustomElements } from 'arv/dist/loader';\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\nregisterServiceWorker();\ndefineCustomElements(window);\n```\n\n### Angular\n\n**Step 1:** In your **main.ts** file\n```javascript\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nimport { defineCustomElements } from 'arv/dist/loader';\n\nif (environment.production) {\n  enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n  .catch(err =\u003e console.log(err));\ndefineCustomElements(window);\n```\n\n**Step 2:** In \"each\" of your Module file\n```javascript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { AppComponent } from './app.component';\nimport { SharedModule } from './shared/shared.module';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, FormsModule, SharedModule],\n  bootstrap: [AppComponent],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppModule {}\n```\n\nMore about installation at Stencil's documentation [here](https://stenciljs.com/docs/overview)\n\n## Usage\n\n### React\n```javascript\nimport React, { useRef, useEffect } from 'react';\n\nfunction MyButton() {\n  const el = useRef(null);\n\n  useEffect(() =\u003e {\n    el.current.buttonClick = props.onClick;\n  });\n\n  return (\n    \u003carv-button\n      ref={el}\n      variant=\"raised\"\n      color=\"primary\"\n    \u003eHello World!\u003c/arv-button\u003e\n  );\n}\n\nexport default MyButton;\n```\n\n```javascript\nimport React from 'react';\n\nfunction Foo() {\n  return (\n    \u003carv-container\n      width=\"100vw\"\n      height=\"100vw\"\n    \u003e\n      \u003carv-flex\n        items=\"center\"\n        justify=\"center\"\n        full-width\n        full-height\n      \u003e\n        \u003carv-text variant=\"heading1\"\u003e\n          Hello World\n        \u003c/arv-text\u003e\n      \u003c/arv-flex\u003e\n    \u003c/arv-container\u003e\n  );\n}\n\nexport default Foo;\n```\n\n### Angular\n\n```html\n\u003carv-button\n  variant=\"raised\"\n  (click)=\"greet()\"\n\u003e\n  Hello World!\n\u003c/arv-button\u003e\n\n```\n\n```html\n\u003carv-table [tableHeaders]=\"['First Name', 'Last Name']\"\u003e\u003c/arv-table\u003e\n```\n\n## Theming\nArv uses css variables to control the theme, can either be globally or per component. More about css variables at [Css Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)\n\n```css\n  --primary-color: #5b19b1;\n  --primary-shade: #5317a1;\n  --primary-highlight: #631bc2;\n  --primary-text-color: #ffffff;\n\n  --secondary-color: #1ddc4f;\n  --secondary-shade: #1cca49;\n  --secondary-highlight: #2df061;\n  --secondary-text-color: #ffffff;\n\n  --danger-color: #f44336;\n  --danger-highlight: #ff7961;\n  --danger-shade: #ba000d;\n  --danger-text-color: #000000;\n\n  --warning-color: #ff9800;\n  --warning-highlight: #ffc947;\n  --warning-shade: #c66900;\n  --warning-text-color: #000000;\n\n  --success-color: #8bc34a;\n  --success-highlight: #bef67a;\n  --success-shade: #5a9216;\n  --success-text-color: #000000;\n\n  --light-color: #efefef;\n  --light-text-color: #565656;\n  --light-highlight: #f5f5f5;\n  --light-shade: #cdcdcd;\n\n  --dark-color: #263238;\n  --dark-text-color: #f1f1f1;\n  --dark-highlight: #454545;\n  --dark-shade: #121212;\n\n  --disabled-color: #cdcdcd;\n  --disabled-shade: #aeaeae;\n  --disabled-highlight: #efefef;\n  --disabled-text-color: #aeaeae;\n\n  --default-bg: #ffffff;\n  --default-highlight: #efefef;\n  --default-shade: #e0e0e0;\n  --default-darker: #cdcdcd;\n\n  --radius: 4px;\n  --padding: 1em;\n  --card-media-height: 56%;\n  --transition: all 0.3s ease-in-out;\n  --icon-font-family: 'Material Icons';\n  --font-family: 'Source Sans Pro', Arial, sans-serif;\n  --font-size: 15px;\n  --font-color: #343434;\n  --spacer-height: 1em;\n  --spacer-width: 1em;\n  --avatar-normal: 80px;\n  --avatar-small: 50px;\n  --avatar-large: 120px;\n  --badge-color: rgb(224, 32, 32);\n  --badge-text-color: #f5f5f5;\n  --icon-size: 1.15rem;\n  --darker: #cdcdcd;\n  --backdrop-color: rgba(3, 3, 3, 0.4);\n  --lighter: #fff;\n  --radio-border-width: 3px;\n  --radio-padding: 3px;\n  --tooltip-bg: rgba(3, 3, 3, 0.5);\n  --tooltip-text: #fff;\n```\n\n### Overiding component theme\n\nThis will change the button's color to red\n\nhtml\n```html\n  \u003carv-button color=\"primary\"\u003eMy Button\u003c/arv-button\u003e\n```\n\ncss\n```css\n  arv-button {\n    --primary-color: #ff0000;\n  }\n```\n\nOr if you want a global css, put it inside the body\n\n```\n  body {\n    --primary-color: #ff0000\n  }\n```\n\nThis is now your new primary color\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeric17%2Farv","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeric17%2Farv","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeric17%2Farv/lists"}