kandi background
Explore Kits

Semantic-UI | UI component framework based around useful principles | Theme library

 by   Semantic-Org JavaScript Version: 2.4.1 License: MIT

 by   Semantic-Org JavaScript Version: 2.4.1 License: MIT

Download this library from

kandi X-RAY | Semantic-UI Summary

Semantic-UI is a JavaScript library typically used in User Interface, Theme, Angular applications. Semantic-UI has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i semantic-ui' or download it from GitHub, npm.
Semantic is a UI framework designed for theming. Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. Semantic is production ready and partnered with frameworks such as React, Angular, Meteor, and Ember, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • Semantic-UI has a medium active ecosystem.
  • It has 49510 star(s) with 5132 fork(s). There are 1367 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 933 open issues and 5231 have been closed. On average issues are closed in 307 days. There are 116 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of Semantic-UI is 2.4.1
Semantic-UI Support
Best in #Theme
Average in #Theme
Semantic-UI Support
Best in #Theme
Average in #Theme

quality kandi Quality

  • Semantic-UI has 0 bugs and 0 code smells.
Semantic-UI Quality
Best in #Theme
Average in #Theme
Semantic-UI Quality
Best in #Theme
Average in #Theme

securitySecurity

  • Semantic-UI has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • Semantic-UI code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
Semantic-UI Security
Best in #Theme
Average in #Theme
Semantic-UI Security
Best in #Theme
Average in #Theme

license License

  • Semantic-UI is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
Semantic-UI License
Best in #Theme
Average in #Theme
Semantic-UI License
Best in #Theme
Average in #Theme

buildReuse

  • Semantic-UI releases are available to install and integrate.
  • Deployable package is available in npm.
  • Installation instructions, examples and code snippets are available.
  • Semantic-UI saves you 71986 person hours of effort in developing the same functionality from scratch.
  • It has 80521 lines of code, 0 functions and 208 files.
  • It has low code complexity. Code complexity directly impacts maintainability of the code.
Semantic-UI Reuse
Best in #Theme
Average in #Theme
Semantic-UI Reuse
Best in #Theme
Average in #Theme
Top functions reviewed by kandi - BETA

kandi has reviewed Semantic-UI and discovered the below as its top functions. This is intended to give you an instant insight into Semantic-UI implemented functionality, and help decide if they suit your requirements.

  • Listens for iframe changes
    • Sets up an iframe settings .
      • The receiver of the page ready .
        • Sets the jump links .
          • Parse file response data
            • Sets up body listener for mutation events .
              • setup public methods
                • Factory to create iFrame functions .
                  • New size resize handler
                    • Fixes misreframe settings when set up

                      Get all kandi verified functions for this library.

                      Get all kandi verified functions for this library.

                      Semantic-UI Key Features

                      50+ UI elements

                      3000 + CSS variables

                      3 Levels of variable inheritance (similar to SublimeText)

                      Built with EM values for responsive design

                      Flexbox friendly

                      Install

                      copy iconCopydownload iconDownload
                      npm install semantic-ui  # Use themes, import build/watch tasks into your own gulpfile.
                      

                      How to close modal on bootstrap after function runs vue3 composition api

                      copy iconCopydownload iconDownload
                      <script>
                      import { Modal } from 'bootstrap';
                      import { ref } from 'vue'
                      
                      export default {
                        setup() {
                          const modalRef = ref(null);
                          const closeModal = () => Modal.getInstance(modalRef.value)?.hide();
                      
                          return { modalRef, closeModal }
                        }
                      }
                      </script>
                      <template>
                        <p>...</p>
                        <div ref="modalRef" class="modal fade" id="staticBackdrop3">
                          ...
                        </div>
                      </template>
                      

                      Cannot load inline font in Electron-Forge/Webpack

                      copy iconCopydownload iconDownload
                      Webpack supports "data:" and "file:" URIs by default.
                      You may need an additional plugin to handle "data:" URIs.
                      TypeError: Cannot read property 'get' of undefined
                      
                          { 
                            loader: 'css-loader', 
                            options: {
                              url: {
                                filter: (url, resourcePath) => {
                                  // resourcePath - path to css file
                      
                                  // Don't handle `data:` urls
                                  if (url.startsWith('data:')) {
                                    return false;
                                  }
                      
                                  return true;
                                },
                              },
                            } 
                          }
                      

                      Meteor + Semantic React

                      copy iconCopydownload iconDownload
                      meteor create mySemanticTest
                      cd mySemanticTest
                      meteor npm install --save react react-dom semantic-ui-react semantic-ui-css
                      meteor
                      
                      import React from 'react';
                      
                      import 'semantic-ui-css/semantic.min.css'
                      import { Button } from 'semantic-ui-react'
                      
                      export const App = () => (
                        <div>
                          <h1>Welcome to Meteor!</h1>
                      
                          <Button>This works</Button>
                        </div>
                      );
                      
                      meteor create mySemanticTest
                      cd mySemanticTest
                      meteor npm install --save react react-dom semantic-ui-react semantic-ui-css
                      meteor
                      
                      import React from 'react';
                      
                      import 'semantic-ui-css/semantic.min.css'
                      import { Button } from 'semantic-ui-react'
                      
                      export const App = () => (
                        <div>
                          <h1>Welcome to Meteor!</h1>
                      
                          <Button>This works</Button>
                        </div>
                      );
                      

                      Create-React-App with TypeScript failing to compile after importing Semantic UI

                      copy iconCopydownload iconDownload
                      <body>
                        <!-- ... other HTML ... -->
                        <!-- ... Load React ... -->
                      
                        <link
                          async
                          rel="stylesheet"
                          href="https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css"
                        />
                      
                        <!-- Load our React component. -->
                        <script src="like_button.js"></script>
                      </body>
                      
                      @font-face {
                        font-family: 'Step';
                        src: url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAA... // this line
                      }
                      
                      "dependencies": {
                      ...,
                      "semantic-ui-css": "git+https://github.com/Semantic-Org/Semantic-UI-CSS.git"
                      },
                      
                      yarn add --dev @semantic-ui-react/css-patch
                      # or
                      npm install --dev @semantic-ui-react/css-patch
                      
                      {
                       "scripts": {
                         "postinstall": "semantic-ui-css-patch"
                       }
                      }
                      
                      @font-face {
                        font-family: 'Step';
                        src: url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAw... // this line
                      }
                      
                      yarn add --dev @semantic-ui-react/css-patch
                      # or
                      npm install --dev @semantic-ui-react/css-patch
                      
                      {
                       "scripts": {
                         "postinstall": "semantic-ui-css-patch"
                       }
                      }
                      
                      @font-face {
                        font-family: 'Step';
                        src: url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAw... // this line
                      }
                      
                      yarn add --dev @semantic-ui-react/css-patch
                      # or
                      npm install --dev @semantic-ui-react/css-patch
                      
                      {
                       "scripts": {
                         "postinstall": "semantic-ui-css-patch"
                       }
                      }
                      
                      @font-face {
                        font-family: 'Step';
                        src: url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAw... // this line
                      }
                      
                      npm install fomantic-ui
                      

                      How do i grab the document name from firebase

                      copy iconCopydownload iconDownload
                      const updatedCloundFunctions = querySnapshot.docs.map((docSnapshot) => ({
                          guid: uuidV4(),
                          // Add Document ID
                          id: docSnapshot.id
                          ...docSnapshot.data(),
                        })
                      );
                      

                      infinite loop using useEffect

                      copy iconCopydownload iconDownload
                        useEffect(() => {
                          ...
                                setCloudFucntions(updatedCloundFunctions);
                          ...
                        }, [cloudFucntions]);
                      
                      cloudFucntions.map((cloudFunction, idx) => {
                        return (
                          <Cards
                            key={idx}
                            cloudFunction={cloudFunction}
                          ></Cards>
                        )
                      
                        useEffect(() => {
                          ...
                                setCloudFucntions(updatedCloundFunctions);
                          ...
                        }, [cloudFucntions]);
                      
                      cloudFucntions.map((cloudFunction, idx) => {
                        return (
                          <Cards
                            key={idx}
                            cloudFunction={cloudFunction}
                          ></Cards>
                        )
                      
                      useEffect(() => {
                        const unsubscribe = firebase.auth()
                          .onAuthStateChanged((user) => setUser(user));
                        return unsubscribe;
                      }, []);
                      
                      useEffect(() => {
                        const unsubscribe = FirestoreService.getCloudFunctionItems(
                          (querySnapshot) => {
                            const updatedCloundFunctions = querySnapshot
                              .docs
                              .map((docSnapshot) => docSnapshot.data());
                            setCloudFucntions(updatedCloundFunctions);
                          },
                          (error) => setError("list-item-get-fail")
                        );
                        return unsubscribe;
                      }, []);
                      
                      import { v4 as uuidV4 } from 'uuid';
                      
                      ...
                      
                      const updatedCloundFunctions = querySnapshot
                        .docs
                        .map((docSnapshot) => ({
                          guid: uuidV4(), // <-- generate your own GUID
                          ...docSnapshot.data(),
                        }));
                      setCloudFucntions(updatedCloundFunctions);
                      
                      ...
                      
                      cloudFucntions.map((cloudFunction) => {
                        return (
                          <Cards
                            key={cloudFunction.guid} // <-- use your GUID here as key
                            cloudFunction={cloudFunction}
                          />
                        );
                      })}
                      
                      Warning: Failed prop type: Invalid prop children supplied to CardContent, expected a ReactNode.
                      
                      Warning: Functions are not valid as a React child.
                      
                      useEffect(() => {
                        const unsubscribe = firebase.auth()
                          .onAuthStateChanged((user) => setUser(user));
                        return unsubscribe;
                      }, []);
                      
                      useEffect(() => {
                        const unsubscribe = FirestoreService.getCloudFunctionItems(
                          (querySnapshot) => {
                            const updatedCloundFunctions = querySnapshot
                              .docs
                              .map((docSnapshot) => docSnapshot.data());
                            setCloudFucntions(updatedCloundFunctions);
                          },
                          (error) => setError("list-item-get-fail")
                        );
                        return unsubscribe;
                      }, []);
                      
                      import { v4 as uuidV4 } from 'uuid';
                      
                      ...
                      
                      const updatedCloundFunctions = querySnapshot
                        .docs
                        .map((docSnapshot) => ({
                          guid: uuidV4(), // <-- generate your own GUID
                          ...docSnapshot.data(),
                        }));
                      setCloudFucntions(updatedCloundFunctions);
                      
                      ...
                      
                      cloudFucntions.map((cloudFunction) => {
                        return (
                          <Cards
                            key={cloudFunction.guid} // <-- use your GUID here as key
                            cloudFunction={cloudFunction}
                          />
                        );
                      })}
                      
                      Warning: Failed prop type: Invalid prop children supplied to CardContent, expected a ReactNode.
                      
                      Warning: Functions are not valid as a React child.
                      
                      useEffect(() => {
                        const unsubscribe = firebase.auth()
                          .onAuthStateChanged((user) => setUser(user));
                        return unsubscribe;
                      }, []);
                      
                      useEffect(() => {
                        const unsubscribe = FirestoreService.getCloudFunctionItems(
                          (querySnapshot) => {
                            const updatedCloundFunctions = querySnapshot
                              .docs
                              .map((docSnapshot) => docSnapshot.data());
                            setCloudFucntions(updatedCloundFunctions);
                          },
                          (error) => setError("list-item-get-fail")
                        );
                        return unsubscribe;
                      }, []);
                      
                      import { v4 as uuidV4 } from 'uuid';
                      
                      ...
                      
                      const updatedCloundFunctions = querySnapshot
                        .docs
                        .map((docSnapshot) => ({
                          guid: uuidV4(), // <-- generate your own GUID
                          ...docSnapshot.data(),
                        }));
                      setCloudFucntions(updatedCloundFunctions);
                      
                      ...
                      
                      cloudFucntions.map((cloudFunction) => {
                        return (
                          <Cards
                            key={cloudFunction.guid} // <-- use your GUID here as key
                            cloudFunction={cloudFunction}
                          />
                        );
                      })}
                      
                      Warning: Failed prop type: Invalid prop children supplied to CardContent, expected a ReactNode.
                      
                      Warning: Functions are not valid as a React child.
                      
                      useEffect(() => {
                        const unsubscribe = firebase.auth()
                          .onAuthStateChanged((user) => setUser(user));
                        return unsubscribe;
                      }, []);
                      
                      useEffect(() => {
                        const unsubscribe = FirestoreService.getCloudFunctionItems(
                          (querySnapshot) => {
                            const updatedCloundFunctions = querySnapshot
                              .docs
                              .map((docSnapshot) => docSnapshot.data());
                            setCloudFucntions(updatedCloundFunctions);
                          },
                          (error) => setError("list-item-get-fail")
                        );
                        return unsubscribe;
                      }, []);
                      
                      import { v4 as uuidV4 } from 'uuid';
                      
                      ...
                      
                      const updatedCloundFunctions = querySnapshot
                        .docs
                        .map((docSnapshot) => ({
                          guid: uuidV4(), // <-- generate your own GUID
                          ...docSnapshot.data(),
                        }));
                      setCloudFucntions(updatedCloundFunctions);
                      
                      ...
                      
                      cloudFucntions.map((cloudFunction) => {
                        return (
                          <Cards
                            key={cloudFunction.guid} // <-- use your GUID here as key
                            cloudFunction={cloudFunction}
                          />
                        );
                      })}
                      
                      Warning: Failed prop type: Invalid prop children supplied to CardContent, expected a ReactNode.
                      
                      Warning: Functions are not valid as a React child.
                      

                      React page refresh when submit while I have a confirmation popup. It means the popup shows up and disappears

                      copy iconCopydownload iconDownload
                      <button class="Button" type='submit'  variant="outlined" onClick={handleClickOpen}><span 
                       class="Button-inner">SEND FEEDBACK</span> </button>
                      
                      const handleClose = (e) => {
                        e.preventDefault();
                        setOpen(false);
                        };
                      
                      const handleClose = () => {
                       setOpen(false);
                       window.location = "/";
                      };
                      

                      Why this is undefined in React?

                      copy iconCopydownload iconDownload
                      class Transfer extends Component{
                      
                      constructor(props) {
                          super(props);
                      
                          this.state = {
                              address : '',
                              amount : ''
                          };
                      
                          this.onSubmit = this.onSubmit.bind(this);
                      }
                      
                      async onSubmit (event) {
                          event.preventDefault();
                          const accounts = await web3.eth.getAccounts();
                          console.log(accounts);
                          console.log(this.state);//Why this is undefined?
                          /*console.log(this.state.address);
                          await token.methods.transfer(this.state.address,this.state.amount).send({
                              from:accounts[0]
                          });*/
                      }
                      
                      async onSubmit() {
                       // body
                      }
                      

                      How to generate a component in React Form onClick

                      copy iconCopydownload iconDownload
                      export default function yourIndexPage({yourprops}) {
                          const [trainingObjects, setTrainingObjects] = useState([]);
                      
                          function addTraining(){
                              const newTrainingObject =  {
                                      time: new Date(), //assuming you want it to default to todays date 
                                      trainingInfo: "your placeholder text"
                                  };
                              setTrainingObjects([...trainingObjects, newTrainingObject]);
                          }
                      
                          //I am assuming your training object will be a list item here so wrapped in <ul>
                          return(
                              <div>
                                  <div className='your list of training things'> (might need to set style as flex and add some padding etc..)
                                      {trainingObjects.length === 0 ? <div/> : trainingObjects.map((trainingObject, index) => (
                                          <YourTrainingObjectComponent trainingObject={trainingObject} trainingItemIndex={index} key={index}/>
                                      ))}
                                  </div>
                                  <Button onClick={() => {addTraining}} />
                              </div>
                          )
                      }
                      

                      How to apply a CSS style sheet to a D3 force-directed graph?

                      copy iconCopydownload iconDownload
                      const node = svg.selectAll(".node")
                        .data(json.nodes)
                        .enter()
                        .append("g")
                        .classed("node", true)
                        .call(force.drag);
                      
                      node.append('rect')
                        .attr('x', -50)
                        .attr('y', -30)
                        .attr('width', 100)
                        .attr('height', 60)
                        .style('fill', 'blue');
                      
                      node.append('text')
                        .classed('ui ...', true)
                        .text('NODE')
                        .attr('alignment-baseline', 'middle')
                        .attr('text-anchor', 'middle')
                        .style('fill', 'white');
                      
                      
                      const node = svg.selectAll(".node")
                        .data(json.nodes)
                        .enter()
                        .append("g")
                        .classed("node", true)
                        .call(force.drag);
                      
                      node.append('rect')
                        .attr('x', -50)
                        .attr('y', -30)
                        .attr('width', 100)
                        .attr('height', 60)
                        .style('fill', 'blue');
                      
                      node.append('text')
                        .classed('ui ...', true)
                        .text('NODE')
                        .attr('alignment-baseline', 'middle')
                        .attr('text-anchor', 'middle')
                        .style('fill', 'white');
                      
                      

                      Community Discussions

                      Trending Discussions on Semantic-UI
                      • How to close modal on bootstrap after function runs vue3 composition api
                      • Cannot load inline font in Electron-Forge/Webpack
                      • Meteor + Semantic React
                      • Create-React-App with TypeScript failing to compile after importing Semantic UI
                      • How do i grab the document name from firebase
                      • infinite loop using useEffect
                      • React page refresh when submit while I have a confirmation popup. It means the popup shows up and disappears
                      • Why this is undefined in React?
                      • How to generate a component in React Form onClick
                      • How to apply a CSS style sheet to a D3 force-directed graph?
                      Trending Discussions on Semantic-UI

                      QUESTION

                      How to close modal on bootstrap after function runs vue3 composition api

                      Asked 2022-Apr-11 at 22:35

                      I am running a vue3 web app and I have bootstrap 5 running perfectly after I installed it using npm install bootstrap.

                      I am running a function that works fine but I'd like the modal to be closed once the function is run. Below is my code:

                          <template>    
                          <p data-bs-toggle="modal" data-bs-target="#staticBackdrop3">
                                          <a class="btn btn-primary my-2">Upload new property</a>
                                        </p>
                                  <!-- Modal for property upload -->
                              <div class="modal fade" id="staticBackdrop3" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                  <div class="modal-content">
                                    <div class="modal-header">
                                      <h5 class="modal-title" id="staticBackdropLabel">Add property to the list</h5>
                                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                              
                                      <div class="modal-body">
                                      <form @submit.prevent="saveToDatabase">
                                        <label> Property Name</label>
                                        <input
                                          type="text"
                                          v-model="name"
                                          required
                                          placeholder="e.g. my house"
                                        />
                                        <label>Area</label>
                                        <select v-model="area" required>
                                          <option value="" selected disabled="">Select an option</option>
                                          <option value="Island">Lagos Island</option>
                                          <option value="Mainland">Lagos Mainland</option>
                                        </select>
                                        <label>Number of Beds</label>
                                        <input type="number" v-model="beds" required placeholder="e.g. 4" />
                                        <label>Price Per Night (NGN)</label>
                                        <input
                                          type="text"
                                          v-model="price"
                                          required
                                          placeholder="e.g. 120,000"
                                        />
                                       
                                        <div class="progressBtns">
                              
                                          <button class="ui button fluid blue" @click="saveToDatabase">
                                            Save
                                          </button>
                                        </div>
                                      </form>
                                    </div>
                                    <div class="modal-footer">
                                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                     
                                    </div>
                                  </div>
                                </div>
                              </div>
                          </template>
                      
                      <script>
                      import { ref } from "vue";
                      import { projectDatabase, projectAuth } from "../../firebase/config";
                      
                      export default {
                        setup() {
                          
                          const name = ref("");
                          const beds = ref(0);
                          const area = ref("");
                          const price = ref("");
                          
                      
                      
                          const saveToDatabase = async () => {
                           
                            var send = Ref.push({
                              name: name.value,
                              area: area.value,
                              bed: beds.value,
                              price: price.value,
                              
                            });
                            send;
                            Ref.child(send.key).child("id").set(send.key);
                           // close modal
                          
                          };
                      
                        
                      
                          return {
                       
                            name,
                            area,
                            price,
                            beds,
                           
                            saveToDatabase,
                            
                          };
                        },
                      };
                      </script>
                      

                      Below is my main.js :

                      import { createApp } from 'vue'
                      import App from './App.vue'
                      import router from './router'
                      import { projectAuth } from './firebase/config'
                      import "bootstrap/dist/css/bootstrap.css";
                      import 'semantic-ui-css/semantic.min.css'
                      import './assets/main.css'
                      let app
                      
                      projectAuth.onAuthStateChanged(()=>{
                          if(!app){
                              app =   createApp(App).use(router).mount('#app')
                          }
                      })
                      import "bootstrap/dist/js/bootstrap.js"
                      

                      Is there a way to programmatically close the modal once the saveToDatabase function is run?

                      ANSWER

                      Answered 2022-Apr-11 at 22:35
                      1. Get modal instance from DOM: Modal.getInstance().
                      2. Use template refs to interact with DOM in Vue.

                      Generic example:

                      <script>
                      import { Modal } from 'bootstrap';
                      import { ref } from 'vue'
                      
                      export default {
                        setup() {
                          const modalRef = ref(null);
                          const closeModal = () => Modal.getInstance(modalRef.value)?.hide();
                      
                          return { modalRef, closeModal }
                        }
                      }
                      </script>
                      <template>
                        <p>...</p>
                        <div ref="modalRef" class="modal fade" id="staticBackdrop3">
                          ...
                        </div>
                      </template>
                      

                      Source https://stackoverflow.com/questions/71828440

                      Community Discussions, Code Snippets contain sources that include Stack Exchange Network

                      Vulnerabilities

                      No vulnerabilities reported

                      Install Semantic-UI

                      Semantic UI includes an interactive installer to help setup your project. Check out our integration wiki for more options. Although some components will work in IE9, grids and other flexbox components are not supported by IE9 and may not appear correctly.
                      For more details on setup visit our getting started guide.
                      To learn more about theming please read our theming guide
                      Last 2 Versions FF, Chrome, Safari Mac
                      IE 11+
                      Android 4.4+, Chrome for Android 44+
                      iOS Safari 7+
                      Microsoft Edge 12+

                      Support

                      Please help us keep the issue tracker organized. For technical questions that do not include a specific JSFiddle test case (bug reports), or feature request please use StackOverflow to find a solution. Visit our contributing guide for more on what should be posted to GitHub Issues.

                      DOWNLOAD this Library from

                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
                      over 430 million Knowledge Items
                      Find more libraries
                      Reuse Solution Kits and Libraries Curated by Popular Use Cases
                      Explore Kits

                      Save this library and start creating your kit

                      Explore Related Topics

                      Share this Page

                      share link
                      Reuse Pre-built Kits with Semantic-UI
                      Consider Popular Theme Libraries
                      Try Top Libraries by Semantic-Org
                      Compare Theme Libraries with Highest Support
                      Compare Theme Libraries with Highest Quality
                      Compare Theme Libraries with Highest Security
                      Compare Theme Libraries with Permissive License
                      Compare Theme Libraries with Highest Reuse
                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
                      over 430 million Knowledge Items
                      Find more libraries
                      Reuse Solution Kits and Libraries Curated by Popular Use Cases
                      Explore Kits

                      Save this library and start creating your kit

                      • © 2022 Open Weaver Inc.