Drupal Radix Theme
  • Introduction
    • Overview & Support
  • Installation
    • Requirements
    • Getting Started
    • Setup with ddev
  • Understanding Radix
    • Individual files and directories
    • Bootstrap Build
    • Bootswatch
  • Working with the components
    • Components: Intro
    • Components: A deep dive
    • An example component
    • The drupal-radix-cli
    • Copy and modify a component
  • Components
    • Accordion
    • Alerts
    • Badge
    • Block
    • Buttons
    • Button Group
    • Breadcrumb
    • Card
    • Carousel
    • Close button
    • Comment
    • Collapse
    • Details
    • Dropdown menu
    • Field
    • Field Comment
    • Fieldset
    • Figure
    • Form
    • Form: Element
    • Form Element Label
    • Form Element: Radio Checkbox
    • Heading
    • HTML
    • Image
    • Input
    • List group
    • Local Tasks
    • Media
    • Modal
    • Nav
    • Nav Item
    • Navbar
    • Navbar Brand
    • Node
    • Offcanvas
    • Page
    • Page: Content
    • Page: Footer
    • Page: Navigation
    • Page: Title
    • Pagination
    • Progress
    • Radios
    • Region
    • Select
    • Spinners
    • Table
    • Taxonomy
    • Textarea
    • Toasts
    • Tooltips
    • User
    • Views: view
    • Views: view--grid
    • Views: view--table
    • Views: view--unformatted
  • Misc
    • Migration and upgrading
    • Roadmap
    • Credits & Contributions
Powered by GitBook
On this page
  • Features
  • Installation
  • Usage
  • Help

Was this helpful?

  1. Working with the components

The drupal-radix-cli

The helper npm package to maintain your Radix components

PreviousAn example componentNextCopy and modify a component

Last updated 1 year ago

Was this helpful?

Now that we learned how a component works in a theme in Drupal, let's make our lives easier with a handy little npm package called:

You can check the GitHub repository to learn more about it but in short, Radix Drupal CLI is an interactive prompt designed to manage components. It allows for easy listing, adding and generating of components to your Drupal theme, leveraging the power of the Radix base theme components.

Note: that this CLI uses your own local Radix theme as a source for components. If you want to add components from the latest version of Radix, you must first update your local Radix theme.

Features

  • List Components: Display all available Radix components.

  • Add Components: Add Radix components to your theme, automatically replacing any existing ones.

  • Generate Components: Generate a new component folder with all the necessary files.

Installation

Ensure you have Node.js and npm installed on your system. Install the CLI tool within your subtheme or globally via npm:

npm install drupal-radix-cli

Note: You may also install the package globally: npm install -g drupal-radix-cli

Usage

Once installed, you can use the CLI tool with the following commands:

List Components

To list all Radix components available in the default directory:

drupal-radix-cli list

Add Components

To add a Radix component to your current theme:

drupal-radix-cli add

Use the --radix-path flag to specify a custom Radix components directory if your Radix base theme is installed in a non-standard location:

drupal-radix-cli add --radix-path ../../radix/components

Generate Components

To generate a clean new component folder within your subtheme components directory:

drupal-radix-cli generate

This will generate a new component folder with the following files:

  • [component-name]/[component-name].twig

  • [component-name]/[component-name].component.yml

  • [component-name]/[component-name].scss

  • [component-name]/_[component-name].js

  • [component-name]/README.md

Make sure to remove any unwanted files and update your files accordingly.

Help

Display usage instructions:

drupal-radix-cli --help

Or simply drupal-radix-cli.

drupal-radix-cli
Drupal Radix 6
A demo of drupal-radix-cli in action