diff --git a/inc/helpers/custom-functions.php b/inc/helpers/custom-functions.php
new file mode 100644
index 00000000..861c1a71
--- /dev/null
+++ b/inc/helpers/custom-functions.php
@@ -0,0 +1,50 @@
+<?php
+/**
+ * Define custom functions for the theme.
+ *
+ * @package rtCamp\Theme\Elementary
+ */
+
+declare( strict_types = 1 );
+
+use rtCamp\WPFramework\Components\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<string, mixed> $args    Arguments to pass to the component.
+	 * @param array<string, mixed> $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<string, mixed> $args    Arguments to pass to the component.
+	 * @param array<string, mixed> $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..65088c80 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..25dac49c
--- /dev/null
+++ b/src/components/button/button.php
@@ -0,0 +1,45 @@
+<?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.
+ * }
+ */
+
+declare( strict_types = 1 );
+
+$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..fffb5ebf
--- /dev/null
+++ b/src/components/card/card.php
@@ -0,0 +1,70 @@
+<?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.
+ * }
+ */
+
+declare( strict_types = 1 );
+
+$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
+				elementary_theme_component(
+					'Button',
+					[
+						'label' => $title,
+						'url'   => $url,
+						'class' => 'elementary-card__button',
+					],
+					array_intersect_key(
+						$options,
+						[
+							'script' => true,
+							'style'  => true,
+						]
+					)
+				);
+				?>
+			</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/js/jest.config.js b/tests/js/jest.config.js
index ed13ea53..09257dd8 100644
--- a/tests/js/jest.config.js
+++ b/tests/js/jest.config.js
@@ -4,9 +4,6 @@ module.exports = {
 	transform: {
 		'^.+\\.[jt]sx?$': '<rootDir>/node_modules/@wordpress/scripts/config/babel-transform',
 	},
-	setupFiles: [
-		'<rootDir>/tests/js/setup-globals',
-	],
 	preset: '@wordpress/jest-preset-default',
 	testPathIgnorePatterns: [
 		'<rootDir>/.git',
diff --git a/tests/js/webpack-config.test.js b/tests/js/webpack-config.test.js
new file mode 100644
index 00000000..ac65afd5
--- /dev/null
+++ b/tests/js/webpack-config.test.js
@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+const fs = require( 'fs' );
+const os = require( 'os' );
+const path = require( 'path' );
+
+jest.mock( '@wordpress/scripts/config/webpack.config', () => [
+	{
+		optimization: {
+			minimizer: [],
+			splitChunks: {},
+		},
+		plugins: [],
+	},
+	{},
+] );
+
+const { getComponentEntries } = require( '../../webpack.config' );
+
+describe( 'webpack component entries', () => {
+	let tmpDir;
+
+	afterEach( () => {
+		if ( tmpDir ) {
+			fs.rmSync( tmpDir, { recursive: true, force: true } );
+			tmpDir = undefined;
+		}
+	} );
+
+	it( 'only matches files with the exact component basename', () => {
+		tmpDir = fs.mkdtempSync( path.join( os.tmpdir(), 'elementary-webpack-components-' ) );
+		const buttonDir = path.join( tmpDir, 'button' );
+
+		fs.mkdirSync( buttonDir );
+		fs.writeFileSync( path.join( buttonDir, 'button.js' ), '' );
+		fs.writeFileSync( path.join( buttonDir, 'button-extra.js' ), '' );
+		fs.writeFileSync( path.join( buttonDir, 'button.test.js' ), '' );
+		fs.writeFileSync( path.join( buttonDir, 'button_utils.js' ), '' );
+
+		expect( getComponentEntries( tmpDir, /\.js$/ ) ).toEqual( {
+			'components/button': path.join( buttonDir, 'button.js' ),
+		} );
+	} );
+} );
diff --git a/webpack.config.js b/webpack.config.js
index a2876323..e37e4e10 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -86,6 +86,7 @@ const CSS_FILENAME = '../css/[name].css';
 const FRONTEND_AND_ADMIN_DIRS = [ 'frontend', 'admin' ];
 const EDITOR_DIRS = [ 'editor' ];
 const MODULES_DIR = 'modules';
+const COMPONENTS_DIR = rootPath( 'src', 'components' );
 const STYLE_ONLY_IGNORED_PLUGINS = [
 	'DependencyExtractionWebpackPlugin',
 	'RtlCssPlugin',
@@ -185,6 +186,44 @@ const readAllFileEntries = (
 	return entries;
 };
 
+/**
+ * Read component entry files from src/components/{component}/{component}.{ext}.
+ *
+ * @param {string} dir     Component source directory.
+ * @param {RegExp} pattern File extension pattern to match.
+ * @return {Object} Object mapping component entry names to file paths.
+ */
+const getComponentEntries = ( dir = COMPONENTS_DIR, pattern = /\.(js|s[ac]ss)$/ ) => {
+	const entries = {};
+
+	if ( ! fs.existsSync( dir ) ) {
+		return entries;
+	}
+
+	fs.readdirSync( dir, { withFileTypes: true } ).forEach( ( entry ) => {
+		if ( ! entry.isDirectory() || entry.name.startsWith( '_' ) || entry.name.startsWith( '.' ) ) {
+			return;
+		}
+
+		const componentFile = path.join( dir, entry.name, entry.name );
+		const matchedFile   = fs
+			.readdirSync( path.join( dir, entry.name ), { withFileTypes: true } )
+			.find( ( file ) => {
+				if ( ! file.isFile() || ! pattern.test( file.name ) ) {
+					return false;
+				}
+
+				return path.join( dir, entry.name, file.name ).replace( /\.[^/.]+$/, '' ) === componentFile;
+			} );
+
+		if ( matchedFile ) {
+			entries[ `components/${ entry.name }` ] = path.join( dir, entry.name, matchedFile.name );
+		}
+	} );
+
+	return entries;
+};
+
 class CleanBuildPlugin {
 	static cleaned = false;
 
@@ -257,6 +296,41 @@ class CssAssetRtlPlugin {
 	}
 }
 
+class CssAssetMetadataPlugin {
+	/**
+	 * Emit a minimal WordPress asset metadata file next to each component CSS file.
+	 *
+	 * @param {import('webpack').Compiler} compiler Webpack compiler.
+	 */
+	apply( compiler ) {
+		compiler.hooks.compilation.tap( 'CssAssetMetadataPlugin', ( compilation ) => {
+			compilation.hooks.processAssets.tap(
+				{
+					name: 'CssAssetMetadataPlugin',
+					stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+				},
+				() => {
+					for ( const filename of Object.keys( compilation.assets ) ) {
+						if (
+							path.extname( filename ) !== '.css' ||
+							filename.endsWith( '-rtl.css' ) ||
+							! filename.includes( '/components/' )
+						) {
+							continue;
+						}
+
+						const assetFilename = filename.replace( /\.css$/, '.asset.php' );
+
+						compilation.assets[ assetFilename ] = new webpack.sources.RawSource(
+							`<?php return array('dependencies' => array(), 'version' => '${ compilation.hash }');\n`,
+						);
+					}
+				},
+			);
+		} );
+	}
+}
+
 /**
  * Force MiniCssExtractPlugin to emit CSS into the sibling CSS build directory.
  *
@@ -453,6 +527,31 @@ const scripts = {
 	],
 };
 
+// Component JS entry points from src/components/{component}/{component}.js.
+const componentScripts = {
+	...sharedNonHotConfig,
+	entry: () => getComponentEntries( COMPONENTS_DIR, /\.js$/ ),
+	plugins: [
+		...sharedNonHotConfig.plugins.filter( isNotPlugin( 'RtlCssPlugin' ) ),
+	],
+};
+
+// Component SCSS entry points from src/components/{component}/{component}.scss.
+const componentStyles = {
+	...sharedNonHotConfig,
+	entry: () => getComponentEntries( COMPONENTS_DIR, /\.s[ac]ss$/ ),
+	module: {
+		...sharedNonHotConfig.module,
+	},
+	plugins: [
+		...sharedNonHotConfig.plugins.filter(
+			isNotOneOfPlugins( STYLE_ONLY_IGNORED_PLUGINS ),
+		),
+		new CssAssetMetadataPlugin(),
+		new CssAssetRtlPlugin(),
+	],
+};
+
 // Editor JS entry points keep webpack-dev-server HMR/Fast Refresh.
 const editorScripts = {
 	...sharedConfig,
@@ -480,4 +579,7 @@ const moduleScripts = {
 	},
 };
 
-module.exports = [ scripts, editorScripts, styles, moduleScripts ];
+const configs = [ scripts, componentScripts, editorScripts, styles, componentStyles, moduleScripts ];
+
+module.exports = configs;
+module.exports.getComponentEntries = getComponentEntries;