Intro
This article provides some tech details for integrating @specialdoom/proi-ui in your new or existing svelte project.
Agenda
- Introduction
- Creating a svelte project. Integration of @specialdoom/proi-ui
- Demo
Introduction
I am aware of the multiple UI components libraries provided by the open source community. I mean look at this following @MadeWithSvelte category, it has 2 pages 😲. So, we can admit that the frontend community is trying to consider @svelte as part of their tech stack by improving and updating the svelte resources, not only the UI ones.
Here I am, part of the community, presenting the UI lib I have developed during the past years and it's integration. Starting with a very simple and naive library to a third version including a redesigned process using Figma and it's components approach.
Prerequisites
- JavaScript, HTML, CSS
- Svelte
- Visual Studio Code
Code
Let's create a new svelte project by running the following command provided by svelte docs.
npm create vite@latest appname -- --template svelte
cd appname
npm install
Now we should have a simple svelte app and we are ready to develop some amazing features for it. To integrate @specialdoom/proi-ui, first, we need to install it in our project by running the npm install command
npm i @specialdoom/proi-ui
Second step of the integration is to import css
variables in our main app file
// App.js
import App from './App.svelte'
import './global.css';
import '@specialdoom/proi-ui/variables.css';
const app = new App({
target: document.getElementById('app')
})
export default app;
or in our global css
file.
/* global.css */
@import "@specialdoom/proi-ui/variables.css";
Right now everything is up and ready and we can use the provided components like
// App.svelte
<script>
import { Button } from '@specialdoom/proi-ui';
function handleClick() {
console.log('[Button] click...');
}
</script>
<Button variant="primary" on:click={handleClick}>
Click here
</Button>
Demo
Top comments (0)