diff --git a/components/composition/App/App.css b/components/composition/App/App.css
new file mode 100644
index 0000000..d95f133
--- /dev/null
+++ b/components/composition/App/App.css
@@ -0,0 +1,19 @@
+diamond-app {
+ display: grid;
+ grid-template-areas: 'header' 'main' 'footer';
+ grid-template-columns: 1fr;
+ grid-template-rows: auto 1fr auto;
+ min-height: 100dvh;
+
+ &::part(header) {
+ grid-area: header;
+ }
+
+ &::part(main) {
+ grid-area: main;
+ }
+
+ &::part(footer) {
+ grid-area: footer;
+ }
+}
diff --git a/components/composition/App/App.stories.ts b/components/composition/App/App.stories.ts
new file mode 100644
index 0000000..09bd595
--- /dev/null
+++ b/components/composition/App/App.stories.ts
@@ -0,0 +1,37 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+export default {
+ component: 'diamond-app',
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component:
+ 'Wraps the whole site and provides slots for header, footer, and main content.',
+ },
+ },
+ },
+};
+
+export const App: StoryObj = {
+ render: () => html`
+
+
+
+
+
+
+
+
+ Main
+
+
+
+
+
+
+
+
+ `,
+};
diff --git a/components/composition/App/App.ts b/components/composition/App/App.ts
new file mode 100644
index 0000000..d3715c8
--- /dev/null
+++ b/components/composition/App/App.ts
@@ -0,0 +1,35 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { JSXCustomElement } from '../../../types/jsx-custom-element';
+
+@customElement('diamond-app')
+export class App extends LitElement {
+ render() {
+ return html`
+
+
+
+
+
+
+
+
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'diamond-app': App;
+ }
+}
+
+declare module 'react' {
+ namespace JSX {
+ interface IntrinsicElements {
+ 'diamond-app': App & JSXCustomElement;
+ }
+ }
+}