Installation and Usage

Manual Installation

JSXPine is not a UI library. As mentionned in introduction, we provide a set of JSX components boosted with Alpine.js.

Those components can be copied simply by following these steps below:

1. Going to the corresponding page you want ;
2. In installation part, click on Manual in the tab view, the source code will be showed ;
3. Click on Copy button et voilà !

Configuration

You have to know what JSXPine is composed.

Like Shadcn, the main entry point with your application is a file named: component.json.

This file contains information about propreties which define how components from JSXPine will be connected to your project.

These propreties are:

1. $schema: It's an url of the schema propreties of your component.json.

2. tailwind: Because JSXPine uses tailwind for the css part, this proprety handles two subpropreties.

   • config.js: This one is about your tailwind config file, ie where it's located.

   • css: This proprety's value is your global css file's path. It will applied everything set in this file to your components' style.

3. aliases: This proprety handles 3 crucial subpropreties, which are highly coupled between them:

   • components: This is the path of the folder where all components will be moved when added via cli (see here for more details). This value is also to be set in your tsconfig's path array.

   • scripts: Since JSXPine tries to use javascript in a better way, it suggests a folder called scripts when you can put all your logic, utilities or whatever you want as js code for your project. By default, it contains a subfolder named alpine. Therefore, this key is the path to this folder.

   • alpine: It's the path of the folder where everything related to alpinejs will be put. JSXPine uses advanced features of alpinejs, so this folder is intended to work with three of them.

     • -

       Data: A folder containing every functions register as data in alpinejs. See this link to learn more.

     • -

       Directive: Will contain custom directives in alpinejs.Cgeck this link about directives.

     • -

       Magic: Will contain custom magic functions.Check this link about magic.

Dependencies

Some dependencies has been picked to best suit with JSXPine and its concept.

This section's goal is to make you understand why these ones have been selected.

• @kitajs/jtml: This package allows you tu write JSX in your application. Once installed, any Node/Deno/Bun can interpret your function component as html template. It provides a scan feature that tells you if your template is safe from XSS attacks.

• tailwindcss: Because JSXPine is based on tailwindcss classes, this one has to be part of your project.

• alpine.js: As same as tailwindcss, this one has to be part of your project in order to use all alpinejs features.