aillis-ui v0.0.10

Get Start

npm install ailli-ui

tailwind.config.ts
/** @type {import('tailwindcss').Config} */
import { aillisTokens } from "aillis-ui";

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: aillisTokens,
  },
};

index.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "aillis-ui/dist/style.css";
@import "tailwindcss/utilities";

App.tsx

import { useState } from "react";
import { Button, useToastStore } from "aillis-ui";

function App() {
  const [count, setCount] = useState(0);
  const { showToast } = useToastStore();

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={() => setCount(count + 1)}>Click me</Button>
      <Button
        onClick={() =>
          showToast({
            title: "Hello, world!",
            message: "This is a toast message.",
            type: "success",
          })
        }
      >
        Toast Click me
      </Button>
    </div>
  );
}

export default App;

main.tsx(index.tsx)

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { AillisUIProvider } from "aillis-ui";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <AillisUIProvider>
      <App />
    </AillisUIProvider>
  </React.StrictMode>
);

Publish Package

bun run prepublish
npm login
npm publish