Single Directory Component Structure

Overview

Tailpine implements a comprehensive Single Directory Component (SDC) architecture where every user interface element is built as a self-contained unit. This modular approach ensures components remain independent, reusable, and maintainable, creating a cleaner and more scalable front-end development experience in Drupal.

Component Structure

Each component in Tailpine follows a standardized file structure:

text
componentName/
├── componentName.component.yml
├── componentName.css
├── componentName.js
├── componentName.default.story.yml
├── componentName.twig
└── componentName.png

File Definitions

1. Component Metadata (.component.yml)

Defines the component's metadata, including name, description, properties (props), and slots. This file informs Drupal about the data the component accepts and how it can be reused across templates.

2. Twig Template (.twig)

Contains the HTML structure that controls the visual layout and presentation. The template takes data or "props" defined in the .component.yml file and renders them into structured HTML elements using Twig syntax. It serves as the visual blueprint, determining how each piece of data is displayed—wrapping titles in headings, showing images with specific classes, or placing buttons within containers. This file bridges the logical data defined in YAML with the styled visual output in the browser.

3. Styles (.css)

Holds component-specific CSS styles. Developers can utilize Tailwind's @apply directive or custom CSS utilities to style individual components while maintaining scoped and modular styling.

4. Script (.js)

Manages interactivity powered by Alpine.js or vanilla JavaScript. Enables lightweight dynamic behaviors including animations, toggles, and reactive UI updates.

5. Story Data (.default.story.yml)

Provides example content for component visualization in Storybook or UI Pattern Libraries. Helps display components in isolation with placeholder data for development and testing purposes.

6. Preview Image (.png)

Optional image used for visual identification in pattern libraries or documentation, demonstrating the component's appearance in the final design.

Benefits

This unified component structure enables developers to focus on building one component at a time while keeping logic, styling, and presentation closely linked. Tailpine's modular architecture promotes:

  • Cleaner code organization and maintenance

  • Faster prototyping and development cycles

  • Seamless collaboration between developers and designers

  • Enhanced reusability across projects and components

  • Consistent user interface patterns throughout the application