@leonardodipace/ui v2.1.3
@leonardodipace/ui
A simple Svelte component library built on top of bits-ui
and TailwindCSS
.
Prerequisites
You only need to configure TailwindCSS in your project and you're good to go!
Installation
To install the component library, simply install it with the following command
npm install @leonardodipace/ui
To make the library work, you also need to put the following code in your tailwind.config.js
file. Please note that you can customize everything according to your needs!
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {
colors: {
background: "#020617",
foreground: "#f8fafc",
foregroundMuted: "#94a3b8",
primary: "#34d399",
primaryForeground: "#020617",
warning: "#fbbf24",
warningForeground: "#020617",
error: "#f87171",
errorForeground: "#020617",
panel: "#090e1f",
panelForeground: "#f8fafc",
overlay: "#020617",
overlayForeground: "#f8fafc",
},
},
},
plugins: [],
};
Finally, add the following code to your app.css:
/* TailwindCSS */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Base layer */
@layer base {
html {
@apply bg-background;
@apply text-foreground;
}
}
/* Utilities layer */
@layer utilities {
.animated {
@apply transition-all;
@apply before:absolute;
@apply before:pointer-events-none;
@apply before:transition-all;
@apply after:absolute;
@apply after:pointer-events-none;
@apply after:transition-all;
}
.hoverable {
@apply relative;
@apply overflow-hidden;
@apply after:content-[""];
@apply after:absolute;
@apply after:inset-0;
@apply after:pointer-events-none;
@apply after:bg-current;
@apply after:opacity-0;
@apply hover:after:opacity-5;
}
.clickable {
@apply cursor-pointer;
@apply active:scale-95;
}
}
Usage
Simply import what you need and use it, it's as simple as that!
<script lang="ts">
import { Button } from "@leonardodipace/ui";
</script>
<Button>Hello world!</Button>
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago