0.0.3 • Published 11 months ago
@emitra-labs/ui v0.0.3
Emitra UI
A Svelte UI library designed to simplify your web development. It offers a collection of customizable, performance-optimized components that integrate seamlessly with Svelte applications.
Getting Started
This library expects you have setup a SvelteKit project. Here's how to do so:
pnpm create svelte my-project
cd my-project
pnpm install
You also need to install TailwindCSS.
pnpm add -D tailwindcss postcss autoprefixer
pnpm tailwindcss init -p
Let's continue by installing the library.
pnpm add -D @emitra-labs/ui
Update tailwind.config.js
file:
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/@emitra-labs/ui/dist/**/*.{js,svelte}'
],
theme: {
extend: {}
},
plugins: [],
presets: [require('@emitra-labs/ui/preset.cjs')]
};
Update src/routes/+layout.svelte
file:
<script>
import { EmitraProvider } from '@emitra-labs/ui';
import '@emitra-labs/ui/styles.css';
</script>
<EmitraProvider>
<slot />
</EmitraProvider>
That's it. Now, you can start using the components like this:
<script>
import { Button } from '@emitra-labs/ui';
</script>
<Button>Hello Button</Button>