diff --git a/inc/Framework/ComponentLoader.php b/inc/Framework/ComponentLoader.php
new file mode 100644
index 00000000..43d1bcb4
--- /dev/null
+++ b/inc/Framework/ComponentLoader.php
@@ -0,0 +1,564 @@
+<?php
+/**
+ * Component loader for resolving and rendering PHP component partials.
+ *
+ * Resolves components from child theme, parent theme, then plugin paths.
+ * Components are render-only PHP files that receive data as arguments and output HTML.
+ *
+ * @package rtCamp\Theme\Elementary
+ */
+
+declare( strict_types = 1 );
+
+namespace rtCamp\Theme\Elementary\Framework;
+
+/**
+ * Class ComponentLoader
+ *
+ * @since 1.0.0
+ */
+class ComponentLoader {
+
+	/**
+	 * Resolved component metadata cache.
+	 *
+	 * @var array<string, array<string, mixed>>
+	 */
+	private static array $component_data_cache = [];
+
+	/**
+	 * Render a component by name.
+	 *
+	 * Resolves the component file from child theme, parent theme, or plugin paths,
+	 * then includes it with the provided arguments available in scope.
+	 *
+	 * @param string               $name    Component name (e.g. 'Button', 'Card').
+	 * @param array<string, mixed> $args    Arguments to pass to the component.
+	 * @param array<string, mixed> $options {
+	 *     Optional. Resolution and asset enqueue options.
+	 *
+	 *     @type string $priority Deprecated. Ignored; components always resolve from child/parent theme before plugin paths.
+	 *     @type bool   $script   Whether to enqueue the component's script. Default determined by filter.
+	 *     @type bool   $style    Whether to enqueue the component's style. Default determined by filter.
+	 * }
+	 *
+	 * @return void
+	 */
+	public static function render( string $name, array $args = [], array $options = [] ): void {
+
+		$options   = self::get_render_options( $options );
+		$component = self::get_component_data( $name, $options );
+
+		if ( false === $component ) {
+			return;
+		}
+
+		$options['component'] = $component;
+
+		do_action( 'elementary_theme_before_get_component', $name, $args, $options );
+
+		self::require_component_file( (string) $component['file'], $args, $options );
+
+		self::enqueue_component_assets( $component, $options );
+
+		do_action( 'elementary_theme_after_get_component', $name, $args, $options );
+	}
+
+	/**
+	 * Get normalized render options.
+	 *
+	 * @param array<string, mixed> $options Render options.
+	 *
+	 * @return array<string, mixed> Render options with enqueue settings resolved.
+	 */
+	private static function get_render_options( array $options ): array {
+		/**
+		 * Filters the default enqueue settings for elementary theme components.
+		 *
+		 * This filter allows developers to modify whether scripts and styles
+		 * should be enqueued by default for the theme component.
+		 *
+		 * @param array<string, bool> $defaults {
+		 * Default enqueue settings.
+		 *
+		 * @type bool $script Whether to enqueue the component's script. Default true.
+		 * @type bool $style  Whether to enqueue the component's style. Default true.
+		 * }
+		 */
+		$enqueue = apply_filters(
+			'elementary_theme_component_enqueue_defaults',
+			[
+				'script' => true,
+				'style'  => true,
+			]
+		);
+
+		if ( ! is_array( $enqueue ) ) {
+			$enqueue = [];
+		}
+
+		$enqueue = wp_parse_args(
+			$options,
+			$enqueue
+		);
+
+		$options['script'] = ! empty( $enqueue['script'] );
+		$options['style']  = ! empty( $enqueue['style'] );
+
+		return $options;
+	}
+
+	/**
+	 * Get the rendered HTML of a component as a string.
+	 *
+	 * Uses output buffering to capture the component output instead of
+	 * sending it directly to the browser.
+	 *
+	 * @param string               $name    Component name (e.g. 'Button', 'Card').
+	 * @param array<string, mixed> $args    Arguments to pass to the component.
+	 * @param array<string, mixed> $options {
+	 *     Optional. Resolution options.
+	 *
+	 *     @type string $priority Deprecated. Ignored; components always resolve from child/parent theme before plugin paths.
+	 *     @type bool   $script   Whether to enqueue the component's script. Default determined by filter.
+	 *     @type bool   $style    Whether to enqueue the component's style. Default determined by filter.
+	 * }
+	 *
+	 * @return string Rendered component HTML, or empty string if not found.
+	 */
+	public static function get( string $name, array $args = [], array $options = [] ): string {
+
+		ob_start();
+		self::render( $name, $args, $options );
+
+		return (string) ob_get_clean();
+	}
+
+	/**
+	 * Require a component file in render scope.
+	 *
+	 * @param string               $file    Component file path.
+	 * @param array<string, mixed> $args    Component arguments.
+	 * @param array<string, mixed> $options Component render options.
+	 *
+	 * @return void
+	 */
+	private static function require_component_file( string $file, array $args, array $options ): void {
+		require $file;
+	}
+
+	/**
+	 * Resolve the component file path.
+	 *
+	 * Checks the theme path first, then the plugin path, and returns the first match.
+	 * Theme path format: {relative_theme_path}/{Name}/{Name}.php.
+	 * Plugin path format: {absolute_source_path}/{Name}/{Name}.php.
+	 *
+	 * @param string               $name    Component name.
+	 * @param array<string, mixed> $options Resolution options.
+	 *
+	 * @return array<string, mixed>|false Component metadata on success, false if not found.
+	 */
+	private static function get_component_data( string $name, array $options = [] ): array|false {
+
+		$component_name = self::normalize_component_name( $name );
+
+		if ( false === $component_name ) {
+			return false;
+		}
+
+		/**
+		 * Filters the registered component paths.
+		 *
+		 * Supported source keys are 'theme' and 'plugin'. Theme PHP, style, and
+		 * script paths are relative to the theme root. Plugin PHP paths are
+		 * absolute, and plugin assets use absolute dir/url config.
+		 *
+		 * @since 1.0.0
+		 *
+		 * @param array<string, array<string, mixed>> $paths   Associative array of source => path config.
+		 * @param string                              $name    Component name being resolved.
+		 * @param array<string, mixed>                $options Options passed to render().
+		 */
+		$paths = apply_filters(
+			'elementary_theme_component_paths',
+			[
+				'theme' => [
+					'php'    => 'src/components',
+					'style'  => 'assets/build/css/components',
+					'script' => 'assets/build/js/components',
+				],
+			],
+			$component_name,
+			$options
+		);
+
+		if ( empty( $paths ) || ! is_array( $paths ) ) {
+			return false;
+		}
+
+		$cache_key = self::get_cache_key(
+			[
+				$component_name,
+				$paths,
+				$options['script'] ?? false,
+				$options['style'] ?? false,
+			]
+		);
+
+		if ( isset( self::$component_data_cache[ $cache_key ] ) ) {
+			return self::$component_data_cache[ $cache_key ];
+		}
+
+		if ( ! empty( $paths['theme'] ) && is_array( $paths['theme'] ) ) {
+			$component = self::get_theme_component_data( $component_name, $paths['theme'], $paths, $options );
+
+			if ( false !== $component ) {
+				self::$component_data_cache[ $cache_key ] = $component;
+
+				return $component;
+			}
+		}
+
+		if ( ! empty( $paths['plugin'] ) && is_array( $paths['plugin'] ) ) {
+			$component = self::get_plugin_component_data( $component_name, $paths['plugin'], $paths, $options );
+
+			if ( false !== $component ) {
+				self::$component_data_cache[ $cache_key ] = $component;
+
+				return $component;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Resolve theme component data through locate_template().
+	 *
+	 * @param string               $component_name Component name.
+	 * @param array<string, mixed> $paths          Theme path config.
+	 * @param array<string, mixed> $all_paths      All filtered path configs.
+	 * @param array<string, mixed> $options        Component render options.
+	 *
+	 * @return array<string, mixed>|false Component metadata on success, false if not found.
+	 */
+	private static function get_theme_component_data( string $component_name, array $paths, array $all_paths, array $options ): array|false {
+		if ( empty( $paths['php'] ) || ! is_string( $paths['php'] ) ) {
+			return false;
+		}
+
+		$component_slug = strtolower( $component_name );
+		$component_root = trim( $paths['php'], '/\\' );
+		$file           = locate_template(
+			[
+				$component_root . '/' . $component_slug . '/' . $component_slug . '.php',
+				$component_root . '/' . $component_name . '/' . $component_name . '.php',
+			],
+			false,
+			false
+		);
+
+		if ( empty( $file ) || ! is_readable( $file ) ) {
+			return false;
+		}
+
+		return [
+			'name'   => $component_name,
+			'source' => 'theme',
+			'file'   => $file,
+			'root'   => $paths['php'],
+			'paths'  => $paths,
+			'assets' => self::get_component_assets( $component_name, $all_paths, $options ),
+		];
+	}
+
+	/**
+	 * Resolve plugin component data from an absolute source path.
+	 *
+	 * @param string               $component_name Component name.
+	 * @param array<string, mixed> $paths          Plugin path config.
+	 * @param array<string, mixed> $all_paths      All filtered path configs.
+	 * @param array<string, mixed> $options        Component render options.
+	 *
+	 * @return array<string, mixed>|false Component metadata on success, false if not found.
+	 */
+	private static function get_plugin_component_data( string $component_name, array $paths, array $all_paths, array $options ): array|false {
+		if ( empty( $paths['php'] ) || ! is_string( $paths['php'] ) ) {
+			return false;
+		}
+
+		$component_slug = strtolower( $component_name );
+		$file           = trailingslashit( $paths['php'] ) . $component_slug . '/' . $component_slug . '.php';
+
+		if ( ! is_readable( $file ) ) {
+			$file = trailingslashit( $paths['php'] ) . $component_name . '/' . $component_name . '.php';
+		}
+
+		if ( ! is_readable( $file ) ) {
+			return false;
+		}
+
+		return [
+			'name'   => $component_name,
+			'source' => 'plugin',
+			'file'   => $file,
+			'root'   => $paths['php'],
+			'paths'  => $paths,
+			'assets' => self::get_component_assets( $component_name, $all_paths, $options ),
+		];
+	}
+
+	/**
+	 * Get component asset metadata from child theme, parent theme, then plugin.
+	 *
+	 * @param string               $component_name Component name.
+	 * @param array<string, mixed> $paths          All filtered path configs.
+	 * @param array<string, mixed> $options        Component render options.
+	 *
+	 * @return array<string, array<string, string>> Asset metadata.
+	 */
+	private static function get_component_assets( string $component_name, array $paths, array $options ): array {
+		if ( empty( $options['style'] ) && empty( $options['script'] ) ) {
+			return [];
+		}
+
+		$assets = [];
+
+		foreach (
+			[
+				'style'  => 'css',
+				'script' => 'js',
+			] as $asset_type => $extension
+		) {
+			if ( empty( $options[ $asset_type ] ) ) {
+				continue;
+			}
+
+			$asset_file_name = strtolower( $component_name ) . '.' . $extension;
+
+			if ( ! empty( $paths['theme'][ $asset_type ] ) && is_string( $paths['theme'][ $asset_type ] ) ) {
+				$relative_asset_dir = trim( $paths['theme'][ $asset_type ], '/\\' );
+				$child_asset_file   = trailingslashit( get_stylesheet_directory() ) . $relative_asset_dir . '/' . $asset_file_name;
+
+				if ( is_readable( $child_asset_file ) ) {
+					$assets[ $asset_type ] = [
+						'file' => $child_asset_file,
+						'url'  => trailingslashit( get_stylesheet_directory_uri() ) . $relative_asset_dir . '/' . $asset_file_name,
+					];
+
+					continue;
+				}
+
+				$theme_asset_file = trailingslashit( get_template_directory() ) . $relative_asset_dir . '/' . $asset_file_name;
+
+				if ( is_readable( $theme_asset_file ) ) {
+					$assets[ $asset_type ] = [
+						'file' => $theme_asset_file,
+						'url'  => trailingslashit( get_template_directory_uri() ) . $relative_asset_dir . '/' . $asset_file_name,
+					];
+
+					continue;
+				}
+			}
+
+			if ( ! empty( $paths['plugin'][ $asset_type ]['dir'] ) && ! empty( $paths['plugin'][ $asset_type ]['url'] ) ) {
+				$plugin_asset_file = trailingslashit( (string) $paths['plugin'][ $asset_type ]['dir'] ) . $asset_file_name;
+
+				if ( is_readable( $plugin_asset_file ) ) {
+					$assets[ $asset_type ] = [
+						'file' => $plugin_asset_file,
+						'url'  => trailingslashit( (string) $paths['plugin'][ $asset_type ]['url'] ) . $asset_file_name,
+					];
+				}
+			}
+		}
+
+		return $assets;
+	}
+
+	/**
+	 * Create a stable cache key for request-level lookup caches.
+	 *
+	 * @param array<mixed> $parts Cache key parts.
+	 *
+	 * @return string Cache key.
+	 */
+	private static function get_cache_key( array $parts ): string {
+		$encoded_parts = wp_json_encode( $parts );
+
+		return md5( is_string( $encoded_parts ) ? $encoded_parts : '' );
+	}
+
+	/**
+	 * Enqueue assets for a rendered component.
+	 *
+	 * @param array<string, mixed> $component Component metadata.
+	 * @param array<string, mixed> $options   Component render options.
+	 *
+	 * @return void
+	 */
+	private static function enqueue_component_assets( array $component, array $options ): void {
+		if ( empty( $component['name'] ) || empty( $component['assets'] ) || ! is_array( $component['assets'] ) ) {
+			return;
+		}
+
+		$slug = sanitize_key( (string) $component['name'] );
+
+		if (
+			! empty( $options['style'] ) &&
+			! empty( $component['assets']['style'] ) &&
+			is_array( $component['assets']['style'] )
+		) {
+			$handle = 'elementary-theme-component-' . $slug . '-style';
+
+			if ( self::register_component_style( $handle, $component['assets']['style'] ) ) {
+				wp_enqueue_style( $handle );
+			}
+		}
+
+		if (
+			! empty( $options['script'] ) &&
+			! empty( $component['assets']['script'] ) &&
+			is_array( $component['assets']['script'] )
+		) {
+			$handle = 'elementary-theme-component-' . $slug . '-script';
+
+			if ( self::register_component_script( $handle, $component['assets']['script'] ) ) {
+				wp_enqueue_script( $handle );
+			}
+		}
+	}
+
+	/**
+	 * Register a component script.
+	 *
+	 * @param string               $handle    Name of the script. Should be unique.
+	 * @param array<string, mixed> $asset     Component asset metadata.
+	 * @param array<string>        $deps      Optional. An array of registered script handles this script depends on. Default empty array.
+	 * @param string|bool|null     $ver       Optional. String specifying script version number, if not set, filetime will be used as version number.
+	 * @param bool                 $in_footer Optional. Whether to enqueue the script before </body> instead of in the <head>.
+	 *
+	 * @return bool Whether the script has been registered.
+	 */
+	private static function register_component_script( string $handle, array $asset, array $deps = [], string|bool|null $ver = false, bool $in_footer = true ): bool {
+		if (
+			empty( $asset['url'] ) ||
+			empty( $asset['file'] ) ||
+			! file_exists( $asset['file'] )
+		) {
+			return false;
+		}
+
+		$asset_meta = self::get_component_asset_meta( (string) $asset['file'], $deps, $ver );
+
+		return wp_register_script( $handle, (string) $asset['url'], $asset_meta['dependencies'], $asset_meta['version'], $in_footer );
+	}
+
+	/**
+	 * Register a component stylesheet.
+	 *
+	 * @param string               $handle Name of the stylesheet. Should be unique.
+	 * @param array<string, mixed> $asset  Component asset metadata.
+	 * @param array<string>        $deps   Optional. An array of registered stylesheet handles this stylesheet depends on. Default empty array.
+	 * @param string|bool|null     $ver    Optional. String specifying style version number, if not set, filetime will be used as version number.
+	 * @param string               $media  Optional. The media for which this stylesheet has been defined.
+	 *
+	 * @return bool Whether the style has been registered.
+	 */
+	private static function register_component_style( string $handle, array $asset, array $deps = [], string|bool|null $ver = false, string $media = 'all' ): bool {
+		if (
+			empty( $asset['url'] ) ||
+			empty( $asset['file'] ) ||
+			! file_exists( $asset['file'] )
+		) {
+			return false;
+		}
+
+		$asset_meta = self::get_component_asset_meta( (string) $asset['file'], $deps, $ver );
+
+		return wp_register_style( $handle, (string) $asset['url'], $asset_meta['dependencies'], $asset_meta['version'], $media );
+	}
+
+	/**
+	 * Get component asset dependencies and version info from a matching .asset.php file.
+	 *
+	 * @param string           $file Asset file path.
+	 * @param array<string>    $deps Asset dependencies to merge with.
+	 * @param string|bool|null $ver  Asset version string.
+	 *
+	 * @return array{dependencies: array<string>, version: string|bool} Asset meta information including dependencies and version.
+	 */
+	private static function get_component_asset_meta( string $file, array $deps = [], string|bool|null $ver = false ): array {
+		$normalized_file   = ltrim( str_replace( '\\', '/', $file ), '/' );
+		$asset_meta_target = preg_replace( '/\.[^\/.]+$/', '', $normalized_file );
+		$asset_meta_target = ! empty( $asset_meta_target ) ? $asset_meta_target : $normalized_file;
+		$asset_meta_file   = '/' . $asset_meta_target . '.asset.php';
+		$asset_meta        = is_readable( $asset_meta_file ) ? require $asset_meta_file : [];
+
+		if ( ! is_array( $asset_meta ) ) {
+			$asset_meta = [];
+		}
+
+		$dependencies = $asset_meta['dependencies'] ?? [];
+		$version      = $asset_meta['version'] ?? self::get_component_file_version( $file, $ver );
+
+		if ( ! is_array( $dependencies ) ) {
+			$dependencies = [];
+		}
+
+		$dependencies = array_values( array_filter( $dependencies, 'is_string' ) );
+
+		return [
+			'dependencies' => array_merge( $deps, $dependencies ),
+			'version'      => is_string( $version ) || is_bool( $version )
+				? $version
+				: ( is_int( $version ) ? (string) $version : self::get_component_file_version( $file, $ver ) ),
+		];
+	}
+
+	/**
+	 * Get component asset file version.
+	 *
+	 * @param string           $file File path.
+	 * @param string|bool|null $ver  File version.
+	 *
+	 * @return string|bool File version based on file modification time or provided version.
+	 */
+	private static function get_component_file_version( string $file, string|bool|null $ver = false ): string|bool {
+		if ( ! empty( $ver ) ) {
+			return $ver;
+		}
+
+		return file_exists( $file ) ? (string) filemtime( $file ) : false;
+	}
+
+	/**
+	 * Normalize and validate a component name before using it in filesystem paths.
+	 *
+	 * Normalization trims surrounding whitespace. Validation then enforces
+	 * length bounds, blocks traversal and path separators, and allows only
+	 * alphanumeric characters, underscores and dashes.
+	 *
+	 * @param string $name Component name to normalize and validate.
+	 *
+	 * @return string|false Normalized component name, or false when invalid.
+	 */
+	private static function normalize_component_name( string $name ): string|false {
+		$name = trim( $name );
+
+		if (
+			'' === $name ||
+			strlen( $name ) > 128 ||
+			str_contains( $name, '..' ) ||
+			str_contains( $name, '/' ) ||
+			str_contains( $name, '\\' ) ||
+			1 !== preg_match( '/^[A-Za-z0-9_-]+$/', $name )
+		) {
+			return false;
+		}
+
+		return $name;
+	}
+
+}
diff --git a/inc/helpers/custom-functions.php b/inc/helpers/custom-functions.php
index 98e7996f..0952dfcc 100644
--- a/inc/helpers/custom-functions.php
+++ b/inc/helpers/custom-functions.php
@@ -7,4 +7,44 @@
 
 declare( strict_types = 1 );
 
-// Define custom functions here.
+use rtCamp\Theme\Elementary\Framework\ComponentLoader;
+
+if ( ! function_exists( 'elementary_theme_component' ) ) {
+
+	/**
+	 * Render a component by name.
+	 *
+	 * Global convenience wrapper for ComponentLoader::render().
+	 *
+	 * @since 1.0.0
+	 *
+	 * @param string $name    Component name (e.g. 'Button', 'Card').
+	 * @param array  $args    Arguments to pass to the component.
+	 * @param array  $options Optional. Resolution options. See ComponentLoader::render().
+	 *
+	 * @return void
+	 */
+	function elementary_theme_component( string $name, array $args = [], array $options = [] ): void {
+		ComponentLoader::render( $name, $args, $options );
+	}
+}
+
+if ( ! function_exists( 'elementary_theme_get_component' ) ) {
+
+	/**
+	 * Get the rendered HTML of a component as a string.
+	 *
+	 * Global convenience wrapper for ComponentLoader::get().
+	 *
+	 * @since 1.0.0
+	 *
+	 * @param string $name    Component name (e.g. 'Button', 'Card').
+	 * @param array  $args    Arguments to pass to the component.
+	 * @param array  $options Optional. Resolution options. See ComponentLoader::get().
+	 *
+	 * @return string Rendered component HTML.
+	 */
+	function elementary_theme_get_component( string $name, array $args = [], array $options = [] ): string {
+		return ComponentLoader::get( $name, $args, $options );
+	}
+}
diff --git a/phpcs.xml.dist b/phpcs.xml.dist
index bb96a577..45ff914e 100644
--- a/phpcs.xml.dist
+++ b/phpcs.xml.dist
@@ -100,6 +100,8 @@
 			</property>
 		</properties>
 		<exclude-pattern>tests/bootstrap.php</exclude-pattern>
+		<!-- Component partials are always require'd inside ComponentLoader::render(), so variables are method-scoped at runtime. -->
+			<exclude-pattern>src/components/*</exclude-pattern>
 	</rule>
 
 	<rule ref="WordPress-Docs">
@@ -112,6 +114,8 @@
 
 	<rule ref="WordPress.WP.GlobalVariablesOverride.Prohibited">
 		<exclude-pattern>tests/*</exclude-pattern>
+		<!-- Component partials are always require'd inside ComponentLoader::render(), so variables are method-scoped at runtime. -->
+			<exclude-pattern>src/components/*</exclude-pattern>
 	</rule>
 
 	<!--
diff --git a/src/components/button/button.js b/src/components/button/button.js
new file mode 100644
index 00000000..1c27c403
--- /dev/null
+++ b/src/components/button/button.js
@@ -0,0 +1,9 @@
+/**
+ * Button component script.
+ */
+document.addEventListener('DOMContentLoaded', () => {
+	const buttons = document.querySelectorAll('.elementary-button');
+	if (buttons.length > 0) {
+		console.log(`Elementary Button component loaded. Found ${buttons.length} buttons.`);
+	}
+});
diff --git a/src/components/button/button.php b/src/components/button/button.php
new file mode 100644
index 00000000..4b0f682e
--- /dev/null
+++ b/src/components/button/button.php
@@ -0,0 +1,43 @@
+<?php
+/**
+ * Button component.
+ *
+ * A render-only component that outputs a button or link element.
+ *
+ * @package rtCamp\Theme\Elementary
+ *
+ * @param array $args {
+ *     Component arguments.
+ *
+ *     @type string $label Button label text. Required.
+ *     @type string $url   URL for link buttons. Optional.
+ *     @type string $class Additional CSS classes. Optional.
+ *     @type string $tag   HTML tag: 'a' or 'button'. Optional. Defaults to 'a' when $url is set, 'button' otherwise.
+ * }
+ */
+
+$label = $args['label'] ?? '';
+$url   = $args['url'] ?? '';
+$class = $args['class'] ?? '';
+$tag   = $args['tag'] ?? ( ! empty( $url ) ? 'a' : 'button' );
+
+if ( empty( $label ) ) {
+	return;
+}
+
+$css_class = trim( 'elementary-button ' . $class );
+
+if ( 'a' === $tag && ! empty( $url ) ) {
+	printf(
+		'<a href="%s" class="%s">%s</a>',
+		esc_url( $url ),
+		esc_attr( $css_class ),
+		esc_html( $label )
+	);
+} else {
+	printf(
+		'<button type="button" class="%s">%s</button>',
+		esc_attr( $css_class ),
+		esc_html( $label )
+	);
+}
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
new file mode 100644
index 00000000..a80b1c42
--- /dev/null
+++ b/src/components/button/button.scss
@@ -0,0 +1,23 @@
+.elementary-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.75rem 1.5rem;
+	font-size: 1rem;
+	font-weight: 500;
+	line-height: 1.5;
+	color: #fff;
+	background-color: #0073aa;
+	border: 1px solid transparent;
+	border-radius: 4px;
+	text-decoration: none;
+	cursor: pointer;
+	transition: background-color 0.2s ease-in-out;
+
+	&:hover,
+	&:focus {
+		background-color: #005177;
+		text-decoration: none;
+		color: #fff;
+	}
+}
diff --git a/src/components/card/card.js b/src/components/card/card.js
new file mode 100644
index 00000000..071fd22a
--- /dev/null
+++ b/src/components/card/card.js
@@ -0,0 +1,9 @@
+/**
+ * Card component script.
+ */
+document.addEventListener('DOMContentLoaded', () => {
+	const cards = document.querySelectorAll('.elementary-card');
+	if (cards.length > 0) {
+		console.log(`Elementary Card component loaded. Found ${cards.length} cards.`);
+	}
+});
diff --git a/src/components/card/card.php b/src/components/card/card.php
new file mode 100644
index 00000000..8e0cd48e
--- /dev/null
+++ b/src/components/card/card.php
@@ -0,0 +1,63 @@
+<?php
+/**
+ * Card component.
+ *
+ * A render-only component that outputs a card with optional image, title,
+ * description, and action button. Demonstrates component composability
+ * by rendering the Button component internally.
+ *
+ * @package rtCamp\Theme\Elementary
+ *
+ * @param array $args {
+ *     Component arguments.
+ *
+ *     @type string $title       Card title. Required.
+ *     @type string $description Card description text. Optional.
+ *     @type string $image_url   Card image URL. Optional.
+ *     @type string $url         Card link URL. Optional.
+ * }
+ */
+
+use rtCamp\Theme\Elementary\Framework\ComponentLoader;
+
+$title       = $args['title'] ?? '';
+$description = $args['description'] ?? '';
+$image_url   = $args['image_url'] ?? '';
+$url         = $args['url'] ?? '';
+
+if ( empty( $title ) ) {
+	return;
+}
+
+?>
+<div class="elementary-card">
+	<?php if ( ! empty( $image_url ) ) : ?>
+		<div class="elementary-card__image">
+			<img src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $title ); ?>" />
+		</div>
+	<?php endif; ?>
+
+	<div class="elementary-card__content">
+		<h3 class="elementary-card__title"><?php echo esc_html( $title ); ?></h3>
+
+		<?php if ( ! empty( $description ) ) : ?>
+			<p class="elementary-card__description"><?php echo esc_html( $description ); ?></p>
+		<?php endif; ?>
+
+		<?php if ( ! empty( $url ) ) : ?>
+			<div class="elementary-card__action">
+				<?php
+				ComponentLoader::render(
+					'Button',
+					[
+						'label' => $title,
+						'url'   => $url,
+						'class' => 'elementary-card__button',
+					]
+				);
+				?>
+			</div>
+		<?php endif; ?>
+	</div>
+</div>
+<?php
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
new file mode 100644
index 00000000..b8f9abd8
--- /dev/null
+++ b/src/components/card/card.scss
@@ -0,0 +1,53 @@
+.elementary-card {
+	display: flex;
+	flex-direction: column;
+	background-color: #fff;
+	border: 1px solid #e2e8f0;
+	border-radius: 8px;
+	overflow: hidden;
+	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+
+	&:hover {
+		transform: translateY(-4px);
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	}
+
+	&__image {
+		width: 100%;
+		height: 200px;
+		overflow: hidden;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+	}
+
+	&__content {
+		padding: 1.5rem;
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+	}
+
+	&__title {
+		font-size: 1.25rem;
+		font-weight: 600;
+		margin: 0 0 0.75rem;
+		color: #1a202c;
+	}
+
+	&__description {
+		font-size: 1rem;
+		color: #4a5568;
+		margin: 0 0 1.5rem;
+		line-height: 1.5;
+		flex-grow: 1;
+	}
+
+	&__action {
+		margin-top: auto;
+	}
+}
diff --git a/tests/php/inc/Framework/ComponentLoaderTest.php b/tests/php/inc/Framework/ComponentLoaderTest.php
new file mode 100644
index 00000000..5209e501
--- /dev/null
+++ b/tests/php/inc/Framework/ComponentLoaderTest.php
@@ -0,0 +1,1522 @@
+<?php
+/**
+ * Tests for ComponentLoader.
+ *
+ * @package rtCamp\Theme\Elementary
+ */
+
+declare( strict_types = 1 );
+
+use rtCamp\Theme\Elementary\Tests\TestCase;
+use rtCamp\Theme\Elementary\Framework\ComponentLoader;
+
+/**
+ * Class ComponentLoaderTest
+ *
+ * @since 1.0.0
+ */
+class ComponentLoaderTest extends TestCase {
+
+	/**
+	 * Reset ComponentLoader request-level caches before each test.
+	 *
+	 * @return void
+	 */
+	protected function setUp(): void {
+		parent::setUp();
+
+		self::reset_component_loader_caches();
+	}
+
+	/**
+	 * Reset ComponentLoader request-level caches after each test.
+	 *
+	 * @return void
+	 */
+	protected function tearDown(): void {
+		self::reset_component_loader_caches();
+
+		parent::tearDown();
+	}
+
+	/**
+	 * Test if ComponentLoader class exists.
+	 */
+	public function test_class_exists(): void {
+		$this->assertTrue( class_exists( ComponentLoader::class ) );
+	}
+
+	/**
+	 * Test render outputs component HTML for a known component.
+	 */
+	public function test_render_outputs_button_component(): void {
+		ob_start();
+		ComponentLoader::render( 'Button', [ 'label' => 'Test Button' ] );
+		$output = ob_get_clean();
+
+		$this->assertStringContainsString( 'Test Button', $output );
+		$this->assertStringContainsString( '<button', $output );
+		$this->assertStringContainsString( 'elementary-button', $output );
+	}
+
+	/**
+	 * Test render outputs nothing for a missing component.
+	 */
+	public function test_render_missing_component_outputs_nothing(): void {
+		ob_start();
+		ComponentLoader::render( 'NonExistentComponent', [ 'label' => 'Test' ] );
+		$output = ob_get_clean();
+
+		$this->assertEmpty( $output );
+	}
+
+	/**
+	 * Test render rejects unsafe names containing path separators.
+	 */
+	public function test_render_rejects_component_name_with_slash(): void {
+		ob_start();
+		ComponentLoader::render( '../Button', [ 'label' => 'Test' ] );
+		$output = ob_get_clean();
+
+		$this->assertEmpty( $output );
+	}
+
+	/**
+	 * Test get() rejects unsafe names containing directory traversal tokens.
+	 */
+	public function test_get_rejects_component_name_with_dot_dot(): void {
+		$output = ComponentLoader::get( '..' );
+
+		$this->assertSame( '', $output );
+	}
+
+	/**
+	 * Test get() returns component HTML and does not echo directly.
+	 */
+	public function test_get_returns_markup_without_direct_output(): void {
+		$this->expectOutputString( '' );
+		$markup = ComponentLoader::get( 'Button', [ 'label' => 'Buffered' ] );
+
+		$this->assertStringContainsString( 'Buffered', $markup );
+		$this->assertStringContainsString( '<button', $markup );
+	}
+
+	/**
+	 * Test render rejects names containing backslashes.
+	 */
+	public function test_render_rejects_component_name_with_backslash(): void {
+		ob_start();
+		ComponentLoader::render( '..\\Button', [ 'label' => 'Test' ] );
+		$output = ob_get_clean();
+
+		$this->assertEmpty( $output );
+	}
+
+	/**
+	 * Test render accepts names with surrounding whitespace after normalization.
+	 */
+	public function test_render_trims_component_name_before_resolving(): void {
+		ob_start();
+		ComponentLoader::render( '  Button  ', [ 'label' => 'Trimmed' ] );
+		$output = ob_get_clean();
+
+		$this->assertStringContainsString( 'Trimmed', $output );
+	}
+
+	/**
+	 * Test render rejects empty names after normalization.
+	 */
+	public function test_render_rejects_empty_component_name(): void {
+		ob_start();
+		ComponentLoader::render( '   ', [ 'label' => 'Test' ] );
+		$output = ob_get_clean();
+
+		$this->assertEmpty( $output );
+	}
+
+	/**
+	 * Test Button component renders a link when url is provided.
+	 */
+	public function test_button_with_url_renders_link(): void {
+		ob_start();
+		ComponentLoader::render(
+			'Button',
+			[
+				'label' => 'Click Me',
+				'url'   => 'https://example.com',
+			]
+		);
+		$output = ob_get_clean();
+
+		$this->assertStringContainsString( '<a href="https://example.com"', $output );
+		$this->assertStringContainsString( 'Click Me', $output );
+	}
+
+	/**
+	 * Test Button component renders nothing when label is empty.
+	 */
+	public function test_button_empty_label_renders_nothing(): void {
+		ob_start();
+		ComponentLoader::render( 'Button', [] );
+		$output = ob_get_clean();
+
+		$this->assertEmpty( $output );
+	}
+
+	/**
+	 * Test Card component renders with title and description.
+	 */
+	public function test_card_renders_with_content(): void {
+		ob_start();
+		ComponentLoader::render(
+			'Card',
+			[
+				'title'       => 'Test Card',
+				'description' => 'A test description.',
+			]
+		);
+		$output = ob_get_clean();
+
+		$this->assertStringContainsString( 'elementary-card', $output );
+		$this->assertStringContainsString( 'Test Card', $output );
+		$this->assertStringContainsString( 'A test description.', $output );
+	}
+
+	/**
+	 * Test Card component renders Button when url is provided.
+	 */
+	public function test_card_with_url_renders_button(): void {
+		ob_start();
+		ComponentLoader::render(
+			'Card',
+			[
+				'title' => 'Linked Card',
+				'url'   => 'https://example.com',
+			]
+		);
+		$output = ob_get_clean();
+
+		$this->assertStringContainsString( 'elementary-card__button', $output );
+		$this->assertStringContainsString( 'https://example.com', $output );
+	}
+
+	/**
+	 * Test the elementary_theme_component_paths filter is applied.
+	 */
+	public function test_component_paths_filter_is_applied(): void {
+		$filter_called = false;
+
+		$callback = function ( $paths ) use ( &$filter_called ) {
+			$filter_called = true;
+			return $paths;
+		};
+
+		add_filter( 'elementary_theme_component_paths', $callback );
+
+		ob_start();
+		ComponentLoader::render( 'Button', [ 'label' => 'Test' ] );
+		ob_end_clean();
+
+		remove_filter( 'elementary_theme_component_paths', $callback );
+
+		$this->assertTrue( $filter_called );
+	}
+
+	/**
+	 * Test non-array component paths filter return is handled safely.
+	 */
+	public function test_component_paths_filter_non_array_return_is_handled(): void {
+		$callback = function () {
+			return 'invalid-paths';
+		};
+
+		add_filter( 'elementary_theme_component_paths', $callback );
+
+		ob_start();
+		ComponentLoader::render( 'Button', [ 'label' => 'Test' ] );
+		$output = ob_get_clean();
+
+		remove_filter( 'elementary_theme_component_paths', $callback );
+
+		$this->assertEmpty( $output );
+	}
+
+	/**
+	 * Test malformed path entries are ignored while valid entries still resolve.
+	 */
+	public function test_component_paths_filter_malformed_entries_are_ignored(): void {
+		$callback = function ( $paths ) {
+			return [
+				'theme'  => $paths['theme'],
+				'plugin' => [ 'not-a-string-path' ],
+				''       => '/tmp',
+			];
+		};
+
+		add_filter( 'elementary_theme_component_paths', $callback );
+
+		ob_start();
+		ComponentLoader::render( 'Button', [ 'label' => 'Sanitized Paths' ] );
+		$output = ob_get_clean();
+
+		remove_filter( 'elementary_theme_component_paths', $callback );
+
+		$this->assertStringContainsString( 'Sanitized Paths', $output );
+	}
+
+	/**
+	 * Test the default priority filter no longer overrides theme-first resolution.
+	 */
+	public function test_default_priority_filter_is_ignored_by_theme_first_resolution(): void {
+		$tmp_dir     = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-priority-filter-' . uniqid( '', true );
+		$button_dir  = $tmp_dir . '/Button';
+		$button_file = $button_dir . '/Button.php';
+
+		mkdir( $button_dir, 0755, true ); // phpcs:ignore
+
+		file_put_contents( // phpcs:ignore
+			$button_file,
+			'<?php echo "priority-filter-plugin-button";'
+		);
+
+		$paths_callback = function ( $paths ) use ( $tmp_dir ) {
+			$paths['plugin'] = [
+				'php' => $tmp_dir,
+			];
+			return $paths;
+		};
+
+		$priority_callback = function () {
+			return 'plugin';
+		};
+
+		add_filter( 'elementary_theme_component_paths', $paths_callback );
+		add_filter( 'elementary_theme_component_default_priority', $priority_callback );
+
+		try {
+			ob_start();
+			ComponentLoader::render( 'Button', [ 'label' => 'Test' ] );
+			$output = ob_get_clean();
+
+			$this->assertStringContainsString( 'Test', $output );
+			$this->assertStringContainsString( 'elementary-button', $output );
+			$this->assertStringNotContainsString( 'priority-filter-plugin-button', $output );
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $paths_callback );
+			remove_filter( 'elementary_theme_component_default_priority', $priority_callback );
+
+			if ( is_file( $button_file ) ) {
+				unlink( $button_file ); // phpcs:ignore
+			}
+
+			if ( is_dir( $button_dir ) ) {
+				rmdir( $button_dir ); // phpcs:ignore
+			}
+
+			if ( is_dir( $tmp_dir ) ) {
+				rmdir( $tmp_dir ); // phpcs:ignore
+			}
+		}
+	}
+
+	/**
+	 * Test that priority option 'plugin' is accepted.
+	 */
+	public function test_plugin_priority_resolves_correctly(): void {
+		// With only theme paths registered and priority='plugin', it should
+		// still fall back to the theme path and render the component.
+		ob_start();
+		ComponentLoader::render( 'Button', [ 'label' => 'Fallback' ], [ 'priority' => 'plugin' ] );
+		$output = ob_get_clean();
+
+		$this->assertStringContainsString( 'Fallback', $output );
+	}
+
+	/**
+	 * Test that invalid priority falls back to theme.
+	 */
+	public function test_invalid_priority_falls_back_to_theme(): void {
+		ob_start();
+		ComponentLoader::render( 'Button', [ 'label' => 'Valid' ], [ 'priority' => 'invalid' ] );
+		$output = ob_get_clean();
+
+		$this->assertStringContainsString( 'Valid', $output );
+	}
+
+	/**
+	 * Test that plugin priority does not override theme components.
+	 */
+	public function test_plugin_priority_does_not_override_theme_component(): void {
+		$tmp_dir       = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-plugin-components-' . uniqid( '', true );
+		$button_dir    = $tmp_dir . '/Button';
+		$button_file   = $button_dir . '/Button.php';
+		$plugin_output = '';
+		$theme_output  = '';
+
+		mkdir( $button_dir, 0755, true ); // phpcs:ignore
+
+		file_put_contents( // phpcs:ignore
+			$button_file,
+			'<?php echo "plugin-button";'
+		);
+
+		$callback = function ( $paths ) use ( $tmp_dir ) {
+			$paths['plugin'] = [
+				'php' => $tmp_dir,
+			];
+			return $paths;
+		};
+
+		add_filter( 'elementary_theme_component_paths', $callback );
+
+		try {
+			ob_start();
+			ComponentLoader::render( 'Button', [ 'label' => 'Test' ], [ 'priority' => 'plugin' ] );
+			$plugin_output = ob_get_clean();
+
+			ob_start();
+			ComponentLoader::render( 'Button', [ 'label' => 'Test' ], [ 'priority' => 'theme' ] );
+			$theme_output = ob_get_clean();
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $callback );
+
+			if ( is_file( $button_file ) ) {
+				unlink( $button_file ); // phpcs:ignore
+			}
+
+			if ( is_dir( $button_dir ) ) {
+				rmdir( $button_dir ); // phpcs:ignore
+			}
+
+			if ( is_dir( $tmp_dir ) ) {
+				rmdir( $tmp_dir ); // phpcs:ignore
+			}
+		}
+
+		$this->assertStringContainsString( 'elementary-button', $plugin_output );
+		$this->assertStringNotContainsString( 'plugin-button', $plugin_output );
+		$this->assertStringContainsString( 'elementary-button', $theme_output );
+	}
+
+	/**
+	 * Test child theme templates resolve before plugin components.
+	 */
+	public function test_child_theme_component_resolves_before_plugin_component(): void {
+		$tmp_dir          = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-child-theme-component-' . uniqid( '', true );
+		$child_root       = $tmp_dir . '/child';
+		$parent_root      = $tmp_dir . '/parent';
+		$plugin_root      = $tmp_dir . '/plugin';
+		$child_component  = $child_root . '/components/ChildFirst';
+		$plugin_component = $plugin_root . '/ChildFirst';
+		$child_file       = $child_component . '/ChildFirst.php';
+		$plugin_file      = $plugin_component . '/ChildFirst.php';
+
+		mkdir( $child_component, 0755, true ); // phpcs:ignore
+		mkdir( $parent_root, 0755, true ); // phpcs:ignore
+		mkdir( $plugin_component, 0755, true ); // phpcs:ignore
+
+		file_put_contents( $child_file, '<?php echo "child-theme-component";' ); // phpcs:ignore
+		file_put_contents( $plugin_file, '<?php echo "plugin-component";' ); // phpcs:ignore
+
+		$paths_callback      = function ( $paths ) use ( $plugin_root ) {
+			$paths['theme']['php'] = 'components';
+			$paths['plugin']       = [
+				'php' => $plugin_root,
+			];
+			return $paths;
+		};
+		$stylesheet_callback = function () use ( $child_root ) {
+			return $child_root;
+		};
+		$template_callback   = function () use ( $parent_root ) {
+			return $parent_root;
+		};
+
+		add_filter( 'elementary_theme_component_paths', $paths_callback );
+		add_filter( 'stylesheet_directory', $stylesheet_callback );
+		add_filter( 'template_directory', $template_callback );
+
+		try {
+			$output = ComponentLoader::get( 'ChildFirst', [], [ 'priority' => 'plugin' ] );
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $paths_callback );
+			remove_filter( 'stylesheet_directory', $stylesheet_callback );
+			remove_filter( 'template_directory', $template_callback );
+
+			foreach ( [ $child_file, $plugin_file ] as $file ) {
+				if ( is_file( $file ) ) {
+					unlink( $file ); // phpcs:ignore
+				}
+			}
+
+			foreach ( [ $child_component, $plugin_component, $child_root . '/components', $child_root, $parent_root, $plugin_root, $tmp_dir ] as $dir ) {
+				if ( is_dir( $dir ) ) {
+					rmdir( $dir ); // phpcs:ignore
+				}
+			}
+		}
+
+		$this->assertStringContainsString( 'child-theme-component', $output );
+		$this->assertStringNotContainsString( 'plugin-component', $output );
+	}
+
+	/**
+	 * Test parent theme templates resolve when child theme does not provide one.
+	 */
+	public function test_parent_theme_component_resolves_before_plugin_component(): void {
+		$tmp_dir          = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-parent-theme-component-' . uniqid( '', true );
+		$child_root       = $tmp_dir . '/child';
+		$parent_root      = $tmp_dir . '/parent';
+		$plugin_root      = $tmp_dir . '/plugin';
+		$parent_component = $parent_root . '/components/ParentFirst';
+		$plugin_component = $plugin_root . '/ParentFirst';
+		$parent_file      = $parent_component . '/ParentFirst.php';
+		$plugin_file      = $plugin_component . '/ParentFirst.php';
+
+		mkdir( $child_root, 0755, true ); // phpcs:ignore
+		mkdir( $parent_component, 0755, true ); // phpcs:ignore
+		mkdir( $plugin_component, 0755, true ); // phpcs:ignore
+
+		file_put_contents( $parent_file, '<?php echo "parent-theme-component";' ); // phpcs:ignore
+		file_put_contents( $plugin_file, '<?php echo "plugin-component";' ); // phpcs:ignore
+
+		$paths_callback      = function ( $paths ) use ( $plugin_root ) {
+			$paths['theme']['php'] = 'components';
+			$paths['plugin']       = [
+				'php' => $plugin_root,
+			];
+			return $paths;
+		};
+		$stylesheet_callback = function () use ( $child_root ) {
+			return $child_root;
+		};
+		$template_callback   = function () use ( $parent_root ) {
+			return $parent_root;
+		};
+
+		add_filter( 'elementary_theme_component_paths', $paths_callback );
+		add_filter( 'stylesheet_directory', $stylesheet_callback );
+		add_filter( 'template_directory', $template_callback );
+
+		try {
+			$output = ComponentLoader::get( 'ParentFirst', [], [ 'priority' => 'plugin' ] );
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $paths_callback );
+			remove_filter( 'stylesheet_directory', $stylesheet_callback );
+			remove_filter( 'template_directory', $template_callback );
+
+			foreach ( [ $parent_file, $plugin_file ] as $file ) {
+				if ( is_file( $file ) ) {
+					unlink( $file ); // phpcs:ignore
+				}
+			}
+
+			foreach ( [ $parent_component, $plugin_component, $parent_root . '/components', $child_root, $parent_root, $plugin_root, $tmp_dir ] as $dir ) {
+				if ( is_dir( $dir ) ) {
+					rmdir( $dir ); // phpcs:ignore
+				}
+			}
+		}
+
+		$this->assertStringContainsString( 'parent-theme-component', $output );
+		$this->assertStringNotContainsString( 'plugin-component', $output );
+	}
+
+	/**
+	 * Test plugin components resolve when no child or parent theme template exists.
+	 */
+	public function test_plugin_component_resolves_when_theme_template_is_absent(): void {
+		$tmp_dir          = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-plugin-fallback-component-' . uniqid( '', true );
+		$child_root       = $tmp_dir . '/child';
+		$parent_root      = $tmp_dir . '/parent';
+		$plugin_root      = $tmp_dir . '/plugin';
+		$plugin_component = $plugin_root . '/PluginFallback';
+		$plugin_file      = $plugin_component . '/PluginFallback.php';
+
+		mkdir( $child_root, 0755, true ); // phpcs:ignore
+		mkdir( $parent_root, 0755, true ); // phpcs:ignore
+		mkdir( $plugin_component, 0755, true ); // phpcs:ignore
+
+		file_put_contents( $plugin_file, '<?php echo "plugin-fallback-component";' ); // phpcs:ignore
+
+		$paths_callback      = function ( $paths ) use ( $plugin_root ) {
+			$paths['theme']['php'] = 'components';
+			$paths['plugin']       = [
+				'php' => $plugin_root,
+			];
+			return $paths;
+		};
+		$stylesheet_callback = function () use ( $child_root ) {
+			return $child_root;
+		};
+		$template_callback   = function () use ( $parent_root ) {
+			return $parent_root;
+		};
+
+		add_filter( 'elementary_theme_component_paths', $paths_callback );
+		add_filter( 'stylesheet_directory', $stylesheet_callback );
+		add_filter( 'template_directory', $template_callback );
+
+		try {
+			$output = ComponentLoader::get( 'PluginFallback' );
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $paths_callback );
+			remove_filter( 'stylesheet_directory', $stylesheet_callback );
+			remove_filter( 'template_directory', $template_callback );
+
+			if ( is_file( $plugin_file ) ) {
+				unlink( $plugin_file ); // phpcs:ignore
+			}
+
+			foreach ( [ $plugin_component, $child_root, $parent_root, $plugin_root, $tmp_dir ] as $dir ) {
+				if ( is_dir( $dir ) ) {
+					rmdir( $dir ); // phpcs:ignore
+				}
+			}
+		}
+
+		$this->assertStringContainsString( 'plugin-fallback-component', $output );
+	}
+
+	/**
+	 * Test fixture PromoBanner resolves from theme override before plugin-key source.
+	 */
+	public function test_fixture_promo_banner_resolves_from_theme_override(): void {
+		$component_meta  = null;
+		$paths_callback  = function ( $paths ) {
+			$paths['plugin'] = [
+				'php'    => ELEMENTARY_THEME_TEMP_DIR . '/plugins-theme/Components',
+				'style'  => [
+					'dir' => ELEMENTARY_THEME_BUILD_DIR . '/css/plugin-components',
+					'url' => ELEMENTARY_THEME_BUILD_URI . '/css/plugin-components',
+				],
+				'script' => [
+					'dir' => ELEMENTARY_THEME_BUILD_DIR . '/js/plugin-components',
+					'url' => ELEMENTARY_THEME_BUILD_URI . '/js/plugin-components',
+				],
+			];
+			return $paths;
+		};
+		$action_callback = function ( $name, $args, $options ) use ( &$component_meta ) {
+			$component_meta = $options['component'] ?? null;
+		};
+
+		add_filter( 'elementary_theme_component_paths', $paths_callback );
+		add_action( 'elementary_theme_before_get_component', $action_callback, 10, 3 );
+
+		try {
+			$output = ComponentLoader::get(
+				'PromoBanner',
+				[
+					'title'       => 'Theme Promo',
+					'description' => 'Theme override wins.',
+				]
+			);
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $paths_callback );
+			remove_action( 'elementary_theme_before_get_component', $action_callback );
+		}
+
+		$this->assertStringContainsString( 'elementary-promo-banner--theme', $output );
+		$this->assertStringContainsString( 'data-component-source="theme"', $output );
+		$this->assertIsArray( $component_meta );
+		$this->assertSame( 'theme', $component_meta['source'] );
+	}
+
+	/**
+	 * Test fixture PromoBanner falls back to plugin-key source when theme path is absent.
+	 */
+	public function test_fixture_promo_banner_falls_back_to_plugin_key_source(): void {
+		$component_meta  = null;
+		$paths_callback  = function ( $paths ) {
+			$paths['theme']['php'] = 'src/MissingComponents';
+			$paths['plugin']       = [
+				'php'    => ELEMENTARY_THEME_TEMP_DIR . '/plugins-theme/Components',
+				'style'  => [
+					'dir' => ELEMENTARY_THEME_BUILD_DIR . '/css/plugin-components',
+					'url' => ELEMENTARY_THEME_BUILD_URI . '/css/plugin-components',
+				],
+				'script' => [
+					'dir' => ELEMENTARY_THEME_BUILD_DIR . '/js/plugin-components',
+					'url' => ELEMENTARY_THEME_BUILD_URI . '/js/plugin-components',
+				],
+			];
+			return $paths;
+		};
+		$action_callback = function ( $name, $args, $options ) use ( &$component_meta ) {
+			$component_meta = $options['component'] ?? null;
+		};
+
+		add_filter( 'elementary_theme_component_paths', $paths_callback );
+		add_action( 'elementary_theme_before_get_component', $action_callback, 10, 3 );
+
+		try {
+			$output = ComponentLoader::get(
+				'PromoBanner',
+				[
+					'title'       => 'Plugin Promo',
+					'description' => 'Plugin fixture wins when theme is absent.',
+				]
+			);
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $paths_callback );
+			remove_action( 'elementary_theme_before_get_component', $action_callback );
+		}
+
+		$this->assertStringContainsString( 'plugin-promo-banner', $output );
+		$this->assertStringContainsString( 'data-component-source="plugin"', $output );
+		$this->assertIsArray( $component_meta );
+		$this->assertSame( 'plugin', $component_meta['source'] );
+	}
+
+	/**
+	 * Test fixture FeaturePanel resolves from plugin-key source and shared asset cascade.
+	 */
+	public function test_fixture_feature_panel_resolves_from_plugin_key_source_with_shared_asset_cascade(): void {
+		$component_assets = null;
+		$paths_callback   = function ( $paths ) {
+			$paths['plugin'] = [
+				'php'    => ELEMENTARY_THEME_TEMP_DIR . '/plugins-theme/Components',
+				'style'  => [
+					'dir' => ELEMENTARY_THEME_BUILD_DIR . '/css/plugin-components',
+					'url' => ELEMENTARY_THEME_BUILD_URI . '/css/plugin-components',
+				],
+				'script' => [
+					'dir' => ELEMENTARY_THEME_BUILD_DIR . '/js/plugin-components',
+					'url' => ELEMENTARY_THEME_BUILD_URI . '/js/plugin-components',
+				],
+			];
+			return $paths;
+		};
+		$action_callback  = function ( $name, $args, $options ) use ( &$component_assets ) {
+			$component_assets = $options['component']['assets'] ?? null;
+		};
+
+		add_filter( 'elementary_theme_component_paths', $paths_callback );
+		add_action( 'elementary_theme_before_get_component', $action_callback, 10, 3 );
+
+		try {
+			$output = ComponentLoader::get(
+				'FeaturePanel',
+				[
+					'title'       => 'Plugin Feature',
+					'description' => 'Plugin-key fixture.',
+				]
+			);
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $paths_callback );
+			remove_action( 'elementary_theme_before_get_component', $action_callback );
+		}
+
+		$this->assertStringContainsString( 'plugin-feature-panel', $output );
+		$this->assertIsArray( $component_assets );
+		$this->assertSame( ELEMENTARY_THEME_BUILD_DIR . '/css/plugin-components/featurepanel.css', $component_assets['style']['file'] );
+		$this->assertSame( ELEMENTARY_THEME_BUILD_DIR . '/js/plugin-components/featurepanel.js', $component_assets['script']['file'] );
+	}
+
+	/**
+	 * Test child theme built assets override parent theme assets.
+	 */
+	public function test_child_theme_asset_overrides_are_independent(): void {
+		$tmp_dir          = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-child-theme-assets-' . uniqid( '', true );
+		$child_root       = $tmp_dir . '/child';
+		$child_css_dir    = $child_root . '/assets/build/css/components';
+		$child_js_dir     = $child_root . '/assets/build/js/components';
+		$component_assets = null;
+
+		foreach ( [ $child_css_dir, $child_js_dir ] as $dir ) {
+			mkdir( $dir, 0755, true ); // phpcs:ignore
+		}
+
+		file_put_contents( $child_css_dir . '/featurepanel.css', '.child-feature-panel { color: red; }' ); // phpcs:ignore
+		file_put_contents( $child_js_dir . '/featurepanel.js', 'window.childFeaturePanel = true;' ); // phpcs:ignore
+
+		$stylesheet_callback       = function () use ( $child_root ) {
+			return $child_root;
+		};
+		$stylesheet_uri_callback   = function () {
+			return 'https://child.example';
+		};
+		$before_component_callback = function ( $name, $args, $options ) use ( &$component_assets ) {
+			$component_assets = $options['component']['assets'] ?? null;
+		};
+
+		add_filter( 'stylesheet_directory', $stylesheet_callback );
+		add_filter( 'stylesheet_directory_uri', $stylesheet_uri_callback );
+		add_action( 'elementary_theme_before_get_component', $before_component_callback, 10, 3 );
+
+		try {
+			$output = ComponentLoader::get(
+				'FeaturePanel',
+				[
+					'title'       => 'Child Asset Feature',
+					'description' => 'Child assets should win.',
+				]
+			);
+		} finally {
+			remove_filter( 'stylesheet_directory', $stylesheet_callback );
+			remove_filter( 'stylesheet_directory_uri', $stylesheet_uri_callback );
+			remove_action( 'elementary_theme_before_get_component', $before_component_callback );
+
+			foreach (
+				[
+					$child_css_dir . '/featurepanel.css',
+					$child_js_dir . '/featurepanel.js',
+				] as $file
+			) {
+				if ( is_file( $file ) ) {
+					unlink( $file ); // phpcs:ignore
+				}
+			}
+
+			foreach (
+				[
+					$child_css_dir,
+					$child_root . '/assets/build/css',
+					$child_js_dir,
+					$child_root . '/assets/build/js',
+					$child_root . '/assets/build',
+					$child_root . '/assets',
+					$child_root,
+					$tmp_dir,
+				] as $dir
+			) {
+				if ( is_dir( $dir ) ) {
+					rmdir( $dir ); // phpcs:ignore
+				}
+			}
+		}
+
+		$this->assertStringContainsString( 'Child Asset Feature', $output );
+		$this->assertIsArray( $component_assets );
+		$this->assertSame( $child_css_dir . '/featurepanel.css', $component_assets['style']['file'] );
+		$this->assertSame( 'https://child.example/assets/build/css/components/featurepanel.css', $component_assets['style']['url'] );
+		$this->assertSame( $child_js_dir . '/featurepanel.js', $component_assets['script']['file'] );
+		$this->assertSame( 'https://child.example/assets/build/js/components/featurepanel.js', $component_assets['script']['url'] );
+	}
+
+	/**
+	 * Test child theme asset lookup derives from the configured theme asset directory.
+	 */
+	public function test_child_theme_asset_lookup_uses_theme_asset_config(): void {
+		$tmp_dir          = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-child-theme-config-assets-' . uniqid( '', true );
+		$parent_root      = $tmp_dir . '/parent';
+		$child_root       = $tmp_dir . '/child';
+		$plugin_root      = $tmp_dir . '/plugin-components';
+		$child_css_dir    = $child_root . '/custom-build/styles';
+		$component_dir    = $plugin_root . '/ConfiguredAsset';
+		$component_file   = $component_dir . '/ConfiguredAsset.php';
+		$child_css_file   = $child_css_dir . '/configuredasset.css';
+		$component_assets = null;
+
+		foreach ( [ $child_css_dir, $component_dir ] as $dir ) {
+			mkdir( $dir, 0755, true ); // phpcs:ignore
+		}
+
+		file_put_contents( $component_file, '<?php echo "configured-asset-component";' ); // phpcs:ignore
+		file_put_contents( $child_css_file, '.configured-asset-component { color: green; }' ); // phpcs:ignore
+
+		$template_callback         = function () use ( $parent_root ) {
+			return $parent_root;
+		};
+		$template_uri_callback     = function () {
+			return 'https://parent.example';
+		};
+		$stylesheet_callback       = function () use ( $child_root ) {
+			return $child_root;
+		};
+		$stylesheet_uri_callback   = function () {
+			return 'https://child.example';
+		};
+		$paths_callback            = function ( $paths ) use ( $plugin_root ) {
+			$paths['theme']['style'] = 'custom-build/styles';
+			$paths['plugin']         = [
+				'php' => $plugin_root,
+			];
+			return $paths;
+		};
+		$before_component_callback = function ( $name, $args, $options ) use ( &$component_assets ) {
+			$component_assets = $options['component']['assets'] ?? null;
+		};
+
+		add_filter( 'template_directory', $template_callback );
+		add_filter( 'template_directory_uri', $template_uri_callback );
+		add_filter( 'stylesheet_directory', $stylesheet_callback );
+		add_filter( 'stylesheet_directory_uri', $stylesheet_uri_callback );
+		add_filter( 'elementary_theme_component_paths', $paths_callback );
+		add_action( 'elementary_theme_before_get_component', $before_component_callback, 10, 3 );
+
+		try {
+			$output = ComponentLoader::get(
+				'ConfiguredAsset',
+				[],
+				[
+					'style'  => true,
+					'script' => false,
+				]
+			);
+		} finally {
+			remove_filter( 'template_directory', $template_callback );
+			remove_filter( 'template_directory_uri', $template_uri_callback );
+			remove_filter( 'stylesheet_directory', $stylesheet_callback );
+			remove_filter( 'stylesheet_directory_uri', $stylesheet_uri_callback );
+			remove_filter( 'elementary_theme_component_paths', $paths_callback );
+			remove_action( 'elementary_theme_before_get_component', $before_component_callback );
+
+			foreach ( [ $child_css_file, $component_file ] as $file ) {
+				if ( is_file( $file ) ) {
+					unlink( $file ); // phpcs:ignore
+				}
+			}
+
+			foreach (
+				[
+					$component_dir,
+					$plugin_root,
+					$child_css_dir,
+					$child_root . '/custom-build',
+					$child_root,
+					$parent_root,
+					$tmp_dir,
+				] as $dir
+			) {
+				if ( is_dir( $dir ) ) {
+					rmdir( $dir ); // phpcs:ignore
+				}
+			}
+		}
+
+		$this->assertStringContainsString( 'configured-asset-component', $output );
+		$this->assertIsArray( $component_assets );
+		$this->assertSame( $child_css_file, $component_assets['style']['file'] );
+		$this->assertSame( 'https://child.example/custom-build/styles/configuredasset.css', $component_assets['style']['url'] );
+		$this->assertArrayNotHasKey( 'script', $component_assets );
+	}
+
+	/**
+	 * Test plugin assets backfill missing theme assets for theme-resolved components.
+	 */
+	public function test_plugin_asset_backfills_missing_theme_asset(): void {
+		$tmp_dir           = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-plugin-asset-backfill-' . uniqid( '', true );
+		$parent_root       = $tmp_dir . '/parent';
+		$child_root        = $tmp_dir . '/child';
+		$plugin_script_dir = $tmp_dir . '/plugin-js';
+		$component_assets  = null;
+
+		mkdir( $parent_root, 0755, true ); // phpcs:ignore
+		mkdir( $child_root, 0755, true ); // phpcs:ignore
+		mkdir( $plugin_script_dir, 0755, true ); // phpcs:ignore
+
+		file_put_contents( $plugin_script_dir . '/featurepanel.js', 'window.pluginFeaturePanelBackfill = true;' ); // phpcs:ignore
+
+		$template_callback       = function () use ( $parent_root ) {
+			return $parent_root;
+		};
+		$template_uri_callback   = function () {
+			return 'https://parent.example';
+		};
+		$stylesheet_callback     = function () use ( $child_root ) {
+			return $child_root;
+		};
+		$stylesheet_uri_callback = function () {
+			return 'https://child.example';
+		};
+		$paths_callback          = function ( $paths ) use ( $plugin_script_dir ) {
+			$paths['theme']['script'] = 'theme-js';
+			$paths['plugin']          = [
+				'php'    => ELEMENTARY_THEME_TEMP_DIR . '/plugins-theme/Components',
+				'script' => [
+					'dir' => $plugin_script_dir,
+					'url' => 'https://plugin.example/js/plugin-components',
+				],
+			];
+			return $paths;
+		};
+		$action_callback         = function ( $name, $args, $options ) use ( &$component_assets ) {
+			$component_assets = $options['component']['assets'] ?? null;
+		};
+
+		add_filter( 'template_directory', $template_callback );
+		add_filter( 'template_directory_uri', $template_uri_callback );
+		add_filter( 'stylesheet_directory', $stylesheet_callback );
+		add_filter( 'stylesheet_directory_uri', $stylesheet_uri_callback );
+		add_filter( 'elementary_theme_component_paths', $paths_callback );
+		add_action( 'elementary_theme_before_get_component', $action_callback, 10, 3 );
+
+		try {
+			$output = ComponentLoader::get(
+				'FeaturePanel',
+				[ 'title' => 'Plugin Asset Backfill' ],
+				[
+					'script' => true,
+					'style'  => false,
+				]
+			);
+		} finally {
+			remove_filter( 'template_directory', $template_callback );
+			remove_filter( 'template_directory_uri', $template_uri_callback );
+			remove_filter( 'stylesheet_directory', $stylesheet_callback );
+			remove_filter( 'stylesheet_directory_uri', $stylesheet_uri_callback );
+			remove_filter( 'elementary_theme_component_paths', $paths_callback );
+			remove_action( 'elementary_theme_before_get_component', $action_callback );
+
+			if ( is_file( $plugin_script_dir . '/featurepanel.js' ) ) {
+				unlink( $plugin_script_dir . '/featurepanel.js' ); // phpcs:ignore
+			}
+
+			foreach ( [ $parent_root, $child_root, $plugin_script_dir, $tmp_dir ] as $dir ) {
+				if ( is_dir( $dir ) ) {
+					rmdir( $dir ); // phpcs:ignore
+				}
+			}
+		}
+
+		$this->assertStringContainsString( 'Plugin Asset Backfill', $output );
+		$this->assertIsArray( $component_assets );
+		$this->assertArrayHasKey( 'script', $component_assets );
+		$this->assertArrayNotHasKey( 'style', $component_assets );
+		$this->assertSame( $plugin_script_dir . '/featurepanel.js', $component_assets['script']['file'] );
+		$this->assertSame( 'https://plugin.example/js/plugin-components/featurepanel.js', $component_assets['script']['url'] );
+	}
+
+	/**
+	 * Test PHP-only path configs render without asset config.
+	 */
+	public function test_php_only_component_path_config_renders_without_assets(): void {
+		$tmp_dir     = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-php-only-components-' . uniqid( '', true );
+		$button_dir  = $tmp_dir . '/PhpOnly';
+		$button_file = $button_dir . '/PhpOnly.php';
+
+		mkdir( $button_dir, 0755, true ); // phpcs:ignore
+
+		file_put_contents( // phpcs:ignore
+			$button_file,
+			'<?php echo "php-only-button";'
+		);
+
+		$callback = function ( $paths ) use ( $tmp_dir ) {
+			$paths['plugin'] = [
+				'php' => $tmp_dir,
+			];
+			return $paths;
+		};
+
+		add_filter( 'elementary_theme_component_paths', $callback );
+
+		try {
+			ob_start();
+			ComponentLoader::render( 'PhpOnly', [ 'label' => 'Test' ], [ 'priority' => 'plugin' ] );
+			$output = ob_get_clean();
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $callback );
+
+			if ( is_file( $button_file ) ) {
+				unlink( $button_file ); // phpcs:ignore
+			}
+
+			if ( is_dir( $button_dir ) ) {
+				rmdir( $button_dir ); // phpcs:ignore
+			}
+
+			if ( is_dir( $tmp_dir ) ) {
+				rmdir( $tmp_dir ); // phpcs:ignore
+			}
+		}
+
+		$this->assertStringContainsString( 'php-only-button', $output );
+	}
+
+	/**
+	 * Test malformed asset metadata falls back safely.
+	 */
+	public function test_malformed_component_asset_metadata_falls_back_safely(): void {
+		$tmp_dir         = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-malformed-asset-meta-' . uniqid( '', true );
+		$component_root  = $tmp_dir . '/components';
+		$style_root      = $tmp_dir . '/css';
+		$button_dir      = $component_root . '/MalformedAsset';
+		$button_file     = $button_dir . '/MalformedAsset.php';
+		$button_css_file = $style_root . '/malformedasset.css';
+		$button_asset    = $style_root . '/malformedasset.asset.php';
+
+		mkdir( $button_dir, 0755, true ); // phpcs:ignore
+		mkdir( $style_root, 0755, true ); // phpcs:ignore
+
+		file_put_contents( // phpcs:ignore
+			$button_file,
+			'<?php echo "malformed-asset-meta-button";'
+		);
+
+		file_put_contents( // phpcs:ignore
+			$button_css_file,
+			'.malformed-asset-meta-button { color: inherit; }'
+		);
+
+		file_put_contents( // phpcs:ignore
+			$button_asset,
+			'<?php return [ "dependencies" => "bad-deps", "version" => [ "bad-version" ] ];'
+		);
+
+		$callback = function ( $paths ) use ( $component_root, $style_root ) {
+			$paths['plugin'] = [
+				'php'   => $component_root,
+				'style' => [
+					'dir' => $style_root,
+					'url' => 'https://example.com/css',
+				],
+			];
+			return $paths;
+		};
+
+		add_filter( 'elementary_theme_component_paths', $callback );
+
+		try {
+			ob_start();
+			ComponentLoader::render( 'MalformedAsset', [ 'label' => 'Test' ], [ 'priority' => 'plugin' ] );
+			$output = ob_get_clean();
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $callback );
+
+			foreach ( [ $button_asset, $button_css_file, $button_file ] as $file ) {
+				if ( is_file( $file ) ) {
+					unlink( $file ); // phpcs:ignore
+				}
+			}
+
+			foreach ( [ $button_dir, $style_root, $component_root, $tmp_dir ] as $dir ) {
+				if ( is_dir( $dir ) ) {
+					rmdir( $dir ); // phpcs:ignore
+				}
+			}
+		}
+
+		$this->assertStringContainsString( 'malformed-asset-meta-button', $output );
+	}
+
+	/**
+	 * Test enqueue defaults prevent disabled assets from being collected.
+	 */
+	public function test_enqueue_defaults_disable_asset_collection(): void {
+		$component_assets = null;
+
+		$enqueue_callback = function () {
+			return [
+				'script' => false,
+				'style'  => false,
+			];
+		};
+
+		$action_callback = function ( $name, $args, $options ) use ( &$component_assets ) {
+			$component_assets = $options['component']['assets'] ?? null;
+		};
+
+		add_filter( 'elementary_theme_component_enqueue_defaults', $enqueue_callback );
+		add_action( 'elementary_theme_before_get_component', $action_callback, 10, 3 );
+
+		try {
+			$output = ComponentLoader::get( 'Button', [ 'label' => 'No Assets' ] );
+		} finally {
+			remove_filter( 'elementary_theme_component_enqueue_defaults', $enqueue_callback );
+			remove_action( 'elementary_theme_before_get_component', $action_callback );
+		}
+
+		$this->assertStringContainsString( 'No Assets', $output );
+		$this->assertSame( [], $component_assets );
+	}
+
+	/**
+	 * Test render options override enqueue defaults for asset collection.
+	 */
+	public function test_enqueue_options_override_defaults_for_asset_collection(): void {
+		$component_assets = null;
+
+		$enqueue_callback = function () {
+			return [
+				'script' => false,
+				'style'  => false,
+			];
+		};
+
+		$action_callback = function ( $name, $args, $options ) use ( &$component_assets ) {
+			$component_assets = $options['component']['assets'] ?? null;
+		};
+
+		add_filter( 'elementary_theme_component_enqueue_defaults', $enqueue_callback );
+		add_action( 'elementary_theme_before_get_component', $action_callback, 10, 3 );
+
+		try {
+			$output = ComponentLoader::get(
+				'Button',
+				[ 'label' => 'Style Only' ],
+				[
+					'script' => false,
+					'style'  => true,
+				]
+			);
+		} finally {
+			remove_filter( 'elementary_theme_component_enqueue_defaults', $enqueue_callback );
+			remove_action( 'elementary_theme_before_get_component', $action_callback );
+		}
+
+		$this->assertStringContainsString( 'Style Only', $output );
+		$this->assertIsArray( $component_assets );
+		$this->assertArrayHasKey( 'style', $component_assets );
+		$this->assertArrayNotHasKey( 'script', $component_assets );
+	}
+
+	/**
+	 * Test script-only enqueue options collect only script assets.
+	 */
+	public function test_script_only_enqueue_options_collect_only_script_assets(): void {
+		$component_assets = null;
+
+		$action_callback = function ( $name, $args, $options ) use ( &$component_assets ) {
+			$component_assets = $options['component']['assets'] ?? null;
+		};
+
+		add_action( 'elementary_theme_before_get_component', $action_callback, 10, 3 );
+
+		try {
+			$output = ComponentLoader::get(
+				'Button',
+				[ 'label' => 'Script Only' ],
+				[
+					'script' => true,
+					'style'  => false,
+				]
+			);
+		} finally {
+			remove_action( 'elementary_theme_before_get_component', $action_callback );
+		}
+
+		$this->assertStringContainsString( 'Script Only', $output );
+		$this->assertIsArray( $component_assets );
+		$this->assertArrayHasKey( 'script', $component_assets );
+		$this->assertArrayNotHasKey( 'style', $component_assets );
+	}
+
+	/**
+	 * Test enqueue defaults prevent disabled assets from being enqueued.
+	 */
+	public function test_enqueue_defaults_disable_asset_enqueueing(): void {
+		$tmp_dir        = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-disabled-asset-enqueue-' . uniqid( '', true );
+		$component_root = $tmp_dir . '/components';
+		$style_root     = $tmp_dir . '/css';
+		$script_root    = $tmp_dir . '/js';
+		$button_dir     = $component_root . '/DisabledAsset';
+		$button_file    = $button_dir . '/DisabledAsset.php';
+		$button_css     = $style_root . '/disabledasset.css';
+		$button_js      = $script_root . '/disabledasset.js';
+
+		mkdir( $button_dir, 0755, true ); // phpcs:ignore
+		mkdir( $style_root, 0755, true ); // phpcs:ignore
+		mkdir( $script_root, 0755, true ); // phpcs:ignore
+
+		file_put_contents( $button_file, '<?php echo "disabled-asset-enqueue-button";' ); // phpcs:ignore
+		file_put_contents( $button_css, '.disabled-asset-enqueue-button { color: inherit; }' ); // phpcs:ignore
+		file_put_contents( $button_js, 'window.elementaryDisabledAssetEnqueueButton = true;' ); // phpcs:ignore
+
+		$paths_callback = function ( $paths ) use ( $component_root, $style_root, $script_root ) {
+			$paths['plugin'] = [
+				'php'    => $component_root,
+				'style'  => [
+					'dir' => $style_root,
+					'url' => 'https://example.com/css',
+				],
+				'script' => [
+					'dir' => $script_root,
+					'url' => 'https://example.com/js',
+				],
+			];
+			return $paths;
+		};
+
+		$enqueue_callback = function () {
+			return [
+				'script' => false,
+				'style'  => false,
+			];
+		};
+
+		add_filter( 'elementary_theme_component_paths', $paths_callback );
+		add_filter( 'elementary_theme_component_enqueue_defaults', $enqueue_callback );
+
+		self::reset_component_asset_handles( 'disabledasset' );
+
+		try {
+			$output = ComponentLoader::get( 'DisabledAsset', [ 'label' => 'No Enqueue' ], [ 'priority' => 'plugin' ] );
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $paths_callback );
+			remove_filter( 'elementary_theme_component_enqueue_defaults', $enqueue_callback );
+
+			self::reset_component_asset_handles( 'disabledasset' );
+
+			foreach ( [ $button_js, $button_css, $button_file ] as $file ) {
+				if ( is_file( $file ) ) {
+					unlink( $file ); // phpcs:ignore
+				}
+			}
+
+			foreach ( [ $button_dir, $style_root, $script_root, $component_root, $tmp_dir ] as $dir ) {
+				if ( is_dir( $dir ) ) {
+					rmdir( $dir ); // phpcs:ignore
+				}
+			}
+		}
+
+		$this->assertStringContainsString( 'disabled-asset-enqueue-button', $output );
+		$this->assertFalse( wp_style_is( 'elementary-theme-component-disabledasset-style', 'enqueued' ) );
+		$this->assertFalse( wp_script_is( 'elementary-theme-component-disabledasset-script', 'enqueued' ) );
+	}
+
+	/**
+	 * Test render options override enqueue defaults before assets are enqueued.
+	 */
+	public function test_enqueue_options_override_defaults_before_enqueueing_assets(): void {
+		$tmp_dir        = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-override-asset-enqueue-' . uniqid( '', true );
+		$component_root = $tmp_dir . '/components';
+		$style_root     = $tmp_dir . '/css';
+		$script_root    = $tmp_dir . '/js';
+		$button_dir     = $component_root . '/OverrideAsset';
+		$button_file    = $button_dir . '/OverrideAsset.php';
+		$button_css     = $style_root . '/overrideasset.css';
+		$button_js      = $script_root . '/overrideasset.js';
+
+		mkdir( $button_dir, 0755, true ); // phpcs:ignore
+		mkdir( $style_root, 0755, true ); // phpcs:ignore
+		mkdir( $script_root, 0755, true ); // phpcs:ignore
+
+		file_put_contents( $button_file, '<?php echo "override-asset-enqueue-button";' ); // phpcs:ignore
+		file_put_contents( $button_css, '.override-asset-enqueue-button { color: inherit; }' ); // phpcs:ignore
+		file_put_contents( $button_js, 'window.elementaryOverrideAssetEnqueueButton = true;' ); // phpcs:ignore
+
+		$paths_callback = function ( $paths ) use ( $component_root, $style_root, $script_root ) {
+			$paths['plugin'] = [
+				'php'    => $component_root,
+				'style'  => [
+					'dir' => $style_root,
+					'url' => 'https://example.com/css',
+				],
+				'script' => [
+					'dir' => $script_root,
+					'url' => 'https://example.com/js',
+				],
+			];
+			return $paths;
+		};
+
+		$enqueue_callback = function () {
+			return [
+				'script' => false,
+				'style'  => false,
+			];
+		};
+
+		add_filter( 'elementary_theme_component_paths', $paths_callback );
+		add_filter( 'elementary_theme_component_enqueue_defaults', $enqueue_callback );
+
+		self::reset_component_asset_handles( 'overrideasset' );
+
+		try {
+			$output = ComponentLoader::get(
+				'OverrideAsset',
+				[ 'label' => 'Script Override' ],
+				[
+					'priority' => 'plugin',
+					'script'   => true,
+					'style'    => false,
+				]
+			);
+
+			$this->assertStringContainsString( 'override-asset-enqueue-button', $output );
+			$this->assertTrue( wp_script_is( 'elementary-theme-component-overrideasset-script', 'enqueued' ) );
+			$this->assertFalse( wp_style_is( 'elementary-theme-component-overrideasset-style', 'enqueued' ) );
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $paths_callback );
+			remove_filter( 'elementary_theme_component_enqueue_defaults', $enqueue_callback );
+
+			self::reset_component_asset_handles( 'overrideasset' );
+
+			foreach ( [ $button_js, $button_css, $button_file ] as $file ) {
+				if ( is_file( $file ) ) {
+					unlink( $file ); // phpcs:ignore
+				}
+			}
+
+			foreach ( [ $button_dir, $style_root, $script_root, $component_root, $tmp_dir ] as $dir ) {
+				if ( is_dir( $dir ) ) {
+					rmdir( $dir ); // phpcs:ignore
+				}
+			}
+		}
+	}
+
+	/**
+	 * Test nested components inherit disabled enqueue options.
+	 */
+	public function test_nested_components_inherit_disabled_enqueue_options(): void {
+		$component_assets = [];
+
+		$action_callback = function ( $name, $args, $options ) use ( &$component_assets ) {
+			$component_assets[ $name ] = $options['component']['assets'] ?? null;
+		};
+
+		add_action( 'elementary_theme_before_get_component', $action_callback, 10, 3 );
+
+		try {
+			$output = ComponentLoader::get(
+				'Card',
+				[
+					'title' => 'Nested Disabled Assets',
+					'url'   => 'https://example.com',
+				],
+				[
+					'script' => false,
+					'style'  => false,
+				]
+			);
+		} finally {
+			remove_action( 'elementary_theme_before_get_component', $action_callback );
+		}
+
+		$this->assertStringContainsString( 'Nested Disabled Assets', $output );
+		$this->assertSame( [], $component_assets['Card'] );
+		$this->assertSame( [], $component_assets['Button'] );
+	}
+
+	/**
+	 * Test repeated renders use fresh arguments when lookup data is cached.
+	 */
+	public function test_repeated_renders_use_fresh_arguments(): void {
+		$first_output  = ComponentLoader::get( 'Button', [ 'label' => 'First Render' ] );
+		$second_output = ComponentLoader::get( 'Button', [ 'label' => 'Second Render' ] );
+
+		$this->assertStringContainsString( 'First Render', $first_output );
+		$this->assertStringNotContainsString( 'Second Render', $first_output );
+		$this->assertStringContainsString( 'Second Render', $second_output );
+		$this->assertStringNotContainsString( 'First Render', $second_output );
+	}
+
+	/**
+	 * Test cached lookup data stays sensitive to filtered path changes.
+	 */
+	public function test_component_lookup_cache_is_sensitive_to_filtered_paths(): void {
+		$first_tmp_dir  = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-cache-first-' . uniqid( '', true );
+		$second_tmp_dir = rtrim( sys_get_temp_dir(), '/\\' ) . '/elementary-test-cache-second-' . uniqid( '', true );
+		$active_tmp_dir = $first_tmp_dir;
+
+		$first_button_dir   = $first_tmp_dir . '/CacheProbe';
+		$second_button_dir  = $second_tmp_dir . '/CacheProbe';
+		$first_button_file  = $first_button_dir . '/CacheProbe.php';
+		$second_button_file = $second_button_dir . '/CacheProbe.php';
+
+		mkdir( $first_button_dir, 0755, true ); // phpcs:ignore
+		mkdir( $second_button_dir, 0755, true ); // phpcs:ignore
+
+		file_put_contents( // phpcs:ignore
+			$first_button_file,
+			'<?php echo "cache-first-button";'
+		);
+
+		file_put_contents( // phpcs:ignore
+			$second_button_file,
+			'<?php echo "cache-second-button";'
+		);
+
+		$callback = function ( $paths ) use ( &$active_tmp_dir ) {
+			$paths['plugin'] = [
+				'php' => $active_tmp_dir,
+			];
+			return $paths;
+		};
+
+		add_filter( 'elementary_theme_component_paths', $callback );
+
+		try {
+			$first_output   = ComponentLoader::get( 'CacheProbe', [ 'label' => 'Test' ], [ 'priority' => 'plugin' ] );
+			$active_tmp_dir = $second_tmp_dir;
+			$second_output  = ComponentLoader::get( 'CacheProbe', [ 'label' => 'Test' ], [ 'priority' => 'plugin' ] );
+		} finally {
+			remove_filter( 'elementary_theme_component_paths', $callback );
+
+			foreach ( [ $first_button_file, $second_button_file ] as $button_file ) {
+				if ( is_file( $button_file ) ) {
+					unlink( $button_file ); // phpcs:ignore
+				}
+			}
+
+			foreach ( [ $first_button_dir, $second_button_dir, $first_tmp_dir, $second_tmp_dir ] as $dir ) {
+				if ( is_dir( $dir ) ) {
+					rmdir( $dir ); // phpcs:ignore
+				}
+			}
+		}
+
+		$this->assertStringContainsString( 'cache-first-button', $first_output );
+		$this->assertStringContainsString( 'cache-second-button', $second_output );
+	}
+
+	/**
+	 * Test that the global wrapper function exists.
+	 */
+	public function test_global_wrapper_function_exists(): void {
+		$this->assertTrue( function_exists( 'elementary_theme_component' ) );
+	}
+
+	/**
+	 * Test that the global wrapper delegates to ComponentLoader.
+	 */
+	public function test_global_wrapper_renders_component(): void {
+		ob_start();
+		elementary_theme_component( 'Button', [ 'label' => 'Global Test' ] );
+		$output = ob_get_clean();
+
+		$this->assertStringContainsString( 'Global Test', $output );
+	}
+
+	/**
+	 * Test the global get wrapper returns markup without direct output.
+	 */
+	public function test_global_get_wrapper_returns_markup_without_direct_output(): void {
+		$this->expectOutputString( '' );
+		$markup = elementary_theme_get_component( 'Button', [ 'label' => 'Global Buffered' ] );
+
+		$this->assertStringContainsString( 'Global Buffered', $markup );
+		$this->assertStringContainsString( '<button', $markup );
+	}
+
+	/**
+	 * Reset component asset handles between enqueue assertions.
+	 *
+	 * @param string $slug Component slug.
+	 *
+	 * @return void
+	 */
+	private static function reset_component_asset_handles( string $slug ): void {
+		$style_handle  = 'elementary-theme-component-' . $slug . '-style';
+		$script_handle = 'elementary-theme-component-' . $slug . '-script';
+
+		wp_dequeue_style( $style_handle );
+		wp_deregister_style( $style_handle );
+		wp_dequeue_script( $script_handle );
+		wp_deregister_script( $script_handle );
+	}
+
+	/**
+	 * Reset ComponentLoader private static caches between tests.
+	 *
+	 * @return void
+	 */
+	private static function reset_component_loader_caches(): void {
+		$reflection = new ReflectionClass( ComponentLoader::class );
+
+		foreach ( [ 'component_data_cache', 'asset_meta_cache' ] as $property_name ) {
+			if ( ! $reflection->hasProperty( $property_name ) ) {
+				continue;
+			}
+
+			$property = $reflection->getProperty( $property_name );
+			$property->setAccessible( true );
+			$property->setValue( null, [] );
+		}
+	}
+}
diff --git a/webpack.config.js b/webpack.config.js
index 89d80b18..9807e8cc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -99,6 +99,35 @@ const readAllFileEntries = ( dir, { excludeDirs = [] } = {} ) => {
 	return entries;
 };
 
+/**
+ * Read component file entries from a components directory.
+ *
+ * @param {string} dir Base directory to scan (e.g., './src/components').
+ * @param {RegExp} extFilter Regex to match file extensions.
+ * @return {Object} Object mapping entry names to file paths.
+ */
+const getComponentEntries = ( dir, extFilter ) => {
+	const entries = {};
+	if ( ! fs.existsSync( dir ) ) {
+		return entries;
+	}
+	const resolvedDir = path.resolve( dir );
+	fs.readdirSync( resolvedDir, { withFileTypes: true } ).forEach( ( entry ) => {
+		if ( entry.isDirectory() && ! entry.name.startsWith( '_' ) && ! entry.name.startsWith( '.' ) ) {
+			const compName = entry.name;
+			const compDir = path.join( resolvedDir, compName );
+			fs.readdirSync( compDir ).forEach( ( file ) => {
+				if ( file.startsWith( compName ) && file.match( extFilter ) ) {
+					const entryName = `components/${ compName.toLowerCase() }`;
+					entries[ entryName ] = path.join( compDir, file );
+				}
+			} );
+		}
+	} );
+	return entries;
+};
+
+
 // Extend the default config.
 const sharedConfig = {
 	...scriptConfig,
@@ -131,7 +160,10 @@ const sharedConfig = {
 // CSS / SCSS entry points from src/css/{frontend,admin,editor}/.
 const styles = {
 	...sharedConfig,
-	entry: () => readAllFileEntries( './src/css' ),
+	entry: () => ( {
+		...readAllFileEntries( './src/css' ),
+		...getComponentEntries( './src/components', /\.(sc|sa|c)ss$/ ),
+	} ),
 	module: {
 		...sharedConfig.module,
 	},
@@ -145,7 +177,10 @@ const styles = {
 // Standard JS entry points from src/js/{frontend,admin,editor}/.
 const scripts = {
 	...sharedConfig,
-	entry: () => readAllFileEntries( './src/js', { excludeDirs: [ 'modules' ] } ),
+	entry: () => ( {
+		...readAllFileEntries( './src/js', { excludeDirs: [ 'modules' ] } ),
+		...getComponentEntries( './src/components', /\.js$/ ),
+	} ),
 	plugins: [
 		...sharedConfig.plugins,
 		new CopyWebpackPlugin( {