PHPackages                             smithsonian/castle\_components - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. smithsonian/castle\_components

AbandonedArchivedDrupal-module[Utility & Helpers](/categories/utility)

smithsonian/castle\_components
==============================

Drupal component library using TailwindCSS and AlpineJS.

35Twig

Since Mar 8Pushed 2y ago5 watchersCompare

[ Source](https://github.com/Smithsonian/drupal-castle-components)[ Packagist](https://packagist.org/packages/smithsonian/castle_components)[ RSS](/packages/smithsonian-castle-components/feed)WikiDiscussions main Synced yesterday

READMEChangelogDependenciesVersions (2)Used By (0)

Castle Components
=================

[](#castle-components)

Drupal component library using TailwindCSS and AlpineJS. View the [online documentation](https://components.saam.media/).

Warning

This module is under active development, and is not ready to be used in production.

Install
-------

[](#install)

Install as any Drupal module. It's recommended to use composer.

```
composer install smithsonian/castle_components
```

Extend
------

[](#extend)

To use the components in your theme you'll need to include the module's libraries in your theme's info.yml file.

For example:

```
# my_theme.info.yml
name: my_theme
type: theme
libraries:
  - castle_components/scripts
  - castle_components/tailwind
dependencies:
  - castle_components:castle_components
```

Note: Including the `castle_components/tailwind` library will use the package's default TailwindCSS styles. Normally, you'll want to exclude this library, and instead, create a Tailwind config in your custom theme to customize the way components are styled in your theme. An example config:

```
// tailwind.config.js
const colors = require('tailwindcss/colors')
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    '../../../modules/contrib/castle_components/components/**/*.twig',
    './templates/**/*.twig',
  ],
  darkMode: 'selector',
  theme: {
    colors: {
      primary: colors.blue,
      secondary: colors.slate,
      accent: colors.red,
      success: 'hsl(160, 84%, 39%)',
      warning: 'hsl(38, 92%, 50%)',
      error: 'hsl(0, 84%, 60%)',
    }
  },
  plugins: [require('@tailwindcss/typography')],
}
```

Usage
-----

[](#usage)

Once configured you can use components in your Drupal theme using Twig [embed](https://twig.symfony.com/doc/3.x/tags/embed.html).

```
{% embed 'castle_components:button' with { size: 'large' } only %}
  {% block content %}
    This is a Castle button
  {% endblock %}
{% endembed %}
```

or Twig [include](https://twig.symfony.com/doc/3.x/tags/include.html)

```
{{ include ('castle_components:icon', { 'name': 'download' }, with_context=false ) }}
```

AlpineJS
--------

[](#alpinejs)

Many of the Castle components use AlpineJS for interactivity, transitions, and event handling.

You'll want to add the following style to you're HTML head to prevent unstyled components appearing before Alpine is initialized.

```

  [x-cloak] {
    display: none !important;
  }

```

Visual Studio Code
------------------

[](#visual-studio-code)

For autocomplete helpers copy the `.vscode/castle-components.code-snippets` Snippets file from the module directory into your VSCode project root. More information about [creating your own snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets).

Development
-----------

[](#development)

###  Health Score

15

—

LowBetter than 3% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity21

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/4057e5277a31e748071a770ab95c977eac626a876ac8b130fc988d5cbfd0fc33?d=identicon)[ericpugh](/maintainers/ericpugh)

![](https://www.gravatar.com/avatar/a7db5f6429bbd3f1d6eea35b0629de4ab46f5364e336532a043f1bffe5296840?d=identicon)[smithsonian](/maintainers/smithsonian)

---

Top Contributors

[![ericpugh](https://avatars.githubusercontent.com/u/1176767?v=4)](https://github.com/ericpugh "ericpugh (23 commits)")

### Embed Badge

![Health badge](/badges/smithsonian-castle-components/health.svg)

```
[![Health](https://phpackages.com/badges/smithsonian-castle-components/health.svg)](https://phpackages.com/packages/smithsonian-castle-components)
```

###  Alternatives

[j42/laravel-firebase

A Firebase port for Laravel (4.2+)

513.7k](/packages/j42-laravel-firebase)[vesoft-inc/nebula-php

A nebula client for PHP

112.3k](/packages/vesoft-inc-nebula-php)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)