Welcome to Llane UI

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 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.

Live Components Demo on Netlify: https://main--capable-dragon-152070.netlify.app
Latest NPM Package Published: https://www.npmjs.com/package/llane-ui
GitHub Repository: https://github.com/znx-x/llane-ui

Warning

Ongoing Development: This is an ongoing project with heavy development underway. Contributions are welcomed and more documentation will be uploaded as the project develops.

• Install Llane UI
• Build Llane UI
• Testing Llane UI
• Building Test Application
• How to use it with my React App?
  • Regular Usage With NPM
  • Fetch From GitHub (Unstable)
  • Using Llane UI
• How do I build a custom icon library?
• Components List (A-Z)

Install Llane UI

You can install LLane UI by running:

npm install

Build Llane UI

You can build Llane UI by running the following command:

npm run build

This will compile Llane UI to your /dist folder, which will then be used by your application to import the Llane UI components.

Testing Llane UI

You can run the test TSX page by using the following command:

npm run test

This 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.

Building Test Application

You can also crete an optimised build of the test application - even though I'm not sure why you would 🤷 - by running the following command:

npm run deploy-test-app

This should create an optimised build in your /build folder.

How to use it with my React App?

Regular Usage With NPM

You can use npm to install the latest stable release of llane-ui dependency in your React App:

npm install llane-ui --save-dev

Fetch From GitHub (Unstable)

You 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):

"llane-ui": "git+https://github.com/znx-x/llane-ui.git"

This 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.

Using Llane UI

After installing it, you can use Llane UI components by importing and declaring them in your JSX or TSX. For exaple:

import { Heading } from 'llane-ui';

/* Your Code */

return(
    <>
      <Heading>
        This is a Llane UI Heading.
      </Heading>
    </>
)

How do I build a custom icon library?

Note

You will need to have Python installed to build your custom icon library.

By default, LLane UI uses a pre-compiled set of react-feather 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:

1. 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.
2. Inside the root folder, execute the build-icon-library.py script to build your library:

   python build-icon-library.py

3. Now, you will need to rebuild the LLane UI framework to compile the new library and incorporate the new export structure:

   npm run build

This process will update the /dist folder, creating all the new icons and a new export structure that you can use in your project.

Components List (A-Z)

Full 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.

• ✅ AppNavBar: AppNavBar AppNavBarSection
• ✅ Box: Box BoxOutlined
• ✅ Button: Button ButtonAlt ButtonOutlined ButtonOutlinedAlt ButtonOutlinedDimmed ButtonLink ButtonLinkAlt ButtonLinkOutlined ButtonLinkOutlinedAlt
• ✅ Container: Container
• ✅ Divider: Divider
• ✅ Dropdown: Dropdown DropdownLink
• ✅ FlexContainer: FlexContainer
• ✅ Footer: Footer FooterContainer FooterDesktop FooterMobile FooterSection
• ✅ GridContainer: GridContainer
• ✅ HamburgerMenu: HamburgerMenu HamburgerMenuDropdown HamburgerMenuLink
• ✅ Header: Header HeaderContainer HeaderDesktop HeaderMobile HeaderSection HeaderLink
• ✅ Icons
• ✅ Image: Image
• ✅ Input: Input InputOutlined
• ✅ Link: Link LinkWrapper
• ✅ Modal: Modal
• ✅ Typography: HeadingExtraLarge HeadingLarge Heading HeadingSmall HeadingExtraSmall HeadingTiny TextExtraLarge TextLarge Text TextSmall TextExtraSmall TextDimmed
• ✅ Spacer: Spacer Sp Break
• ✅ Span: Span
• ✅ Submenu: Submenu SubmenuLink
• ✅ TextArea: TextArea TextAreaOutlined
• ✅ Toggle: ThemeToggle ToggleButton
• ✅ Wrapper: AppWrapper PageWrapper