{"id":22378876,"url":"https://github.com/codebrahma/react-lite-ui","last_synced_at":"2025-07-31T01:31:32.396Z","repository":{"id":33087135,"uuid":"150686841","full_name":"Codebrahma/react-lite-ui","owner":"Codebrahma","description":"A set of React components. Themable / Customizable / Light weight library","archived":false,"fork":false,"pushed_at":"2023-01-03T15:31:23.000Z","size":25033,"stargazers_count":40,"open_issues_count":51,"forks_count":15,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-11-17T13:44:57.263Z","etag":null,"topics":["component-library","components","customizable","react","reactjs","ui-components","ui-kit"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Codebrahma.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-28T04:43:05.000Z","updated_at":"2024-06-22T18:12:55.000Z","dependencies_parsed_at":"2023-01-14T23:30:47.946Z","dependency_job_id":null,"html_url":"https://github.com/Codebrahma/react-lite-ui","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codebrahma%2Freact-lite-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codebrahma%2Freact-lite-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codebrahma%2Freact-lite-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codebrahma%2Freact-lite-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Codebrahma","download_url":"https://codeload.github.com/Codebrahma/react-lite-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228204671,"owners_count":17884711,"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":["component-library","components","customizable","react","reactjs","ui-components","ui-kit"],"created_at":"2024-12-04T23:08:11.730Z","updated_at":"2024-12-04T23:08:12.257Z","avatar_url":"https://github.com/Codebrahma.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://codebrahma.com/react-lite-ui/\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Codebrahma/react-lite-ui/development/.github/images/logo.png\" alt=\"React Lite UI\" width=\"150\"\u003e\u003c/a\u003e\n  \u003cbr/\u003e\n  React Lite UI\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eA set of light weight React Components, which are easily customizable and can be bootstrapped in your project.\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-lite-ui\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-lite-ui/latest.svg?style=flat-square\"\n         alt=\"TravisCI\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/Codebrahma/react-lite-ui\"\u003e\n    \u003cimg src=\"https://img.shields.io/travis/Codebrahma/react-lite-ui/development.svg?style=flat-square\"\n         alt=\"TravisCI\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/Codebrahma/react-lite-ui\"\u003e\n      \u003cimg src=\"https://img.shields.io/david/Codebrahma/react-lite-ui.svg?style=flat-square\" alt=\"dependencies\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/Codebrahma/react-lite-ui?type=dev\"\u003e\n    \u003cimg src=\"https://img.shields.io/david/dev/Codebrahma/react-lite-ui.svg?style=flat-square\" alt=\"dev dependencies\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/Codebrahma/react-lite-ui\"\u003e\n    \u003cimg src=\"https://img.shields.io/codecov/c/github/Codebrahma/react-lite-ui.svg?style=flat-square\" alt=\"Codecov\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#sparkles-key-features\"\u003eKey Features\u003c/a\u003e •\n  \u003ca href=\"#link-installation\"\u003eInstallation\u003c/a\u003e •\n  \u003ca href=\"#rocket-usage-\"\u003eUsage\u003c/a\u003e •\n  \u003ca href=\"https://codebrahma.com/react-lite-ui/documentation\"\u003eDocumentation\u003c/a\u003e •\n  \u003ca href=\"https://codebrahma.com/react-lite-ui/\"\u003eDemo\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Codebrahma/react-lite-ui/development/.github/images/higher-res.gif\" \u003e\n\u003c/p\u003e\n\n\n### :sparkles: Key Features:\n\n##\n\n* Any DOM element can be customized through a simple SASS file. :tada:\n\n* You can import individual components which doesn't affect the bundle size of your app. :confetti_ball:\n\n* Clean Design with minimal implementation reducing the code that is shipped to your app with pleasant UI. :sunrise_over_mountains:\n\n* Each component is made light-weight - around half the size of components ( and even less! ) from other popular libraries. :muscle:\n\n\u003cbr /\u003e\n\n### :link: Installation: \n\n##\n\n```\nnpm install --save react-lite-ui\n```\n\n\u003cbr /\u003e\n\n### :rocket: Usage :\n\n##\n\nIn your `App.js` : \n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Card } from 'react-lite-ui';\n\nclass App extends React.Component {\n      render() {\n        return (\n          \u003cCard\n            header=\"Card header\"\n          \u003e\n            Card content\n          \u003c/Card\u003e\n        );\n      }\n    }\n\nReactDOM.render(\n    \u003cApp /\u003e,\n    document.getElementById('root')\n);\n```\n\n\u003cbr /\u003e\n\n### :art: Customisation :\n\n##\n\nLet's take our `App.js` file, and add a [Card](https://codebrahma.com/react-lite-ui/documentation?component=card) component to it : \n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Card } from 'react-lite-ui';\n\nclass App extends React.Component {\n      render() {\n        return (\n          \u003cCard\n            header=\"Am I Cute?\"\n            footer={\n              \u003cButton href=\"https://github.com/Codebrahma/react-lite-ui\" type=\"primary\" bordered\u003eview more\u003c/Button\u003e\n            }\n            elevation=\"medium\"\n          \u003e\n            \u003cdiv className=\"col card-content\"\u003e\n              \u003cimg src=\"https://placeimg.com/300/300/animals\" alt=\"animals\" /\u003e\n            \u003c/div\u003e\n          \u003c/Card\u003e\n        );\n      }\n    }\n\nReactDOM.render(\n    \u003cApp /\u003e,\n    document.getElementById('root')\n);\n```\n\u003cbr /\u003e\n\nCreate a file named `theme.scss` :\n\n```scss\n:local(.card) {\n      z-index: 2;\n      height: fit-content;\n      width: 100%;\n      transition: margin 0.2s ease-in-out;\n}\n    \n:local(.cardHeader) {\n      color: #0c549c;\n      text-align: center;\n}\n    \n:local(.cardFooter) {\n      justify-content: center;\n      align-self: baseline;\n}\n```\n\u003cbr/\u003e\n\nDon't worry if this doesn't make sense to you. For now, we will add these styles and complete wiring up our styles to the card component. \n\nNow, in our `App.js` file we will pass a `theme` prop to the `Card` component, like this : \n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Card } from 'react-lite-ui';\nimport theme from 'theme.scss';  // Import the styles from theme.scss\n\nclass App extends React.Component {\n      render() {\n        return (\n          \u003cCard\n            theme={theme}       // Pass the theme as a prop to the card component here.\n            header=\"Am I Cute?\"\n            footer={\n              \u003cButton href=\"https://github.com/Codebrahma/react-lite-ui\" type=\"primary\" bordered\u003eview more\u003c/Button\u003e\n            }\n            elevation=\"medium\"\n          \u003e\n            \u003cdiv className=\"col card-content\"\u003e\n              \u003cimg src=\"https://placeimg.com/300/300/animals\" alt=\"animals\" /\u003e\n            \u003c/div\u003e\n          \u003c/Card\u003e\n        );\n      }\n    }\n    \n ...\n```\n\u003cbr /\u003e\n\nSo, let's take a look at what we did here : \n\n* We defined our own styles which we wanted to customize for the component using the `card`, `cardHeader` and `cardFooter` classes.\n\n* Then we passed the styles to the component via the `theme` prop which gets applied to the component's structure.\n\n\u003cbr /\u003e\n\nThe styles that you passed are then combined with the default styles of the component to render your customised component!\nFor more info on how to customise and various props that you can pass to your components, please visit the [Documentation page](https://codebrahma.com/react-lite-ui/documentation).\n\n\nThat's all you need to do! And here's our customised card component :\n\n![screenshot](https://raw.githubusercontent.com/Codebrahma/react-lite-ui/development/.github/images/card-screenshot.png)\n\nPretty easy, right? Want to try out more components?\n\nSimply visit our [Playground page](https://codebrahma.com/react-lite-ui/playground) to try out the components before using and have fun playing around with them!\n\n### Contributing :\n\nIf you want to contribute, please take a look at our [Contribution guidelines](https://github.com/Codebrahma/react-lite-ui/blob/master/CONTRIBUTING.md) and raise a PR! We would love contributions!\n\nIf you find an issue or have a question, please open an issue [here](https://github.com/Codebrahma/react-lite-ui/issues) and we would love to help you out and keep improving this library! :smile:\n\nThanks! \n\n### Contributors :\n\n[![](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/images/0)](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/links/0)[![](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/images/1)](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/links/1)[![](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/images/2)](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/links/2)[![](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/images/3)](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/links/3)[![](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/images/4)](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/links/4)[![](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/images/5)](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/links/5)[![](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/images/6)](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/links/6)[![](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/images/7)](https://sourcerer.io/fame/prasanna1211/Codebrahma/react-lite-ui/links/7)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebrahma%2Freact-lite-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebrahma%2Freact-lite-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebrahma%2Freact-lite-ui/lists"}