@jrmc/edge-components

edge components

The most popular, free and open-source Tailwind CSS component library in edge template engine with daisyUI and Alpine.js

Inspired by edge-uikit

edge-components.jrmc.dev

Github

• Alert
• Avatar
• Badge
• Button
• Card
• Carousel
• Chat bubble
• Drawer
• Dropdown
• Modal
• Pagination
• Progress
• Tab
• Table
• Toast
• Tooltip
• Loading

Form

• Input text
• Input number
• Input date
• Input email
• Input hidden
• Input checkbox
• Input radio
• File upload
• Select
• Textarea
• Label
• Error
• Control

The components not shown here represent no gain over their HTML representation.

If your component becomes too complex, it may make more sense to use HTML directly as described in the daisyUI documentation.

Steps

• essential Components
• page demo
• package adonisjs
• alpine.js support

Setup

The first step is to install the package from the npm registry.

npm i @jrmc/edge-components

The next step is to register the UI Kit as an Edge plugin.

Sample /start/views.ts

import View from '@ioc:Adonis/Core/View'
import jrmc from '@jrmc/edge-components'

View.use(jrmc)

If your first rendering is not functionnal, you can manually render with View.getRenderer()

In AdonisJS, you can do it inside a preload file. Add "./start/views" in .adonisrc.json on preloads section

Tailwind setup

On your project directory, install the dependencies:

# install dependencies
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# create postcss config file
touch postcss.config.js

# also install postcss-load
npm i -D postcss-loader

# create tailwind config file
npx tailwindcss init

Set the postcss.config.js.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Also, make tailwind configs minumum in tailwind.config.js

const edgeComponent = require('@jrmc/edge-components/build/tailwind.config').default

module.exports = {
  mode: 'jit',
  content: ['./resources/views/**/*.edge', ...edgeComponent.content],
  plugins: [...edgeComponent.plugins],
}

Add css base in resources/css/app.css

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

And enabled postcss in Encore (webpack.config.js)

Encore.enablePostCssLoader()

Alpine setup

npm i -D alpinejs

In AdonisJS, you can write the following code block inside the resources/js/app.js file.

import Alpine from 'alpinejs'

Alpine.start()