Alpine

Neuralytics - Design System

To use it correctly, you have to install some dependencies:

pnpm i -D @neuralytics/alpine-ds tailwindcss autoprefixer @egoist/tailwindcss-icons
pnpm i class-variance-authority @iconify-json/mdi

After that, you have to init your tailwindcss configuration:

npx tailwindcss init

And add the following lines to your tailwind.config.js: TO DO : Export tailwind config

const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{vue,ts,mdx}"],
  theme: {
    fontSize: {
      sm: ["12px", "16px"],
      base: ["14px", "20px"],
      lg: ["16px", "24px"],
      xl: ["18px", "28px"],
    },
    colors: {
      black: "#000000",
      white: "#ffffff",
      transparent: "transparent",
      inherit: "inherit",
      // brand
      brand: {
        100: "color-mix(in srgb, var(--color-brand) 10%, white)",
        200: "color-mix(in srgb, var(--color-brand) 30%, white)",
        300: "color-mix(in srgb, var(--color-brand) 50%, white)",
        400: "color-mix(in srgb, var(--color-brand) 70%, white)",
        500: "var(--color-brand)",
        600: "color-mix(in srgb, var(--color-brand), black 10%)",
        700: "color-mix(in srgb, var(--color-brand), black 30%)",
        800: "color-mix(in srgb, var(--color-brand), black 50%)",
        900: "color-mix(in srgb, var(--color-brand), black 70%)",
      },
      // neutral
      gray: {
        50: "#fafafa",
        100: "#f5f5f5",
        200: "#e5e5e5",
        300: "#d4d4d4",
        400: "#a3a3a3",
        500: "#737373",
        600: "#525252",
        700: "#404040",
        800: "#262626",
        900: "#171717",
      },
      // red
      red: {
        100: "#fee2e2",
        200: "#fecaca",
        300: "#fca5a5",
        400: "#f87171",
        500: "#ef4444",
        600: "#dc2626",
        700: "#b91c1c",
        800: "#991b1b",
        900: "#7f1d1d",
      },// amber
      yellow: {
        100: "#fef3c7",
        200: "#fde68a",
        300: "#fcd34d",
        400: "#fbbf24",
        500: "#f59e0b",
        600: "#d97706",
        700: "#b45309",
        800: "#92400e",
        900: "#78350f",
      },
      // blue
      blue: {
        100: "#dbeafe",
        200: "#bfdbfe",
        300: "#93c5fd",
        400: "#60a5fa",
        500: "#3b82f6",
        600: "#2563eb",
        700: "#1d4ed8",
        800: "#1e40af",
        900: "#1e3a8a",
      },
      // green
      green: {
        100: "#dcfce7",
        200: "#bbf7d0",
        300: "#86efac",
        400: "#4ade80",
        500: "#22c55e",
        600: "#16a34a",
        700: "#15803d",
        800: "#166534",
        900: "#14532d",
      }
    },
    extend: { boxShadow: { "inner-md": "inset 0px 4px 6px rgba(0, 0, 0, 0.1)", }, }
  },
  plugins: [
    iconsPlugin({
      // Collections: https://icones.js.org/
      collections: getIconCollections(["mdi"]),
    })
  ],
}

Add those lines to your main css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

and import the @neuralytics/alpine-ds style to your main file:

import "@neuralytics/alpine-ds/css"

To use @neuralytics/alpine-ds components, follow the examples below:

import { AlpineButton } from "@neuralytics/alpine-ds"

You want more ?

Do not worry, it's a V0 ! We are working on it to provide you more components and features. Thank you for your patience and your interest in our design system.

Love. P-a ❤️