high-five/craft-hyperdrive

Light-speed Craft CMS development

dev-main 2025-09-18 12:11 UTC

Requires

• php: ^8.4.0
• craftcms/cms: ^5.0.0
• high-five/craft-base: dev-main

Requires (Dev)

• craftcms/phpstan: dev-main
• symplify/easy-coding-standard: ^12.6

MIT

• Harm Putman

• ui
• cms
• components
• Craft
• craftcms
• craft-plugin
• tailwind
• DaisyUI
• atomic-design

README

Light-speed Craft CMS development

craft-hyperdrive is a component library for Craft CMS that applies atomic design principles and leverages Tailwind CSS for styling. It’s built to help developers ship scalable, consistent, and maintainable front-end interfaces at warp speed.

✨ Features

• 🧩 Atomic Design Structure — Atoms, molecules, organisms and templates clean, reusable UI.
• 🎨 Tailwind CSS Ready — Utility-first styling out of the box, fully customizable.
• ⚡ Light-speed Craft CMS Development — Drop in pre-built components and accelerate your workflow.
• 🔌 Twig Extension Included — Render atoms, molecules, organisms, or particles with simple helpers.
• 🛠 Overridable Components — Project-level overrides let you customize or extend components without forking.
• 🧪 Safe Fallbacks — Missing components log a warning instead of breaking your templates.

🔧 Requirements

• Craft CMS ^5.0
• Tailwind CSS ^3.0
• PHP ^8.4

📦 Installation

composer require high-five/craft-hyperdrive
php craft plugin/install hyperdrive

Add component paths to your Tailwind config:

// tailwind.config.js
module.exports = {
  content: [
    './templates/**/*.twig',
    './vendor/high-five/craft-hyperdrive/src/templates/**/*.twig',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

🚀 Getting Started

Use Components with Twig Helpers

Atoms

{{ atom('button', { label: 'Submit', url: '/submit', style: 'primary' }) }}

Molecules

{{ molecule('card', {
  title: 'Card Title',
  body: 'Card body text goes here.',
  image: entry.image.one()
}) }}

Organisms

{{ organism('hero', {
  heading: entry.title,
  subheading: entry.teaser,
  cta: [{ label: 'Learn More', url: entry.url }]
}) }}

📂 Overriding & Custom Components

To override or define new components, create a hyperdrive/ folder in your project’s templates:

templates/
└── hyperdrive/
    ├── atoms/
    │   └── button.twig            # overrides vendor button
    ├── molecules/
    │   └── card.twig              # overrides vendor card
    └── organisms/
        └── newsletter-signup.twig # custom project-only component