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