AlpineJS Components

AlpineJS Components in Codebase

Codebase has several component examples such as dropdowns, tabs and modals, that require JavaScript for their functionality. This functionality can by supplied by AlpineJS.

Note: Neither Codebase nor these docs include AlpineJS. You will need to source the latest version for yourself from https://github.com/alpinejs/alpine, or link to it from a CDN (e.g. https://www.jsdelivr.com/package/npm/alpinejs).

Simple HTML setup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Codebase</title>
  <link rel="stylesheet" href="dist/codebase.css">
  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
</head>
<body>
  
  <h1>Hello world</h1>

</body>
</html>

The example above links to the default codebase.css. If you want to use Codebase with light and dark styles, you will need to link to codebase-l-d.css instead, and use a theme switcher JavaScript to toggle .theme-dark / .theme-light in your HTML <body> tag.

The following are several examples of Codebase components that can be powered by Alpine:

Documentation