{"id":19140899,"url":"https://github.com/znx-x/llane-ui","last_synced_at":"2026-03-12T14:43:26.809Z","repository":{"id":232703181,"uuid":"784976571","full_name":"znx-x/llane-ui","owner":"znx-x","description":"Llanne UI is an open-source project, ready-to-use React.js components library that facilitates the development of React.js frontend applications and websites, natively compatible with mobile device screens.","archived":false,"fork":false,"pushed_at":"2024-05-06T09:19:43.000Z","size":733,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-19T13:26:55.626Z","etag":null,"topics":["app","design","framework","library","material","mui","react","typescript","ui","web"],"latest_commit_sha":null,"homepage":"https://main--capable-dragon-152070.netlify.app/","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/znx-x.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-11T00:01:46.000Z","updated_at":"2024-05-06T09:19:47.000Z","dependencies_parsed_at":"2025-01-03T15:13:22.181Z","dependency_job_id":"b159045a-a8b6-49ef-ba7d-ee009b931647","html_url":"https://github.com/znx-x/llane-ui","commit_stats":null,"previous_names":["znx-x/llane-ui"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/znx-x/llane-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/znx-x%2Fllane-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/znx-x%2Fllane-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/znx-x%2Fllane-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/znx-x%2Fllane-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/znx-x","download_url":"https://codeload.github.com/znx-x/llane-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/znx-x%2Fllane-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30428681,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-12T14:34:45.044Z","status":"ssl_error","status_checked_at":"2026-03-12T14:09:33.793Z","response_time":114,"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":["app","design","framework","library","material","mui","react","typescript","ui","web"],"created_at":"2024-11-09T07:19:12.591Z","updated_at":"2026-03-12T14:43:26.791Z","avatar_url":"https://github.com/znx-x.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"./media/logo-layers.png\" alt=\"Alt text\" style=\"text-align: center; margin: auto; display: flex\"\u003e\n\u003ch1 style=\"text-align: center; margin: 10px;\"\u003eWelcome to Llane UI\u003c/h1\u003e\n\nLlanne UI is an open-source project, ready-to-use React.js components library that facilitates the development of React.js frontend applications and websites, natively compatible with mobile device screens and dark/light themes. The idea of developing a standard UI framework for React.js and TypeScript comes from my own need for standardising UI components across different applications for a consistent cross-platform UI/UX and an efficient way to update multiple frontend UIs all at once. The library is conceived in a way that desktop browser applications should be automatically compatible with mobile view, without any need for refactoring or working with different components for different screen sizes.\n\n**Live Components Demo on Netlify:** https://main--capable-dragon-152070.netlify.app  \n**Latest NPM Package Published:** https://www.npmjs.com/package/llane-ui  \n**GitHub Repository:** https://github.com/znx-x/llane-ui\n\n\u003e [!WARNING]\n\u003e **Ongoing Development:** This is an ongoing project with heavy development underway. Contributions are welcomed and more documentation will be uploaded as the project develops.\n- [Install Llane UI](#install-llane-ui)\n- [Build Llane UI](#build-llane-ui)\n- [Testing Llane UI](#testing-llane-ui)\n- [Building Test Application](#building-test-application)\n- [How to use it with my React App?](#how-to-use-it-with-my-react-app)\n  - [Regular Usage With NPM](#regular-usage-with-npm)\n  - [Fetch From GitHub (Unstable)](#fetch-from-github-unstable)\n  - [Using Llane UI](#using-llane-ui)\n- [How do I build a custom icon library?](#how-do-i-build-a-custom-icon-library)\n- [Components List (A-Z)](#components-list-a-z)\n\n\u003cimg src=\"./media/screenshot.png\" alt=\"Alt text\" style=\"border-radius: 10px;\"\u003e\n\u003cimg src=\"./media/screenshot-light.png\" alt=\"Alt text\" style=\"border-radius: 10px;\"\u003e\n\n## Install Llane UI\n\nYou can install LLane UI by running:\n```shell\nnpm install\n```\n\n## Build Llane UI\n\nYou can build Llane UI by running the following command:\n```shell\nnpm run build\n```\n\nThis will compile Llane UI to your `/dist` folder, which will then be used by your application to import the Llane UI components.\n\n## Testing Llane UI\n\nYou can run the test TSX page by using the following command:\n```shell\nnpm run test\n```\n\nThis will open a test page in your `localhost` with all the available components rendered. You can use this to make modifications to the components and test them in real-time.\n\n## Building Test Application\n\nYou can also crete an optimised build of the test application - even though I'm not sure why you would 🤷 - by running the following command:\n```shell\nnpm run deploy-test-app\n```\n\nThis should create an optimised build in your `/build` folder.\n\n## How to use it with my React App?\n\n### Regular Usage With NPM\n\nYou can use `npm` to install the latest stable release of `llane-ui` dependency in your React App:\n```shell\nnpm install llane-ui --save-dev\n```\n\n### Fetch From GitHub (Unstable)\nYou can add the latest unstable version of Llane UI to your React App dependency tree by adding the following line to your `package.json` file (under dependencies):\n\n```json\n\"llane-ui\": \"git+https://github.com/znx-x/llane-ui.git\"\n```\n\nThis will import and build Llane UI with your application. **Only use this method in non-production applications and be aware of the risks (including breaking risks) inherent from these unstable versions.**\n\n### Using Llane UI\n\nAfter installing it, you can use Llane UI components by importing and declaring them in your `JSX` or `TSX`. For exaple:\n\n```js\nimport { Heading } from 'llane-ui';\n\n/* Your Code */\n\nreturn(\n    \u003c\u003e\n      \u003cHeading\u003e\n        This is a Llane UI Heading.\n      \u003c/Heading\u003e\n    \u003c/\u003e\n)\n```\n\n## How do I build a custom icon library?\n\n\u003e [!NOTE]\n\u003e You will need to have **[Python](https://www.python.org/downloads/)** installed to build your custom icon library.\n\nBy default, LLane UI uses a pre-compiled set of **[react-feather](https://feathericons.com/)** icons with some additions, but you can add, remove, or customise the icon library with your own `.svg` files. Follow the steps below to build your custom icon library:\n\n1. Add, remove, and customise your `.svg` files inside the `/src/Icons/library` folder. You will need to adhere to the Kebab-Case naming convention when naming or renaming your files. Alternatively, you can adjust the `build-icon-library.py` script to fit your naming style if you prefer not to use Kebab-Case.\n2. Inside the root folder, execute the `build-icon-library.py` script to build your library:\n    ```shell\n    python build-icon-library.py\n    ```\n3. Now, you will need to rebuild the LLane UI framework to compile the new library and incorporate the new export structure:\n    ```shell\n    npm run build\n    ```\n\nThis process will update the `/dist` folder, creating all the new icons and a new export structure that you can use in your project.\n\n## Components List (A-Z)\n\nFull list of supported components. Each component might have their own custom props and I will provide detailed explanation on each one when the full documentation for the project is published.\n\n- ✅ **AppNavBar:** `AppNavBar` `AppNavBarSection`\n- ✅ **Box:** `Box` `BoxOutlined`\n- ✅ **Button:** `Button` `ButtonAlt` `ButtonOutlined` `ButtonOutlinedAlt` `ButtonOutlinedDimmed` `ButtonLink` `ButtonLinkAlt` `ButtonLinkOutlined` `ButtonLinkOutlinedAlt`\n- ✅ **Container:** `Container`\n- ✅ **Divider:** `Divider`\n- ✅ **Dropdown:** `Dropdown` `DropdownLink`\n- ✅ **FlexContainer:** `FlexContainer`\n- ✅ **Footer:** `Footer` `FooterContainer` `FooterDesktop` `FooterMobile` `FooterSection`\n- ✅ **GridContainer:** `GridContainer`\n- ✅ **HamburgerMenu:** `HamburgerMenu` `HamburgerMenuDropdown` `HamburgerMenuLink`\n- ✅ **Header:** `Header` `HeaderContainer` `HeaderDesktop` `HeaderMobile` `HeaderSection` `HeaderLink`\n- ✅ **Icons**\n- ✅ **Image:** `Image`\n- ✅ **Input:** `Input` `InputOutlined`\n- ✅ **Link:** `Link` `LinkWrapper`\n- ✅ **Modal:** `Modal`\n- ✅ **Typography:** `HeadingExtraLarge` `HeadingLarge` `Heading` `HeadingSmall` `HeadingExtraSmall` `HeadingTiny` `TextExtraLarge` `TextLarge` `Text` `TextSmall` `TextExtraSmall` `TextDimmed`\n- ✅ **Spacer:** `Spacer` `Sp` `Break`\n- ✅ **Span:** `Span`\n- ✅ **Submenu:** `Submenu` `SubmenuLink`\n- ✅ **TextArea:** `TextArea` `TextAreaOutlined`\n- ✅ **Toggle:** `ThemeToggle` `ToggleButton`\n- ✅ **Wrapper:** `AppWrapper` `PageWrapper`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fznx-x%2Fllane-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fznx-x%2Fllane-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fznx-x%2Fllane-ui/lists"}