diff --git a/.claude/rules/paper-components.md b/.claude/rules/paper-components.md
new file mode 100644
index 000000000..d916312d0
--- /dev/null
+++ b/.claude/rules/paper-components.md
@@ -0,0 +1,280 @@
+---
+paths: packages/emerald/**
+---
+
+# Paper Design System Components
+
+Rules for building components in Paper design systems (Emerald, Onyx, etc.).
+
+## Architecture
+
+```
+Emerald / Onyx / etc. (styled design system — scoped to its own spec)
+    ↓
+Paper (styling primitives — V0Paper, composables output utility classes)
+    ↓
+v0 (headless logic & accessibility — zero styling)
+```
+
+Each design system is a **complete framework for a single design language**, not a theme. It only ships styles and functionality defined in its own spec. No universal framework sprawl.
+
+## Contract
+
+### Must
+
+- **Root components use `V0Paper`** as their base element — unless the component doesn't need Paper's styling surface (e.g., layout primitives like EmDivider), in which case `Atom` directly is fine. Exception: renderless v0 roots (like DialogRoot) don't get V0Paper — it goes on the first visible element instead (e.g., EmDialogContent).
+- **Sub-components use `V0Paper` selectively** — only when the design spec requires independent styling control (own color, spacing, elevation). Otherwise, use raw v0 primitives or plain elements styled via parent's CSS scope.
+- **Only wrap v0 sub-components the DS customizes.** Unwrapped v0 sub-components are imported directly by the consumer. Adding a wrapper later is additive, not breaking.
+- **Props → utility classes → CSS.** Props are the developer-facing API; Paper's composables resolve them to utility classes. V0Paper applies these via `:class`.
+- **Don't mix prop and class for the same concern.** `border="md"` and `class="rounded-md"` is fine (different concerns). `border="md"` and `class="border-lg"` is not.
+- **Data attribute classes for state-driven styling.** Use `data-[disabled]:`, `data-[state=x]:` etc. as the primary approach for styling component states. Scoped slot variables remain available for logic, not styling.
+- **Each component ships its own prop defaults.** No global token layer at the DS level. Variations are supported on a design-by-design basis.
+- **Named slots become components.** Only the default slot exists. If something would be a named slot, it becomes a sub-component.
+- **Explicitly re-expose v-model and events.** DS components declare their own `defineModel` / `defineEmits` and wire them to the underlying v0 primitive. No transparent `$attrs` forwarding — the DS controls its API surface.
+- **Forward v0 slot props via default slot.** When wrapping a v0 compound component, pass slot props through: `<template #default="slotProps"><slot v-bind="slotProps" /></template>`.
+
+### May
+
+- Create DS-specific sub-components not in v0 (e.g., `EmButtonLoader`, `EmButtonPrepend`) when the design spec calls for it
+- Add wrapper sub-components for v0 primitives later — this is additive and non-breaking
+- Paper may grow shared composed components (e.g., a preconfigured Popover-based menu) when a pattern proves universal across DSes — rare and organic, not planned upfront
+
+### Must Not
+
+- **Add logic that v0 doesn't provide.** If the DS needs new behavior, that belongs in v0.
+- **Require a plugin install to function.** DS components work standalone.
+- **Cover design patterns outside the DS's own spec.** Emerald ships what Emerald's spec defines. Nothing more.
+
+## Component Patterns
+
+### Pattern 1: Root with V0Paper (EmButton)
+
+For components that render a visible root element. V0Paper provides the styling surface, DS-specific props are destructured out, rest spread to V0Paper.
+
+```vue
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmButtonProps extends V0PaperProps {
+    disabled?: boolean
+    loading?: boolean
+    type?: 'button' | 'submit' | 'reset'
+    href?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButton' })
+
+  const {
+    disabled = false,
+    loading = false,
+    type = 'button',
+    href,
+    ...paperProps
+  } = defineProps<EmButtonProps>()
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  function onClick (event: MouseEvent) {
+    if (disabled || loading) return
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    :as="href ? 'a' : 'button'"
+    :href
+    :type="href ? undefined : type"
+    :disabled="(disabled || loading) || undefined"
+    :data-disabled="(disabled || loading) || undefined"
+    :data-loading="loading || undefined"
+    class="emerald-button"
+    @click="onClick"
+  >
+    <slot />
+  </V0Paper>
+</template>
+```
+
+### Pattern 2: Wrapping v0 compound component (EmTextField)
+
+For components that wrap a v0 compound component. V0Paper wraps the v0 root, DS component re-exposes v-model and key props.
+
+```vue
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+  import { InputRoot } from '@vuetify/v0'
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmTextFieldProps extends V0PaperProps {
+    disabled?: boolean
+    // ... other v0 InputRoot props to re-expose
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextField' })
+  const { disabled = false, ...paperProps } = defineProps<EmTextFieldProps>()
+  const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <V0Paper v-bind="paperProps" as="div" class="emerald-text-field">
+    <InputRoot v-model="model" :disabled>
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </InputRoot>
+  </V0Paper>
+</template>
+```
+
+### Pattern 3: Renderless v0 root (EmDialog)
+
+For v0 components whose root is renderless (renders no element). No V0Paper on the root — it goes on the first visible sub-component (EmDialogContent).
+
+```vue
+<!-- EmDialog.vue — no V0Paper, wraps renderless DialogRoot -->
+<script lang="ts">
+  import { DialogRoot } from '@vuetify/v0'
+  export interface EmDialogProps { id?: string }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialog' })
+  const { id } = defineProps<EmDialogProps>()
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <DialogRoot v-model="model" :id>
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </DialogRoot>
+</template>
+```
+
+```vue
+<!-- EmDialogContent.vue — V0Paper here for panel styling -->
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+  import { DialogContent } from '@vuetify/v0'
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmDialogContentProps extends V0PaperProps {
+    closeOnClickOutside?: boolean
+    blocking?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogContent' })
+  const { closeOnClickOutside = true, blocking = false, ...paperProps } = defineProps<EmDialogContentProps>()
+</script>
+
+<template>
+  <DialogContent :blocking :close-on-click-outside>
+    <V0Paper v-bind="paperProps" as="div" class="emerald-dialog__content">
+      <slot />
+    </V0Paper>
+  </DialogContent>
+</template>
+```
+
+### Pattern 4: Simple sub-components
+
+DS-specific sub-components that are purely layout. No V0Paper, no props, just a styled element.
+
+```vue
+<script lang="ts">
+  export interface EmButtonPrependProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButtonPrepend' })
+</script>
+
+<template>
+  <span class="emerald-button__prepend">
+    <slot />
+  </span>
+</template>
+```
+
+### Pattern 5: Sub-component wrapping v0 primitive
+
+Thin wrapper that adds an Emerald class to a v0 sub-component. Re-exposes slot props.
+
+```vue
+<script lang="ts">
+  import { InputError } from '@vuetify/v0'
+  export interface EmTextFieldErrorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldError' })
+</script>
+
+<template>
+  <InputError class="emerald-text-field__error">
+    <template #default="{ errors }">
+      <slot :errors />
+    </template>
+  </InputError>
+</template>
+```
+
+## Styling
+
+- Paper composables output utility class arrays (not inline CSS variables)
+- V0Paper collects classes from all composables and applies via `:class`
+- Scoped `<style>` is only for structural CSS (layout, positioning, cursor)
+- State styling uses data attributes: `data-[disabled]:`, `data-[loading]:`, `data-[state=x]:`
+- Class prefix: `emerald-` for all Emerald components
+
+## Naming
+
+- Root: `Em{ComponentName}` (e.g., `EmButton`, `EmDialog`)
+- Sub-components: `Em{ComponentName}{SubName}` (e.g., `EmButtonPrepend`, `EmDialogContent`)
+- CSS classes: `emerald-{component}` for root, `emerald-{component}__{sub}` for sub-components (BEM-like)
+
+## Barrel Export Pattern
+
+Same as v0 — never use `export *` for Vue components:
+
+```ts
+export type { EmButtonProps } from './EmButton.vue'
+export { default as EmButton } from './EmButton.vue'
+```
+
+## Build Pipeline
+
+### Phase 1: Spec Generation
+
+1. Receive design input (Figma screenshots, color palette, component list — flexible)
+2. Agent drafts component spec:
+   - Sub-components: which exist, which are DS-specific, which are raw v0 pass-throughs
+   - Props per sub-component with defaults
+   - Data attributes and state-driven styling
+   - Which sub-components use `V0Paper` vs raw elements
+   - Visual reference notes mapped to utility classes
+3. Human reviews and approves the spec
+
+### Phase 2: Implementation
+
+1. Agent implements with high autonomy using: approved spec, reference components as examples, this contract as guardrails
+2. Identify which pattern (1-5 above) applies to each component/sub-component
+3. Scoped `<style>` only for structural CSS
+4. Exports only sub-components the DS customizes
+
+### Phase 3: Review
+
+1. Human reviews implementation against spec and design input
+2. Deviations are either fixed or fed back into the spec
diff --git a/dev/package.json b/dev/package.json
index aad2f4d48..75859959e 100644
--- a/dev/package.json
+++ b/dev/package.json
@@ -20,6 +20,8 @@
     "vue-router": "catalog:"
   },
   "dependencies": {
+    "@paper/emerald": "workspace:*",
+    "@phosphor-icons/vue": "catalog:",
     "@vuetify/paper": "workspace:*",
     "@vuetify/v0": "workspace:*",
     "vue": "catalog:"
diff --git a/dev/src/EmeraldKitchenSink.vue b/dev/src/EmeraldKitchenSink.vue
new file mode 100644
index 000000000..943b48e57
--- /dev/null
+++ b/dev/src/EmeraldKitchenSink.vue
@@ -0,0 +1,1745 @@
+<script setup lang="ts">
+  import { EmeraldStyleSheetAdapter, EmListItemAction, EmListItemBody, EmListSeparator, EmListSubheader, emeraldColors } from '@paper/emerald'
+  import { PhAirplaneTilt, PhArchive, PhBookOpen, PhCalendarBlank, PhCalendarDots, PhCaretCircleDown, PhCaretCircleUp, PhCaretDown, PhCaretLeft, PhCaretRight, PhCaretUp, PhCaretUpDown, PhChalkboardTeacher, PhChartPieSlice, PhChatsCircle, PhChatText, PhCheck, PhCheckCircle, PhCheckSquare, PhCube, PhDotsThree, PhDotsThreeCircle, PhFileArrowUp, PhFunnel, PhHouse, PhHouseLine, PhInfo, PhMapPin, PhNotePencil, PhPlusCircle, PhShareNetwork, PhUser, PhWarning, PhX, PhXCircle } from '@phosphor-icons/vue'
+
+  const adapter = new EmeraldStyleSheetAdapter()
+  adapter.upsert(adapter.generate({ emerald: emeraldColors }, false))
+
+  // Stateful demos
+  const dialogOpen = ref(false)
+  const menuOpen = ref(true)
+
+  const accordionModel = ref<string[]>(['overview'])
+  const tabsModel = ref('overview')
+  const stepperModel = ref('house')
+  const paginationPage = ref(2)
+  const carouselModel = ref('slide-1')
+
+  const sliderSingle = ref(40)
+  const sliderRange = ref([20, 70])
+
+  const selectSingle = ref<string | undefined>()
+  const autoCompleteSingle = ref<string | undefined>('vuetify')
+  const datePickerValue = ref<Date | null>(new Date())
+
+  const textFieldValue = ref('Emerald')
+  const textareaValue = ref('Write about something nice…')
+
+  const uploadFiles = ref<File[]>([])
+  const formValid = ref<boolean | null>(null)
+</script>
+
+<template>
+  <div class="emerald-sink" data-theme="emerald">
+    <header class="sink-header">
+      <h1>Emerald Kitchen Sink</h1>
+      <p>Every component rendered at least once for visual verification.</p>
+    </header>
+
+    <section>
+      <h2>Button</h2>
+
+      <div class="row">
+        <EmButton size="sm">Small</EmButton>
+        <EmButton size="md">Medium</EmButton>
+        <EmButton size="lg">Large</EmButton>
+      </div>
+
+      <div class="row">
+        <EmButton disabled>Disabled</EmButton>
+        <EmButton loading>Loading</EmButton>
+        <EmButton href="#">Anchor</EmButton>
+      </div>
+    </section>
+
+    <section>
+      <h2>Container</h2>
+
+      <EmContainer class="sink-demo-surface" size="md">
+        <p>Container size=md (max-width 768px)</p>
+      </EmContainer>
+    </section>
+
+    <section>
+      <h2>Divider</h2>
+
+      <div class="stack">
+        <EmDivider>
+          <EmDividerLine />
+        </EmDivider>
+
+        <EmDivider variant="dashed">
+          <EmDividerLine />
+        </EmDivider>
+
+        <EmDivider>
+          <EmDividerLine />
+          <EmDividerLabel>Or</EmDividerLabel>
+          <EmDividerLine />
+        </EmDivider>
+      </div>
+
+      <div class="row vertical-dividers">
+        <span>Left</span>
+
+        <EmDivider orientation="vertical">
+          <EmDividerLine />
+        </EmDivider>
+
+        <span>Middle</span>
+
+        <EmDivider orientation="vertical">
+          <EmDividerLine />
+          <EmDividerLabel>Or</EmDividerLabel>
+          <EmDividerLine />
+        </EmDivider>
+
+        <span>Right</span>
+      </div>
+    </section>
+
+    <section>
+      <h2>Card</h2>
+
+      <div class="row">
+        <EmCard style="width: 520px;">
+          <EmCardHeader>
+            <EmCardTitle>Preferences</EmCardTitle>
+            <EmCardSubtitle>Customize your Emerald experience</EmCardSubtitle>
+          </EmCardHeader>
+
+          <EmCardBody>
+            Emerald introduces a token system structured in three levels: primitive, semantic, and component.
+          </EmCardBody>
+
+          <EmCardFooter>
+            <EmButton>Save changes</EmButton>
+          </EmCardFooter>
+        </EmCard>
+
+        <EmCard hoverable style="width: 520px;">
+          <EmCardHeader>
+            <EmCardTitle>Hoverable card</EmCardTitle>
+            <EmCardSubtitle>Hover to see the primary-tinted border and shadow.</EmCardSubtitle>
+          </EmCardHeader>
+
+          <EmCardBody>
+            When `hoverable` is set, the card lifts on mouseover with a neutral drop shadow and primary-500 border.
+          </EmCardBody>
+        </EmCard>
+      </div>
+    </section>
+
+    <!-- ================= Layout ================= -->
+
+    <h1 class="sink-group">Layout</h1>
+
+    <section>
+      <h2>Flex</h2>
+
+      <EmFlex class="sink-demo-surface" :gap="12">
+        <div class="sink-box">A</div>
+        <div class="sink-box">B</div>
+        <div class="sink-box">C</div>
+      </EmFlex>
+
+      <EmFlex class="sink-demo-surface" direction="column" :gap="8" style="margin-top: 0.75rem;">
+        <div class="sink-box">Column 1</div>
+        <div class="sink-box">Column 2</div>
+      </EmFlex>
+    </section>
+
+    <section>
+      <h2>Grid</h2>
+
+      <EmGrid class="sink-demo-surface" :columns="4" :gap="8">
+        <EmGridItem v-for="n in 4" :key="n" class="sink-box">
+          Cell {{ n }}
+        </EmGridItem>
+
+        <EmGridItem class="sink-box" :span="2">
+          Span 2
+        </EmGridItem>
+
+        <EmGridItem class="sink-box" :span="2">
+          Span 2
+        </EmGridItem>
+      </EmGrid>
+    </section>
+
+    <!-- ================= Content ================= -->
+
+    <h1 class="sink-group">Content</h1>
+
+    <section>
+      <h2>Avatar</h2>
+
+      <p class="muted">Image</p>
+
+      <div class="row">
+        <EmAvatar size="sm">
+          <EmAvatarImage alt="Small avatar" src="https://i.pravatar.cc/80?img=32" />
+          <EmAvatarFallback>SM</EmAvatarFallback>
+        </EmAvatar>
+
+        <EmAvatar size="md">
+          <EmAvatarImage alt="Medium avatar" src="https://i.pravatar.cc/80?img=12" />
+          <EmAvatarFallback>JD</EmAvatarFallback>
+        </EmAvatar>
+
+        <EmAvatar size="lg">
+          <EmAvatarImage alt="Large avatar" src="https://i.pravatar.cc/96?img=47" />
+          <EmAvatarFallback>LG</EmAvatarFallback>
+        </EmAvatar>
+      </div>
+
+      <p class="muted">Text (initials)</p>
+
+      <div class="row">
+        <EmAvatar size="sm">
+          <EmAvatarFallback>AB</EmAvatarFallback>
+        </EmAvatar>
+
+        <EmAvatar size="md">
+          <EmAvatarFallback>CD</EmAvatarFallback>
+        </EmAvatar>
+
+        <EmAvatar size="lg">
+          <EmAvatarFallback>EF</EmAvatarFallback>
+        </EmAvatar>
+      </div>
+
+      <p class="muted">Icon</p>
+
+      <div class="row">
+        <EmAvatar size="sm">
+          <EmAvatarFallback>
+            <PhUser :size="16" weight="regular" />
+          </EmAvatarFallback>
+        </EmAvatar>
+
+        <EmAvatar size="md">
+          <EmAvatarFallback>
+            <PhUser :size="20" weight="regular" />
+          </EmAvatarFallback>
+        </EmAvatar>
+
+        <EmAvatar size="lg">
+          <EmAvatarFallback>
+            <PhUser :size="24" weight="regular" />
+          </EmAvatarFallback>
+        </EmAvatar>
+      </div>
+
+      <p class="muted">Group</p>
+
+      <div class="row">
+        <div class="emerald-avatar-group">
+          <EmAvatar size="md">
+            <EmAvatarImage alt="Member 1" src="https://i.pravatar.cc/80?img=12" />
+            <EmAvatarFallback>JD</EmAvatarFallback>
+          </EmAvatar>
+
+          <EmAvatar size="md">
+            <EmAvatarImage alt="Member 2" src="https://i.pravatar.cc/80?img=32" />
+            <EmAvatarFallback>SM</EmAvatarFallback>
+          </EmAvatar>
+
+          <EmAvatar size="md">
+            <EmAvatarImage alt="Member 3" src="https://i.pravatar.cc/80?img=47" />
+            <EmAvatarFallback>LG</EmAvatarFallback>
+          </EmAvatar>
+
+          <EmAvatar size="md">
+            <EmAvatarFallback>+3</EmAvatarFallback>
+          </EmAvatar>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2>Badge</h2>
+
+      <div class="row">
+        <EmBadge>Primary</EmBadge>
+        <EmBadge variant="success">Success</EmBadge>
+        <EmBadge variant="warning">Warning</EmBadge>
+        <EmBadge variant="error">Error</EmBadge>
+        <EmBadge variant="info">Info</EmBadge>
+        <EmBadge variant="neutral">Neutral</EmBadge>
+      </div>
+
+      <div class="row">
+        <EmBadge size="sm">Small</EmBadge>
+        <EmBadge size="md">Medium</EmBadge>
+        <EmBadge size="lg">Large</EmBadge>
+      </div>
+
+      <div class="row">
+        <EmBadge shape="dot" variant="success" />
+        <EmBadge shape="indicator" variant="success" />
+        <EmBadge shape="count" variant="success">1</EmBadge>
+        <EmBadge shape="count" variant="success">9</EmBadge>
+        <EmBadge shape="count" variant="error">99+</EmBadge>
+        <EmBadge shape="dot" variant="error" />
+        <EmBadge shape="indicator" variant="warning" />
+        <EmBadge shape="count" variant="info">3</EmBadge>
+      </div>
+    </section>
+
+    <section>
+      <h2>Tag</h2>
+      <p class="muted">Tinted — filled surface, semantic luminosity/50 background</p>
+
+      <div class="row">
+        <EmTag tone="tinted" variant="neutral">
+          <PhPlusCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag tone="tinted" variant="primary">
+          <PhPlusCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag tone="tinted" variant="success">
+          <PhPlusCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag tone="tinted" variant="error">
+          <PhPlusCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag tone="tinted" variant="warning">
+          <PhPlusCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag tone="tinted" variant="info">
+          <PhPlusCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+      </div>
+
+      <p class="muted">Outlined elevated (lg) — white surface, colored shadow</p>
+
+      <div class="row">
+        <EmTag elevation="lg" variant="neutral">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag elevation="lg" variant="primary">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag elevation="lg" variant="success">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag elevation="lg" variant="error">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag elevation="lg" variant="warning">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag elevation="lg" variant="info">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+      </div>
+
+      <p class="muted">Outlined elevated (sm) — subtle drop shadow</p>
+
+      <div class="row">
+        <EmTag elevation="sm" variant="neutral">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag elevation="sm" variant="primary">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag elevation="sm" variant="success">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag elevation="sm" variant="error">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag elevation="sm" variant="warning">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag elevation="sm" variant="info">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+      </div>
+
+      <p class="muted">Outlined flat — bordered, no shadow</p>
+
+      <div class="row">
+        <EmTag variant="neutral">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag variant="primary">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag variant="success">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag variant="error">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag variant="warning">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+
+        <EmTag variant="info">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+      </div>
+
+      <p class="muted">Text only — no icon</p>
+
+      <div class="row">
+        <EmTag variant="neutral">vue</EmTag>
+        <EmTag variant="primary">typescript</EmTag>
+        <EmTag variant="success">emerald</EmTag>
+      </div>
+    </section>
+
+    <section>
+      <h2>List</h2>
+
+      <div class="row" style="align-items: flex-start; gap: 24px;">
+        <EmList style="width: 281px;">
+          <EmListItem header>
+            <EmListItemBody>
+              <EmListItemTitle>Inbox</EmListItemTitle>
+              <EmListItemSubtitle>hello@vuetifyjs.com</EmListItemSubtitle>
+            </EmListItemBody>
+
+            <EmListItemAction>
+              <PhDotsThreeCircle :size="16" weight="duotone" />
+            </EmListItemAction>
+          </EmListItem>
+
+          <EmListItem interactive>
+            <EmListItemIcon>
+              <PhChatsCircle :size="16" weight="duotone" />
+            </EmListItemIcon>
+
+            <EmListItemTitle>My Inbox</EmListItemTitle>
+          </EmListItem>
+
+          <EmListItem interactive>
+            <EmListItemIcon>
+              <PhCalendarDots :size="16" weight="duotone" />
+            </EmListItemIcon>
+
+            <EmListItemTitle>Scheduled</EmListItemTitle>
+          </EmListItem>
+
+          <EmListItem interactive>
+            <EmListItemIcon>
+              <PhChatText :size="16" weight="duotone" />
+            </EmListItemIcon>
+
+            <EmListItemTitle>Chats</EmListItemTitle>
+          </EmListItem>
+
+          <EmListItem active interactive>
+            <EmListItemIcon>
+              <PhArchive :size="16" weight="duotone" />
+            </EmListItemIcon>
+
+            <EmListItemTitle>Archived</EmListItemTitle>
+          </EmListItem>
+
+          <EmListItem interactive>
+            <EmListItemIcon>
+              <PhCheckSquare :size="16" weight="duotone" />
+            </EmListItemIcon>
+
+            <EmListItemTitle>Closed</EmListItemTitle>
+          </EmListItem>
+
+          <EmListSeparator />
+          <EmListSubheader>Account</EmListSubheader>
+
+          <EmListItem interactive>
+            <EmListItemTitle>View Profile</EmListItemTitle>
+          </EmListItem>
+
+          <EmListItem disabled interactive>
+            <EmListItemTitle>Sign Out</EmListItemTitle>
+          </EmListItem>
+        </EmList>
+
+        <EmList style="width: 224px;">
+          <EmListSubheader>Configurations</EmListSubheader>
+
+          <EmListItem indent interactive>
+            <EmListItemIcon>
+              <PhNotePencil :size="14" weight="duotone" />
+            </EmListItemIcon>
+
+            <EmListItemTitle>To-do</EmListItemTitle>
+          </EmListItem>
+
+          <EmListItem active interactive>
+            <EmListItemIcon>
+              <PhShareNetwork :size="16" weight="duotone" />
+            </EmListItemIcon>
+
+            <EmListItemTitle>Share</EmListItemTitle>
+          </EmListItem>
+
+          <EmListItem indent interactive>
+            <EmListItemIcon>
+              <PhChalkboardTeacher :size="16" weight="duotone" />
+            </EmListItemIcon>
+
+            <EmListItemTitle>Leaderboard</EmListItemTitle>
+          </EmListItem>
+
+          <EmListItem indent interactive>
+            <EmListItemIcon>
+              <PhChartPieSlice :size="16" weight="duotone" />
+            </EmListItemIcon>
+
+            <EmListItemTitle>Analytics</EmListItemTitle>
+          </EmListItem>
+        </EmList>
+      </div>
+    </section>
+
+    <section>
+      <h2>Accordion</h2>
+
+      <EmAccordion v-model="accordionModel" multiple style="width: 425px;">
+        <EmAccordionItem value="overview">
+          <EmAccordionHeader>
+            <EmAccordionTrigger v-slot="{ isSelected }">
+              Accordion Title
+              <EmAccordionCue>
+                <component
+                  :is="isSelected ? PhCaretCircleUp : PhCaretCircleDown"
+                  :size="20"
+                  weight="duotone"
+                />
+              </EmAccordionCue>
+            </EmAccordionTrigger>
+          </EmAccordionHeader>
+
+          <EmAccordionContent>
+            This is the body of the accordion you can insert your accordion text or content in this section.
+          </EmAccordionContent>
+        </EmAccordionItem>
+
+        <EmAccordionItem value="tokens">
+          <EmAccordionHeader>
+            <EmAccordionTrigger v-slot="{ isSelected }">
+              Accordion Title
+              <EmAccordionCue>
+                <component
+                  :is="isSelected ? PhCaretCircleUp : PhCaretCircleDown"
+                  :size="20"
+                  weight="duotone"
+                />
+              </EmAccordionCue>
+            </EmAccordionTrigger>
+          </EmAccordionHeader>
+
+          <EmAccordionContent>
+            This is the body of the accordion you can insert your accordion text or content in this section.
+          </EmAccordionContent>
+        </EmAccordionItem>
+
+        <EmAccordionItem value="more">
+          <EmAccordionHeader>
+            <EmAccordionTrigger v-slot="{ isSelected }">
+              Accordion Title
+              <EmAccordionCue>
+                <component
+                  :is="isSelected ? PhCaretCircleUp : PhCaretCircleDown"
+                  :size="20"
+                  weight="duotone"
+                />
+              </EmAccordionCue>
+            </EmAccordionTrigger>
+          </EmAccordionHeader>
+
+          <EmAccordionContent>
+            This is the body of the accordion you can insert your accordion text or content in this section.
+          </EmAccordionContent>
+        </EmAccordionItem>
+      </EmAccordion>
+    </section>
+
+    <!-- ================= Navigation ================= -->
+
+    <h1 class="sink-group">Navigation</h1>
+
+    <section>
+      <h2>Breadcrumb</h2>
+
+      <EmBreadcrumb>
+        <EmBreadcrumbList>
+          <EmBreadcrumbItem id="1" value="home">
+            <EmBreadcrumbLink aria-label="Home" href="#">
+              <PhHouseLine weight="duotone" />
+            </EmBreadcrumbLink>
+          </EmBreadcrumbItem>
+
+          <EmBreadcrumbDivider>
+            <PhCaretRight weight="light" />
+          </EmBreadcrumbDivider>
+
+          <EmBreadcrumbItem id="2" value="docs">
+            <EmBreadcrumbLink href="#">
+              <PhBookOpen weight="duotone" />
+              Docs
+            </EmBreadcrumbLink>
+          </EmBreadcrumbItem>
+
+          <EmBreadcrumbDivider>
+            <PhCaretRight weight="light" />
+          </EmBreadcrumbDivider>
+
+          <EmBreadcrumbItem id="3" value="components">
+            <EmBreadcrumbLink href="#">
+              <PhCube weight="duotone" />
+              Components
+            </EmBreadcrumbLink>
+          </EmBreadcrumbItem>
+
+          <EmBreadcrumbDivider>
+            <PhCaretRight weight="light" />
+          </EmBreadcrumbDivider>
+
+          <EmBreadcrumbItem id="4" value="more">
+            <EmBreadcrumbLink aria-label="More" href="#">
+              <PhDotsThree weight="duotone" />
+            </EmBreadcrumbLink>
+          </EmBreadcrumbItem>
+
+          <EmBreadcrumbDivider>
+            <PhCaretRight weight="light" />
+          </EmBreadcrumbDivider>
+
+          <EmBreadcrumbItem id="5" value="breadcrumbs">
+            <EmBreadcrumbPage>Breadcrumbs</EmBreadcrumbPage>
+          </EmBreadcrumbItem>
+        </EmBreadcrumbList>
+      </EmBreadcrumb>
+    </section>
+
+    <section>
+      <h2>Tabs</h2>
+
+      <EmTabs v-model="tabsModel">
+        <EmTabsList label="Account settings">
+          <EmTabsItem value="overview">Profile</EmTabsItem>
+          <EmTabsItem value="tokens">Password</EmTabsItem>
+          <EmTabsItem value="components">Billing</EmTabsItem>
+        </EmTabsList>
+
+        <EmTabsPanel value="overview">Profile settings content.</EmTabsPanel>
+        <EmTabsPanel value="tokens">Password settings content.</EmTabsPanel>
+        <EmTabsPanel value="components">Billing settings content.</EmTabsPanel>
+      </EmTabs>
+    </section>
+
+    <section>
+      <h2>Stepper</h2>
+
+      <EmStepper v-model="stepperModel">
+        <EmStepperItem value="date">
+          <PhCalendarBlank weight="duotone" />
+
+          <template #completed>
+            <PhCheck weight="duotone" />
+          </template>
+
+          <template #label>
+            <EmStepperLabel>Choose Date<EmStepperLabelDescription>Lorem Ipsum</EmStepperLabelDescription></EmStepperLabel>
+          </template>
+        </EmStepperItem>
+
+        <EmStepperSeparator />
+
+        <EmStepperItem value="house">
+          <PhHouse weight="duotone" />
+
+          <template #completed>
+            <PhCheck weight="duotone" />
+          </template>
+
+          <template #label>
+            <EmStepperLabel>Choose House<EmStepperLabelDescription>Lorem Ipsum</EmStepperLabelDescription></EmStepperLabel>
+          </template>
+        </EmStepperItem>
+
+        <EmStepperSeparator />
+
+        <EmStepperItem value="flight">
+          <PhAirplaneTilt weight="duotone" />
+
+          <template #completed>
+            <PhCheck weight="duotone" />
+          </template>
+
+          <template #label>
+            <EmStepperLabel>Choose Flight<EmStepperLabelDescription>Lorem Ipsum</EmStepperLabelDescription></EmStepperLabel>
+          </template>
+        </EmStepperItem>
+
+        <EmStepperSeparator />
+
+        <EmStepperItem value="destination">
+          <PhMapPin weight="duotone" />
+
+          <template #completed>
+            <PhCheck weight="duotone" />
+          </template>
+
+          <template #label>
+            <EmStepperLabel>Destination<EmStepperLabelDescription>Lorem Ipsum</EmStepperLabelDescription></EmStepperLabel>
+          </template>
+        </EmStepperItem>
+      </EmStepper>
+    </section>
+
+    <section>
+      <h2>Pagination</h2>
+
+      <EmPagination v-model="paginationPage" :size="20" :total-visible="5">
+        <EmPaginationPrev>
+          <PhCaretLeft weight="duotone" />
+        </EmPaginationPrev>
+
+        <template v-for="page in 5" :key="page">
+          <EmPaginationItem :value="page">{{ page }}</EmPaginationItem>
+        </template>
+
+        <EmPaginationEllipsis>
+          <PhDotsThree weight="duotone" />
+        </EmPaginationEllipsis>
+
+        <EmPaginationItem :value="20">20</EmPaginationItem>
+
+        <EmPaginationNext>
+          <PhCaretRight weight="duotone" />
+        </EmPaginationNext>
+      </EmPagination>
+    </section>
+
+    <section>
+      <h2>Menu</h2>
+
+      <EmMenu v-model="menuOpen">
+        <EmMenuActivator>
+          <EmButton>Open Menu</EmButton>
+        </EmMenuActivator>
+
+        <EmMenuContent>
+          <EmMenuLabel>Frameworks</EmMenuLabel>
+          <EmMenuItem>Shadcn</EmMenuItem>
+          <EmMenuItem active>Vuetify</EmMenuItem>
+          <EmMenuItem>Base UI</EmMenuItem>
+          <EmMenuItem>Reka UI</EmMenuItem>
+          <EmMenuSeparator />
+          <EmMenuLabel>More Options</EmMenuLabel>
+          <EmMenuItem>Vuetify Zero</EmMenuItem>
+          <EmMenuItem disabled>Radix UI</EmMenuItem>
+        </EmMenuContent>
+      </EmMenu>
+    </section>
+
+    <!-- ================= Forms ================= -->
+
+    <h1 class="sink-group">Forms</h1>
+
+    <section>
+      <h2>TextField</h2>
+
+      <div class="row" style="align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;">
+        <EmTextField v-model="textFieldValue" label="Name" style="width: 217px;">
+          <EmTextFieldLabel>Name</EmTextFieldLabel>
+          <EmTextFieldControl placeholder="Enter your email" />
+          <EmTextFieldDescription>Your display name across the app.</EmTextFieldDescription>
+        </EmTextField>
+
+        <EmTextField label="Empty" style="width: 217px;">
+          <EmTextFieldControl placeholder="Enter your email" />
+        </EmTextField>
+
+        <EmTextField :disabled="true" label="Disabled" style="width: 217px;">
+          <EmTextFieldControl placeholder="Enter your email" />
+        </EmTextField>
+
+        <EmTextField
+          error
+          :error-messages="['Email is required']"
+          label="Invalid"
+          style="width: 217px;"
+          validate-on="eager"
+        >
+          <EmTextFieldLabel>Email</EmTextFieldLabel>
+          <EmTextFieldControl placeholder="Enter your email" />
+
+          <EmTextFieldError v-slot="{ errors }">
+            {{ errors[0] }}
+          </EmTextFieldError>
+        </EmTextField>
+      </div>
+    </section>
+
+    <section>
+      <h2>Textarea</h2>
+
+      <div class="row" style="align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;">
+        <EmTextarea v-model="textareaValue" label="Bio" style="width: 217px;">
+          <EmTextareaLabel>Bio</EmTextareaLabel>
+          <EmTextareaControl placeholder="Write your content here..." :rows="4" />
+          <EmTextareaDescription>Markdown is supported.</EmTextareaDescription>
+        </EmTextarea>
+
+        <EmTextarea label="Empty" style="width: 217px;">
+          <EmTextareaControl placeholder="Write your content here..." :rows="4" />
+        </EmTextarea>
+
+        <EmTextarea disabled label="Disabled" style="width: 217px;">
+          <EmTextareaControl placeholder="Write your content here..." :rows="4" />
+        </EmTextarea>
+
+        <EmTextarea
+          error
+          :error-messages="['Bio is required']"
+          label="Invalid"
+          style="width: 217px;"
+          validate-on="eager"
+        >
+          <EmTextareaLabel>Bio</EmTextareaLabel>
+          <EmTextareaControl placeholder="Write your content here..." :rows="4" />
+
+          <EmTextareaError v-slot="{ errors }">
+            {{ errors[0] }}
+          </EmTextareaError>
+        </EmTextarea>
+      </div>
+    </section>
+
+    <section>
+      <h2>Checkbox</h2>
+      <p class="muted">Unchecked</p>
+
+      <div class="row" style="align-items: center; gap: 16px;">
+        <EmCheckbox :model-value="false" size="sm">
+          <EmCheckboxIndicator />
+        </EmCheckbox>
+
+        <EmCheckbox :model-value="false" size="md">
+          <EmCheckboxIndicator />
+        </EmCheckbox>
+
+        <EmCheckbox :model-value="false" size="lg">
+          <EmCheckboxIndicator />
+        </EmCheckbox>
+      </div>
+
+      <p class="muted">Checked</p>
+
+      <div class="row" style="align-items: center; gap: 16px;">
+        <EmCheckbox :model-value="true" size="sm">
+          <EmCheckboxIndicator />
+        </EmCheckbox>
+
+        <EmCheckbox :model-value="true" size="md">
+          <EmCheckboxIndicator />
+        </EmCheckbox>
+
+        <EmCheckbox :model-value="true" size="lg">
+          <EmCheckboxIndicator />
+        </EmCheckbox>
+      </div>
+    </section>
+
+    <section>
+      <h2>Radio</h2>
+      <p class="muted">Unchecked</p>
+
+      <div class="row" style="align-items: center; gap: 16px;">
+        <EmRadioGroup>
+          <EmRadio size="sm" :value="'a'">
+            <EmRadioIndicator />
+          </EmRadio>
+        </EmRadioGroup>
+
+        <EmRadioGroup>
+          <EmRadio size="md" :value="'b'">
+            <EmRadioIndicator />
+          </EmRadio>
+        </EmRadioGroup>
+
+        <EmRadioGroup>
+          <EmRadio size="lg" :value="'c'">
+            <EmRadioIndicator />
+          </EmRadio>
+        </EmRadioGroup>
+      </div>
+
+      <p class="muted">Checked</p>
+
+      <div class="row" style="align-items: center; gap: 16px;">
+        <EmRadioGroup :model-value="'a'">
+          <EmRadio size="sm" :value="'a'">
+            <EmRadioIndicator />
+          </EmRadio>
+        </EmRadioGroup>
+
+        <EmRadioGroup :model-value="'b'">
+          <EmRadio size="md" :value="'b'">
+            <EmRadioIndicator />
+          </EmRadio>
+        </EmRadioGroup>
+
+        <EmRadioGroup :model-value="'c'">
+          <EmRadio size="lg" :value="'c'">
+            <EmRadioIndicator />
+          </EmRadio>
+        </EmRadioGroup>
+      </div>
+    </section>
+
+    <section>
+      <h2>Switch</h2>
+      <p class="muted">Off</p>
+
+      <div class="row" style="align-items: center; gap: 16px;">
+        <EmSwitch :model-value="false" size="sm">
+          <EmSwitchTrack>
+            <EmSwitchThumb />
+          </EmSwitchTrack>
+        </EmSwitch>
+
+        <EmSwitch :model-value="false" size="md">
+          <EmSwitchTrack>
+            <EmSwitchThumb />
+          </EmSwitchTrack>
+        </EmSwitch>
+
+        <EmSwitch :model-value="false" size="lg">
+          <EmSwitchTrack>
+            <EmSwitchThumb />
+          </EmSwitchTrack>
+        </EmSwitch>
+      </div>
+
+      <p class="muted">On</p>
+
+      <div class="row" style="align-items: center; gap: 16px;">
+        <EmSwitch :model-value="true" size="sm">
+          <EmSwitchTrack>
+            <EmSwitchThumb />
+          </EmSwitchTrack>
+        </EmSwitch>
+
+        <EmSwitch :model-value="true" size="md">
+          <EmSwitchTrack>
+            <EmSwitchThumb />
+          </EmSwitchTrack>
+        </EmSwitch>
+
+        <EmSwitch :model-value="true" size="lg">
+          <EmSwitchTrack>
+            <EmSwitchThumb />
+          </EmSwitchTrack>
+        </EmSwitch>
+      </div>
+    </section>
+
+    <section>
+      <h2>Slider</h2>
+
+      <div class="stack">
+        <div class="em-slider-row">
+          <span class="em-slider-label">Default</span>
+
+          <EmSlider v-model="sliderSingle">
+            <EmSliderTrack />
+            <EmSliderThumb aria-label="Value" />
+          </EmSlider>
+
+          <span class="em-slider-value">{{ sliderSingle }}</span>
+        </div>
+
+        <div class="em-slider-row">
+          <span class="em-slider-label">Fill</span>
+
+          <EmSlider v-model="sliderSingle">
+            <EmSliderTrack>
+              <EmSliderRange />
+            </EmSliderTrack>
+
+            <EmSliderThumb aria-label="Value" />
+          </EmSlider>
+
+          <span class="em-slider-value">{{ sliderSingle }}</span>
+        </div>
+
+        <div class="em-slider-row">
+          <span class="em-slider-label">Range</span>
+
+          <EmSlider v-model="sliderRange">
+            <EmSliderTrack>
+              <EmSliderRange />
+            </EmSliderTrack>
+
+            <EmSliderThumb aria-label="Min" />
+            <EmSliderThumb aria-label="Max" />
+          </EmSlider>
+
+          <span class="em-slider-value">{{ sliderRange.join(' – ') }}</span>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2>Select</h2>
+
+      <EmSelect v-model="selectSingle" style="width: 217px;">
+        <EmSelectActivator>
+          <EmSelectValue />
+          <EmSelectPlaceholder>Select your framework</EmSelectPlaceholder>
+          <PhCaretDown :size="14" weight="duotone" />
+        </EmSelectActivator>
+
+        <EmSelectContent>
+          <EmSelectItem :value="'vuetify'">Vuetify</EmSelectItem>
+          <EmSelectItem :value="'shadcn'">Shadcn</EmSelectItem>
+          <EmSelectItem :value="'baseui'">Base UI</EmSelectItem>
+          <EmSelectItem :value="'rekaui'">Reka UI</EmSelectItem>
+        </EmSelectContent>
+      </EmSelect>
+    </section>
+
+    <section>
+      <h2>AutoComplete</h2>
+
+      <EmAutoComplete v-model="autoCompleteSingle" style="width: 240px;">
+        <EmAutoCompleteControl>
+          <EmAutoCompleteInput placeholder="Search your framework" />
+          <PhCaretDown :size="14" weight="duotone" />
+        </EmAutoCompleteControl>
+
+        <EmAutoCompleteContent eager>
+          <EmAutoCompleteItem :value="'vuetify'">Vuetify</EmAutoCompleteItem>
+          <EmAutoCompleteItem :value="'vue'">Vue</EmAutoCompleteItem>
+          <EmAutoCompleteItem :value="'primevue'">Prime Vue</EmAutoCompleteItem>
+          <EmAutoCompleteEmpty>No matches</EmAutoCompleteEmpty>
+        </EmAutoCompleteContent>
+      </EmAutoComplete>
+    </section>
+
+    <section>
+      <h2>DatePicker</h2>
+      <p class="muted">Visual scaffold only — replaces with the new DatePicker once v0 ships a calendar primitive (createCalendar / useDate-backed root).</p>
+
+      <EmDatePicker v-model="datePickerValue">
+        <EmDatePickerCalendar>
+          <EmDatePickerHeader>
+            <button aria-label="Previous month" type="button">
+              <PhCaretLeft :size="12" weight="duotone" />
+            </button>
+
+            <span>July 2026</span>
+
+            <button aria-label="Next month" type="button">
+              <PhCaretRight :size="12" weight="duotone" />
+            </button>
+          </EmDatePickerHeader>
+
+          <EmDatePickerGrid>
+            <EmDatePickerCell v-for="weekday in ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']" :key="weekday" weekday>
+              {{ weekday }}
+            </EmDatePickerCell>
+
+            <EmDatePickerCell v-for="day in 31" :key="`jul-${day}`" :selected="day === 22" :today="day === 22">
+              {{ day }}
+            </EmDatePickerCell>
+
+            <EmDatePickerCell v-for="day in 4" :key="`aug-${day}`" outside>
+              {{ day }}
+            </EmDatePickerCell>
+          </EmDatePickerGrid>
+        </EmDatePickerCalendar>
+      </EmDatePicker>
+    </section>
+
+    <section>
+      <h2>Upload</h2>
+
+      <EmUpload v-model="uploadFiles" multiple style="width: 420px;">
+        <EmUploadDropzone>
+          <PhFileArrowUp :size="28" weight="regular" />
+          <strong>Drag and drop your files</strong>
+          <span class="muted" style="margin: 0;">or click to browse</span>
+        </EmUploadDropzone>
+      </EmUpload>
+    </section>
+
+    <section>
+      <h2>Form</h2>
+
+      <EmForm v-model="formValid" style="width: 217px;">
+        <div class="emerald-form-field">
+          <label class="emerald-form-field__label" for="em-form-default">Email</label>
+
+          <div class="emerald-form-field__control">
+            <input id="em-form-default" placeholder="Enter your email" type="email">
+          </div>
+
+          <span class="emerald-form-field__helper">Write your email in lowercase</span>
+        </div>
+
+        <div class="emerald-form-field" data-invalid>
+          <label class="emerald-form-field__label" for="em-form-error">Email</label>
+
+          <div class="emerald-form-field__control">
+            <input id="em-form-error" placeholder="Enter your email" type="email">
+          </div>
+
+          <span class="emerald-form-field__error">Email is required</span>
+        </div>
+
+        <div class="emerald-form-field">
+          <label class="emerald-form-field__label" for="em-form-active">Email</label>
+
+          <div class="emerald-form-field__control">
+            <input id="em-form-active" type="email" value="juanjcardona13@gmail.com">
+          </div>
+
+          <span class="emerald-form-field__helper">Write your email in lowercase</span>
+        </div>
+
+        <EmButton type="submit">Submit</EmButton>
+      </EmForm>
+    </section>
+
+    <!-- ================= Feedback ================= -->
+
+    <h1 class="sink-group">Feedback</h1>
+
+    <section>
+      <h2>Alert</h2>
+
+      <div class="stack" style="max-width: 520px;">
+        <EmAlert>
+          <EmAlertIcon>
+            <PhInfo :size="24" weight="regular" />
+          </EmAlertIcon>
+
+          <EmAlertBody>
+            <EmAlertTitle>Alert Title</EmAlertTitle>
+            <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
+          </EmAlertBody>
+        </EmAlert>
+
+        <EmAlert variant="error">
+          <EmAlertIcon>
+            <PhXCircle :size="24" weight="regular" />
+          </EmAlertIcon>
+
+          <EmAlertBody>
+            <EmAlertTitle>Error Alert</EmAlertTitle>
+            <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
+          </EmAlertBody>
+        </EmAlert>
+
+        <EmAlert variant="success">
+          <EmAlertIcon>
+            <PhCheckCircle :size="24" weight="regular" />
+          </EmAlertIcon>
+
+          <EmAlertBody>
+            <EmAlertTitle>Success Alert</EmAlertTitle>
+            <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
+          </EmAlertBody>
+        </EmAlert>
+
+        <EmAlert variant="info">
+          <EmAlertIcon>
+            <PhInfo :size="24" weight="regular" />
+          </EmAlertIcon>
+
+          <EmAlertBody>
+            <EmAlertTitle>Info Alert</EmAlertTitle>
+            <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
+          </EmAlertBody>
+        </EmAlert>
+
+        <EmAlert variant="warning">
+          <EmAlertIcon>
+            <PhWarning :size="24" weight="regular" />
+          </EmAlertIcon>
+
+          <EmAlertBody>
+            <EmAlertTitle>Warning Alert</EmAlertTitle>
+            <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
+          </EmAlertBody>
+        </EmAlert>
+
+        <EmAlert variant="neutral">
+          <EmAlertIcon>
+            <PhAirplaneTilt :size="24" weight="regular" />
+          </EmAlertIcon>
+
+          <EmAlertBody>
+            <EmAlertTitle>Alert</EmAlertTitle>
+            <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
+          </EmAlertBody>
+        </EmAlert>
+      </div>
+    </section>
+
+    <section>
+      <h2>Loading</h2>
+      <EmLoading>Loading…</EmLoading>
+    </section>
+
+    <section>
+      <h2>Progress</h2>
+
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <EmProgress size="sm" :value="30">
+          <EmProgressTrack>
+            <EmProgressFill />
+          </EmProgressTrack>
+        </EmProgress>
+
+        <EmProgress v-slot="{ value }" size="md" :value="30">
+          <EmProgressTrack>
+            <EmProgressFill>
+              <EmProgressValue inside>{{ value }}</EmProgressValue>
+            </EmProgressFill>
+          </EmProgressTrack>
+        </EmProgress>
+
+        <EmProgress v-slot="{ value }" :max="100" size="md" :value="30">
+          <EmProgressTrack>
+            <EmProgressFill>
+              <EmProgressValue inside>{{ value }}</EmProgressValue>
+            </EmProgressFill>
+          </EmProgressTrack>
+
+          <EmProgressValue>100</EmProgressValue>
+        </EmProgress>
+      </div>
+    </section>
+
+    <section>
+      <h2>Toast</h2>
+
+      <div class="stack" style="max-width: 360px;">
+        <EmToast>
+          <EmToastIcon>
+            <PhInfo :size="16" weight="duotone" />
+          </EmToastIcon>
+
+          <EmToastBody>
+            <EmToastTitle>Successful toast</EmToastTitle>
+            <EmToastDescription>It's a violet notification state</EmToastDescription>
+          </EmToastBody>
+
+          <EmToastClose>
+            <PhX :size="12" weight="bold" />
+          </EmToastClose>
+        </EmToast>
+
+        <EmToast variant="error">
+          <EmToastIcon>
+            <PhXCircle :size="16" weight="duotone" />
+          </EmToastIcon>
+
+          <EmToastBody>
+            <EmToastTitle>Successful toast</EmToastTitle>
+            <EmToastDescription>It's a red notification state</EmToastDescription>
+          </EmToastBody>
+
+          <EmToastClose>
+            <PhX :size="12" weight="bold" />
+          </EmToastClose>
+        </EmToast>
+
+        <EmToast variant="success">
+          <EmToastIcon>
+            <PhCheckCircle :size="16" weight="duotone" />
+          </EmToastIcon>
+
+          <EmToastBody>
+            <EmToastTitle>Successful toast</EmToastTitle>
+            <EmToastDescription>It's a green notification state</EmToastDescription>
+          </EmToastBody>
+
+          <EmToastClose>
+            <PhX :size="12" weight="bold" />
+          </EmToastClose>
+        </EmToast>
+
+        <EmToast variant="info">
+          <EmToastIcon>
+            <PhInfo :size="16" weight="duotone" />
+          </EmToastIcon>
+
+          <EmToastBody>
+            <EmToastTitle>Successful toast</EmToastTitle>
+            <EmToastDescription>It's a blue notification state</EmToastDescription>
+          </EmToastBody>
+
+          <EmToastClose>
+            <PhX :size="12" weight="bold" />
+          </EmToastClose>
+        </EmToast>
+
+        <EmToast variant="warning">
+          <EmToastIcon>
+            <PhWarning :size="16" weight="duotone" />
+          </EmToastIcon>
+
+          <EmToastBody>
+            <EmToastTitle>Successful toast</EmToastTitle>
+            <EmToastDescription>It's an amber notification state</EmToastDescription>
+          </EmToastBody>
+
+          <EmToastClose>
+            <PhX :size="12" weight="bold" />
+          </EmToastClose>
+        </EmToast>
+
+        <EmToast variant="neutral">
+          <EmToastIcon>
+            <PhCheckCircle :size="16" weight="duotone" />
+          </EmToastIcon>
+
+          <EmToastBody>
+            <EmToastTitle>Successful toast</EmToastTitle>
+            <EmToastDescription>It's a neutral notification state</EmToastDescription>
+          </EmToastBody>
+
+          <EmToastClose>
+            <PhX :size="12" weight="bold" />
+          </EmToastClose>
+        </EmToast>
+      </div>
+    </section>
+
+    <section>
+      <h2>Tooltip</h2>
+
+      <EmTooltip>
+        <EmTooltipContent position-area="top">
+          Hello, I'm Tooltip
+        </EmTooltipContent>
+
+        <EmTooltipActivator>
+          <EmButton>Hover for tooltip</EmButton>
+        </EmTooltipActivator>
+      </EmTooltip>
+    </section>
+
+    <!-- ================= Overlay ================= -->
+
+    <h1 class="sink-group">Overlay</h1>
+
+    <section>
+      <h2>Dialog</h2>
+      <EmButton @click="dialogOpen = true">Open dialog</EmButton>
+
+      <EmDialog v-model="dialogOpen">
+        <EmDialogContent>
+          <EmDialogHeader>
+            <EmDialogTitle>Delete design system?</EmDialogTitle>
+          </EmDialogHeader>
+
+          <EmDialogBody>
+            <EmDialogDescription>
+              This will permanently remove Emerald and all its tokens. Cannot be undone.
+            </EmDialogDescription>
+          </EmDialogBody>
+
+          <EmDialogFooter>
+            <EmDialogClose renderless>
+              <EmButton variant="secondary">Cancel</EmButton>
+            </EmDialogClose>
+
+            <EmDialogClose renderless>
+              <EmButton>Confirm</EmButton>
+            </EmDialogClose>
+          </EmDialogFooter>
+        </EmDialogContent>
+      </EmDialog>
+    </section>
+
+    <!-- ================= Data ================= -->
+
+    <h1 class="sink-group">Data</h1>
+
+    <section>
+      <h2>Table</h2>
+      <p class="muted">Default — sortable headers, selected row, status cells</p>
+
+      <EmTable>
+        <EmTableHead>
+          <EmTableRow>
+            <EmTableHeader sort="none" sortable>
+              User
+              <template #sort-icon>
+                <PhCaretUpDown :size="12" weight="duotone" />
+              </template>
+            </EmTableHeader>
+
+            <EmTableHeader sort="ascending" sortable>
+              Status
+              <template #sort-icon>
+                <PhCaretUp :size="12" weight="duotone" />
+              </template>
+            </EmTableHeader>
+
+            <EmTableHeader filterable sort="descending" sortable>
+              Role
+              <template #sort-icon>
+                <PhCaretDown :size="12" weight="duotone" />
+              </template>
+
+              <template #filter-icon>
+                <PhFunnel :size="14" weight="duotone" />
+              </template>
+            </EmTableHeader>
+
+            <EmTableHeader>Email</EmTableHeader>
+            <EmTableHeader align="end">Phone</EmTableHeader>
+          </EmTableRow>
+        </EmTableHead>
+
+        <EmTableBody>
+          <EmTableRow>
+            <EmTableCell>John Doe</EmTableCell>
+            <EmTableCell>Active</EmTableCell>
+            <EmTableCell>CEO</EmTableCell>
+            <EmTableCell>john.doe@gmail.com</EmTableCell>
+            <EmTableCell align="end">555-123-4567</EmTableCell>
+          </EmTableRow>
+
+          <EmTableRow>
+            <EmTableCell>Laura Kroft</EmTableCell>
+            <EmTableCell>Inactive</EmTableCell>
+            <EmTableCell>Editor</EmTableCell>
+            <EmTableCell>laurak@email.com</EmTableCell>
+            <EmTableCell align="end">555-098-7654</EmTableCell>
+          </EmTableRow>
+
+          <EmTableRow selected>
+            <EmTableCell>Ahmed Khan</EmTableCell>
+            <EmTableCell>Active</EmTableCell>
+            <EmTableCell>Manager</EmTableCell>
+            <EmTableCell>ahmed.k@gmail.com</EmTableCell>
+            <EmTableCell align="end">555-234-5678</EmTableCell>
+          </EmTableRow>
+
+          <EmTableRow>
+            <EmTableCell>Jane Smith</EmTableCell>
+            <EmTableCell>Inactive</EmTableCell>
+            <EmTableCell>CFO</EmTableCell>
+            <EmTableCell>jane.s@gmail.com</EmTableCell>
+            <EmTableCell align="end">555-078-7654</EmTableCell>
+          </EmTableRow>
+
+          <EmTableRow>
+            <EmTableCell>David Wilson</EmTableCell>
+            <EmTableCell>Active</EmTableCell>
+            <EmTableCell>COO</EmTableCell>
+            <EmTableCell>coo10@gmail.com</EmTableCell>
+            <EmTableCell align="end">555-098-7654</EmTableCell>
+          </EmTableRow>
+        </EmTableBody>
+      </EmTable>
+
+      <p class="muted" style="margin-top: 1.5rem;">Compact — fewer columns, no border</p>
+
+      <EmTable :bordered="false">
+        <EmTableHead>
+          <EmTableRow>
+            <EmTableHeader>Plan</EmTableHeader>
+            <EmTableHeader>Status</EmTableHeader>
+            <EmTableHeader align="end">Seats</EmTableHeader>
+            <EmTableHeader align="end">MRR</EmTableHeader>
+          </EmTableRow>
+        </EmTableHead>
+
+        <EmTableBody>
+          <EmTableRow>
+            <EmTableCell>Starter</EmTableCell>
+
+            <EmTableCell>
+              <EmTag tone="tinted" variant="success">
+                <PhCheckCircle :size="14" weight="fill" />
+                active
+              </EmTag>
+            </EmTableCell>
+
+            <EmTableCell align="end">12</EmTableCell>
+            <EmTableCell align="end">$120</EmTableCell>
+          </EmTableRow>
+
+          <EmTableRow>
+            <EmTableCell>Pro</EmTableCell>
+
+            <EmTableCell>
+              <EmTag tone="tinted" variant="warning">
+                <PhWarning :size="14" weight="fill" />
+                trial
+              </EmTag>
+            </EmTableCell>
+
+            <EmTableCell align="end">48</EmTableCell>
+            <EmTableCell align="end">$960</EmTableCell>
+          </EmTableRow>
+
+          <EmTableRow>
+            <EmTableCell>Enterprise</EmTableCell>
+
+            <EmTableCell>
+              <EmTag tone="tinted" variant="error">
+                <PhXCircle :size="14" weight="fill" />
+                churned
+              </EmTag>
+            </EmTableCell>
+
+            <EmTableCell align="end">120</EmTableCell>
+            <EmTableCell align="end">—</EmTableCell>
+          </EmTableRow>
+        </EmTableBody>
+      </EmTable>
+    </section>
+
+    <section>
+      <h2>Carousel</h2>
+
+      <EmCarousel v-model="carouselModel" circular label="Demo carousel" style="width: 557px;">
+        <EmCarouselPrevious>
+          <PhCaretLeft :size="16" weight="duotone" />
+        </EmCarouselPrevious>
+
+        <EmCarouselViewport>
+          <EmCarouselItem value="slide-1">
+            <div class="sink-carousel-slide">1</div>
+          </EmCarouselItem>
+
+          <EmCarouselItem value="slide-2">
+            <div class="sink-carousel-slide">2</div>
+          </EmCarouselItem>
+
+          <EmCarouselItem value="slide-3">
+            <div class="sink-carousel-slide">3</div>
+          </EmCarouselItem>
+        </EmCarouselViewport>
+
+        <EmCarouselNext>
+          <PhCaretRight :size="16" weight="duotone" />
+        </EmCarouselNext>
+
+        <EmCarouselIndicator label="Slides">
+          <template #default="{ items }">
+            <button
+              v-for="item in items"
+              :key="item.index"
+              v-bind="item.attrs"
+              class="emerald-carousel__indicator"
+              type="button"
+            />
+          </template>
+        </EmCarouselIndicator>
+      </EmCarousel>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+  .emerald-sink {
+    min-height: 100vh;
+    padding: 2rem;
+    background: var(--emerald-background);
+    color: var(--emerald-on-background);
+    font-family: Manrope, system-ui, -apple-system, sans-serif;
+  }
+
+  .sink-header {
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--emerald-divider);
+  }
+
+  .sink-header h1 {
+    margin: 0 0 0.25rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+
+  .sink-header p {
+    margin: 0;
+    color: var(--emerald-neutral-500);
+    font-size: 0.875rem;
+  }
+
+  .em-slider-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .em-slider-label {
+    width: 60px;
+    font-size: 0.75rem;
+    color: var(--emerald-neutral-500);
+  }
+
+  .em-slider-value {
+    font-size: 0.75rem;
+    color: var(--emerald-neutral-700);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sink-group {
+    margin: 2.5rem 0 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--emerald-primary-500);
+    font-size: 1.25rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  section {
+    margin-bottom: 2rem;
+  }
+
+  section h2 {
+    margin: 0 0 0.75rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+    align-items: center;
+  }
+
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 480px;
+    margin-bottom: 1rem;
+  }
+
+  .vertical-dividers {
+    height: 80px;
+    align-items: stretch;
+  }
+
+  .sink-demo-surface {
+    padding: 12px 16px;
+    border: 1px dashed rgb(var(--emerald-neutral-channels, 26 28 30) / 0.2);
+    border-radius: 6px;
+  }
+
+  :deep(.sink-box) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 48px;
+    padding: 8px 12px;
+    background: rgb(var(--emerald-primary-500-channels, 24 180 140) / 0.12);
+    border: 1px solid rgb(var(--emerald-primary-500-channels, 24 180 140) / 0.3);
+    border-radius: 6px;
+    font-size: 0.875rem;
+  }
+
+  :deep(.sink-slide) {
+    width: 100%;
+    min-height: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+
+  .emerald-avatar-group {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .emerald-avatar-group > :deep(.emerald-avatar) {
+    border: none;
+    box-shadow:
+      0 0 0 2px var(--emerald-background, #faf9ff),
+      0 1px 2px 0 rgba(5, 0, 18, 0.1);
+  }
+
+  .emerald-avatar-group > :deep(.emerald-avatar) + :deep(.emerald-avatar) {
+    margin-left: -16px;
+  }
+
+  .muted {
+    margin: 0.5rem 0 0.25rem;
+    font-size: 0.75rem;
+    color: var(--emerald-neutral-500);
+  }
+
+  :deep(.sink-carousel-slide) {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding-bottom: 8px;
+    color: #000;
+    font-weight: 600;
+    font-size: 24px;
+    letter-spacing: 0.48px;
+    font-family: Manrope, system-ui, -apple-system, sans-serif;
+  }
+</style>
diff --git a/dev/src/components.d.ts b/dev/src/components.d.ts
index 5b3969f93..a456532e4 100644
--- a/dev/src/components.d.ts
+++ b/dev/src/components.d.ts
@@ -70,6 +70,165 @@ declare module 'vue' {
     DialogDescription: typeof import('./../../packages/0/src/components/Dialog/DialogDescription.vue')['default']
     DialogRoot: typeof import('./../../packages/0/src/components/Dialog/DialogRoot.vue')['default']
     DialogTitle: typeof import('./../../packages/0/src/components/Dialog/DialogTitle.vue')['default']
+    EmAccordion: typeof import('./../../packages/emerald/src/components/EmAccordion/EmAccordion.vue')['default']
+    EmAccordionContent: typeof import('./../../packages/emerald/src/components/EmAccordion/EmAccordionContent.vue')['default']
+    EmAccordionCue: typeof import('./../../packages/emerald/src/components/EmAccordion/EmAccordionCue.vue')['default']
+    EmAccordionHeader: typeof import('./../../packages/emerald/src/components/EmAccordion/EmAccordionHeader.vue')['default']
+    EmAccordionItem: typeof import('./../../packages/emerald/src/components/EmAccordion/EmAccordionItem.vue')['default']
+    EmAccordionTrigger: typeof import('./../../packages/emerald/src/components/EmAccordion/EmAccordionTrigger.vue')['default']
+    EmAlert: typeof import('./../../packages/emerald/src/components/EmAlert/EmAlert.vue')['default']
+    EmAlertBody: typeof import('./../../packages/emerald/src/components/EmAlert/EmAlertBody.vue')['default']
+    EmAlertClose: typeof import('./../../packages/emerald/src/components/EmAlert/EmAlertClose.vue')['default']
+    EmAlertDescription: typeof import('./../../packages/emerald/src/components/EmAlert/EmAlertDescription.vue')['default']
+    EmAlertIcon: typeof import('./../../packages/emerald/src/components/EmAlert/EmAlertIcon.vue')['default']
+    EmAlertTitle: typeof import('./../../packages/emerald/src/components/EmAlert/EmAlertTitle.vue')['default']
+    EmAutoComplete: typeof import('./../../packages/emerald/src/components/EmAutoComplete/EmAutoComplete.vue')['default']
+    EmAutoCompleteContent: typeof import('./../../packages/emerald/src/components/EmAutoComplete/EmAutoCompleteContent.vue')['default']
+    EmAutoCompleteControl: typeof import('./../../packages/emerald/src/components/EmAutoComplete/EmAutoCompleteControl.vue')['default']
+    EmAutoCompleteEmpty: typeof import('./../../packages/emerald/src/components/EmAutoComplete/EmAutoCompleteEmpty.vue')['default']
+    EmAutoCompleteInput: typeof import('./../../packages/emerald/src/components/EmAutoComplete/EmAutoCompleteInput.vue')['default']
+    EmAutoCompleteItem: typeof import('./../../packages/emerald/src/components/EmAutoComplete/EmAutoCompleteItem.vue')['default']
+    EmAvatar: typeof import('./../../packages/emerald/src/components/EmAvatar/EmAvatar.vue')['default']
+    EmAvatarFallback: typeof import('./../../packages/emerald/src/components/EmAvatar/EmAvatarFallback.vue')['default']
+    EmAvatarImage: typeof import('./../../packages/emerald/src/components/EmAvatar/EmAvatarImage.vue')['default']
+    EmBadge: typeof import('./../../packages/emerald/src/components/EmBadge/EmBadge.vue')['default']
+    EmBreadcrumb: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumb.vue')['default']
+    EmBreadcrumbDivider: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbDivider.vue')['default']
+    EmBreadcrumbEllipsis: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbEllipsis.vue')['default']
+    EmBreadcrumbItem: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbItem.vue')['default']
+    EmBreadcrumbLink: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbLink.vue')['default']
+    EmBreadcrumbList: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbList.vue')['default']
+    EmBreadcrumbPage: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbPage.vue')['default']
+    EmButton: typeof import('./../../packages/emerald/src/components/EmButton/EmButton.vue')['default']
+    EmButtonAppend: typeof import('./../../packages/emerald/src/components/EmButton/EmButtonAppend.vue')['default']
+    EmButtonContent: typeof import('./../../packages/emerald/src/components/EmButton/EmButtonContent.vue')['default']
+    EmButtonLoader: typeof import('./../../packages/emerald/src/components/EmButton/EmButtonLoader.vue')['default']
+    EmButtonPrepend: typeof import('./../../packages/emerald/src/components/EmButton/EmButtonPrepend.vue')['default']
+    EmCard: typeof import('./../../packages/emerald/src/components/EmCard/EmCard.vue')['default']
+    EmCardBody: typeof import('./../../packages/emerald/src/components/EmCard/EmCardBody.vue')['default']
+    EmCardFooter: typeof import('./../../packages/emerald/src/components/EmCard/EmCardFooter.vue')['default']
+    EmCardHeader: typeof import('./../../packages/emerald/src/components/EmCard/EmCardHeader.vue')['default']
+    EmCardSubtitle: typeof import('./../../packages/emerald/src/components/EmCard/EmCardSubtitle.vue')['default']
+    EmCardTitle: typeof import('./../../packages/emerald/src/components/EmCard/EmCardTitle.vue')['default']
+    EmCarousel: typeof import('./../../packages/emerald/src/components/EmCarousel/EmCarousel.vue')['default']
+    EmCarouselIndicator: typeof import('./../../packages/emerald/src/components/EmCarousel/EmCarouselIndicator.vue')['default']
+    EmCarouselItem: typeof import('./../../packages/emerald/src/components/EmCarousel/EmCarouselItem.vue')['default']
+    EmCarouselNext: typeof import('./../../packages/emerald/src/components/EmCarousel/EmCarouselNext.vue')['default']
+    EmCarouselPrevious: typeof import('./../../packages/emerald/src/components/EmCarousel/EmCarouselPrevious.vue')['default']
+    EmCarouselViewport: typeof import('./../../packages/emerald/src/components/EmCarousel/EmCarouselViewport.vue')['default']
+    EmCheckbox: typeof import('./../../packages/emerald/src/components/EmCheckbox/EmCheckbox.vue')['default']
+    EmCheckboxGroup: typeof import('./../../packages/emerald/src/components/EmCheckbox/EmCheckboxGroup.vue')['default']
+    EmCheckboxIndicator: typeof import('./../../packages/emerald/src/components/EmCheckbox/EmCheckboxIndicator.vue')['default']
+    EmCheckboxSelectAll: typeof import('./../../packages/emerald/src/components/EmCheckbox/EmCheckboxSelectAll.vue')['default']
+    EmContainer: typeof import('./../../packages/emerald/src/components/EmContainer/EmContainer.vue')['default']
+    EmDatePicker: typeof import('./../../packages/emerald/src/components/EmDatePicker/EmDatePicker.vue')['default']
+    EmDatePickerCalendar: typeof import('./../../packages/emerald/src/components/EmDatePicker/EmDatePickerCalendar.vue')['default']
+    EmDatePickerCell: typeof import('./../../packages/emerald/src/components/EmDatePicker/EmDatePickerCell.vue')['default']
+    EmDatePickerGrid: typeof import('./../../packages/emerald/src/components/EmDatePicker/EmDatePickerGrid.vue')['default']
+    EmDatePickerHeader: typeof import('./../../packages/emerald/src/components/EmDatePicker/EmDatePickerHeader.vue')['default']
+    EmDatePickerInput: typeof import('./../../packages/emerald/src/components/EmDatePicker/EmDatePickerInput.vue')['default']
+    EmDialog: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialog.vue')['default']
+    EmDialogActivator: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogActivator.vue')['default']
+    EmDialogBody: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogBody.vue')['default']
+    EmDialogClose: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogClose.vue')['default']
+    EmDialogContent: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogContent.vue')['default']
+    EmDialogDescription: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogDescription.vue')['default']
+    EmDialogFooter: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogFooter.vue')['default']
+    EmDialogHeader: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogHeader.vue')['default']
+    EmDialogTitle: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogTitle.vue')['default']
+    EmDivider: typeof import('./../../packages/emerald/src/components/EmDivider/EmDivider.vue')['default']
+    EmDividerLabel: typeof import('./../../packages/emerald/src/components/EmDivider/EmDividerLabel.vue')['default']
+    EmDividerLine: typeof import('./../../packages/emerald/src/components/EmDivider/EmDividerLine.vue')['default']
+    EmFlex: typeof import('./../../packages/emerald/src/components/EmFlex/EmFlex.vue')['default']
+    EmForm: typeof import('./../../packages/emerald/src/components/EmForm/EmForm.vue')['default']
+    EmGrid: typeof import('./../../packages/emerald/src/components/EmGrid/EmGrid.vue')['default']
+    EmGridItem: typeof import('./../../packages/emerald/src/components/EmGrid/EmGridItem.vue')['default']
+    EmList: typeof import('./../../packages/emerald/src/components/EmList/EmList.vue')['default']
+    EmListItem: typeof import('./../../packages/emerald/src/components/EmList/EmListItem.vue')['default']
+    EmListItemAction: typeof import('./../../packages/emerald/src/components/EmList/EmListItemAction.vue')['default']
+    EmListItemBody: typeof import('./../../packages/emerald/src/components/EmList/EmListItemBody.vue')['default']
+    EmListItemIcon: typeof import('./../../packages/emerald/src/components/EmList/EmListItemIcon.vue')['default']
+    EmListItemSubtitle: typeof import('./../../packages/emerald/src/components/EmList/EmListItemSubtitle.vue')['default']
+    EmListItemTitle: typeof import('./../../packages/emerald/src/components/EmList/EmListItemTitle.vue')['default']
+    EmListSeparator: typeof import('./../../packages/emerald/src/components/EmList/EmListSeparator.vue')['default']
+    EmListSubheader: typeof import('./../../packages/emerald/src/components/EmList/EmListSubheader.vue')['default']
+    EmLoading: typeof import('./../../packages/emerald/src/components/EmLoading/EmLoading.vue')['default']
+    EmMenu: typeof import('./../../packages/emerald/src/components/EmMenu/EmMenu.vue')['default']
+    EmMenuActivator: typeof import('./../../packages/emerald/src/components/EmMenu/EmMenuActivator.vue')['default']
+    EmMenuContent: typeof import('./../../packages/emerald/src/components/EmMenu/EmMenuContent.vue')['default']
+    EmMenuItem: typeof import('./../../packages/emerald/src/components/EmMenu/EmMenuItem.vue')['default']
+    EmMenuLabel: typeof import('./../../packages/emerald/src/components/EmMenu/EmMenuLabel.vue')['default']
+    EmMenuSeparator: typeof import('./../../packages/emerald/src/components/EmMenu/EmMenuSeparator.vue')['default']
+    EmPagination: typeof import('./../../packages/emerald/src/components/EmPagination/EmPagination.vue')['default']
+    EmPaginationEllipsis: typeof import('./../../packages/emerald/src/components/EmPagination/EmPaginationEllipsis.vue')['default']
+    EmPaginationFirst: typeof import('./../../packages/emerald/src/components/EmPagination/EmPaginationFirst.vue')['default']
+    EmPaginationItem: typeof import('./../../packages/emerald/src/components/EmPagination/EmPaginationItem.vue')['default']
+    EmPaginationLast: typeof import('./../../packages/emerald/src/components/EmPagination/EmPaginationLast.vue')['default']
+    EmPaginationNext: typeof import('./../../packages/emerald/src/components/EmPagination/EmPaginationNext.vue')['default']
+    EmPaginationPrev: typeof import('./../../packages/emerald/src/components/EmPagination/EmPaginationPrev.vue')['default']
+    EmProgress: typeof import('./../../packages/emerald/src/components/EmProgress/EmProgress.vue')['default']
+    EmProgressFill: typeof import('./../../packages/emerald/src/components/EmProgress/EmProgressFill.vue')['default']
+    EmProgressTrack: typeof import('./../../packages/emerald/src/components/EmProgress/EmProgressTrack.vue')['default']
+    EmProgressValue: typeof import('./../../packages/emerald/src/components/EmProgress/EmProgressValue.vue')['default']
+    EmRadio: typeof import('./../../packages/emerald/src/components/EmRadio/EmRadio.vue')['default']
+    EmRadioGroup: typeof import('./../../packages/emerald/src/components/EmRadio/EmRadioGroup.vue')['default']
+    EmRadioIndicator: typeof import('./../../packages/emerald/src/components/EmRadio/EmRadioIndicator.vue')['default']
+    EmSelect: typeof import('./../../packages/emerald/src/components/EmSelect/EmSelect.vue')['default']
+    EmSelectActivator: typeof import('./../../packages/emerald/src/components/EmSelect/EmSelectActivator.vue')['default']
+    EmSelectContent: typeof import('./../../packages/emerald/src/components/EmSelect/EmSelectContent.vue')['default']
+    EmSelectItem: typeof import('./../../packages/emerald/src/components/EmSelect/EmSelectItem.vue')['default']
+    EmSelectPlaceholder: typeof import('./../../packages/emerald/src/components/EmSelect/EmSelectPlaceholder.vue')['default']
+    EmSelectValue: typeof import('./../../packages/emerald/src/components/EmSelect/EmSelectValue.vue')['default']
+    EmSlider: typeof import('./../../packages/emerald/src/components/EmSlider/EmSlider.vue')['default']
+    EmSliderRange: typeof import('./../../packages/emerald/src/components/EmSlider/EmSliderRange.vue')['default']
+    EmSliderThumb: typeof import('./../../packages/emerald/src/components/EmSlider/EmSliderThumb.vue')['default']
+    EmSliderTrack: typeof import('./../../packages/emerald/src/components/EmSlider/EmSliderTrack.vue')['default']
+    EmStepper: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepper.vue')['default']
+    EmStepperItem: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepperItem.vue')['default']
+    EmStepperLabel: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepperLabel.vue')['default']
+    EmStepperLabelDescription: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepperLabelDescription.vue')['default']
+    EmStepperSeparator: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepperSeparator.vue')['default']
+    EmSwitch: typeof import('./../../packages/emerald/src/components/EmSwitch/EmSwitch.vue')['default']
+    EmSwitchGroup: typeof import('./../../packages/emerald/src/components/EmSwitch/EmSwitchGroup.vue')['default']
+    EmSwitchThumb: typeof import('./../../packages/emerald/src/components/EmSwitch/EmSwitchThumb.vue')['default']
+    EmSwitchTrack: typeof import('./../../packages/emerald/src/components/EmSwitch/EmSwitchTrack.vue')['default']
+    EmTable: typeof import('./../../packages/emerald/src/components/EmTable/EmTable.vue')['default']
+    EmTableBody: typeof import('./../../packages/emerald/src/components/EmTable/EmTableBody.vue')['default']
+    EmTableCell: typeof import('./../../packages/emerald/src/components/EmTable/EmTableCell.vue')['default']
+    EmTableHead: typeof import('./../../packages/emerald/src/components/EmTable/EmTableHead.vue')['default']
+    EmTableHeader: typeof import('./../../packages/emerald/src/components/EmTable/EmTableHeader.vue')['default']
+    EmTableRow: typeof import('./../../packages/emerald/src/components/EmTable/EmTableRow.vue')['default']
+    EmTabs: typeof import('./../../packages/emerald/src/components/EmTabs/EmTabs.vue')['default']
+    EmTabsItem: typeof import('./../../packages/emerald/src/components/EmTabs/EmTabsItem.vue')['default']
+    EmTabsList: typeof import('./../../packages/emerald/src/components/EmTabs/EmTabsList.vue')['default']
+    EmTabsPanel: typeof import('./../../packages/emerald/src/components/EmTabs/EmTabsPanel.vue')['default']
+    EmTag: typeof import('./../../packages/emerald/src/components/EmTag/EmTag.vue')['default']
+    EmTextarea: typeof import('./../../packages/emerald/src/components/EmTextarea/EmTextarea.vue')['default']
+    EmTextareaControl: typeof import('./../../packages/emerald/src/components/EmTextarea/EmTextareaControl.vue')['default']
+    EmTextareaDescription: typeof import('./../../packages/emerald/src/components/EmTextarea/EmTextareaDescription.vue')['default']
+    EmTextareaError: typeof import('./../../packages/emerald/src/components/EmTextarea/EmTextareaError.vue')['default']
+    EmTextareaLabel: typeof import('./../../packages/emerald/src/components/EmTextarea/EmTextareaLabel.vue')['default']
+    EmTextField: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextField.vue')['default']
+    EmTextFieldAppend: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextFieldAppend.vue')['default']
+    EmTextFieldControl: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextFieldControl.vue')['default']
+    EmTextFieldDescription: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextFieldDescription.vue')['default']
+    EmTextFieldError: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextFieldError.vue')['default']
+    EmTextFieldLabel: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextFieldLabel.vue')['default']
+    EmTextFieldPrepend: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextFieldPrepend.vue')['default']
+    EmToast: typeof import('./../../packages/emerald/src/components/EmToast/EmToast.vue')['default']
+    EmToastBody: typeof import('./../../packages/emerald/src/components/EmToast/EmToastBody.vue')['default']
+    EmToastClose: typeof import('./../../packages/emerald/src/components/EmToast/EmToastClose.vue')['default']
+    EmToastDescription: typeof import('./../../packages/emerald/src/components/EmToast/EmToastDescription.vue')['default']
+    EmToastIcon: typeof import('./../../packages/emerald/src/components/EmToast/EmToastIcon.vue')['default']
+    EmToastTitle: typeof import('./../../packages/emerald/src/components/EmToast/EmToastTitle.vue')['default']
+    EmTooltip: typeof import('./../../packages/emerald/src/components/EmTooltip/EmTooltip.vue')['default']
+    EmTooltipActivator: typeof import('./../../packages/emerald/src/components/EmTooltip/EmTooltipActivator.vue')['default']
+    EmTooltipContent: typeof import('./../../packages/emerald/src/components/EmTooltip/EmTooltipContent.vue')['default']
+    EmUpload: typeof import('./../../packages/emerald/src/components/EmUpload/EmUpload.vue')['default']
+    EmUploadDropzone: typeof import('./../../packages/emerald/src/components/EmUpload/EmUploadDropzone.vue')['default']
+    EmUploadInput: typeof import('./../../packages/emerald/src/components/EmUpload/EmUploadInput.vue')['default']
+    EmUploadItem: typeof import('./../../packages/emerald/src/components/EmUpload/EmUploadItem.vue')['default']
+    EmUploadList: typeof import('./../../packages/emerald/src/components/EmUpload/EmUploadList.vue')['default']
     ExpansionPanelActivator: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelActivator.vue')['default']
     ExpansionPanelContent: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelContent.vue')['default']
     ExpansionPanelCue: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelCue.vue')['default']
@@ -95,6 +254,9 @@ declare module 'vue' {
     NumberFieldIncrement: typeof import('./../../packages/0/src/components/NumberField/NumberFieldIncrement.vue')['default']
     NumberFieldRoot: typeof import('./../../packages/0/src/components/NumberField/NumberFieldRoot.vue')['default']
     NumberFieldScrub: typeof import('./../../packages/0/src/components/NumberField/NumberFieldScrub.vue')['default']
+    OverflowIndicator: typeof import('./../../packages/0/src/components/Overflow/OverflowIndicator.vue')['default']
+    OverflowItem: typeof import('./../../packages/0/src/components/Overflow/OverflowItem.vue')['default']
+    OverflowRoot: typeof import('./../../packages/0/src/components/Overflow/OverflowRoot.vue')['default']
     PaginationEllipsis: typeof import('./../../packages/0/src/components/Pagination/PaginationEllipsis.vue')['default']
     PaginationFirst: typeof import('./../../packages/0/src/components/Pagination/PaginationFirst.vue')['default']
     PaginationItem: typeof import('./../../packages/0/src/components/Pagination/PaginationItem.vue')['default']
diff --git a/dev/src/composables.d.ts b/dev/src/composables.d.ts
index 674e2484a..4650f26a9 100644
--- a/dev/src/composables.d.ts
+++ b/dev/src/composables.d.ts
@@ -8,20 +8,30 @@ export {}
 declare global {
   const COMMON_ELEMENTS: typeof import('../../packages/0/src/constants/htmlElements').COMMON_ELEMENTS
   const ClientAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').ClientAdapter
+  const ClientComboboxAdapter: typeof import('../../packages/0/src/composables/createCombobox/index').ClientComboboxAdapter
+  const ClientDataTableAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').ClientDataTableAdapter
+  const ComboboxAdapter: typeof import('../../packages/0/src/composables/createCombobox/index').ComboboxAdapter
   const ComboboxClientAdapter: typeof import('../../packages/0/src/composables/createCombobox/index').ComboboxClientAdapter
   const ComboboxServerAdapter: typeof import('../../packages/0/src/composables/createCombobox/index').ComboboxServerAdapter
   const ConsolaLoggerAdapter: typeof import('../../packages/0/src/composables/useLogger/index').ConsolaLoggerAdapter
   const DEFAULT_DARK: typeof import('../../packages/paper/src/composables/useTheme/index').DEFAULT_DARK
   const DEFAULT_LIGHT: typeof import('../../packages/paper/src/composables/useTheme/index').DEFAULT_LIGHT
   const DataTableAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').DataTableAdapter
+  const DragDropAdapter: typeof import('../../packages/0/src/composables/useDragDrop/index').DragDropAdapter
   const EffectScope: typeof import('vue').EffectScope
   const FeaturesAdapter: typeof import('../../packages/0/src/composables/useFeatures/index').FeaturesAdapter
   const FlagsmithFeatureAdapter: typeof import('../../packages/0/src/composables/useFeatures/index').FlagsmithFeatureAdapter
   const IN_BROWSER: typeof import('../../packages/0/src/constants/globals').IN_BROWSER
+  const KeyboardAdapter: typeof import('../../packages/0/src/composables/useDragDrop/index').KeyboardAdapter
   const LaunchDarklyFeatureAdapter: typeof import('../../packages/0/src/composables/useFeatures/index').LaunchDarklyFeatureAdapter
+  const LocaleAdapter: typeof import('../../packages/0/src/composables/useLocale/index').LocaleAdapter
+  const LoggerAdapter: typeof import('../../packages/0/src/composables/useLogger/index').LoggerAdapter
   const MemoryAdapter: typeof import('../../packages/0/src/composables/useStorage/index').MemoryAdapter
+  const MemoryStorageAdapter: typeof import('../../packages/0/src/composables/useStorage/index').MemoryStorageAdapter
   const PermissionAdapter: typeof import('../../packages/0/src/composables/usePermissions/index').PermissionAdapter
+  const PermissionsAdapter: typeof import('../../packages/0/src/composables/usePermissions/index').PermissionsAdapter
   const PinoLoggerAdapter: typeof import('../../packages/0/src/composables/useLogger/index').PinoLoggerAdapter
+  const PointerAdapter: typeof import('../../packages/0/src/composables/useDragDrop/index').PointerAdapter
   const PostHogFeatureAdapter: typeof import('../../packages/0/src/composables/useFeatures/index').PostHogFeatureAdapter
   const SELF_CLOSING_TAGS: typeof import('../../packages/0/src/constants/htmlElements').SELF_CLOSING_TAGS
   const SUPPORTS_INTERSECTION_OBSERVER: typeof import('../../packages/0/src/constants/globals').SUPPORTS_INTERSECTION_OBSERVER
@@ -30,11 +40,18 @@ declare global {
   const SUPPORTS_OBSERVER: typeof import('../../packages/0/src/constants/globals').SUPPORTS_OBSERVER
   const SUPPORTS_TOUCH: typeof import('../../packages/0/src/constants/globals').SUPPORTS_TOUCH
   const ServerAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').ServerAdapter
+  const ServerComboboxAdapter: typeof import('../../packages/0/src/composables/createCombobox/index').ServerComboboxAdapter
+  const ServerDataTableAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').ServerDataTableAdapter
+  const StorageAdapter: typeof import('../../packages/0/src/composables/useStorage/index').StorageAdapter
   const TemporalDateAdapter: typeof import('../../packages/0/src/composables/useDate/index').TemporalDateAdapter
+  const V0LocaleAdapter: typeof import('../../packages/0/src/composables/useLocale/index').V0LocaleAdapter
+  const V0LoggerAdapter: typeof import('../../packages/0/src/composables/useLogger/index').V0LoggerAdapter
+  const V0RtlAdapter: typeof import('../../packages/0/src/composables/useRtl/index').V0RtlAdapter
   const V0StyleSheetThemeAdapter: typeof import('../../packages/0/src/composables/useTheme/index').V0StyleSheetThemeAdapter
   const V0UnheadThemeAdapter: typeof import('../../packages/0/src/composables/useTheme/index').V0UnheadThemeAdapter
   const V0_ELEVATION_KEY: typeof import('../../packages/paper/src/composables/useElevation/index').V0_ELEVATION_KEY
   const VirtualAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').VirtualAdapter
+  const VirtualDataTableAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').VirtualDataTableAdapter
   const Vuetify0DateAdapter: typeof import('../../packages/0/src/composables/useDate/index').Vuetify0DateAdapter
   const Vuetify0LocaleAdapter: typeof import('../../packages/0/src/composables/useLocale/index').Vuetify0LocaleAdapter
   const Vuetify0LoggerAdapter: typeof import('../../packages/0/src/composables/useLogger/index').Vuetify0LoggerAdapter
@@ -75,6 +92,7 @@ declare global {
   const createHydrationContext: typeof import('../../packages/0/src/composables/useHydration/index').createHydrationContext
   const createHydrationPlugin: typeof import('../../packages/0/src/composables/useHydration/index').createHydrationPlugin
   const createInput: typeof import('../../packages/0/src/composables/createInput/index').createInput
+  const createKanban: typeof import('../../packages/0/src/composables/createKanban/index').createKanban
   const createLocale: typeof import('../../packages/0/src/composables/useLocale/index').createLocale
   const createLocaleContext: typeof import('../../packages/0/src/composables/useLocale/index').createLocaleContext
   const createLocaleFallback: typeof import('../../packages/0/src/composables/useLocale/index').createLocaleFallback
@@ -120,6 +138,7 @@ declare global {
   const createSingle: typeof import('../../packages/0/src/composables/createSingle/index').createSingle
   const createSingleContext: typeof import('../../packages/0/src/composables/createSingle/index').createSingleContext
   const createSlider: typeof import('../../packages/0/src/composables/createSlider/index').createSlider
+  const createSortable: typeof import('../../packages/0/src/composables/createSortable/index').createSortable
   const createStack: typeof import('../../packages/0/src/composables/useStack/index').createStack
   const createStackContext: typeof import('../../packages/0/src/composables/useStack/index').createStackContext
   const createStackPlugin: typeof import('../../packages/0/src/composables/useStack/index').createStackPlugin
@@ -179,6 +198,7 @@ declare global {
   const isStandardSchema: typeof import('../../packages/0/src/composables/useRules/index').isStandardSchema
   const isString: typeof import('../../packages/0/src/utilities/helpers').isString
   const isSymbol: typeof import('../../packages/0/src/utilities/helpers').isSymbol
+  const isThenable: typeof import('../../packages/0/src/utilities/helpers').isThenable
   const isUndefined: typeof import('../../packages/0/src/utilities/helpers').isUndefined
   const markRaw: typeof import('vue').markRaw
   const mergeDeep: typeof import('../../packages/0/src/utilities/helpers').mergeDeep
@@ -240,8 +260,10 @@ declare global {
   const useCssVars: typeof import('vue').useCssVars
   const useDataTable: typeof import('../../packages/0/src/composables/createDataTable/index').useDataTable
   const useDate: typeof import('../../packages/0/src/composables/useDate/index').useDate
+  const useDelay: typeof import('../../packages/0/src/composables/useDelay/index').useDelay
   const useDimensions: typeof import('../../packages/paper/src/composables/useDimensions/index').useDimensions
   const useDocumentEventListener: typeof import('../../packages/0/src/composables/useEventListener/index').useDocumentEventListener
+  const useDragDrop: typeof import('../../packages/0/src/composables/useDragDrop/index').useDragDrop
   const useElementIntersection: typeof import('../../packages/0/src/composables/useIntersectionObserver/index').useElementIntersection
   const useElementSize: typeof import('../../packages/0/src/composables/useResizeObserver/index').useElementSize
   const useElevation: typeof import('../../packages/paper/src/composables/useElevation/index').useElevation
@@ -336,13 +358,13 @@ declare global {
   export type { BreadcrumbTicketInput, BreadcrumbTicket, BreadcrumbsContext, BreadcrumbsOptions, BreadcrumbsContextOptions } from '../../packages/0/src/composables/createBreadcrumbs/index'
   import('../../packages/0/src/composables/createBreadcrumbs/index')
   // @ts-ignore
-  export type { ComboboxOptions, ComboboxContext, ComboboxAdapterContext, ComboboxAdapterInterface, ComboboxAdapterResult, ComboboxClientAdapterOptions } from '../../packages/0/src/composables/createCombobox/index'
+  export type { ComboboxOptions, ComboboxContext, ClientComboboxAdapterOptions, ComboboxAdapterContext, ComboboxAdapterResult } from '../../packages/0/src/composables/createCombobox/index'
   import('../../packages/0/src/composables/createCombobox/index')
   // @ts-ignore
   export type { ContextKey, CreateContextOptions } from '../../packages/0/src/composables/createContext/index'
   import('../../packages/0/src/composables/createContext/index')
   // @ts-ignore
-  export type { KeysOfType, SelectStrategy, DataTableColumn, DataTableSort, DataTableSelection, DataTableGroup, DataTableGrouping, DataTableExpansion, DataTableOptions, DataTableContext, DataTableContextOptions, DataTableAdapterContext, DataTableAdapterInterface, DataTableAdapterResult, SortDirection, SortEntry, ServerAdapterOptions, ColumnNode, InternalHeader } from '../../packages/0/src/composables/createDataTable/index'
+  export type { KeysOfType, SelectStrategy, DataTableColumn, DataTableSort, DataTableSelection, DataTableGroup, DataTableGrouping, DataTableExpansion, DataTableOptions, DataTableContext, DataTableContextOptions, DataTableAdapterContext, DataTableAdapterResult, SortDirection, SortEntry, ServerDataTableAdapterOptions, ColumnNode, InternalHeader } from '../../packages/0/src/composables/createDataTable/index'
   import('../../packages/0/src/composables/createDataTable/index')
   // @ts-ignore
   export type { Primitive, FilterQuery, FilterItem, FilterMode, FilterFunction, FilterOptions, FilterResult, FilterContext, FilterContextOptions } from '../../packages/0/src/composables/createFilter/index'
@@ -357,6 +379,9 @@ declare global {
   export type { InputState, InputOptions, InputContext } from '../../packages/0/src/composables/createInput/index'
   import('../../packages/0/src/composables/createInput/index')
   // @ts-ignore
+  export type { KanbanOptions, KanbanColumnTicketInput, KanbanColumnTicket, KanbanTransferPayload, KanbanEventListener, KanbanContext } from '../../packages/0/src/composables/createKanban/index'
+  import('../../packages/0/src/composables/createKanban/index')
+  // @ts-ignore
   export type { ModelTicketInput, ModelTicket, ModelContext, ModelOptions } from '../../packages/0/src/composables/createModel/index'
   import('../../packages/0/src/composables/createModel/index')
   // @ts-ignore
@@ -396,6 +421,9 @@ declare global {
   export type { SliderTicketInput, SliderOptions, SliderContext } from '../../packages/0/src/composables/createSlider/index'
   import('../../packages/0/src/composables/createSlider/index')
   // @ts-ignore
+  export type { SortableTicketInput, SortableTicket, SortableOptions, SortableMovePayload, SortableEventListener, SortableContext } from '../../packages/0/src/composables/createSortable/index'
+  import('../../packages/0/src/composables/createSortable/index')
+  // @ts-ignore
   export type { StepTicketInput, StepTicket, StepContext, StepOptions, StepContextOptions } from '../../packages/0/src/composables/createStep/index'
   import('../../packages/0/src/composables/createStep/index')
   // @ts-ignore
@@ -426,10 +454,16 @@ declare global {
   export type { DateContext, DateOptions, DateContextOptions, DatePluginOptions, DateAdapter } from '../../packages/0/src/composables/useDate/index'
   import('../../packages/0/src/composables/useDate/index')
   // @ts-ignore
+  export type { UseDelayOptions, UseDelayStartOptions, UseDelayReturn } from '../../packages/0/src/composables/useDelay/index'
+  import('../../packages/0/src/composables/useDelay/index')
+  // @ts-ignore
+  export type { Orientation, DragType, DropIndicator, DropPosition, DragVia, ActiveDrag, DraggableTicketInput, DraggableTicket, DropZoneTicketInput, DropZoneTicket, DragDropPlugin, DragDropOptions, DraggablesContext, ZonesContext, DragDropContext, DragDropAdapterContext, DragDropAdapterEmit, KeyboardAdapterOptions, PointerAdapterOptions } from '../../packages/0/src/composables/useDragDrop/index'
+  import('../../packages/0/src/composables/useDragDrop/index')
+  // @ts-ignore
   export type { CleanupFunction, EventHandler } from '../../packages/0/src/composables/useEventListener/index'
   import('../../packages/0/src/composables/useEventListener/index')
   // @ts-ignore
-  export type { FeatureTicketInput, FeatureTicket, FeatureContext, FeatureOptions, FeatureContextOptions, FeaturePluginOptions, FeaturesAdapterFlags, FeaturesAdapterInterface, FeaturesAdapterValue } from '../../packages/0/src/composables/useFeatures/index'
+  export type { FeatureTicketInput, FeatureTicket, FeatureContext, FeatureOptions, FeatureContextOptions, FeaturePluginOptions, FeaturesAdapterFlags, FeaturesAdapterValue } from '../../packages/0/src/composables/useFeatures/index'
   import('../../packages/0/src/composables/useFeatures/index')
   // @ts-ignore
   export type { UseHotkeyOptions, UseHotkeyReturn, PlatformContext } from '../../packages/0/src/composables/useHotkey/index'
@@ -447,10 +481,10 @@ declare global {
   export type { LazyOptions, LazyContext } from '../../packages/0/src/composables/useLazy/index'
   import('../../packages/0/src/composables/useLazy/index')
   // @ts-ignore
-  export type { LocaleRecord, LocaleTicketInput, LocaleTicket, LocaleContext, LocaleOptions, LocaleContextOptions, LocalePluginOptions, LocaleAdapter, LocaleAdapterContext } from '../../packages/0/src/composables/useLocale/index'
+  export type { LocaleRecord, LocaleTicketInput, LocaleTicket, LocaleContext, LocaleOptions, LocaleContextOptions, LocalePluginOptions, LocaleAdapterContext } from '../../packages/0/src/composables/useLocale/index'
   import('../../packages/0/src/composables/useLocale/index')
   // @ts-ignore
-  export type { LoggerContext, LoggerOptions, LoggerContextOptions, LoggerPluginOptions, LoggerAdapter, LogLevel } from '../../packages/0/src/composables/useLogger/index'
+  export type { LoggerContext, LoggerOptions, LoggerContextOptions, LoggerPluginOptions, LogLevel } from '../../packages/0/src/composables/useLogger/index'
   import('../../packages/0/src/composables/useLogger/index')
   // @ts-ignore
   export type { MediaQueryContext } from '../../packages/0/src/composables/useMediaQuery/index'
@@ -459,10 +493,10 @@ declare global {
   export type { ObservableNodeList, MutationObserverRecord, UseMutationObserverOptions, UseMutationObserverReturn } from '../../packages/0/src/composables/useMutationObserver/index'
   import('../../packages/0/src/composables/useMutationObserver/index')
   // @ts-ignore
-  export type { NotificationSeverity, NotificationInput, NotificationTicket, NotificationsAdapterContext, NotificationsAdapterInterface, NotificationsOptions, NotificationsContext, NotificationsPluginOptions } from '../../packages/0/src/composables/useNotifications/index'
+  export type { NotificationSeverity, NotificationInput, NotificationTicket, NotificationsAdapterContext, NotificationsOptions, NotificationsContext, NotificationsPluginOptions } from '../../packages/0/src/composables/useNotifications/index'
   import('../../packages/0/src/composables/useNotifications/index')
   // @ts-ignore
-  export type { PermissionTicket, PermissionContext, PermissionOptions, PermissionContextOptions, PermissionPluginOptions, PermissionAdapterInterface } from '../../packages/0/src/composables/usePermissions/index'
+  export type { PermissionTicket, PermissionContext, PermissionOptions, PermissionContextOptions, PermissionPluginOptions } from '../../packages/0/src/composables/usePermissions/index'
   import('../../packages/0/src/composables/usePermissions/index')
   // @ts-ignore
   export type { PopoverOptions, PopoverReturn } from '../../packages/0/src/composables/usePopover/index'
@@ -495,7 +529,7 @@ declare global {
   export type { StackTicketInput, StackTicket, StackContext, StackOptions, StackContextOptions, StackPluginOptions } from '../../packages/0/src/composables/useStack/index'
   import('../../packages/0/src/composables/useStack/index')
   // @ts-ignore
-  export type { StorageContext, StorageOptions, StorageContextOptions, StoragePluginOptions, StorageAdapter, StorageType } from '../../packages/0/src/composables/useStorage/index'
+  export type { StorageContext, StorageOptions, StorageContextOptions, StoragePluginOptions, StorageType } from '../../packages/0/src/composables/useStorage/index'
   import('../../packages/0/src/composables/useStorage/index')
   // @ts-ignore
   export type { Colors, ThemeColors, ThemeRecord, ThemeTicketInput, ThemeTicket, ThemeContext, ThemeOptions, ThemeContextOptions, ThemePluginOptions, ThemeAdapter } from '../../packages/0/src/composables/useTheme/index'
@@ -522,34 +556,40 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
-    readonly COMMON_ELEMENTS: UnwrapRef<typeof import('../../packages/0/src/constants/htmlElements')['COMMON_ELEMENTS']>
-    readonly ClientAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['ClientAdapter']>
-    readonly ComboboxClientAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['ComboboxClientAdapter']>
-    readonly ComboboxServerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['ComboboxServerAdapter']>
+    readonly ClientComboboxAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['ClientComboboxAdapter']>
+    readonly ClientDataTableAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['ClientDataTableAdapter']>
+    readonly ComboboxAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['ComboboxAdapter']>
     readonly ConsolaLoggerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['ConsolaLoggerAdapter']>
     readonly DEFAULT_DARK: UnwrapRef<typeof import('../../packages/paper/src/composables/useTheme/index')['DEFAULT_DARK']>
     readonly DEFAULT_LIGHT: UnwrapRef<typeof import('../../packages/paper/src/composables/useTheme/index')['DEFAULT_LIGHT']>
     readonly DataTableAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['DataTableAdapter']>
+    readonly DragDropAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useDragDrop/index')['DragDropAdapter']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly FeaturesAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useFeatures/index')['FeaturesAdapter']>
     readonly IN_BROWSER: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['IN_BROWSER']>
-    readonly MemoryAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useStorage/index')['MemoryAdapter']>
-    readonly PermissionAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/usePermissions/index')['PermissionAdapter']>
+    readonly KeyboardAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useDragDrop/index')['KeyboardAdapter']>
+    readonly LocaleAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['LocaleAdapter']>
+    readonly LoggerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['LoggerAdapter']>
+    readonly MemoryStorageAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useStorage/index')['MemoryStorageAdapter']>
+    readonly PermissionsAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/usePermissions/index')['PermissionsAdapter']>
     readonly PinoLoggerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['PinoLoggerAdapter']>
+    readonly PointerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useDragDrop/index')['PointerAdapter']>
     readonly SELF_CLOSING_TAGS: UnwrapRef<typeof import('../../packages/0/src/constants/htmlElements')['SELF_CLOSING_TAGS']>
     readonly SUPPORTS_INTERSECTION_OBSERVER: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['SUPPORTS_INTERSECTION_OBSERVER']>
     readonly SUPPORTS_MATCH_MEDIA: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['SUPPORTS_MATCH_MEDIA']>
     readonly SUPPORTS_MUTATION_OBSERVER: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['SUPPORTS_MUTATION_OBSERVER']>
     readonly SUPPORTS_OBSERVER: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['SUPPORTS_OBSERVER']>
     readonly SUPPORTS_TOUCH: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['SUPPORTS_TOUCH']>
-    readonly ServerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['ServerAdapter']>
+    readonly ServerComboboxAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['ServerComboboxAdapter']>
+    readonly ServerDataTableAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['ServerDataTableAdapter']>
+    readonly StorageAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useStorage/index')['StorageAdapter']>
+    readonly V0LocaleAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['V0LocaleAdapter']>
+    readonly V0LoggerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['V0LoggerAdapter']>
+    readonly V0RtlAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useRtl/index')['V0RtlAdapter']>
     readonly V0StyleSheetThemeAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useTheme/index')['V0StyleSheetThemeAdapter']>
     readonly V0UnheadThemeAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useTheme/index')['V0UnheadThemeAdapter']>
     readonly V0_ELEVATION_KEY: UnwrapRef<typeof import('../../packages/paper/src/composables/useElevation/index')['V0_ELEVATION_KEY']>
-    readonly VirtualAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['VirtualAdapter']>
-    readonly Vuetify0LocaleAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['Vuetify0LocaleAdapter']>
-    readonly Vuetify0LoggerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['Vuetify0LoggerAdapter']>
-    readonly Vuetify0RtlAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useRtl/index')['Vuetify0RtlAdapter']>
+    readonly VirtualDataTableAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['VirtualDataTableAdapter']>
     readonly __LOGGER_ENABLED__: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['__LOGGER_ENABLED__']>
     readonly apca: UnwrapRef<typeof import('../../packages/0/src/utilities/apca')['apca']>
     readonly clamp: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['clamp']>
@@ -584,6 +624,7 @@ declare module 'vue' {
     readonly createHydrationContext: UnwrapRef<typeof import('../../packages/0/src/composables/useHydration/index')['createHydrationContext']>
     readonly createHydrationPlugin: UnwrapRef<typeof import('../../packages/0/src/composables/useHydration/index')['createHydrationPlugin']>
     readonly createInput: UnwrapRef<typeof import('../../packages/0/src/composables/createInput/index')['createInput']>
+    readonly createKanban: UnwrapRef<typeof import('../../packages/0/src/composables/createKanban/index')['createKanban']>
     readonly createLocale: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['createLocale']>
     readonly createLocaleContext: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['createLocaleContext']>
     readonly createLocaleFallback: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['createLocaleFallback']>
@@ -629,6 +670,7 @@ declare module 'vue' {
     readonly createSingle: UnwrapRef<typeof import('../../packages/0/src/composables/createSingle/index')['createSingle']>
     readonly createSingleContext: UnwrapRef<typeof import('../../packages/0/src/composables/createSingle/index')['createSingleContext']>
     readonly createSlider: UnwrapRef<typeof import('../../packages/0/src/composables/createSlider/index')['createSlider']>
+    readonly createSortable: UnwrapRef<typeof import('../../packages/0/src/composables/createSortable/index')['createSortable']>
     readonly createStack: UnwrapRef<typeof import('../../packages/0/src/composables/useStack/index')['createStack']>
     readonly createStackContext: UnwrapRef<typeof import('../../packages/0/src/composables/useStack/index')['createStackContext']>
     readonly createStackPlugin: UnwrapRef<typeof import('../../packages/0/src/composables/useStack/index')['createStackPlugin']>
@@ -686,6 +728,7 @@ declare module 'vue' {
     readonly isStandardSchema: UnwrapRef<typeof import('../../packages/0/src/composables/useRules/index')['isStandardSchema']>
     readonly isString: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['isString']>
     readonly isSymbol: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['isSymbol']>
+    readonly isThenable: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['isThenable']>
     readonly isUndefined: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['isUndefined']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly mergeDeep: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['mergeDeep']>
@@ -745,8 +788,10 @@ declare module 'vue' {
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
     readonly useDataTable: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['useDataTable']>
     readonly useDate: UnwrapRef<typeof import('../../packages/0/src/composables/useDate/index')['useDate']>
+    readonly useDelay: UnwrapRef<typeof import('../../packages/0/src/composables/useDelay/index')['useDelay']>
     readonly useDimensions: UnwrapRef<typeof import('../../packages/paper/src/composables/useDimensions/index')['useDimensions']>
     readonly useDocumentEventListener: UnwrapRef<typeof import('../../packages/0/src/composables/useEventListener/index')['useDocumentEventListener']>
+    readonly useDragDrop: UnwrapRef<typeof import('../../packages/0/src/composables/useDragDrop/index')['useDragDrop']>
     readonly useElementIntersection: UnwrapRef<typeof import('../../packages/0/src/composables/useIntersectionObserver/index')['useElementIntersection']>
     readonly useElementSize: UnwrapRef<typeof import('../../packages/0/src/composables/useResizeObserver/index')['useElementSize']>
     readonly useElevation: UnwrapRef<typeof import('../../packages/paper/src/composables/useElevation/index')['useElevation']>
diff --git a/dev/src/main.ts b/dev/src/main.ts
index bc8c39904..6bba0631c 100644
--- a/dev/src/main.ts
+++ b/dev/src/main.ts
@@ -2,6 +2,7 @@ import { ViteSSG } from 'vite-ssg'
 
 // Context
 import App from './App.vue'
+import EmeraldKitchenSink from './EmeraldKitchenSink.vue'
 import Playground from './Playground.vue'
 
 import 'virtual:uno.css'
@@ -10,7 +11,12 @@ import { registerPlugins } from './plugins'
 
 export const createApp = ViteSSG(
   App,
-  { routes: [{ path: '/', component: Playground }] },
+  {
+    routes: [
+      { path: '/', component: Playground },
+      { path: '/emerald', component: EmeraldKitchenSink },
+    ],
+  },
   async ({ app }) => {
     registerPlugins(app)
   })
diff --git a/dev/vite.config.ts b/dev/vite.config.ts
index 59284951e..742abb4a5 100644
--- a/dev/vite.config.ts
+++ b/dev/vite.config.ts
@@ -16,6 +16,7 @@ export default defineConfig({
     UnocssVitePlugin(),
     Components({
       dirs: [
+        '../packages/emerald/src/components/',
         '../packages/paper/src/components/',
         '../packages/0/src/components/',
       ],
@@ -53,6 +54,7 @@ export default defineConfig({
       '@': fileURLToPath(new URL('src', import.meta.url)),
       '@vuetify/v0': fileURLToPath(new URL('../packages/0/src', import.meta.url)),
       '@vuetify/paper': fileURLToPath(new URL('../packages/paper/src', import.meta.url)),
+      '@paper/emerald': fileURLToPath(new URL('../packages/emerald/src', import.meta.url)),
       // internal
       '#v0': fileURLToPath(new URL('../packages/0/src', import.meta.url)),
       '#paper': fileURLToPath(new URL('../packages/paper/src', import.meta.url)),
diff --git a/knip.json b/knip.json
index 12991419f..42249c3c1 100644
--- a/knip.json
+++ b/knip.json
@@ -83,6 +83,13 @@
         "sass"
       ]
     },
+    "packages/emerald": {
+      "project": [
+        "src/**/*.{ts,vue}",
+        "!src/**/*.test.ts",
+        "!src/**/*.spec.ts"
+      ]
+    },
     "apps/playground": {
       "entry": [
         "src/App.vue",
diff --git a/packages/emerald/package.json b/packages/emerald/package.json
new file mode 100644
index 000000000..957dc6766
--- /dev/null
+++ b/packages/emerald/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@paper/emerald",
+  "version": "0.1.0",
+  "description": "Emerald Design System",
+  "license": "MIT",
+  "types": "./dist/index.d.mts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "vue-tsc --noEmit --incremental"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": "./dist/index.mjs",
+      "./package.json": "./package.json",
+      "./style.css": "./dist/style.css"
+    }
+  },
+  "dependencies": {
+    "@vuetify/paper": "workspace:*",
+    "@vuetify/v0": "workspace:*"
+  },
+  "devDependencies": {
+    "tsdown": "catalog:",
+    "typescript": "catalog:",
+    "unplugin-vue": "catalog:"
+  }
+}
diff --git a/packages/emerald/src/adapter.ts b/packages/emerald/src/adapter.ts
new file mode 100644
index 000000000..6badbf3ef
--- /dev/null
+++ b/packages/emerald/src/adapter.ts
@@ -0,0 +1,56 @@
+// Framework
+import { V0StyleSheetThemeAdapter } from '@vuetify/v0'
+import { hexToRgb } from '@vuetify/v0/utilities'
+
+// Types
+import type { Colors } from '@vuetify/v0'
+
+export interface EmeraldAdapterOptions {
+  cspNonce?: string
+  stylesheetId?: string
+  prefix?: string
+}
+
+const SAFE_IDENT = /^[a-zA-Z0-9_-]+$/
+const UNSAFE_CSS = /url\s*\(|@import|expression\s*\(|[{}]/i
+
+export class EmeraldStyleSheetAdapter extends V0StyleSheetThemeAdapter {
+  constructor (options: EmeraldAdapterOptions = {}) {
+    super({ prefix: 'emerald', stylesheetId: 'emerald-theme-stylesheet', ...options })
+  }
+
+  override generate (colors: Record<string, Colors>, isDark?: boolean): string {
+    let css = ''
+
+    for (const theme in colors) {
+      if (!SAFE_IDENT.test(theme)) continue
+      const themeColors = colors[theme]
+      if (!themeColors) continue
+
+      const lines: string[] = []
+
+      for (const [key, val] of Object.entries(themeColors)) {
+        if (!SAFE_IDENT.test(key) || UNSAFE_CSS.test(val)) continue
+
+        lines.push(`  --${this.prefix}-${key}: ${val};`)
+
+        const channels = toChannels(val)
+        if (channels) lines.push(`  --${this.prefix}-${key}-channels: ${channels};`)
+      }
+
+      css += `[data-theme="${theme}"] {\n${lines.join('\n')}\n  color: var(--${this.prefix}-on-background);\n}\n`
+    }
+
+    if (isDark !== undefined) {
+      css += `:root {\n  color-scheme: ${isDark ? 'dark' : 'light'};\n}\n`
+    }
+
+    return css
+  }
+}
+
+function toChannels (hex: string): string | null {
+  if (!/^#[0-9a-f]{3,8}$/i.test(hex)) return null
+  const { r, g, b } = hexToRgb(hex)
+  return `${r} ${g} ${b}`
+}
diff --git a/packages/emerald/src/components/EmAccordion/EmAccordion.vue b/packages/emerald/src/components/EmAccordion/EmAccordion.vue
new file mode 100644
index 000000000..90373a110
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/EmAccordion.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { ExpansionPanelGroup } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmAccordionProps extends V0PaperProps {
+    disabled?: boolean
+    multiple?: boolean
+    mandatory?: boolean | 'force'
+  }
+</script>
+
+<script setup lang="ts" generic="T">
+  defineOptions({ name: 'EmAccordion' })
+
+  const {
+    disabled = false,
+    multiple = false,
+    mandatory = false,
+    ...paperProps
+  } = defineProps<EmAccordionProps>()
+
+  const model = defineModel<T | T[]>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-accordion"
+    :data-disabled="disabled || undefined"
+  >
+    <ExpansionPanelGroup
+      v-model="model"
+      :disabled
+      :mandatory
+      :multiple
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </ExpansionPanelGroup>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: #000000;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAccordion/EmAccordionContent.vue b/packages/emerald/src/components/EmAccordion/EmAccordionContent.vue
new file mode 100644
index 000000000..2548a1ecc
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/EmAccordionContent.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+  // Framework
+  import { ExpansionPanelContent } from '@vuetify/v0'
+
+  export interface EmAccordionContentProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAccordionContent' })
+</script>
+
+<template>
+  <ExpansionPanelContent class="emerald-accordion__content">
+    <template #default="slotProps">
+      <div class="emerald-accordion__content-inner">
+        <slot v-bind="slotProps" />
+      </div>
+    </template>
+  </ExpansionPanelContent>
+</template>
+
+<style>
+.emerald-accordion__content {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 280ms cubic-bezier(0.4, 0.0, 0.2, 1);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: normal;
+  color: #000000;
+}
+
+.emerald-accordion__content[hidden] {
+  display: grid;
+  grid-template-rows: 0fr;
+}
+
+.emerald-accordion__content-inner {
+  min-height: 0;
+  overflow: hidden;
+  padding: 12px;
+  transition: visibility 0s linear 280ms;
+}
+
+.emerald-accordion__content[data-selected] .emerald-accordion__content-inner {
+  visibility: visible;
+  transition-delay: 0s;
+}
+
+.emerald-accordion__content[hidden] .emerald-accordion__content-inner {
+  visibility: hidden;
+}
+
+.emerald-accordion__content[data-selected] .emerald-accordion__content-inner {
+  border-top: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+}
+</style>
diff --git a/packages/emerald/src/components/EmAccordion/EmAccordionCue.vue b/packages/emerald/src/components/EmAccordion/EmAccordionCue.vue
new file mode 100644
index 000000000..ebc3099b6
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/EmAccordionCue.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+  // Framework
+  import { ExpansionPanelCue } from '@vuetify/v0'
+
+  export interface EmAccordionCueProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAccordionCue' })
+</script>
+
+<template>
+  <ExpansionPanelCue class="emerald-accordion__cue">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ExpansionPanelCue>
+</template>
+
+<style>
+.emerald-accordion__cue {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: currentColor;
+  flex-shrink: 0;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAccordion/EmAccordionHeader.vue b/packages/emerald/src/components/EmAccordion/EmAccordionHeader.vue
new file mode 100644
index 000000000..76736b95a
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/EmAccordionHeader.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+  // Framework
+  import { ExpansionPanelHeader } from '@vuetify/v0'
+
+  export interface EmAccordionHeaderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAccordionHeader' })
+</script>
+
+<template>
+  <ExpansionPanelHeader class="emerald-accordion__header">
+    <slot />
+  </ExpansionPanelHeader>
+</template>
+
+<style>
+.emerald-accordion__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAccordion/EmAccordionItem.vue b/packages/emerald/src/components/EmAccordion/EmAccordionItem.vue
new file mode 100644
index 000000000..638c966c2
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/EmAccordionItem.vue
@@ -0,0 +1,46 @@
+<script lang="ts">
+  // Framework
+  import { ExpansionPanelRoot } from '@vuetify/v0'
+
+  export interface EmAccordionItemProps {
+    id?: string
+    value?: unknown
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAccordionItem' })
+
+  const { id, value, disabled = false } = defineProps<EmAccordionItemProps>()
+</script>
+
+<template>
+  <ExpansionPanelRoot
+    :id
+    as="div"
+    class="emerald-accordion__item"
+    :disabled
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ExpansionPanelRoot>
+</template>
+
+<style>
+.emerald-accordion__item {
+  display: flex;
+  flex-direction: column;
+  border: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 6px;
+  overflow: clip;
+  background: var(--emerald-secondary-50);
+  transition: background-color 120ms ease;
+}
+
+.emerald-accordion__item[data-selected] {
+  background: var(--emerald-secondary-100);
+}
+</style>
diff --git a/packages/emerald/src/components/EmAccordion/EmAccordionTrigger.vue b/packages/emerald/src/components/EmAccordion/EmAccordionTrigger.vue
new file mode 100644
index 000000000..22fb2dabc
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/EmAccordionTrigger.vue
@@ -0,0 +1,44 @@
+<script lang="ts">
+  // Framework
+  import { ExpansionPanelActivator } from '@vuetify/v0'
+
+  export interface EmAccordionTriggerProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAccordionTrigger' })
+</script>
+
+<template>
+  <ExpansionPanelActivator class="emerald-accordion__trigger">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ExpansionPanelActivator>
+</template>
+
+<style>
+.emerald-accordion__trigger {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 16px 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: normal;
+  color: #000000;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.emerald-accordion__trigger[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAccordion/index.ts b/packages/emerald/src/components/EmAccordion/index.ts
new file mode 100644
index 000000000..3f507b491
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/index.ts
@@ -0,0 +1,17 @@
+export type { EmAccordionProps } from './EmAccordion.vue'
+export { default as EmAccordion } from './EmAccordion.vue'
+
+export type { EmAccordionContentProps } from './EmAccordionContent.vue'
+export { default as EmAccordionContent } from './EmAccordionContent.vue'
+
+export type { EmAccordionCueProps } from './EmAccordionCue.vue'
+export { default as EmAccordionCue } from './EmAccordionCue.vue'
+
+export type { EmAccordionHeaderProps } from './EmAccordionHeader.vue'
+export { default as EmAccordionHeader } from './EmAccordionHeader.vue'
+
+export type { EmAccordionItemProps } from './EmAccordionItem.vue'
+export { default as EmAccordionItem } from './EmAccordionItem.vue'
+
+export type { EmAccordionTriggerProps } from './EmAccordionTrigger.vue'
+export { default as EmAccordionTrigger } from './EmAccordionTrigger.vue'
diff --git a/packages/emerald/src/components/EmAlert/EmAlert.vue b/packages/emerald/src/components/EmAlert/EmAlert.vue
new file mode 100644
index 000000000..613e54da3
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/EmAlert.vue
@@ -0,0 +1,133 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmAlertVariant = 'primary' | 'success' | 'error' | 'info' | 'warning' | 'neutral'
+
+  export interface EmAlertProps extends V0PaperProps {
+    variant?: EmAlertVariant
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAlert' })
+
+  const { variant = 'primary', ...paperProps } = defineProps<EmAlertProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-alert"
+    :data-variant="variant"
+    role="alert"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: normal;
+  width: 100%;
+}
+
+.emerald-alert[data-variant="primary"] {
+  background: var(--emerald-primary-50);
+  border-color: var(--emerald-primary-200);
+  color: var(--emerald-primary-950);
+}
+
+.emerald-alert[data-variant="success"] {
+  background: var(--emerald-success-50);
+  border-color: var(--emerald-success-200);
+  color: var(--emerald-success-950);
+}
+
+.emerald-alert[data-variant="error"] {
+  background: var(--emerald-error-50);
+  border-color: var(--emerald-error-200);
+  color: var(--emerald-error-950);
+}
+
+.emerald-alert[data-variant="info"] {
+  background: var(--emerald-info-50);
+  border-color: var(--emerald-info-200);
+  color: #000000;
+}
+
+.emerald-alert[data-variant="warning"] {
+  background: var(--emerald-warning-50);
+  border-color: var(--emerald-warning-200);
+  color: var(--emerald-warning-950);
+}
+
+.emerald-alert[data-variant="neutral"] {
+  background: #fafafa;
+  border-color: #b8b8b8;
+  color: #000000;
+}
+
+.emerald-alert__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.emerald-alert__title {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: normal;
+  white-space: nowrap;
+}
+
+.emerald-alert__description {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.28px;
+}
+
+.emerald-alert__body {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.emerald-alert__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  border-radius: 4px;
+}
+
+.emerald-alert__close:hover {
+  opacity: 1;
+  background: rgb(0 0 0 / 0.05);
+}
+</style>
diff --git a/packages/emerald/src/components/EmAlert/EmAlertBody.vue b/packages/emerald/src/components/EmAlert/EmAlertBody.vue
new file mode 100644
index 000000000..57c82cdab
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/EmAlertBody.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmAlertBodyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAlertBody' })
+</script>
+
+<template>
+  <div class="emerald-alert__body">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmAlert/EmAlertClose.vue b/packages/emerald/src/components/EmAlert/EmAlertClose.vue
new file mode 100644
index 000000000..8ab7745f5
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/EmAlertClose.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export interface EmAlertCloseProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAlertClose' })
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  function onClick (event: MouseEvent) {
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <button
+    aria-label="Close alert"
+    class="emerald-alert__close"
+    type="button"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/packages/emerald/src/components/EmAlert/EmAlertDescription.vue b/packages/emerald/src/components/EmAlert/EmAlertDescription.vue
new file mode 100644
index 000000000..facee2301
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/EmAlertDescription.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmAlertDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAlertDescription' })
+</script>
+
+<template>
+  <div class="emerald-alert__description">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmAlert/EmAlertIcon.vue b/packages/emerald/src/components/EmAlert/EmAlertIcon.vue
new file mode 100644
index 000000000..d8a39a00e
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/EmAlertIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmAlertIconProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAlertIcon' })
+</script>
+
+<template>
+  <span aria-hidden="true" class="emerald-alert__icon">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmAlert/EmAlertTitle.vue b/packages/emerald/src/components/EmAlert/EmAlertTitle.vue
new file mode 100644
index 000000000..3b7221238
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/EmAlertTitle.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmAlertTitleProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAlertTitle' })
+</script>
+
+<template>
+  <div class="emerald-alert__title">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmAlert/index.ts b/packages/emerald/src/components/EmAlert/index.ts
new file mode 100644
index 000000000..4cd318f9c
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/index.ts
@@ -0,0 +1,17 @@
+export type { EmAlertProps, EmAlertVariant } from './EmAlert.vue'
+export { default as EmAlert } from './EmAlert.vue'
+
+export type { EmAlertBodyProps } from './EmAlertBody.vue'
+export { default as EmAlertBody } from './EmAlertBody.vue'
+
+export type { EmAlertCloseProps } from './EmAlertClose.vue'
+export { default as EmAlertClose } from './EmAlertClose.vue'
+
+export type { EmAlertDescriptionProps } from './EmAlertDescription.vue'
+export { default as EmAlertDescription } from './EmAlertDescription.vue'
+
+export type { EmAlertIconProps } from './EmAlertIcon.vue'
+export { default as EmAlertIcon } from './EmAlertIcon.vue'
+
+export type { EmAlertTitleProps } from './EmAlertTitle.vue'
+export { default as EmAlertTitle } from './EmAlertTitle.vue'
diff --git a/packages/emerald/src/components/EmAutoComplete/EmAutoComplete.vue b/packages/emerald/src/components/EmAutoComplete/EmAutoComplete.vue
new file mode 100644
index 000000000..04c272319
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/EmAutoComplete.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { ComboboxRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { ID } from '@vuetify/v0'
+
+  export interface EmAutoCompleteProps extends V0PaperProps {
+    disabled?: boolean
+    multiple?: boolean
+    mandatory?: boolean
+    strict?: boolean
+    error?: boolean
+    errorMessages?: string | string[]
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAutoComplete' })
+
+  const {
+    disabled = false,
+    multiple = false,
+    mandatory = false,
+    strict = false,
+    error = false,
+    errorMessages,
+    name,
+    ...paperProps
+  } = defineProps<EmAutoCompleteProps>()
+
+  const model = defineModel<ID | ID[]>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-auto-complete"
+    :data-disabled="disabled || undefined"
+    :data-error="error || undefined"
+  >
+    <ComboboxRoot
+      v-model="model"
+      :disabled
+      :error
+      :error-messages
+      :mandatory
+      :multiple
+      :name
+      :strict
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </ComboboxRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-auto-complete {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+}
+
+.emerald-auto-complete[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteContent.vue b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteContent.vue
new file mode 100644
index 000000000..e7383b765
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteContent.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+  // Framework
+  import { ComboboxContent } from '@vuetify/v0'
+
+  export interface EmAutoCompleteContentProps {
+    eager?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAutoCompleteContent' })
+
+  const { eager = false } = defineProps<EmAutoCompleteContentProps>()
+</script>
+
+<template>
+  <ComboboxContent class="emerald-auto-complete__content" :eager>
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ComboboxContent>
+</template>
+
+<style>
+.emerald-auto-complete__content {
+  flex-direction: column;
+  align-items: stretch;
+  width: anchor-size(width);
+  padding: 8px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow:
+    0 2px 4px rgba(5, 0, 18, 0.1),
+    0 3px 8px rgba(5, 0, 18, 0.13);
+  margin-top: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.emerald-auto-complete__content:popover-open {
+  display: flex;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteControl.vue b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteControl.vue
new file mode 100644
index 000000000..b668936be
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteControl.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+  // Framework
+  import { ComboboxActivator } from '@vuetify/v0'
+
+  export interface EmAutoCompleteControlProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAutoCompleteControl' })
+</script>
+
+<template>
+  <ComboboxActivator class="emerald-auto-complete__control">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ComboboxActivator>
+</template>
+
+<style>
+.emerald-auto-complete__control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 4px;
+  background: #ffffff;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+  cursor: text;
+}
+
+.emerald-auto-complete__control[data-state="open"],
+.emerald-auto-complete__control:focus-within {
+  border-color: var(--emerald-primary-500);
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels) / 0.12);
+}
+</style>
diff --git a/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteEmpty.vue b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteEmpty.vue
new file mode 100644
index 000000000..73294be0c
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteEmpty.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+  // Framework
+  import { ComboboxEmpty } from '@vuetify/v0'
+
+  export interface EmAutoCompleteEmptyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAutoCompleteEmpty' })
+</script>
+
+<template>
+  <ComboboxEmpty class="emerald-auto-complete__empty">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ComboboxEmpty>
+</template>
+
+<style>
+.emerald-auto-complete__empty {
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 8px 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.5);
+}
+</style>
diff --git a/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteInput.vue b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteInput.vue
new file mode 100644
index 000000000..ffffb2cc5
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteInput.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+  // Framework
+  import { ComboboxControl } from '@vuetify/v0'
+
+  export interface EmAutoCompleteInputProps {
+    placeholder?: string
+    openOn?: 'focus' | 'input'
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAutoCompleteInput' })
+
+  const { placeholder, openOn = 'input' } = defineProps<EmAutoCompleteInputProps>()
+</script>
+
+<template>
+  <ComboboxControl
+    class="emerald-auto-complete__input"
+    :open-on
+    :placeholder
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ComboboxControl>
+</template>
+
+<style>
+.emerald-auto-complete__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+}
+
+.emerald-auto-complete__input::placeholder {
+  color: #000000;
+  opacity: 0.3;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteItem.vue b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteItem.vue
new file mode 100644
index 000000000..2920a568a
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteItem.vue
@@ -0,0 +1,69 @@
+<script lang="ts">
+  // Framework
+  import { ComboboxItem } from '@vuetify/v0'
+
+  // Types
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export interface EmAutoCompleteItemProps {
+    value?: unknown
+    disabled?: MaybeRefOrGetter<boolean>
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAutoCompleteItem' })
+
+  const { value, disabled = false } = defineProps<EmAutoCompleteItemProps>()
+</script>
+
+<template>
+  <ComboboxItem
+    class="emerald-auto-complete__item"
+    :disabled
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ComboboxItem>
+</template>
+
+<style>
+.emerald-auto-complete__item {
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 8px 12px;
+  border-left: 1px solid transparent;
+  border-radius: 0 6px 6px 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--emerald-primary-950);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.emerald-auto-complete__item[data-focused],
+.emerald-auto-complete__item:hover {
+  background: var(--emerald-primary-100);
+  border-left-color: var(--emerald-primary-500);
+  color: var(--emerald-primary-500);
+  font-weight: 500;
+}
+
+.emerald-auto-complete__item[data-selected] {
+  background: var(--emerald-primary-100);
+  border-left-color: var(--emerald-primary-500);
+  color: var(--emerald-primary-500);
+  font-weight: 500;
+}
+
+.emerald-auto-complete__item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAutoComplete/index.ts b/packages/emerald/src/components/EmAutoComplete/index.ts
new file mode 100644
index 000000000..0053ffef4
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/index.ts
@@ -0,0 +1,17 @@
+export type { EmAutoCompleteProps } from './EmAutoComplete.vue'
+export { default as EmAutoComplete } from './EmAutoComplete.vue'
+
+export type { EmAutoCompleteContentProps } from './EmAutoCompleteContent.vue'
+export { default as EmAutoCompleteContent } from './EmAutoCompleteContent.vue'
+
+export type { EmAutoCompleteControlProps } from './EmAutoCompleteControl.vue'
+export { default as EmAutoCompleteControl } from './EmAutoCompleteControl.vue'
+
+export type { EmAutoCompleteEmptyProps } from './EmAutoCompleteEmpty.vue'
+export { default as EmAutoCompleteEmpty } from './EmAutoCompleteEmpty.vue'
+
+export type { EmAutoCompleteInputProps } from './EmAutoCompleteInput.vue'
+export { default as EmAutoCompleteInput } from './EmAutoCompleteInput.vue'
+
+export type { EmAutoCompleteItemProps } from './EmAutoCompleteItem.vue'
+export { default as EmAutoCompleteItem } from './EmAutoCompleteItem.vue'
diff --git a/packages/emerald/src/components/EmAvatar/EmAvatar.vue b/packages/emerald/src/components/EmAvatar/EmAvatar.vue
new file mode 100644
index 000000000..74bc81f74
--- /dev/null
+++ b/packages/emerald/src/components/EmAvatar/EmAvatar.vue
@@ -0,0 +1,97 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { AvatarRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmAvatarSize = 'sm' | 'md' | 'lg'
+
+  export interface EmAvatarProps extends V0PaperProps {
+    size?: EmAvatarSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAvatar' })
+
+  const { size = 'md', ...paperProps } = defineProps<EmAvatarProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-avatar"
+    :data-size="size"
+  >
+    <AvatarRoot>
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </AvatarRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 9999px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  background: var(--emerald-neutral-100, #f3f3f4);
+  color: var(--emerald-neutral-700);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+  user-select: none;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.emerald-avatar[data-size="sm"] {
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.emerald-avatar[data-size="md"] {
+  width: 40px;
+  height: 40px;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.emerald-avatar[data-size="lg"] {
+  width: 48px;
+  height: 48px;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.emerald-avatar__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  object-fit: cover;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.emerald-avatar__fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: inherit;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAvatar/EmAvatarFallback.vue b/packages/emerald/src/components/EmAvatar/EmAvatarFallback.vue
new file mode 100644
index 000000000..0518756ca
--- /dev/null
+++ b/packages/emerald/src/components/EmAvatar/EmAvatarFallback.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+  // Framework
+  import { AvatarFallback } from '@vuetify/v0'
+
+  // Types
+  import type { AvatarFallbackProps } from '@vuetify/v0'
+
+  export interface EmAvatarFallbackProps extends AvatarFallbackProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAvatarFallback' })
+
+  const { ...fallbackProps } = defineProps<EmAvatarFallbackProps>()
+</script>
+
+<template>
+  <AvatarFallback v-bind="fallbackProps" class="emerald-avatar__fallback">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </AvatarFallback>
+</template>
diff --git a/packages/emerald/src/components/EmAvatar/EmAvatarImage.vue b/packages/emerald/src/components/EmAvatar/EmAvatarImage.vue
new file mode 100644
index 000000000..75d6a8243
--- /dev/null
+++ b/packages/emerald/src/components/EmAvatar/EmAvatarImage.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+  // Framework
+  import { AvatarImage } from '@vuetify/v0'
+
+  // Types
+  import type { AvatarImageProps } from '@vuetify/v0'
+
+  export interface EmAvatarImageProps extends AvatarImageProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAvatarImage' })
+
+  const { ...imageProps } = defineProps<EmAvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage v-bind="imageProps" class="emerald-avatar__image">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </AvatarImage>
+</template>
diff --git a/packages/emerald/src/components/EmAvatar/index.ts b/packages/emerald/src/components/EmAvatar/index.ts
new file mode 100644
index 000000000..4ce5ebb1e
--- /dev/null
+++ b/packages/emerald/src/components/EmAvatar/index.ts
@@ -0,0 +1,8 @@
+export type { EmAvatarProps, EmAvatarSize } from './EmAvatar.vue'
+export { default as EmAvatar } from './EmAvatar.vue'
+
+export type { EmAvatarFallbackProps } from './EmAvatarFallback.vue'
+export { default as EmAvatarFallback } from './EmAvatarFallback.vue'
+
+export type { EmAvatarImageProps } from './EmAvatarImage.vue'
+export { default as EmAvatarImage } from './EmAvatarImage.vue'
diff --git a/packages/emerald/src/components/EmBadge/EmBadge.vue b/packages/emerald/src/components/EmBadge/EmBadge.vue
new file mode 100644
index 000000000..f097ec523
--- /dev/null
+++ b/packages/emerald/src/components/EmBadge/EmBadge.vue
@@ -0,0 +1,147 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmBadgeVariant = 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'
+  export type EmBadgeSize = 'sm' | 'md' | 'lg'
+  export type EmBadgeShape = 'pill' | 'dot' | 'indicator' | 'count'
+
+  export interface EmBadgeProps extends V0PaperProps {
+    variant?: EmBadgeVariant
+    size?: EmBadgeSize
+    shape?: EmBadgeShape
+    /** @deprecated use `shape="dot"` */
+    dot?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBadge' })
+
+  const {
+    variant = 'primary',
+    size = 'md',
+    shape,
+    dot = false,
+    ...paperProps
+  } = defineProps<EmBadgeProps>()
+
+  const resolvedShape = shape ?? (dot ? 'dot' : 'pill')
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="span"
+    class="emerald-badge"
+    :data-shape="resolvedShape"
+    :data-size="size"
+    :data-variant="variant"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style scoped>
+.emerald-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 700;
+  border-radius: 9999px;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+/* Pill (text label) — default */
+.emerald-badge[data-shape="pill"][data-size="sm"] {
+  padding: 2px 6px;
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.emerald-badge[data-shape="pill"][data-size="md"] {
+  padding: 3px 8px;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.emerald-badge[data-shape="pill"][data-size="lg"] {
+  padding: 4px 10px;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+/* Notification indicator variants — bordered + shadowed per Figma spec */
+.emerald-badge[data-shape="dot"],
+.emerald-badge[data-shape="indicator"],
+.emerald-badge[data-shape="count"] {
+  border: 2px solid var(--emerald-background, #faf9ff);
+  box-shadow:
+    0 3px 8px 0 rgb(5 0 18 / 0.13),
+    0 2px 4px 0 rgb(5 0 18 / 0.10);
+  padding: 0;
+  overflow: hidden;
+}
+
+/* Dot — 8px */
+.emerald-badge[data-shape="dot"] {
+  width: 8px;
+  height: 8px;
+}
+
+/* Indicator — 12px (Figma "Default") */
+.emerald-badge[data-shape="indicator"] {
+  width: 12px;
+  height: 12px;
+}
+
+/* Count — 20px with numeric content (Figma "Content") */
+.emerald-badge[data-shape="count"] {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 4px;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+/* Variants — background color only; border/shadow handled above */
+.emerald-badge[data-variant="primary"] {
+  background: var(--emerald-primary-500);
+  color: var(--emerald-primary-100);
+}
+
+.emerald-badge[data-variant="success"] {
+  background: var(--emerald-success-500);
+  color: #fff;
+}
+
+.emerald-badge[data-variant="warning"] {
+  background: var(--emerald-warning-500);
+  color: #fff;
+}
+
+.emerald-badge[data-variant="error"] {
+  background: var(--emerald-error-500);
+  color: #fff;
+}
+
+.emerald-badge[data-variant="info"] {
+  background: var(--emerald-info-500);
+  color: #fff;
+}
+
+.emerald-badge[data-variant="neutral"] {
+  background: var(--emerald-neutral-200);
+  color: var(--emerald-neutral-800);
+}
+
+/* Neutral count keeps darker text since the surface is light. */
+.emerald-badge[data-shape="count"][data-variant="neutral"] {
+  color: var(--emerald-neutral-800);
+}
+</style>
diff --git a/packages/emerald/src/components/EmBadge/index.ts b/packages/emerald/src/components/EmBadge/index.ts
new file mode 100644
index 000000000..10ee64019
--- /dev/null
+++ b/packages/emerald/src/components/EmBadge/index.ts
@@ -0,0 +1,2 @@
+export type { EmBadgeProps, EmBadgeSize, EmBadgeVariant } from './EmBadge.vue'
+export { default as EmBadge } from './EmBadge.vue'
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumb.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumb.vue
new file mode 100644
index 000000000..e8cc4f555
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumb.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { BreadcrumbsRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmBreadcrumbProps extends V0PaperProps {
+    divider?: string
+    ellipsis?: string
+    label?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumb' })
+
+  const {
+    divider = '/',
+    ellipsis = '…',
+    label = 'Breadcrumb',
+    ...paperProps
+  } = defineProps<EmBreadcrumbProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="nav"
+    class="emerald-breadcrumb"
+  >
+    <BreadcrumbsRoot
+      :divider
+      :ellipsis
+      :label
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </BreadcrumbsRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-breadcrumb {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: normal;
+  color: var(--emerald-on-background, #1a1230);
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbDivider.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbDivider.vue
new file mode 100644
index 000000000..1236059e9
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbDivider.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+  // Framework
+  import { BreadcrumbsDivider } from '@vuetify/v0'
+
+  export interface EmBreadcrumbDividerProps {
+    divider?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumbDivider' })
+
+  const { divider } = defineProps<EmBreadcrumbDividerProps>()
+</script>
+
+<template>
+  <BreadcrumbsDivider
+    class="emerald-breadcrumb__divider"
+    :divider
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </BreadcrumbsDivider>
+</template>
+
+<style>
+.emerald-breadcrumb__divider {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: rgb(var(--emerald-on-background-channels, 26 18 48) / 0.5);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.emerald-breadcrumb__divider :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbEllipsis.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbEllipsis.vue
new file mode 100644
index 000000000..4a9f53c8e
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbEllipsis.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+  // Framework
+  import { BreadcrumbsEllipsis } from '@vuetify/v0'
+
+  export interface EmBreadcrumbEllipsisProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumbEllipsis' })
+</script>
+
+<template>
+  <BreadcrumbsEllipsis class="emerald-breadcrumb__ellipsis">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </BreadcrumbsEllipsis>
+</template>
+
+<style>
+.emerald-breadcrumb__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 24px;
+  color: rgb(var(--emerald-on-background-channels, 26 18 48) / 0.6);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.emerald-breadcrumb__ellipsis :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbItem.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbItem.vue
new file mode 100644
index 000000000..aae7bf9f5
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbItem.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+  // Framework
+  import { BreadcrumbsItem } from '@vuetify/v0'
+
+  export interface EmBreadcrumbItemProps {
+    id?: string | number
+    text?: string
+    value?: unknown
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumbItem' })
+
+  const { id, text, value } = defineProps<EmBreadcrumbItemProps>()
+</script>
+
+<template>
+  <BreadcrumbsItem
+    :id
+    class="emerald-breadcrumb__item"
+    :text
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </BreadcrumbsItem>
+</template>
+
+<style>
+.emerald-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 2px 0;
+  color: inherit;
+  font-weight: 500;
+}
+
+.emerald-breadcrumb__item :deep(svg) {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbLink.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbLink.vue
new file mode 100644
index 000000000..a4142e0fd
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbLink.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+  // Framework
+  import { BreadcrumbsLink } from '@vuetify/v0'
+
+  export interface EmBreadcrumbLinkProps {
+    href?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumbLink' })
+
+  const { href } = defineProps<EmBreadcrumbLinkProps>()
+</script>
+
+<template>
+  <BreadcrumbsLink
+    class="emerald-breadcrumb__link"
+    :href
+  >
+    <slot />
+  </BreadcrumbsLink>
+</template>
+
+<style>
+.emerald-breadcrumb__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: inherit;
+  text-decoration: none;
+  font-weight: 500;
+  border-bottom: 1px solid transparent;
+  padding-bottom: 1px;
+  transition: border-color 120ms ease;
+}
+
+.emerald-breadcrumb__link:hover {
+  border-bottom-color: currentColor;
+}
+
+.emerald-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbList.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbList.vue
new file mode 100644
index 000000000..8bf6858c3
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbList.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+  // Framework
+  import { BreadcrumbsList } from '@vuetify/v0'
+
+  export interface EmBreadcrumbListProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumbList' })
+</script>
+
+<template>
+  <BreadcrumbsList class="emerald-breadcrumb__list">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </BreadcrumbsList>
+</template>
+
+<style>
+.emerald-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbPage.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbPage.vue
new file mode 100644
index 000000000..45b165a8f
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbPage.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  // Framework
+  import { BreadcrumbsPage } from '@vuetify/v0'
+
+  export interface EmBreadcrumbPageProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumbPage' })
+</script>
+
+<template>
+  <BreadcrumbsPage class="emerald-breadcrumb__page">
+    <slot />
+  </BreadcrumbsPage>
+</template>
+
+<style>
+.emerald-breadcrumb__page {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 400;
+  color: rgb(var(--emerald-on-background-channels, 26 18 48) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/index.ts b/packages/emerald/src/components/EmBreadcrumb/index.ts
new file mode 100644
index 000000000..bea9be1d0
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/index.ts
@@ -0,0 +1,20 @@
+export type { EmBreadcrumbProps } from './EmBreadcrumb.vue'
+export { default as EmBreadcrumb } from './EmBreadcrumb.vue'
+
+export type { EmBreadcrumbDividerProps } from './EmBreadcrumbDivider.vue'
+export { default as EmBreadcrumbDivider } from './EmBreadcrumbDivider.vue'
+
+export type { EmBreadcrumbEllipsisProps } from './EmBreadcrumbEllipsis.vue'
+export { default as EmBreadcrumbEllipsis } from './EmBreadcrumbEllipsis.vue'
+
+export type { EmBreadcrumbItemProps } from './EmBreadcrumbItem.vue'
+export { default as EmBreadcrumbItem } from './EmBreadcrumbItem.vue'
+
+export type { EmBreadcrumbLinkProps } from './EmBreadcrumbLink.vue'
+export { default as EmBreadcrumbLink } from './EmBreadcrumbLink.vue'
+
+export type { EmBreadcrumbListProps } from './EmBreadcrumbList.vue'
+export { default as EmBreadcrumbList } from './EmBreadcrumbList.vue'
+
+export type { EmBreadcrumbPageProps } from './EmBreadcrumbPage.vue'
+export { default as EmBreadcrumbPage } from './EmBreadcrumbPage.vue'
diff --git a/packages/emerald/src/components/EmButton/EmButton.vue b/packages/emerald/src/components/EmButton/EmButton.vue
new file mode 100644
index 000000000..da050f3f4
--- /dev/null
+++ b/packages/emerald/src/components/EmButton/EmButton.vue
@@ -0,0 +1,159 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Context
+  import EmButtonLoader from './EmButtonLoader.vue'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmButtonSize = 'sm' | 'md' | 'lg'
+
+  export interface EmButtonProps extends V0PaperProps {
+    disabled?: boolean
+    loading?: boolean
+    size?: EmButtonSize
+    type?: 'button' | 'submit' | 'reset'
+    href?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButton' })
+
+  const {
+    disabled = false,
+    loading = false,
+    size = 'md',
+    type = 'button',
+    href,
+    ...paperProps
+  } = defineProps<EmButtonProps>()
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  function onClick (event: MouseEvent) {
+    if (disabled || loading) return
+
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    :aria-busy="loading || undefined"
+    :aria-disabled="(disabled || loading) || undefined"
+    :as="href ? 'a' : 'button'"
+    class="emerald-button"
+    :data-disabled="(disabled || loading) || undefined"
+    :data-loading="loading || undefined"
+    :data-size="size"
+    :disabled="(disabled || loading) || undefined"
+    :href
+    :type="href ? undefined : type"
+    @click="onClick"
+  >
+    <span v-if="loading" class="emerald-button__loading">
+      <EmButtonLoader />
+    </span>
+
+    <span :class="['emerald-button__content', loading && 'emerald-button__content--hidden']">
+      <slot />
+    </span>
+  </V0Paper>
+</template>
+
+<style scoped>
+.emerald-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  background: var(--emerald-primary-500);
+  color: var(--emerald-primary-100);
+  box-shadow: none;
+  transition: background-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
+}
+
+.emerald-button[data-size="sm"] {
+  padding: 4.5px 9px;
+  border-radius: 3px;
+  font-size: 10.5px;
+  line-height: 15px;
+  gap: 6px;
+}
+
+.emerald-button[data-size="md"] {
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 20px;
+  gap: 8px;
+}
+
+.emerald-button[data-size="lg"] {
+  padding: 7.5px 15px;
+  border-radius: 5px;
+  font-size: 17.5px;
+  line-height: 25px;
+  gap: 10px;
+}
+
+.emerald-button:hover:not([data-disabled]):not(:active) {
+  background: var(--emerald-primary-700);
+  color: var(--emerald-primary-200);
+  box-shadow:
+    0 2px 4px 0 rgb(var(--emerald-primary-700-channels) / 0.32),
+    0 3px 8px 0 rgb(var(--emerald-primary-700-channels) / 0.22);
+}
+
+.emerald-button:active:not([data-disabled]) {
+  background: var(--emerald-primary-900);
+  color: var(--emerald-primary-100);
+  transform: scale(0.95);
+  box-shadow: none;
+}
+
+.emerald-button:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-button[data-disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+  box-shadow: none;
+}
+
+.emerald-button[data-loading] {
+  position: relative;
+  cursor: progress;
+  box-shadow: none;
+}
+
+.emerald-button__content {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+}
+
+.emerald-button__content--hidden {
+  visibility: hidden;
+}
+
+.emerald-button__loading {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/packages/emerald/src/components/EmButton/EmButtonAppend.vue b/packages/emerald/src/components/EmButton/EmButtonAppend.vue
new file mode 100644
index 000000000..185d10205
--- /dev/null
+++ b/packages/emerald/src/components/EmButton/EmButtonAppend.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmButtonAppendProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButtonAppend' })
+</script>
+
+<template>
+  <span class="emerald-button__append">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmButton/EmButtonContent.vue b/packages/emerald/src/components/EmButton/EmButtonContent.vue
new file mode 100644
index 000000000..e3c35f92e
--- /dev/null
+++ b/packages/emerald/src/components/EmButton/EmButtonContent.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmButtonContentProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButtonContent' })
+</script>
+
+<template>
+  <span class="emerald-button__content">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmButton/EmButtonLoader.vue b/packages/emerald/src/components/EmButton/EmButtonLoader.vue
new file mode 100644
index 000000000..cca983ef1
--- /dev/null
+++ b/packages/emerald/src/components/EmButton/EmButtonLoader.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+  export interface EmButtonLoaderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButtonLoader' })
+</script>
+
+<template>
+  <span aria-hidden="true" class="emerald-button__loader">
+    <slot>
+      <span class="emerald-button__spinner" />
+    </slot>
+  </span>
+</template>
+
+<style>
+.emerald-button__loader {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.emerald-button__spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  animation: emerald-button-spin 700ms linear infinite;
+}
+
+@keyframes emerald-button-spin {
+  to { transform: rotate(360deg); }
+}
+</style>
diff --git a/packages/emerald/src/components/EmButton/EmButtonPrepend.vue b/packages/emerald/src/components/EmButton/EmButtonPrepend.vue
new file mode 100644
index 000000000..be76e07d1
--- /dev/null
+++ b/packages/emerald/src/components/EmButton/EmButtonPrepend.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmButtonPrependProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButtonPrepend' })
+</script>
+
+<template>
+  <span class="emerald-button__prepend">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmButton/index.ts b/packages/emerald/src/components/EmButton/index.ts
new file mode 100644
index 000000000..8176c4a1a
--- /dev/null
+++ b/packages/emerald/src/components/EmButton/index.ts
@@ -0,0 +1,14 @@
+export type { EmButtonProps } from './EmButton.vue'
+export { default as EmButton } from './EmButton.vue'
+
+export type { EmButtonAppendProps } from './EmButtonAppend.vue'
+export { default as EmButtonAppend } from './EmButtonAppend.vue'
+
+export type { EmButtonContentProps } from './EmButtonContent.vue'
+export { default as EmButtonContent } from './EmButtonContent.vue'
+
+export type { EmButtonLoaderProps } from './EmButtonLoader.vue'
+export { default as EmButtonLoader } from './EmButtonLoader.vue'
+
+export type { EmButtonPrependProps } from './EmButtonPrepend.vue'
+export { default as EmButtonPrepend } from './EmButtonPrepend.vue'
diff --git a/packages/emerald/src/components/EmCard/EmCard.vue b/packages/emerald/src/components/EmCard/EmCard.vue
new file mode 100644
index 000000000..20a5ed31c
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/EmCard.vue
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmCardProps extends V0PaperProps {
+    hoverable?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCard' })
+
+  const { hoverable = false, ...paperProps } = defineProps<EmCardProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-card"
+    :data-hoverable="hoverable || undefined"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-card {
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(to bottom, #ffffff, var(--emerald-background));
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 12px;
+  overflow: clip;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.emerald-card[data-hoverable]:hover {
+  border: 0.5px solid var(--emerald-primary-500);
+  box-shadow:
+    0 3px 8px 0 rgba(5, 0, 18, 0.13),
+    0 2px 4px 0 rgba(5, 0, 18, 0.1);
+}
+</style>
diff --git a/packages/emerald/src/components/EmCard/EmCardBody.vue b/packages/emerald/src/components/EmCard/EmCardBody.vue
new file mode 100644
index 000000000..24fbdb60a
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/EmCardBody.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export interface EmCardBodyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCardBody' })
+</script>
+
+<template>
+  <div class="emerald-card__body">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 24px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  color: rgb(var(--emerald-neutral-700-channels, 30 28 40) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmCard/EmCardFooter.vue b/packages/emerald/src/components/EmCard/EmCardFooter.vue
new file mode 100644
index 000000000..e9dfd067f
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/EmCardFooter.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export interface EmCardFooterProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCardFooter' })
+</script>
+
+<template>
+  <div class="emerald-card__footer">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 24px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCard/EmCardHeader.vue b/packages/emerald/src/components/EmCard/EmCardHeader.vue
new file mode 100644
index 000000000..906c5f70e
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/EmCardHeader.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+  export interface EmCardHeaderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCardHeader' })
+</script>
+
+<template>
+  <div class="emerald-card__header">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 24px 24px 0;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCard/EmCardSubtitle.vue b/packages/emerald/src/components/EmCard/EmCardSubtitle.vue
new file mode 100644
index 000000000..d0d4ce30f
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/EmCardSubtitle.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+  export interface EmCardSubtitleProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCardSubtitle' })
+</script>
+
+<template>
+  <p class="emerald-card__subtitle">
+    <slot />
+  </p>
+</template>
+
+<style>
+.emerald-card__subtitle {
+  margin: 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 21.7px;
+  color: rgb(var(--emerald-neutral-700-channels, 30 28 40) / 0.5);
+}
+</style>
diff --git a/packages/emerald/src/components/EmCard/EmCardTitle.vue b/packages/emerald/src/components/EmCard/EmCardTitle.vue
new file mode 100644
index 000000000..9746384a6
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/EmCardTitle.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+  export interface EmCardTitleProps {
+    as?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCardTitle' })
+
+  const { as = 'h3' } = defineProps<EmCardTitleProps>()
+</script>
+
+<template>
+  <component :is="as" class="emerald-card__title">
+    <slot />
+  </component>
+</template>
+
+<style>
+.emerald-card__title {
+  margin: 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 26px;
+  letter-spacing: -0.2px;
+  color: var(--emerald-neutral-700);
+}
+</style>
diff --git a/packages/emerald/src/components/EmCard/index.ts b/packages/emerald/src/components/EmCard/index.ts
new file mode 100644
index 000000000..c6b02f0fe
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/index.ts
@@ -0,0 +1,17 @@
+export type { EmCardProps } from './EmCard.vue'
+export { default as EmCard } from './EmCard.vue'
+
+export type { EmCardBodyProps } from './EmCardBody.vue'
+export { default as EmCardBody } from './EmCardBody.vue'
+
+export type { EmCardFooterProps } from './EmCardFooter.vue'
+export { default as EmCardFooter } from './EmCardFooter.vue'
+
+export type { EmCardHeaderProps } from './EmCardHeader.vue'
+export { default as EmCardHeader } from './EmCardHeader.vue'
+
+export type { EmCardSubtitleProps } from './EmCardSubtitle.vue'
+export { default as EmCardSubtitle } from './EmCardSubtitle.vue'
+
+export type { EmCardTitleProps } from './EmCardTitle.vue'
+export { default as EmCardTitle } from './EmCardTitle.vue'
diff --git a/packages/emerald/src/components/EmCarousel/EmCarousel.vue b/packages/emerald/src/components/EmCarousel/EmCarousel.vue
new file mode 100644
index 000000000..4798b472a
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/EmCarousel.vue
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { CarouselRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmCarouselOrientation = 'horizontal' | 'vertical'
+
+  export interface EmCarouselProps extends V0PaperProps {
+    label?: string
+    disabled?: boolean
+    circular?: boolean
+    orientation?: EmCarouselOrientation
+    perView?: number
+    autoplay?: number
+  }
+</script>
+
+<script setup lang="ts" generic="T">
+  defineOptions({ name: 'EmCarousel' })
+
+  const {
+    label,
+    disabled = false,
+    circular = false,
+    orientation = 'horizontal',
+    perView = 1,
+    autoplay = 0,
+    ...paperProps
+  } = defineProps<EmCarouselProps>()
+
+  const model = defineModel<T>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-carousel"
+    :data-disabled="disabled || undefined"
+    :data-orientation="orientation"
+  >
+    <CarouselRoot
+      v-model="model"
+      :autoplay
+      :circular
+      :disabled
+      :label
+      :orientation
+      :per-view
+      renderless
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </CarouselRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-carousel {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: 1fr auto;
+  align-items: center;
+  gap: 14px 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: #000000;
+}
+
+.emerald-carousel[data-orientation="vertical"] {
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr auto auto;
+}
+
+.emerald-carousel[data-disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCarousel/EmCarouselIndicator.vue b/packages/emerald/src/components/EmCarousel/EmCarouselIndicator.vue
new file mode 100644
index 000000000..2851b717b
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/EmCarouselIndicator.vue
@@ -0,0 +1,67 @@
+<script lang="ts">
+  // Framework
+  import { CarouselIndicator } from '@vuetify/v0'
+
+  export interface EmCarouselIndicatorProps {
+    label?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCarouselIndicator' })
+
+  const { label } = defineProps<EmCarouselIndicatorProps>()
+</script>
+
+<template>
+  <CarouselIndicator
+    class="emerald-carousel__indicators"
+    :label
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CarouselIndicator>
+</template>
+
+<style>
+.emerald-carousel__indicators {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  margin: 0 auto;
+}
+
+.emerald-carousel__indicator {
+  display: inline-block;
+  height: 7px;
+  width: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 60px;
+  background: var(--emerald-secondary-300, #c6d2db);
+  cursor: pointer;
+  transition: width 180ms ease, background 180ms ease;
+}
+
+.emerald-carousel__indicator[data-selected] {
+  width: 34px;
+  background: var(--emerald-secondary-500, #94a3b8);
+}
+
+.emerald-carousel__indicator:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-carousel__indicator[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCarousel/EmCarouselItem.vue b/packages/emerald/src/components/EmCarousel/EmCarouselItem.vue
new file mode 100644
index 000000000..daaf188fe
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/EmCarouselItem.vue
@@ -0,0 +1,66 @@
+<script lang="ts">
+  // Framework
+  import { CarouselItem } from '@vuetify/v0'
+
+  export interface EmCarouselItemProps {
+    id?: string
+    value?: unknown
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCarouselItem' })
+
+  const { id, value, disabled = false } = defineProps<EmCarouselItemProps>()
+</script>
+
+<template>
+  <CarouselItem
+    :id
+    class="emerald-carousel__item"
+    :disabled
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CarouselItem>
+</template>
+
+<style>
+.emerald-carousel__item {
+  flex: 0 0 60%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  min-width: 0;
+  scroll-snap-align: center;
+  background: #ffffff;
+  border: 1px solid rgb(var(--emerald-neutral-channels) / 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+  filter: blur(1px);
+  transition:
+    filter 220ms cubic-bezier(0.4, 0.0, 0.2, 1),
+    box-shadow 220ms cubic-bezier(0.4, 0.0, 0.2, 1),
+    transform 220ms cubic-bezier(0.4, 0.0, 0.2, 1);
+  transform: scale(0.94);
+  box-shadow: none;
+}
+
+.emerald-carousel__item[data-selected] {
+  filter: none;
+  transform: scale(1);
+  box-shadow:
+    0 1px 3px 0 rgb(5 0 18 / 0.12),
+    0 1px 5px 0 rgb(5 0 18 / 0.20);
+  z-index: 1;
+}
+
+.emerald-carousel__item[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCarousel/EmCarouselNext.vue b/packages/emerald/src/components/EmCarousel/EmCarouselNext.vue
new file mode 100644
index 000000000..7cba6fa99
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/EmCarouselNext.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+  // Framework
+  import { CarouselNext } from '@vuetify/v0'
+
+  export interface EmCarouselNextProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCarouselNext' })
+</script>
+
+<template>
+  <CarouselNext class="emerald-carousel__next">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CarouselNext>
+</template>
+
+<style>
+.emerald-carousel__next {
+  grid-column: 3;
+  grid-row: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  color: var(--emerald-neutral-800);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
+}
+
+.emerald-carousel__next:hover:not([aria-disabled="true"]) {
+  background: rgb(var(--emerald-neutral-channels) / 0.06);
+}
+
+.emerald-carousel__next:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-carousel__next[aria-disabled="true"] {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCarousel/EmCarouselPrevious.vue b/packages/emerald/src/components/EmCarousel/EmCarouselPrevious.vue
new file mode 100644
index 000000000..b4fcfe299
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/EmCarouselPrevious.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+  // Framework
+  import { CarouselPrevious } from '@vuetify/v0'
+
+  export interface EmCarouselPreviousProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCarouselPrevious' })
+</script>
+
+<template>
+  <CarouselPrevious class="emerald-carousel__previous">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CarouselPrevious>
+</template>
+
+<style>
+.emerald-carousel__previous {
+  grid-column: 1;
+  grid-row: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  color: var(--emerald-neutral-800);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
+}
+
+.emerald-carousel__previous:hover:not([aria-disabled="true"]) {
+  background: rgb(var(--emerald-neutral-channels) / 0.06);
+}
+
+.emerald-carousel__previous:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-carousel__previous[aria-disabled="true"] {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCarousel/EmCarouselViewport.vue b/packages/emerald/src/components/EmCarousel/EmCarouselViewport.vue
new file mode 100644
index 000000000..bec40e553
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/EmCarouselViewport.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+  // Framework
+  import { CarouselViewport } from '@vuetify/v0'
+
+  export interface EmCarouselViewportProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCarouselViewport' })
+</script>
+
+<template>
+  <CarouselViewport class="emerald-carousel__viewport">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CarouselViewport>
+</template>
+
+<style>
+.emerald-carousel__viewport {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: stretch;
+  padding: 8px 20%;
+  gap: 12px;
+}
+
+.emerald-carousel__viewport[data-orientation="vertical"] {
+  grid-column: 1;
+  grid-row: 2;
+  padding: 20% 8px;
+}
+
+.emerald-carousel__viewport[data-dragging] {
+  cursor: grabbing;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCarousel/index.ts b/packages/emerald/src/components/EmCarousel/index.ts
new file mode 100644
index 000000000..baf5f06b8
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/index.ts
@@ -0,0 +1,17 @@
+export type { EmCarouselProps } from './EmCarousel.vue'
+export { default as EmCarousel } from './EmCarousel.vue'
+
+export type { EmCarouselIndicatorProps } from './EmCarouselIndicator.vue'
+export { default as EmCarouselIndicator } from './EmCarouselIndicator.vue'
+
+export type { EmCarouselItemProps } from './EmCarouselItem.vue'
+export { default as EmCarouselItem } from './EmCarouselItem.vue'
+
+export type { EmCarouselNextProps } from './EmCarouselNext.vue'
+export { default as EmCarouselNext } from './EmCarouselNext.vue'
+
+export type { EmCarouselPreviousProps } from './EmCarouselPrevious.vue'
+export { default as EmCarouselPrevious } from './EmCarouselPrevious.vue'
+
+export type { EmCarouselViewportProps } from './EmCarouselViewport.vue'
+export { default as EmCarouselViewport } from './EmCarouselViewport.vue'
diff --git a/packages/emerald/src/components/EmCheckbox/EmCheckbox.vue b/packages/emerald/src/components/EmCheckbox/EmCheckbox.vue
new file mode 100644
index 000000000..8b30bab65
--- /dev/null
+++ b/packages/emerald/src/components/EmCheckbox/EmCheckbox.vue
@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { CheckboxRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export type EmCheckboxSize = 'sm' | 'md' | 'lg'
+
+  export interface EmCheckboxProps extends V0PaperProps {
+    disabled?: MaybeRefOrGetter<boolean>
+    indeterminate?: MaybeRefOrGetter<boolean>
+    name?: string
+    value?: unknown
+    label?: string
+    size?: EmCheckboxSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCheckbox' })
+
+  const {
+    disabled = false,
+    indeterminate = false,
+    name,
+    value,
+    label,
+    size = 'md',
+    ...paperProps
+  } = defineProps<EmCheckboxProps>()
+
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="label"
+    class="emerald-checkbox"
+    :data-disabled="disabled || undefined"
+    :data-size="size"
+  >
+    <CheckboxRoot
+      v-model="model"
+      as="span"
+      class="emerald-checkbox__root"
+      :disabled
+      :indeterminate
+      :label
+      :name
+      :value
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </CheckboxRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: var(--emerald-on-background);
+  font-size: 14px;
+  line-height: 1.4;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 6px;
+  padding: 2px 6px 2px 2px;
+  transition: box-shadow 120ms ease;
+}
+
+.emerald-checkbox[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.emerald-checkbox__root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  flex-shrink: 0;
+}
+
+/* Focus ring on the whole label (control + text) */
+.emerald-checkbox:has(.emerald-checkbox__root:focus-visible) {
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.35);
+}
+</style>
diff --git a/packages/emerald/src/components/EmCheckbox/EmCheckboxGroup.vue b/packages/emerald/src/components/EmCheckbox/EmCheckboxGroup.vue
new file mode 100644
index 000000000..88270264a
--- /dev/null
+++ b/packages/emerald/src/components/EmCheckbox/EmCheckboxGroup.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+  // Framework
+  import { CheckboxGroup } from '@vuetify/v0'
+
+  export interface EmCheckboxGroupProps {
+    disabled?: boolean
+    mandatory?: boolean | 'force'
+    label?: string
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCheckboxGroup' })
+
+  const {
+    disabled = false,
+    mandatory = false,
+    label,
+    name,
+  } = defineProps<EmCheckboxGroupProps>()
+
+  const model = defineModel<unknown[]>({ default: () => [] })
+</script>
+
+<template>
+  <CheckboxGroup
+    v-model="model"
+    class="emerald-checkbox-group"
+    :disabled
+    :label
+    :mandatory
+    :name
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CheckboxGroup>
+</template>
+
+<style>
+.emerald-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCheckbox/EmCheckboxIndicator.vue b/packages/emerald/src/components/EmCheckbox/EmCheckboxIndicator.vue
new file mode 100644
index 000000000..c0c222873
--- /dev/null
+++ b/packages/emerald/src/components/EmCheckbox/EmCheckboxIndicator.vue
@@ -0,0 +1,142 @@
+<script lang="ts">
+  // Framework
+  import { CheckboxIndicator, useCheckboxRoot } from '@vuetify/v0'
+
+  export interface EmCheckboxIndicatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCheckboxIndicator' })
+
+  const root = useCheckboxRoot('v0:checkbox:root')
+</script>
+
+<template>
+  <span
+    aria-hidden="true"
+    class="emerald-checkbox__box"
+    :data-disabled="root.isDisabled.value || undefined"
+    :data-state="root.isMixed.value ? 'indeterminate' : (root.isChecked.value ? 'checked' : 'unchecked')"
+  >
+    <CheckboxIndicator class="emerald-checkbox__indicator">
+      <template #default="{ isMixed }">
+        <svg
+          v-if="isMixed"
+          class="emerald-checkbox__glyph"
+          fill="none"
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3 8h10"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-width="2.25"
+          />
+        </svg>
+
+        <svg
+          v-else
+          class="emerald-checkbox__glyph"
+          fill="none"
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3 8.5L6.5 12L13 4.5"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2.25"
+          />
+        </svg>
+      </template>
+    </CheckboxIndicator>
+  </span>
+</template>
+
+<style>
+.emerald-checkbox__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.25);
+  border-radius: 3px;
+  background: transparent;
+  color: #ffffff;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  flex-shrink: 0;
+}
+
+.emerald-checkbox[data-size="sm"] .emerald-checkbox__box {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-checkbox[data-size="lg"] .emerald-checkbox__box {
+  width: 24px;
+  height: 24px;
+}
+
+.emerald-checkbox:hover .emerald-checkbox__box[data-state="unchecked"]:not([data-disabled]) {
+  border-color: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.5);
+}
+
+.emerald-checkbox__box[data-state="checked"],
+.emerald-checkbox__box[data-state="indeterminate"] {
+  background: var(--emerald-primary-500, #7c5cf6);
+  border: 2px solid var(--emerald-primary-700, #5f3aed);
+}
+
+.emerald-checkbox:hover .emerald-checkbox__box[data-state="checked"]:not([data-disabled]),
+.emerald-checkbox:hover .emerald-checkbox__box[data-state="indeterminate"]:not([data-disabled]) {
+  background: var(--emerald-primary-600, #5f3aed);
+  border-color: var(--emerald-primary-800);
+}
+
+.emerald-checkbox__box[data-disabled] {
+  background: transparent;
+  border-color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.15);
+  box-shadow: none;
+}
+
+.emerald-checkbox__box[data-disabled][data-state="checked"],
+.emerald-checkbox__box[data-disabled][data-state="indeterminate"] {
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.15);
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.2);
+}
+
+.emerald-checkbox__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  line-height: 0;
+}
+
+.emerald-checkbox__glyph {
+  width: 16px;
+  height: 16px;
+  color: #ffffff;
+}
+
+.emerald-checkbox[data-size="sm"] .emerald-checkbox__glyph {
+  width: 12px;
+  height: 12px;
+}
+
+.emerald-checkbox[data-size="lg"] .emerald-checkbox__glyph {
+  width: 20px;
+  height: 20px;
+}
+
+.emerald-checkbox__box[data-disabled] .emerald-checkbox__glyph {
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.45);
+}
+</style>
diff --git a/packages/emerald/src/components/EmCheckbox/EmCheckboxSelectAll.vue b/packages/emerald/src/components/EmCheckbox/EmCheckboxSelectAll.vue
new file mode 100644
index 000000000..e8f770a55
--- /dev/null
+++ b/packages/emerald/src/components/EmCheckbox/EmCheckboxSelectAll.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+  // Framework
+  import { CheckboxSelectAll } from '@vuetify/v0'
+
+  export interface EmCheckboxSelectAllProps {
+    label?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCheckboxSelectAll' })
+
+  const { label } = defineProps<EmCheckboxSelectAllProps>()
+</script>
+
+<template>
+  <CheckboxSelectAll class="emerald-checkbox-select-all" :label>
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CheckboxSelectAll>
+</template>
diff --git a/packages/emerald/src/components/EmCheckbox/index.ts b/packages/emerald/src/components/EmCheckbox/index.ts
new file mode 100644
index 000000000..8afbd1cef
--- /dev/null
+++ b/packages/emerald/src/components/EmCheckbox/index.ts
@@ -0,0 +1,11 @@
+export type { EmCheckboxProps } from './EmCheckbox.vue'
+export { default as EmCheckbox } from './EmCheckbox.vue'
+
+export type { EmCheckboxGroupProps } from './EmCheckboxGroup.vue'
+export { default as EmCheckboxGroup } from './EmCheckboxGroup.vue'
+
+export type { EmCheckboxIndicatorProps } from './EmCheckboxIndicator.vue'
+export { default as EmCheckboxIndicator } from './EmCheckboxIndicator.vue'
+
+export type { EmCheckboxSelectAllProps } from './EmCheckboxSelectAll.vue'
+export { default as EmCheckboxSelectAll } from './EmCheckboxSelectAll.vue'
diff --git a/packages/emerald/src/components/EmContainer/EmContainer.vue b/packages/emerald/src/components/EmContainer/EmContainer.vue
new file mode 100644
index 000000000..fa25e8b0c
--- /dev/null
+++ b/packages/emerald/src/components/EmContainer/EmContainer.vue
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmContainerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'fluid'
+
+  export interface EmContainerProps extends V0PaperProps {
+    size?: EmContainerSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmContainer' })
+
+  const { size = 'lg', ...paperProps } = defineProps<EmContainerProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-container"
+    :data-size="size"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style scoped>
+.emerald-container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: 16px;
+}
+
+.emerald-container[data-size="sm"] { max-width: 640px; }
+.emerald-container[data-size="md"] { max-width: 768px; }
+.emerald-container[data-size="lg"] { max-width: 1024px; }
+.emerald-container[data-size="xl"] { max-width: 1280px; }
+.emerald-container[data-size="2xl"] { max-width: 1536px; }
+.emerald-container[data-size="fluid"] { max-width: none; }
+</style>
diff --git a/packages/emerald/src/components/EmContainer/index.ts b/packages/emerald/src/components/EmContainer/index.ts
new file mode 100644
index 000000000..faa8a0032
--- /dev/null
+++ b/packages/emerald/src/components/EmContainer/index.ts
@@ -0,0 +1,2 @@
+export { default as EmContainer } from './EmContainer.vue'
+export type { EmContainerProps } from './EmContainer.vue'
diff --git a/packages/emerald/src/components/EmDatePicker/EmDatePicker.vue b/packages/emerald/src/components/EmDatePicker/EmDatePicker.vue
new file mode 100644
index 000000000..930189b13
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/EmDatePicker.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmDatePickerProps extends V0PaperProps {
+    modelValue?: Date | null
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDatePicker' })
+
+  // TODO(emerald): wire createCalendar/useDate once v0 ships a DatePicker primitive
+  const { disabled = false, ...paperProps } = defineProps<EmDatePickerProps>()
+
+  const model = defineModel<Date | null>({ default: null })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-date-picker"
+    :data-disabled="disabled || undefined"
+  >
+    <slot :model />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-date-picker {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  width: 234px;
+  padding: 12px 7px;
+  border-radius: 6px;
+  background: #ffffff;
+  box-shadow:
+    0 1px 3px rgb(5 0 18 / 0.12),
+    0 1px 5px rgb(5 0 18 / 0.2);
+  overflow: clip;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: #000000;
+}
+
+.emerald-date-picker[data-disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDatePicker/EmDatePickerCalendar.vue b/packages/emerald/src/components/EmDatePicker/EmDatePickerCalendar.vue
new file mode 100644
index 000000000..4fb82f268
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/EmDatePickerCalendar.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export interface EmDatePickerCalendarProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDatePickerCalendar' })
+</script>
+
+<template>
+  <div class="emerald-date-picker__calendar">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-date-picker__calendar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  width: 100%;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDatePicker/EmDatePickerCell.vue b/packages/emerald/src/components/EmDatePicker/EmDatePickerCell.vue
new file mode 100644
index 000000000..ceab27e6b
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/EmDatePickerCell.vue
@@ -0,0 +1,88 @@
+<script lang="ts">
+  export interface EmDatePickerCellProps {
+    selected?: boolean
+    disabled?: boolean
+    today?: boolean
+    weekday?: boolean
+    outside?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDatePickerCell' })
+
+  const {
+    selected = false,
+    disabled = false,
+    today = false,
+    weekday = false,
+    outside = false,
+  } = defineProps<EmDatePickerCellProps>()
+</script>
+
+<template>
+  <button
+    class="emerald-date-picker__cell"
+    :data-disabled="disabled || undefined"
+    :data-outside="outside || undefined"
+    :data-selected="selected || undefined"
+    :data-today="today || undefined"
+    :data-weekday="weekday || undefined"
+    :disabled="disabled || weekday"
+    :role="weekday ? 'columnheader' : 'gridcell'"
+    :tabindex="weekday ? -1 : 0"
+    type="button"
+  >
+    <slot />
+  </button>
+</template>
+
+<style>
+.emerald-date-picker__cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 28px;
+  height: 28px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 4px;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  color: #000000;
+  cursor: pointer;
+  overflow: clip;
+}
+
+.emerald-date-picker__cell[data-weekday] {
+  font-weight: 600;
+  cursor: default;
+}
+
+.emerald-date-picker__cell:not([data-weekday]):not([data-disabled]):hover {
+  background: rgb(var(--emerald-primary-500-channels, 24 180 140) / 0.1);
+}
+
+.emerald-date-picker__cell[data-today]:not([data-selected]) {
+  outline: 1px solid var(--emerald-primary-500, #18b48c);
+  outline-offset: -1px;
+}
+
+.emerald-date-picker__cell[data-selected] {
+  background: var(--emerald-primary-500, #18b48c);
+  color: #ffffff;
+}
+
+.emerald-date-picker__cell[data-outside] {
+  color: rgb(0 0 0 / 0.35);
+}
+
+.emerald-date-picker__cell[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDatePicker/EmDatePickerGrid.vue b/packages/emerald/src/components/EmDatePicker/EmDatePickerGrid.vue
new file mode 100644
index 000000000..e5fef7dd4
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/EmDatePickerGrid.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export interface EmDatePickerGridProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDatePickerGrid' })
+</script>
+
+<template>
+  <div class="emerald-date-picker__grid" role="grid">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-date-picker__grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  width: 220px;
+  padding: 3px 2px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDatePicker/EmDatePickerHeader.vue b/packages/emerald/src/components/EmDatePicker/EmDatePickerHeader.vue
new file mode 100644
index 000000000..c10447eea
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/EmDatePickerHeader.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+  export interface EmDatePickerHeaderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDatePickerHeader' })
+</script>
+
+<template>
+  <div class="emerald-date-picker__header">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-date-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 5px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: normal;
+  color: #000000;
+}
+
+.emerald-date-picker__header > button,
+.emerald-date-picker__header [role="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDatePicker/EmDatePickerInput.vue b/packages/emerald/src/components/EmDatePicker/EmDatePickerInput.vue
new file mode 100644
index 000000000..e256205c8
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/EmDatePickerInput.vue
@@ -0,0 +1,50 @@
+<script lang="ts">
+  export interface EmDatePickerInputProps {
+    placeholder?: string
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDatePickerInput' })
+
+  const { placeholder, disabled = false } = defineProps<EmDatePickerInputProps>()
+
+  const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <input
+    v-model="model"
+    class="emerald-date-picker__input"
+    :disabled
+    :placeholder
+    type="text"
+  >
+</template>
+
+<style>
+.emerald-date-picker__input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  border: 1px solid rgb(0 0 0 / 0.12);
+  border-radius: 4px;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  color: #000000;
+}
+
+.emerald-date-picker__input::placeholder {
+  color: rgb(0 0 0 / 0.45);
+}
+
+.emerald-date-picker__input:focus {
+  outline: none;
+  border-color: var(--emerald-primary-500, #18b48c);
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels, 24 180 140) / 0.15);
+}
+</style>
diff --git a/packages/emerald/src/components/EmDatePicker/index.ts b/packages/emerald/src/components/EmDatePicker/index.ts
new file mode 100644
index 000000000..9973ff78c
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/index.ts
@@ -0,0 +1,17 @@
+export type { EmDatePickerProps } from './EmDatePicker.vue'
+export { default as EmDatePicker } from './EmDatePicker.vue'
+
+export type { EmDatePickerCalendarProps } from './EmDatePickerCalendar.vue'
+export { default as EmDatePickerCalendar } from './EmDatePickerCalendar.vue'
+
+export type { EmDatePickerCellProps } from './EmDatePickerCell.vue'
+export { default as EmDatePickerCell } from './EmDatePickerCell.vue'
+
+export type { EmDatePickerGridProps } from './EmDatePickerGrid.vue'
+export { default as EmDatePickerGrid } from './EmDatePickerGrid.vue'
+
+export type { EmDatePickerHeaderProps } from './EmDatePickerHeader.vue'
+export { default as EmDatePickerHeader } from './EmDatePickerHeader.vue'
+
+export type { EmDatePickerInputProps } from './EmDatePickerInput.vue'
+export { default as EmDatePickerInput } from './EmDatePickerInput.vue'
diff --git a/packages/emerald/src/components/EmDialog/EmDialog.vue b/packages/emerald/src/components/EmDialog/EmDialog.vue
new file mode 100644
index 000000000..31de51a34
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialog.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+  // Framework
+  import { DialogRoot } from '@vuetify/v0'
+
+  export interface EmDialogProps {
+    id?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialog' })
+
+  const { id } = defineProps<EmDialogProps>()
+
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <DialogRoot
+    :id
+    v-model="model"
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </DialogRoot>
+</template>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogActivator.vue b/packages/emerald/src/components/EmDialog/EmDialogActivator.vue
new file mode 100644
index 000000000..16534eca6
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogActivator.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+  // Framework
+  import { DialogActivator } from '@vuetify/v0'
+
+  export interface EmDialogActivatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogActivator' })
+</script>
+
+<template>
+  <DialogActivator class="emerald-dialog__activator">
+    <slot />
+  </DialogActivator>
+</template>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogBody.vue b/packages/emerald/src/components/EmDialog/EmDialogBody.vue
new file mode 100644
index 000000000..b14796b1b
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogBody.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export interface EmDialogBodyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogBody' })
+</script>
+
+<template>
+  <div class="emerald-dialog__body">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-dialog__body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 24px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  color: rgb(var(--emerald-neutral-700-channels, 30 28 40) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogClose.vue b/packages/emerald/src/components/EmDialog/EmDialogClose.vue
new file mode 100644
index 000000000..1e4363923
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogClose.vue
@@ -0,0 +1,20 @@
+<script lang="ts">
+  // Framework
+  import { DialogClose } from '@vuetify/v0'
+
+  export interface EmDialogCloseProps {
+    renderless?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogClose' })
+
+  const { renderless = false } = defineProps<EmDialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose class="emerald-dialog__close" :renderless>
+    <slot />
+  </DialogClose>
+</template>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogContent.vue b/packages/emerald/src/components/EmDialog/EmDialogContent.vue
new file mode 100644
index 000000000..6de32068d
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogContent.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { DialogContent } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmDialogContentProps extends V0PaperProps {
+    closeOnClickOutside?: boolean
+    blocking?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogContent' })
+
+  const {
+    closeOnClickOutside = true,
+    blocking = false,
+    ...paperProps
+  } = defineProps<EmDialogContentProps>()
+
+  const emit = defineEmits<{
+    cancel: [e: Event]
+    close: [e: Event]
+  }>()
+</script>
+
+<template>
+  <DialogContent
+    :blocking
+    class="emerald-dialog"
+    :close-on-click-outside
+    @cancel="emit('cancel', $event)"
+    @close="emit('close', $event)"
+  >
+    <V0Paper
+      v-bind="paperProps"
+      as="div"
+      class="emerald-dialog__content"
+    >
+      <slot />
+    </V0Paper>
+  </DialogContent>
+</template>
+
+<style>
+.emerald-dialog {
+  padding: 0;
+  margin: auto;
+  border: none;
+  background: transparent;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
+  overflow: visible;
+}
+
+.emerald-dialog::backdrop {
+  background: rgba(81, 81, 81, 0.3);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+.emerald-dialog__content {
+  display: flex;
+  flex-direction: column;
+  width: 520px;
+  max-width: 100%;
+  background: linear-gradient(to bottom, #ffffff, var(--emerald-background, #faf9ff));
+  border: 1px solid var(--emerald-primary-500, #7c5cf6);
+  border-radius: 12px;
+  overflow: clip;
+  box-shadow:
+    0 3px 8px 0 rgba(5, 0, 18, 0.13),
+    0 2px 4px 0 rgba(5, 0, 18, 0.1);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogDescription.vue b/packages/emerald/src/components/EmDialog/EmDialogDescription.vue
new file mode 100644
index 000000000..037b64454
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogDescription.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+  // Framework
+  import { DialogDescription } from '@vuetify/v0'
+
+  export interface EmDialogDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogDescription' })
+</script>
+
+<template>
+  <DialogDescription class="emerald-dialog__description">
+    <slot />
+  </DialogDescription>
+</template>
+
+<style>
+.emerald-dialog__description {
+  margin: 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: rgb(var(--emerald-neutral-700-channels, 30 28 40) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogFooter.vue b/packages/emerald/src/components/EmDialog/EmDialogFooter.vue
new file mode 100644
index 000000000..4a805e250
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogFooter.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export interface EmDialogFooterProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogFooter' })
+</script>
+
+<template>
+  <div class="emerald-dialog__footer">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 24px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogHeader.vue b/packages/emerald/src/components/EmDialog/EmDialogHeader.vue
new file mode 100644
index 000000000..363965821
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogHeader.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+  export interface EmDialogHeaderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogHeader' })
+</script>
+
+<template>
+  <div class="emerald-dialog__header">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-dialog__header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 24px 24px 0;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogTitle.vue b/packages/emerald/src/components/EmDialog/EmDialogTitle.vue
new file mode 100644
index 000000000..27fc1a984
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogTitle.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+  // Framework
+  import { DialogTitle } from '@vuetify/v0'
+
+  export interface EmDialogTitleProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogTitle' })
+</script>
+
+<template>
+  <DialogTitle as="h2" class="emerald-dialog__title">
+    <slot />
+  </DialogTitle>
+</template>
+
+<style>
+.emerald-dialog__title {
+  margin: 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 26px;
+  letter-spacing: -0.2px;
+  color: var(--emerald-neutral-700, #1e1c28);
+}
+</style>
diff --git a/packages/emerald/src/components/EmDialog/index.ts b/packages/emerald/src/components/EmDialog/index.ts
new file mode 100644
index 000000000..b333f1fbf
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/index.ts
@@ -0,0 +1,26 @@
+export type { EmDialogProps } from './EmDialog.vue'
+export { default as EmDialog } from './EmDialog.vue'
+
+export type { EmDialogActivatorProps } from './EmDialogActivator.vue'
+export { default as EmDialogActivator } from './EmDialogActivator.vue'
+
+export type { EmDialogBodyProps } from './EmDialogBody.vue'
+export { default as EmDialogBody } from './EmDialogBody.vue'
+
+export type { EmDialogCloseProps } from './EmDialogClose.vue'
+export { default as EmDialogClose } from './EmDialogClose.vue'
+
+export type { EmDialogContentProps } from './EmDialogContent.vue'
+export { default as EmDialogContent } from './EmDialogContent.vue'
+
+export type { EmDialogDescriptionProps } from './EmDialogDescription.vue'
+export { default as EmDialogDescription } from './EmDialogDescription.vue'
+
+export type { EmDialogFooterProps } from './EmDialogFooter.vue'
+export { default as EmDialogFooter } from './EmDialogFooter.vue'
+
+export type { EmDialogHeaderProps } from './EmDialogHeader.vue'
+export { default as EmDialogHeader } from './EmDialogHeader.vue'
+
+export type { EmDialogTitleProps } from './EmDialogTitle.vue'
+export { default as EmDialogTitle } from './EmDialogTitle.vue'
diff --git a/packages/emerald/src/components/EmDivider/EmDivider.vue b/packages/emerald/src/components/EmDivider/EmDivider.vue
new file mode 100644
index 000000000..0bf3ea58d
--- /dev/null
+++ b/packages/emerald/src/components/EmDivider/EmDivider.vue
@@ -0,0 +1,52 @@
+<script lang="ts">
+  // Framework
+  import { Atom } from '@vuetify/v0'
+
+  export type EmDividerOrientation = 'horizontal' | 'vertical'
+  export type EmDividerVariant = 'solid' | 'dashed'
+
+  export interface EmDividerProps {
+    orientation?: EmDividerOrientation
+    variant?: EmDividerVariant
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDivider' })
+
+  const {
+    orientation = 'horizontal',
+    variant = 'solid',
+  } = defineProps<EmDividerProps>()
+</script>
+
+<template>
+  <Atom
+    :aria-orientation="orientation"
+    as="div"
+    class="emerald-divider"
+    :data-orientation="orientation"
+    :data-variant="variant"
+    role="separator"
+  >
+    <slot />
+  </Atom>
+</template>
+
+<style>
+.emerald-divider {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  color: var(--emerald-on-background);
+}
+
+.emerald-divider[data-orientation="horizontal"] {
+  width: 100%;
+}
+
+.emerald-divider[data-orientation="vertical"] {
+  flex-direction: column;
+  height: 100%;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDivider/EmDividerLabel.vue b/packages/emerald/src/components/EmDivider/EmDividerLabel.vue
new file mode 100644
index 000000000..45f4b4116
--- /dev/null
+++ b/packages/emerald/src/components/EmDivider/EmDividerLabel.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+  export interface EmDividerLabelProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDividerLabel' })
+</script>
+
+<template>
+  <span class="emerald-divider__label">
+    <slot />
+  </span>
+</template>
+
+<style>
+.emerald-divider__label {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--emerald-on-background);
+  opacity: 0.6;
+}
+
+.emerald-divider[data-orientation="vertical"] .emerald-divider__label {
+  padding: 8px 0;
+  font-size: 12px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDivider/EmDividerLine.vue b/packages/emerald/src/components/EmDivider/EmDividerLine.vue
new file mode 100644
index 000000000..bd2844661
--- /dev/null
+++ b/packages/emerald/src/components/EmDivider/EmDividerLine.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+  export interface EmDividerLineProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDividerLine' })
+</script>
+
+<template>
+  <span aria-hidden="true" class="emerald-divider__line" />
+</template>
+
+<style>
+.emerald-divider__line {
+  flex: 1 0 0;
+  align-self: center;
+}
+
+.emerald-divider[data-orientation="horizontal"] .emerald-divider__line {
+  border-top: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  height: 1px;
+  min-width: 1px;
+}
+
+/* Dashed pill: dotted line with rounded caps via SVG-style stroke */
+.emerald-divider[data-orientation="horizontal"][data-variant="dashed"] .emerald-divider__line {
+  border-top: none;
+  height: 2px;
+  border-radius: 9999px;
+  background-image: linear-gradient(
+    to right,
+    rgb(var(--emerald-neutral-channels, 26 28 30) / 0.35) 50%,
+    transparent 50%
+  );
+  background-size: 8px 2px;
+  background-repeat: repeat-x;
+}
+
+.emerald-divider[data-orientation="vertical"] .emerald-divider__line {
+  border-left: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  width: 1px;
+  min-height: 1px;
+}
+
+.emerald-divider[data-orientation="vertical"][data-variant="dashed"] .emerald-divider__line {
+  border-left: none;
+  width: 2px;
+  border-radius: 9999px;
+  background-image: linear-gradient(
+    to bottom,
+    rgb(var(--emerald-neutral-channels, 26 28 30) / 0.35) 50%,
+    transparent 50%
+  );
+  background-size: 2px 8px;
+  background-repeat: repeat-y;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDivider/index.ts b/packages/emerald/src/components/EmDivider/index.ts
new file mode 100644
index 000000000..2422b060c
--- /dev/null
+++ b/packages/emerald/src/components/EmDivider/index.ts
@@ -0,0 +1,8 @@
+export type { EmDividerProps } from './EmDivider.vue'
+export { default as EmDivider } from './EmDivider.vue'
+
+export type { EmDividerLabelProps } from './EmDividerLabel.vue'
+export { default as EmDividerLabel } from './EmDividerLabel.vue'
+
+export type { EmDividerLineProps } from './EmDividerLine.vue'
+export { default as EmDividerLine } from './EmDividerLine.vue'
diff --git a/packages/emerald/src/components/EmFlex/EmFlex.vue b/packages/emerald/src/components/EmFlex/EmFlex.vue
new file mode 100644
index 000000000..99da817dc
--- /dev/null
+++ b/packages/emerald/src/components/EmFlex/EmFlex.vue
@@ -0,0 +1,69 @@
+<script lang="ts">
+  // Framework
+  import { Atom } from '@vuetify/v0'
+
+  // Types
+  import type { AtomProps } from '@vuetify/v0'
+
+  export type EmFlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse'
+  export type EmFlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline'
+  export type EmFlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
+  export type EmFlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'
+  export type EmFlexGap = 0 | 4 | 6 | 8 | 12 | 16 | 24
+
+  export interface EmFlexProps extends AtomProps {
+    direction?: EmFlexDirection
+    align?: EmFlexAlign
+    justify?: EmFlexJustify
+    wrap?: EmFlexWrap
+    gap?: EmFlexGap
+    inline?: boolean
+  }
+
+  const JUSTIFY_MAP: Record<string, string> = {
+    between: 'space-between',
+    around: 'space-around',
+    evenly: 'space-evenly',
+  }
+
+  function resolveJustify (value?: EmFlexJustify): string | undefined {
+    if (!value) return undefined
+    return JUSTIFY_MAP[value] ?? value
+  }
+</script>
+
+<script setup lang="ts">
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'EmFlex' })
+
+  const {
+    direction = 'row',
+    align,
+    justify,
+    wrap = 'nowrap',
+    gap = 0,
+    inline = false,
+  } = defineProps<EmFlexProps>()
+
+  const style = toRef(() => ({
+    display: inline ? 'inline-flex' : 'flex',
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: resolveJustify(justify),
+    flexWrap: wrap,
+    gap: gap ? `${gap}px` : undefined,
+  }))
+</script>
+
+<template>
+  <Atom
+    as="div"
+    class="emerald-flex"
+    :data-direction="direction"
+    :style
+  >
+    <slot />
+  </Atom>
+</template>
diff --git a/packages/emerald/src/components/EmFlex/index.ts b/packages/emerald/src/components/EmFlex/index.ts
new file mode 100644
index 000000000..dbffc61ab
--- /dev/null
+++ b/packages/emerald/src/components/EmFlex/index.ts
@@ -0,0 +1,9 @@
+export type {
+  EmFlexAlign,
+  EmFlexDirection,
+  EmFlexGap,
+  EmFlexJustify,
+  EmFlexProps,
+  EmFlexWrap,
+} from './EmFlex.vue'
+export { default as EmFlex } from './EmFlex.vue'
diff --git a/packages/emerald/src/components/EmForm/EmForm.vue b/packages/emerald/src/components/EmForm/EmForm.vue
new file mode 100644
index 000000000..fdf486eaa
--- /dev/null
+++ b/packages/emerald/src/components/EmForm/EmForm.vue
@@ -0,0 +1,164 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { Form } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmFormProps extends V0PaperProps {
+    disabled?: boolean
+    readonly?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmForm' })
+
+  const {
+    disabled = false,
+    readonly = false,
+    ...paperProps
+  } = defineProps<EmFormProps>()
+
+  const model = defineModel<boolean | null>({ default: null })
+
+  const emit = defineEmits<{
+    submit: [payload: { valid: boolean }]
+    reset: []
+  }>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-form"
+    :data-disabled="disabled || undefined"
+    :data-readonly="readonly || undefined"
+  >
+    <Form
+      v-model="model"
+      as="form"
+      class="emerald-form__root"
+      :disabled
+      :readonly
+      @reset="emit('reset')"
+      @submit="(payload) => emit('submit', payload)"
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </Form>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-form {
+  display: block;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: #121212;
+}
+
+.emerald-form__root {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.emerald-form[data-disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* Field layout — matches Figma form-field pattern */
+.emerald-form .emerald-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.emerald-form .emerald-form-field__label {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 1.2;
+  color: #121212;
+}
+
+.emerald-form .emerald-form-field[data-invalid] .emerald-form-field__label {
+  color: var(--emerald-error-700);
+}
+
+.emerald-form .emerald-form-field[data-invalid] .emerald-form-field__control:hover {
+  border-color: var(--emerald-error-700);
+  box-shadow:
+    0 1px 3px 0 rgb(var(--emerald-error-500-channels) / 0.18),
+    0 1px 5px 0 rgb(var(--emerald-error-500-channels) / 0.22);
+}
+
+.emerald-form .emerald-form-field__control {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 8px;
+  background: #ffffff;
+  border: 1px solid rgb(var(--emerald-neutral-channels) / 0.1);
+  border-radius: 4px;
+  box-sizing: border-box;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.emerald-form .emerald-form-field__control:focus-within {
+  border-color: rgb(var(--emerald-neutral-channels) / 0.4);
+}
+
+.emerald-form .emerald-form-field[data-invalid] .emerald-form-field__control {
+  border-color: rgb(var(--emerald-error-700-channels) / 0.5);
+}
+
+.emerald-form .emerald-form-field__control input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  color: #121212;
+  padding: 0;
+}
+
+.emerald-form .emerald-form-field__control input::placeholder {
+  color: #121212;
+  opacity: 0.3;
+  font-size: 12px;
+}
+
+.emerald-form .emerald-form-field__helper {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1.2;
+  color: #121212;
+  opacity: 0.6;
+}
+
+.emerald-form .emerald-form-field__error {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--emerald-error-700);
+  opacity: 0.85;
+}
+
+.emerald-form .emerald-form-field[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+</style>
diff --git a/packages/emerald/src/components/EmForm/index.ts b/packages/emerald/src/components/EmForm/index.ts
new file mode 100644
index 000000000..ace186a59
--- /dev/null
+++ b/packages/emerald/src/components/EmForm/index.ts
@@ -0,0 +1,2 @@
+export { default as EmForm } from './EmForm.vue'
+export type { EmFormProps } from './EmForm.vue'
diff --git a/packages/emerald/src/components/EmGrid/EmGrid.vue b/packages/emerald/src/components/EmGrid/EmGrid.vue
new file mode 100644
index 000000000..7545cbbab
--- /dev/null
+++ b/packages/emerald/src/components/EmGrid/EmGrid.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+  // Framework
+  import { Atom } from '@vuetify/v0'
+
+  // Types
+  import type { AtomProps } from '@vuetify/v0'
+
+  export type EmGridGap = 0 | 4 | 6 | 8 | 12 | 16 | 24
+
+  export interface EmGridProps extends AtomProps {
+    columns?: number
+    rows?: number
+    gap?: EmGridGap
+  }
+</script>
+
+<script setup lang="ts">
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'EmGrid' })
+
+  const {
+    columns = 12,
+    rows,
+    gap = 0,
+  } = defineProps<EmGridProps>()
+
+  const style = toRef(() => ({
+    display: 'grid',
+    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    gridTemplateRows: rows ? `repeat(${rows}, minmax(0, 1fr))` : undefined,
+    gap: gap ? `${gap}px` : undefined,
+  }))
+</script>
+
+<template>
+  <Atom as="div" class="emerald-grid" :style>
+    <slot />
+  </Atom>
+</template>
diff --git a/packages/emerald/src/components/EmGrid/EmGridItem.vue b/packages/emerald/src/components/EmGrid/EmGridItem.vue
new file mode 100644
index 000000000..f97cdd3ee
--- /dev/null
+++ b/packages/emerald/src/components/EmGrid/EmGridItem.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+  // Framework
+  import { Atom } from '@vuetify/v0'
+
+  // Types
+  import type { AtomProps } from '@vuetify/v0'
+
+  export interface EmGridItemProps extends AtomProps {
+    span?: number
+    start?: number
+    rowSpan?: number
+  }
+</script>
+
+<script setup lang="ts">
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'EmGridItem' })
+
+  const { span, start, rowSpan } = defineProps<EmGridItemProps>()
+
+  const style = toRef(() => ({
+    gridColumn: span ? `span ${span} / span ${span}` : undefined,
+    gridColumnStart: start,
+    gridRow: rowSpan ? `span ${rowSpan} / span ${rowSpan}` : undefined,
+  }))
+</script>
+
+<template>
+  <Atom as="div" class="emerald-grid__item" :style>
+    <slot />
+  </Atom>
+</template>
diff --git a/packages/emerald/src/components/EmGrid/index.ts b/packages/emerald/src/components/EmGrid/index.ts
new file mode 100644
index 000000000..8fd8c8da2
--- /dev/null
+++ b/packages/emerald/src/components/EmGrid/index.ts
@@ -0,0 +1,5 @@
+export type { EmGridGap, EmGridProps } from './EmGrid.vue'
+export { default as EmGrid } from './EmGrid.vue'
+
+export type { EmGridItemProps } from './EmGridItem.vue'
+export { default as EmGridItem } from './EmGridItem.vue'
diff --git a/packages/emerald/src/components/EmList/EmList.vue b/packages/emerald/src/components/EmList/EmList.vue
new file mode 100644
index 000000000..69e9729a9
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmList.vue
@@ -0,0 +1,178 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmListProps extends V0PaperProps {
+    flat?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmList' })
+
+  const { flat = false, ...paperProps } = defineProps<EmListProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="ul"
+    class="emerald-list"
+    :data-flat="flat || undefined"
+    role="list"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0;
+  padding: 12px;
+  list-style: none;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  background: var(--emerald-background, #faf9ff);
+  border: 1px solid rgb(var(--emerald-on-background-channels, 26 18 48) / 0.1);
+  border-radius: 12px;
+  box-shadow:
+    0 3px 6px 0 rgba(5, 0, 18, 0.09),
+    0 8px 20px 0 rgba(5, 0, 18, 0.13);
+  color: var(--emerald-on-background, #281065);
+  width: 100%;
+}
+
+.emerald-list[data-flat] {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  padding: 0;
+}
+
+.emerald-list__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  height: 36px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: var(--emerald-on-background, #281065);
+  cursor: default;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.emerald-list__item[data-interactive] {
+  cursor: pointer;
+}
+
+.emerald-list__item[data-interactive]:not([data-active]):hover {
+  background: var(--emerald-primary-50, #f5f3ff);
+}
+
+.emerald-list__item[data-active] {
+  background: var(--emerald-primary-100, #ede9fe);
+}
+
+.emerald-list__item[data-active] .emerald-list__item-title,
+.emerald-list__item[data-active] .emerald-list__item-icon {
+  color: var(--emerald-primary-500, #7c5cf6);
+  font-weight: 500;
+}
+
+.emerald-list__item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Subtle left border indicator on default (non-active, non-header) items */
+.emerald-list__item[data-indent] {
+  border-left: 0.5px solid rgb(var(--emerald-on-background-channels, 26 18 48) / 0.1);
+  border-radius: 0;
+}
+
+.emerald-list__item-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--emerald-on-background, #281065);
+}
+
+.emerald-list__item-action {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  color: var(--emerald-on-background, #281065);
+}
+
+.emerald-list__item-body {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 0;
+}
+
+.emerald-list__item-title {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--emerald-on-background, #281065);
+}
+
+.emerald-list__item-subtitle {
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--emerald-on-background, #281065);
+}
+
+.emerald-list__item-header {
+  align-items: flex-start;
+  height: auto;
+  padding: 8px 12px;
+}
+
+.emerald-list__item-header .emerald-list__item-title {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.emerald-list__subheader {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 36px;
+  padding: 8px 12px 8px 0;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: var(--emerald-on-background, #281065);
+  opacity: 0.7;
+  text-transform: uppercase;
+  box-sizing: border-box;
+}
+
+.emerald-list__separator {
+  width: calc(100% - 16px);
+  height: 0;
+  margin: 8px 8px 0;
+  border: none;
+  border-top: 0.5px solid rgb(var(--emerald-on-background-channels, 26 18 48) / 0.1);
+}
+</style>
diff --git a/packages/emerald/src/components/EmList/EmListItem.vue b/packages/emerald/src/components/EmList/EmListItem.vue
new file mode 100644
index 000000000..a43c66282
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListItem.vue
@@ -0,0 +1,44 @@
+<script lang="ts">
+  export interface EmListItemProps {
+    interactive?: boolean
+    disabled?: boolean
+    active?: boolean
+    indent?: boolean
+    header?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListItem' })
+
+  const {
+    interactive = false,
+    disabled = false,
+    active = false,
+    indent = false,
+    header = false,
+  } = defineProps<EmListItemProps>()
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  function onClick (event: MouseEvent) {
+    if (disabled) return
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <li
+    class="emerald-list__item"
+    :class="{ 'emerald-list__item-header': header }"
+    :data-active="active || undefined"
+    :data-disabled="disabled || undefined"
+    :data-indent="(indent && !active && !header) || undefined"
+    :data-interactive="interactive || undefined"
+    @click="onClick"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListItemAction.vue b/packages/emerald/src/components/EmList/EmListItemAction.vue
new file mode 100644
index 000000000..9a16527a7
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListItemAction.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmListItemActionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListItemAction' })
+</script>
+
+<template>
+  <span aria-hidden="true" class="emerald-list__item-action">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListItemBody.vue b/packages/emerald/src/components/EmList/EmListItemBody.vue
new file mode 100644
index 000000000..8d1d44fb8
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListItemBody.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmListItemBodyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListItemBody' })
+</script>
+
+<template>
+  <div class="emerald-list__item-body">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListItemIcon.vue b/packages/emerald/src/components/EmList/EmListItemIcon.vue
new file mode 100644
index 000000000..edf3054f8
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListItemIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmListItemIconProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListItemIcon' })
+</script>
+
+<template>
+  <span aria-hidden="true" class="emerald-list__item-icon">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListItemSubtitle.vue b/packages/emerald/src/components/EmList/EmListItemSubtitle.vue
new file mode 100644
index 000000000..ca52f0ee7
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListItemSubtitle.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmListItemSubtitleProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListItemSubtitle' })
+</script>
+
+<template>
+  <span class="emerald-list__item-subtitle">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListItemTitle.vue b/packages/emerald/src/components/EmList/EmListItemTitle.vue
new file mode 100644
index 000000000..e41d1ea92
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListItemTitle.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmListItemTitleProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListItemTitle' })
+</script>
+
+<template>
+  <span class="emerald-list__item-title">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListSeparator.vue b/packages/emerald/src/components/EmList/EmListSeparator.vue
new file mode 100644
index 000000000..2f3bed03a
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListSeparator.vue
@@ -0,0 +1,11 @@
+<script lang="ts">
+  export interface EmListSeparatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListSeparator' })
+</script>
+
+<template>
+  <li aria-hidden="true" class="emerald-list__separator" role="separator" />
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListSubheader.vue b/packages/emerald/src/components/EmList/EmListSubheader.vue
new file mode 100644
index 000000000..8a5f1e70f
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListSubheader.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmListSubheaderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListSubheader' })
+</script>
+
+<template>
+  <li class="emerald-list__subheader" role="presentation">
+    <slot />
+  </li>
+</template>
diff --git a/packages/emerald/src/components/EmList/index.ts b/packages/emerald/src/components/EmList/index.ts
new file mode 100644
index 000000000..abd3772f4
--- /dev/null
+++ b/packages/emerald/src/components/EmList/index.ts
@@ -0,0 +1,26 @@
+export type { EmListProps } from './EmList.vue'
+export { default as EmList } from './EmList.vue'
+
+export type { EmListItemProps } from './EmListItem.vue'
+export { default as EmListItem } from './EmListItem.vue'
+
+export type { EmListItemActionProps } from './EmListItemAction.vue'
+export { default as EmListItemAction } from './EmListItemAction.vue'
+
+export type { EmListItemBodyProps } from './EmListItemBody.vue'
+export { default as EmListItemBody } from './EmListItemBody.vue'
+
+export type { EmListItemIconProps } from './EmListItemIcon.vue'
+export { default as EmListItemIcon } from './EmListItemIcon.vue'
+
+export type { EmListItemSubtitleProps } from './EmListItemSubtitle.vue'
+export { default as EmListItemSubtitle } from './EmListItemSubtitle.vue'
+
+export type { EmListItemTitleProps } from './EmListItemTitle.vue'
+export { default as EmListItemTitle } from './EmListItemTitle.vue'
+
+export type { EmListSeparatorProps } from './EmListSeparator.vue'
+export { default as EmListSeparator } from './EmListSeparator.vue'
+
+export type { EmListSubheaderProps } from './EmListSubheader.vue'
+export { default as EmListSubheader } from './EmListSubheader.vue'
diff --git a/packages/emerald/src/components/EmLoading/EmLoading.vue b/packages/emerald/src/components/EmLoading/EmLoading.vue
new file mode 100644
index 000000000..979870c2f
--- /dev/null
+++ b/packages/emerald/src/components/EmLoading/EmLoading.vue
@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmLoadingSize = 'sm' | 'md' | 'lg'
+
+  export interface EmLoadingProps extends V0PaperProps {
+    size?: EmLoadingSize
+    label?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmLoading' })
+
+  const { size = 'md', label } = defineProps<EmLoadingProps>()
+</script>
+
+<template>
+  <V0Paper
+    :aria-label="label"
+    aria-live="polite"
+    as="div"
+    class="emerald-loading"
+    :data-size="size"
+    role="status"
+  >
+    <span aria-hidden="true" class="emerald-loading__spinner" />
+
+    <span v-if="$slots.default" class="emerald-loading__label">
+      <slot />
+    </span>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  color: var(--emerald-on-background);
+}
+
+.emerald-loading__spinner {
+  display: inline-block;
+  border-radius: 50%;
+  border: 2px solid rgb(var(--emerald-primary-500-channels) / 0.25);
+  border-top-color: var(--emerald-primary-500);
+  animation: emerald-loading-spin 800ms linear infinite;
+}
+
+.emerald-loading[data-size="sm"] .emerald-loading__spinner {
+  width: 14px;
+  height: 14px;
+  border-width: 2px;
+}
+
+.emerald-loading[data-size="md"] .emerald-loading__spinner {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+.emerald-loading[data-size="lg"] .emerald-loading__spinner {
+  width: 28px;
+  height: 28px;
+  border-width: 3px;
+}
+
+@keyframes emerald-loading-spin {
+  to { transform: rotate(360deg); }
+}
+</style>
diff --git a/packages/emerald/src/components/EmLoading/index.ts b/packages/emerald/src/components/EmLoading/index.ts
new file mode 100644
index 000000000..7d0f67d4a
--- /dev/null
+++ b/packages/emerald/src/components/EmLoading/index.ts
@@ -0,0 +1,2 @@
+export { default as EmLoading } from './EmLoading.vue'
+export type { EmLoadingProps } from './EmLoading.vue'
diff --git a/packages/emerald/src/components/EmMenu/EmMenu.vue b/packages/emerald/src/components/EmMenu/EmMenu.vue
new file mode 100644
index 000000000..0c9cf15e2
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/EmMenu.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+  // Framework
+  import { PopoverRoot } from '@vuetify/v0'
+
+  export interface EmMenuProps {
+    id?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmMenu' })
+
+  const { id } = defineProps<EmMenuProps>()
+
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <PopoverRoot
+    :id
+    v-model="model"
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PopoverRoot>
+</template>
diff --git a/packages/emerald/src/components/EmMenu/EmMenuActivator.vue b/packages/emerald/src/components/EmMenu/EmMenuActivator.vue
new file mode 100644
index 000000000..33c083c6c
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/EmMenuActivator.vue
@@ -0,0 +1,18 @@
+<script lang="ts">
+  // Framework
+  import { PopoverActivator } from '@vuetify/v0'
+
+  export interface EmMenuActivatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmMenuActivator' })
+</script>
+
+<template>
+  <PopoverActivator class="emerald-menu__activator">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PopoverActivator>
+</template>
diff --git a/packages/emerald/src/components/EmMenu/EmMenuContent.vue b/packages/emerald/src/components/EmMenu/EmMenuContent.vue
new file mode 100644
index 000000000..a6301da79
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/EmMenuContent.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { PopoverContent } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmMenuContentProps extends V0PaperProps {
+    positionArea?: string
+    positionTry?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmMenuContent' })
+
+  const {
+    positionArea,
+    positionTry,
+    ...paperProps
+  } = defineProps<EmMenuContentProps>()
+</script>
+
+<template>
+  <PopoverContent
+    class="emerald-menu__popover"
+    :position-area
+    :position-try
+  >
+    <V0Paper
+      v-bind="paperProps"
+      as="div"
+      class="emerald-menu__content"
+      role="menu"
+    >
+      <slot />
+    </V0Paper>
+  </PopoverContent>
+</template>
+
+<style>
+.emerald-menu__popover {
+  padding: 0;
+  margin: 4px 0 0;
+  background: transparent;
+  border: 0;
+  overflow: visible;
+}
+
+.emerald-menu__popover::backdrop {
+  background: transparent;
+}
+
+.emerald-menu__content {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 176px;
+  padding: 8px;
+  background: #ffffff;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 12px;
+  box-shadow:
+    0 3px 6px 0 rgba(5, 0, 18, 0.09),
+    0 8px 20px 0 rgba(5, 0, 18, 0.13);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--emerald-primary-950);
+}
+</style>
diff --git a/packages/emerald/src/components/EmMenu/EmMenuItem.vue b/packages/emerald/src/components/EmMenu/EmMenuItem.vue
new file mode 100644
index 000000000..5f174fc69
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/EmMenuItem.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+  export interface EmMenuItemProps {
+    disabled?: boolean
+    active?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmMenuItem' })
+
+  const { disabled = false, active = false } = defineProps<EmMenuItemProps>()
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  function onClick (event: MouseEvent) {
+    if (disabled) return
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <button
+    :aria-disabled="disabled || undefined"
+    class="emerald-menu__item"
+    :data-active="active || undefined"
+    :data-disabled="disabled || undefined"
+    :disabled="disabled || undefined"
+    role="menuitem"
+    type="button"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
+
+<style>
+.emerald-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  border-left: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 0 6px 6px 0;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--emerald-primary-950);
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.emerald-menu__item:hover:not([data-disabled]):not([data-active]) {
+  background: var(--emerald-primary-50);
+}
+
+.emerald-menu__item[data-active] {
+  background: var(--emerald-primary-100);
+  border-left-color: var(--emerald-primary-500);
+  color: var(--emerald-primary-500);
+  font-weight: 500;
+}
+
+.emerald-menu__item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.emerald-menu__item:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: -2px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmMenu/EmMenuLabel.vue b/packages/emerald/src/components/EmMenu/EmMenuLabel.vue
new file mode 100644
index 000000000..d15488984
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/EmMenuLabel.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+  export interface EmMenuLabelProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmMenuLabel' })
+</script>
+
+<template>
+  <div class="emerald-menu__label" role="presentation">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-menu__label {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 8px 12px 8px 0;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--emerald-primary-950);
+  opacity: 0.7;
+  user-select: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmMenu/EmMenuSeparator.vue b/packages/emerald/src/components/EmMenu/EmMenuSeparator.vue
new file mode 100644
index 000000000..e74ee19a4
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/EmMenuSeparator.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+  export interface EmMenuSeparatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmMenuSeparator' })
+</script>
+
+<template>
+  <div class="emerald-menu__separator-wrapper">
+    <div
+      aria-orientation="horizontal"
+      class="emerald-menu__separator"
+      role="separator"
+    />
+  </div>
+</template>
+
+<style>
+.emerald-menu__separator-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+}
+
+.emerald-menu__separator {
+  flex: 1;
+  height: 0.5px;
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+}
+</style>
diff --git a/packages/emerald/src/components/EmMenu/index.ts b/packages/emerald/src/components/EmMenu/index.ts
new file mode 100644
index 000000000..34860c7c6
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/index.ts
@@ -0,0 +1,17 @@
+export type { EmMenuProps } from './EmMenu.vue'
+export { default as EmMenu } from './EmMenu.vue'
+
+export type { EmMenuActivatorProps } from './EmMenuActivator.vue'
+export { default as EmMenuActivator } from './EmMenuActivator.vue'
+
+export type { EmMenuContentProps } from './EmMenuContent.vue'
+export { default as EmMenuContent } from './EmMenuContent.vue'
+
+export type { EmMenuItemProps } from './EmMenuItem.vue'
+export { default as EmMenuItem } from './EmMenuItem.vue'
+
+export type { EmMenuLabelProps } from './EmMenuLabel.vue'
+export { default as EmMenuLabel } from './EmMenuLabel.vue'
+
+export type { EmMenuSeparatorProps } from './EmMenuSeparator.vue'
+export { default as EmMenuSeparator } from './EmMenuSeparator.vue'
diff --git a/packages/emerald/src/components/EmPagination/EmPagination.vue b/packages/emerald/src/components/EmPagination/EmPagination.vue
new file mode 100644
index 000000000..8d8ad4143
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPagination.vue
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { PaginationRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmPaginationProps extends V0PaperProps {
+    size?: number
+    totalVisible?: number
+    itemsPerPage?: number
+    ellipsis?: string | false
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPagination' })
+
+  const {
+    size = 1,
+    totalVisible,
+    itemsPerPage = 10,
+    ellipsis = '…',
+    ...paperProps
+  } = defineProps<EmPaginationProps>()
+
+  const page = defineModel<number>({ default: 1 })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="nav"
+    class="emerald-pagination"
+  >
+    <PaginationRoot
+      v-model="page"
+      :ellipsis
+      :items-per-page
+      :size
+      :total-visible
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </PaginationRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-pagination {
+  width: fit-content;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--emerald-on-background, #1a1230);
+}
+
+.emerald-pagination > nav,
+.emerald-pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+}
+
+.emerald-pagination__prev,
+.emerald-pagination__next {
+  margin: 0 8px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/EmPaginationEllipsis.vue b/packages/emerald/src/components/EmPagination/EmPaginationEllipsis.vue
new file mode 100644
index 000000000..d93b7ad58
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPaginationEllipsis.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+  // Framework
+  import { PaginationEllipsis } from '@vuetify/v0'
+
+  export interface EmPaginationEllipsisProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPaginationEllipsis' })
+</script>
+
+<template>
+  <PaginationEllipsis class="emerald-pagination__ellipsis">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PaginationEllipsis>
+</template>
+
+<style>
+.emerald-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 8px;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.7);
+  user-select: none;
+}
+
+.emerald-pagination__ellipsis > * {
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/EmPaginationFirst.vue b/packages/emerald/src/components/EmPagination/EmPaginationFirst.vue
new file mode 100644
index 000000000..d9b639668
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPaginationFirst.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+  // Framework
+  import { PaginationFirst } from '@vuetify/v0'
+
+  export interface EmPaginationFirstProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPaginationFirst' })
+</script>
+
+<template>
+  <PaginationFirst class="emerald-pagination__first">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PaginationFirst>
+</template>
+
+<style>
+.emerald-pagination__first {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.emerald-pagination__first > * {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-pagination__first:hover:not([aria-disabled="true"]) {
+  background: rgb(var(--emerald-primary-500-channels) / 0.08);
+}
+
+.emerald-pagination__first:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-pagination__first[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/EmPaginationItem.vue b/packages/emerald/src/components/EmPagination/EmPaginationItem.vue
new file mode 100644
index 000000000..605c3cd29
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPaginationItem.vue
@@ -0,0 +1,68 @@
+<script lang="ts">
+  // Framework
+  import { PaginationItem } from '@vuetify/v0'
+
+  export interface EmPaginationItemProps {
+    value: number
+    disabled?: boolean
+    id?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPaginationItem' })
+
+  const { value, disabled = false, id } = defineProps<EmPaginationItemProps>()
+</script>
+
+<template>
+  <PaginationItem
+    :id
+    class="emerald-pagination__item"
+    :disabled
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PaginationItem>
+</template>
+
+<style>
+.emerald-pagination__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 6px 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: inherit;
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+
+.emerald-pagination__item[data-selected] {
+  background: var(--emerald-background, #ffffff);
+  border-color: var(--emerald-secondary-500);
+  color: inherit;
+}
+
+.emerald-pagination__item:hover:not([data-disabled]):not([data-selected]) {
+  background: rgb(var(--emerald-primary-500-channels) / 0.08);
+}
+
+.emerald-pagination__item:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-pagination__item[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/EmPaginationLast.vue b/packages/emerald/src/components/EmPagination/EmPaginationLast.vue
new file mode 100644
index 000000000..1d92b6e21
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPaginationLast.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+  // Framework
+  import { PaginationLast } from '@vuetify/v0'
+
+  export interface EmPaginationLastProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPaginationLast' })
+</script>
+
+<template>
+  <PaginationLast class="emerald-pagination__last">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PaginationLast>
+</template>
+
+<style>
+.emerald-pagination__last {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.emerald-pagination__last > * {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-pagination__last:hover:not([aria-disabled="true"]) {
+  background: rgb(var(--emerald-primary-500-channels) / 0.08);
+}
+
+.emerald-pagination__last:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-pagination__last[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/EmPaginationNext.vue b/packages/emerald/src/components/EmPagination/EmPaginationNext.vue
new file mode 100644
index 000000000..69fbeb240
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPaginationNext.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+  // Framework
+  import { PaginationNext } from '@vuetify/v0'
+
+  export interface EmPaginationNextProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPaginationNext' })
+</script>
+
+<template>
+  <PaginationNext class="emerald-pagination__next">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PaginationNext>
+</template>
+
+<style>
+.emerald-pagination__next {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.emerald-pagination__next > * {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-pagination__next:hover:not([aria-disabled="true"]) {
+  background: rgb(var(--emerald-primary-500-channels) / 0.08);
+}
+
+.emerald-pagination__next:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-pagination__next[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/EmPaginationPrev.vue b/packages/emerald/src/components/EmPagination/EmPaginationPrev.vue
new file mode 100644
index 000000000..2049313b3
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPaginationPrev.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+  // Framework
+  import { PaginationPrev } from '@vuetify/v0'
+
+  export interface EmPaginationPrevProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPaginationPrev' })
+</script>
+
+<template>
+  <PaginationPrev class="emerald-pagination__prev">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PaginationPrev>
+</template>
+
+<style>
+.emerald-pagination__prev {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.emerald-pagination__prev > * {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-pagination__prev:hover:not([aria-disabled="true"]) {
+  background: rgb(var(--emerald-primary-500-channels) / 0.08);
+}
+
+.emerald-pagination__prev:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-pagination__prev[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/index.ts b/packages/emerald/src/components/EmPagination/index.ts
new file mode 100644
index 000000000..77cd549c8
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/index.ts
@@ -0,0 +1,20 @@
+export type { EmPaginationProps } from './EmPagination.vue'
+export { default as EmPagination } from './EmPagination.vue'
+
+export type { EmPaginationEllipsisProps } from './EmPaginationEllipsis.vue'
+export { default as EmPaginationEllipsis } from './EmPaginationEllipsis.vue'
+
+export type { EmPaginationFirstProps } from './EmPaginationFirst.vue'
+export { default as EmPaginationFirst } from './EmPaginationFirst.vue'
+
+export type { EmPaginationItemProps } from './EmPaginationItem.vue'
+export { default as EmPaginationItem } from './EmPaginationItem.vue'
+
+export type { EmPaginationLastProps } from './EmPaginationLast.vue'
+export { default as EmPaginationLast } from './EmPaginationLast.vue'
+
+export type { EmPaginationNextProps } from './EmPaginationNext.vue'
+export { default as EmPaginationNext } from './EmPaginationNext.vue'
+
+export type { EmPaginationPrevProps } from './EmPaginationPrev.vue'
+export { default as EmPaginationPrev } from './EmPaginationPrev.vue'
diff --git a/packages/emerald/src/components/EmProgress/EmProgress.vue b/packages/emerald/src/components/EmProgress/EmProgress.vue
new file mode 100644
index 000000000..eb23df255
--- /dev/null
+++ b/packages/emerald/src/components/EmProgress/EmProgress.vue
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmProgressSize = 'sm' | 'md'
+
+  export interface EmProgressProps extends V0PaperProps {
+    value?: number
+    min?: number
+    max?: number
+    size?: EmProgressSize
+    indeterminate?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'EmProgress' })
+
+  const {
+    value = 0,
+    min = 0,
+    max = 100,
+    size = 'sm',
+    indeterminate = false,
+    ...paperProps
+  } = defineProps<EmProgressProps>()
+
+  const percent = toRef(() => {
+    const span = max - min
+    if (span <= 0) return 0
+    return Math.min(100, Math.max(0, ((value - min) / span) * 100))
+  })
+
+  const style = toRef(() => ({
+    '--emerald-progress-percent': `${percent.value}%`,
+  } as Record<string, string>))
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    :aria-valuemax="max"
+    :aria-valuemin="min"
+    :aria-valuenow="indeterminate ? undefined : value"
+    as="div"
+    class="emerald-progress"
+    :data-indeterminate="indeterminate || undefined"
+    :data-size="size"
+    role="progressbar"
+    :style
+  >
+    <slot :percent :value />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-progress {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 205px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  flex-wrap: nowrap;
+}
+</style>
diff --git a/packages/emerald/src/components/EmProgress/EmProgressFill.vue b/packages/emerald/src/components/EmProgress/EmProgressFill.vue
new file mode 100644
index 000000000..70f8d7a8a
--- /dev/null
+++ b/packages/emerald/src/components/EmProgress/EmProgressFill.vue
@@ -0,0 +1,52 @@
+<script lang="ts">
+  export interface EmProgressFillProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmProgressFill' })
+</script>
+
+<template>
+  <div class="emerald-progress__fill">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-progress__fill {
+  position: absolute;
+  top: -0.5px;
+  bottom: -0.5px;
+  left: -0.5px;
+  width: var(--emerald-progress-percent, 0%);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-radius: 999px;
+  border: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  background: var(--emerald-secondary-200, #dce4e9);
+  box-shadow: 0 1px 2px 0 rgba(5, 0, 18, 0.05);
+  transition: width 200ms ease;
+}
+
+.emerald-progress[data-size="md"] .emerald-progress__fill {
+  top: 1.5px;
+  bottom: 1.5px;
+  left: 1.5px;
+  width: calc(var(--emerald-progress-percent, 0%) - 3px);
+  overflow: clip;
+  border: none;
+  box-shadow: none;
+  padding-right: 6px;
+}
+
+.emerald-progress[data-indeterminate] .emerald-progress__fill {
+  width: 40% !important;
+  animation: emerald-progress-indeterminate 1.2s linear infinite;
+}
+
+@keyframes emerald-progress-indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(250%); }
+}
+</style>
diff --git a/packages/emerald/src/components/EmProgress/EmProgressTrack.vue b/packages/emerald/src/components/EmProgress/EmProgressTrack.vue
new file mode 100644
index 000000000..3bd74aa57
--- /dev/null
+++ b/packages/emerald/src/components/EmProgress/EmProgressTrack.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+  export interface EmProgressTrackProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmProgressTrack' })
+</script>
+
+<template>
+  <div class="emerald-progress__track">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-progress__track {
+  position: relative;
+  flex: 1 1 auto;
+  width: 100%;
+  overflow: clip;
+  border-radius: 999px;
+  border: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  background: var(--emerald-secondary-50, #f4f7f9);
+}
+
+.emerald-progress[data-size="md"] .emerald-progress__track {
+  height: 16px;
+  background: #ffffff;
+}
+
+.emerald-progress[data-size="sm"] .emerald-progress__track {
+  height: 8px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmProgress/EmProgressValue.vue b/packages/emerald/src/components/EmProgress/EmProgressValue.vue
new file mode 100644
index 000000000..f5cd78abc
--- /dev/null
+++ b/packages/emerald/src/components/EmProgress/EmProgressValue.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+  export interface EmProgressValueProps {
+    inside?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmProgressValue' })
+
+  const { inside = false } = defineProps<EmProgressValueProps>()
+</script>
+
+<template>
+  <span
+    class="emerald-progress__value"
+    :data-inside="inside || undefined"
+  >
+    <slot />
+  </span>
+</template>
+
+<style>
+.emerald-progress__value {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 10px;
+  color: var(--emerald-secondary-500, #94a3b8);
+  white-space: nowrap;
+  padding-inline: 2px;
+}
+
+.emerald-progress__value[data-inside] {
+  color: var(--emerald-secondary-700, #6f7a93);
+}
+</style>
diff --git a/packages/emerald/src/components/EmProgress/index.ts b/packages/emerald/src/components/EmProgress/index.ts
new file mode 100644
index 000000000..17ad0c52d
--- /dev/null
+++ b/packages/emerald/src/components/EmProgress/index.ts
@@ -0,0 +1,11 @@
+export type { EmProgressProps, EmProgressSize } from './EmProgress.vue'
+export { default as EmProgress } from './EmProgress.vue'
+
+export type { EmProgressFillProps } from './EmProgressFill.vue'
+export { default as EmProgressFill } from './EmProgressFill.vue'
+
+export type { EmProgressTrackProps } from './EmProgressTrack.vue'
+export { default as EmProgressTrack } from './EmProgressTrack.vue'
+
+export type { EmProgressValueProps } from './EmProgressValue.vue'
+export { default as EmProgressValue } from './EmProgressValue.vue'
diff --git a/packages/emerald/src/components/EmRadio/EmRadio.vue b/packages/emerald/src/components/EmRadio/EmRadio.vue
new file mode 100644
index 000000000..53d9496cc
--- /dev/null
+++ b/packages/emerald/src/components/EmRadio/EmRadio.vue
@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { RadioRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export type EmRadioSize = 'sm' | 'md' | 'lg'
+
+  export interface EmRadioProps extends V0PaperProps {
+    disabled?: MaybeRefOrGetter<boolean>
+    name?: string
+    value?: unknown
+    label?: string
+    size?: EmRadioSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmRadio' })
+
+  const {
+    disabled = false,
+    name,
+    value,
+    label,
+    size = 'md',
+    ...paperProps
+  } = defineProps<EmRadioProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="label"
+    class="emerald-radio"
+    :data-disabled="disabled || undefined"
+    :data-size="size"
+  >
+    <RadioRoot
+      as="span"
+      class="emerald-radio__root"
+      :disabled
+      :label
+      :name
+      :value
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </RadioRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: var(--emerald-on-background);
+  font-size: 14px;
+  line-height: 1.4;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 999px;
+  padding: 2px 8px 2px 2px;
+  transition: box-shadow 120ms ease;
+}
+
+.emerald-radio[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.emerald-radio__root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  flex-shrink: 0;
+}
+
+/* Focus ring on the whole label (control + text) */
+.emerald-radio:has(.emerald-radio__root:focus-visible) {
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.35);
+}
+</style>
diff --git a/packages/emerald/src/components/EmRadio/EmRadioGroup.vue b/packages/emerald/src/components/EmRadio/EmRadioGroup.vue
new file mode 100644
index 000000000..6dcbb8113
--- /dev/null
+++ b/packages/emerald/src/components/EmRadio/EmRadioGroup.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+  // Framework
+  import { RadioGroup } from '@vuetify/v0'
+
+  export interface EmRadioGroupProps {
+    disabled?: boolean
+    mandatory?: boolean | 'force'
+    label?: string
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmRadioGroup' })
+
+  const {
+    disabled = false,
+    mandatory = false,
+    label,
+    name,
+  } = defineProps<EmRadioGroupProps>()
+
+  const model = defineModel<unknown>()
+</script>
+
+<template>
+  <RadioGroup
+    v-model="model"
+    class="emerald-radio-group"
+    :disabled
+    :label
+    :mandatory
+    :name
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </RadioGroup>
+</template>
+
+<style>
+.emerald-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmRadio/EmRadioIndicator.vue b/packages/emerald/src/components/EmRadio/EmRadioIndicator.vue
new file mode 100644
index 000000000..8cd07546c
--- /dev/null
+++ b/packages/emerald/src/components/EmRadio/EmRadioIndicator.vue
@@ -0,0 +1,111 @@
+<script lang="ts">
+  // Framework
+  import { RadioIndicator, useRadioRoot } from '@vuetify/v0'
+
+  export interface EmRadioIndicatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmRadioIndicator' })
+
+  const root = useRadioRoot('v0:radio:root')
+</script>
+
+<template>
+  <span
+    aria-hidden="true"
+    class="emerald-radio__box"
+    :data-disabled="root.isDisabled.value || undefined"
+    :data-state="root.isChecked.value ? 'checked' : 'unchecked'"
+  >
+    <RadioIndicator class="emerald-radio__indicator">
+      <template #default>
+        <span class="emerald-radio__dot" />
+      </template>
+    </RadioIndicator>
+  </span>
+</template>
+
+<style>
+.emerald-radio__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.25);
+  border-radius: 50%;
+  background: transparent;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  flex-shrink: 0;
+}
+
+.emerald-radio[data-size="sm"] .emerald-radio__box {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-radio[data-size="lg"] .emerald-radio__box {
+  width: 24px;
+  height: 24px;
+}
+
+.emerald-radio:hover .emerald-radio__box[data-state="unchecked"]:not([data-disabled]) {
+  border-color: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.5);
+}
+
+.emerald-radio__box[data-state="checked"] {
+  border: 2px solid var(--emerald-primary-500, #7c5cf6);
+}
+
+.emerald-radio:hover .emerald-radio__box[data-state="checked"]:not([data-disabled]) {
+  border-color: var(--emerald-primary-700, #5f3aed);
+}
+
+.emerald-radio__box[data-disabled] {
+  background: transparent;
+  border-color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.15);
+  box-shadow: none;
+}
+
+.emerald-radio__box[data-disabled][data-state="checked"] {
+  border-color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.25);
+}
+
+.emerald-radio__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.emerald-radio__dot {
+  display: block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--emerald-primary-500, #7c5cf6);
+}
+
+.emerald-radio[data-size="sm"] .emerald-radio__dot {
+  width: 8px;
+  height: 8px;
+}
+
+.emerald-radio[data-size="lg"] .emerald-radio__dot {
+  width: 12px;
+  height: 12px;
+}
+
+.emerald-radio:hover .emerald-radio__box[data-state="checked"]:not([data-disabled]) .emerald-radio__dot {
+  background: var(--emerald-primary-600, #5f3aed);
+}
+
+.emerald-radio__box[data-disabled] .emerald-radio__dot {
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.3);
+}
+</style>
diff --git a/packages/emerald/src/components/EmRadio/index.ts b/packages/emerald/src/components/EmRadio/index.ts
new file mode 100644
index 000000000..63fa9e44f
--- /dev/null
+++ b/packages/emerald/src/components/EmRadio/index.ts
@@ -0,0 +1,8 @@
+export type { EmRadioProps } from './EmRadio.vue'
+export { default as EmRadio } from './EmRadio.vue'
+
+export type { EmRadioGroupProps } from './EmRadioGroup.vue'
+export { default as EmRadioGroup } from './EmRadioGroup.vue'
+
+export type { EmRadioIndicatorProps } from './EmRadioIndicator.vue'
+export { default as EmRadioIndicator } from './EmRadioIndicator.vue'
diff --git a/packages/emerald/src/components/EmSelect/EmSelect.vue b/packages/emerald/src/components/EmSelect/EmSelect.vue
new file mode 100644
index 000000000..c9f1c850f
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/EmSelect.vue
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { SelectRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { ID } from '@vuetify/v0'
+
+  export interface EmSelectProps extends V0PaperProps {
+    disabled?: boolean
+    multiple?: boolean
+    mandatory?: boolean | 'force'
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSelect' })
+
+  const {
+    disabled = false,
+    multiple = false,
+    mandatory = false,
+    name,
+    ...paperProps
+  } = defineProps<EmSelectProps>()
+
+  const model = defineModel<ID | ID[] | undefined>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-select"
+    :data-disabled="disabled || undefined"
+  >
+    <SelectRoot
+      v-model="model"
+      :disabled
+      :mandatory
+      :multiple
+      :name
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </SelectRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-select {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0;
+  border-radius: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+}
+
+.emerald-select[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSelect/EmSelectActivator.vue b/packages/emerald/src/components/EmSelect/EmSelectActivator.vue
new file mode 100644
index 000000000..d4a144c65
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/EmSelectActivator.vue
@@ -0,0 +1,61 @@
+<script lang="ts">
+  // Framework
+  import { SelectActivator } from '@vuetify/v0'
+
+  export interface EmSelectActivatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSelectActivator' })
+</script>
+
+<template>
+  <SelectActivator class="emerald-select__activator">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SelectActivator>
+</template>
+
+<style>
+.emerald-select__activator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 4px;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+  cursor: pointer;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.emerald-select__activator:hover:not([data-select-open]) {
+  border-color: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.3);
+  box-shadow:
+    0 1px 3px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.12),
+    0 1px 5px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.2);
+}
+
+.emerald-select__activator:focus-visible,
+.emerald-select__activator[data-select-open] {
+  outline: none;
+  border-color: var(--emerald-primary-500);
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels) / 0.12);
+}
+
+.emerald-select__activator[data-select-open] > svg:last-child {
+  transform: rotate(180deg);
+  transition: transform 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+.emerald-select__activator > svg:last-child {
+  transition: transform 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+</style>
diff --git a/packages/emerald/src/components/EmSelect/EmSelectContent.vue b/packages/emerald/src/components/EmSelect/EmSelectContent.vue
new file mode 100644
index 000000000..a46d4067f
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/EmSelectContent.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+  // Framework
+  import { SelectContent } from '@vuetify/v0'
+
+  export interface EmSelectContentProps {
+    eager?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSelectContent' })
+
+  const { eager = false } = defineProps<EmSelectContentProps>()
+</script>
+
+<template>
+  <SelectContent class="emerald-select__content" :eager>
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SelectContent>
+</template>
+
+<style>
+.emerald-select__content {
+  flex-direction: column;
+  align-items: stretch;
+  width: anchor-size(width);
+  padding: 8px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow:
+    0 2px 4px rgba(5, 0, 18, 0.1),
+    0 3px 8px rgba(5, 0, 18, 0.13);
+  margin-top: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition-property: opacity, transform, overlay, display;
+  transition-duration: 180ms;
+  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+  transition-behavior: allow-discrete;
+}
+
+.emerald-select__content:popover-open {
+  display: flex;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@starting-style {
+  .emerald-select__content:popover-open {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+</style>
diff --git a/packages/emerald/src/components/EmSelect/EmSelectItem.vue b/packages/emerald/src/components/EmSelect/EmSelectItem.vue
new file mode 100644
index 000000000..dd49cd4bd
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/EmSelectItem.vue
@@ -0,0 +1,69 @@
+<script lang="ts">
+  // Framework
+  import { SelectItem } from '@vuetify/v0'
+
+  // Types
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export interface EmSelectItemProps {
+    value?: unknown
+    disabled?: MaybeRefOrGetter<boolean>
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSelectItem' })
+
+  const { value, disabled = false } = defineProps<EmSelectItemProps>()
+</script>
+
+<template>
+  <SelectItem
+    class="emerald-select__item"
+    :disabled
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SelectItem>
+</template>
+
+<style>
+.emerald-select__item {
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 8px 12px;
+  border-left: 1px solid transparent;
+  border-radius: 0 6px 6px 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--emerald-primary-950);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.emerald-select__item[data-focused],
+.emerald-select__item:hover {
+  background: var(--emerald-primary-100);
+  border-left-color: var(--emerald-primary-500);
+  color: var(--emerald-primary-500);
+  font-weight: 500;
+}
+
+.emerald-select__item[data-selected] {
+  background: var(--emerald-primary-100);
+  border-left-color: var(--emerald-primary-500);
+  color: var(--emerald-primary-500);
+  font-weight: 500;
+}
+
+.emerald-select__item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSelect/EmSelectPlaceholder.vue b/packages/emerald/src/components/EmSelect/EmSelectPlaceholder.vue
new file mode 100644
index 000000000..67c7ecfbb
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/EmSelectPlaceholder.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+  // Framework
+  import { SelectPlaceholder } from '@vuetify/v0'
+
+  export interface EmSelectPlaceholderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSelectPlaceholder' })
+</script>
+
+<template>
+  <SelectPlaceholder class="emerald-select__placeholder">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SelectPlaceholder>
+</template>
+
+<style>
+.emerald-select__placeholder {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+  opacity: 0.3;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSelect/EmSelectValue.vue b/packages/emerald/src/components/EmSelect/EmSelectValue.vue
new file mode 100644
index 000000000..f721a1bac
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/EmSelectValue.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+  // Framework
+  import { SelectValue } from '@vuetify/v0'
+
+  export interface EmSelectValueProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSelectValue' })
+</script>
+
+<template>
+  <SelectValue class="emerald-select__value">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SelectValue>
+</template>
+
+<style>
+.emerald-select__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSelect/index.ts b/packages/emerald/src/components/EmSelect/index.ts
new file mode 100644
index 000000000..19e496a34
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/index.ts
@@ -0,0 +1,17 @@
+export type { EmSelectProps } from './EmSelect.vue'
+export { default as EmSelect } from './EmSelect.vue'
+
+export type { EmSelectActivatorProps } from './EmSelectActivator.vue'
+export { default as EmSelectActivator } from './EmSelectActivator.vue'
+
+export type { EmSelectContentProps } from './EmSelectContent.vue'
+export { default as EmSelectContent } from './EmSelectContent.vue'
+
+export type { EmSelectItemProps } from './EmSelectItem.vue'
+export { default as EmSelectItem } from './EmSelectItem.vue'
+
+export type { EmSelectPlaceholderProps } from './EmSelectPlaceholder.vue'
+export { default as EmSelectPlaceholder } from './EmSelectPlaceholder.vue'
+
+export type { EmSelectValueProps } from './EmSelectValue.vue'
+export { default as EmSelectValue } from './EmSelectValue.vue'
diff --git a/packages/emerald/src/components/EmSlider/EmSlider.vue b/packages/emerald/src/components/EmSlider/EmSlider.vue
new file mode 100644
index 000000000..1f0811e8f
--- /dev/null
+++ b/packages/emerald/src/components/EmSlider/EmSlider.vue
@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { SliderRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export type EmSliderOrientation = 'horizontal' | 'vertical'
+
+  export interface EmSliderProps extends V0PaperProps {
+    disabled?: MaybeRefOrGetter<boolean>
+    readonly?: MaybeRefOrGetter<boolean>
+    min?: number
+    max?: number
+    step?: number
+    orientation?: EmSliderOrientation
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSlider' })
+
+  const {
+    disabled = false,
+    readonly: _readonly = false,
+    min = 0,
+    max = 100,
+    step = 1,
+    orientation = 'horizontal',
+    name,
+    ...paperProps
+  } = defineProps<EmSliderProps>()
+
+  const model = defineModel<number | number[]>({ default: 0 })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-slider"
+    :data-orientation="orientation"
+  >
+    <SliderRoot
+      v-model="model"
+      :disabled
+      :max
+      :min
+      :name
+      :orientation
+      :readonly="_readonly"
+      :step
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </SliderRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-slider {
+  position: relative;
+  width: 205px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+}
+
+.emerald-slider > [data-orientation="horizontal"] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.emerald-slider[data-orientation="vertical"] {
+  width: auto;
+  height: 100%;
+}
+
+.emerald-slider > [data-orientation="vertical"] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSlider/EmSliderRange.vue b/packages/emerald/src/components/EmSlider/EmSliderRange.vue
new file mode 100644
index 000000000..926519ffd
--- /dev/null
+++ b/packages/emerald/src/components/EmSlider/EmSliderRange.vue
@@ -0,0 +1,42 @@
+<script lang="ts">
+  // Framework
+  import { SliderRange } from '@vuetify/v0'
+
+  export interface EmSliderRangeProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSliderRange' })
+</script>
+
+<template>
+  <SliderRange class="emerald-slider__range">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SliderRange>
+</template>
+
+<style>
+.emerald-slider__range {
+  position: absolute;
+  top: -0.5px;
+  bottom: -0.5px;
+  border-radius: 999px;
+  border: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  background: var(--emerald-secondary-200, #dce4e9);
+  box-shadow: 0 1px 2px 0 rgba(5, 0, 18, 0.05);
+}
+
+.emerald-slider[data-orientation="vertical"] .emerald-slider__range {
+  top: auto;
+  bottom: 0;
+  left: -0.5px;
+  right: -0.5px;
+  height: auto;
+}
+
+.emerald-slider__range[data-disabled] {
+  opacity: 0.6;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSlider/EmSliderThumb.vue b/packages/emerald/src/components/EmSlider/EmSliderThumb.vue
new file mode 100644
index 000000000..f0daef033
--- /dev/null
+++ b/packages/emerald/src/components/EmSlider/EmSliderThumb.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+  // Framework
+  import { SliderThumb } from '@vuetify/v0'
+
+  export interface EmSliderThumbProps {
+    ariaLabel?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSliderThumb' })
+
+  const { ariaLabel } = defineProps<EmSliderThumbProps>()
+</script>
+
+<template>
+  <SliderThumb :aria-label class="emerald-slider__thumb">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SliderThumb>
+</template>
+
+<style>
+.emerald-slider__thumb {
+  position: absolute;
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #ffffff;
+  box-shadow:
+    0 1px 3px 0 rgba(5, 0, 18, 0.12),
+    0 1px 5px 0 rgba(5, 0, 18, 0.2);
+  cursor: grab;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  z-index: 1;
+}
+
+.emerald-slider[data-orientation="vertical"] .emerald-slider__thumb {
+  top: auto;
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+.emerald-slider__thumb:focus-visible {
+  outline: 2px solid var(--emerald-primary-500, #3b82f6);
+  outline-offset: 2px;
+}
+
+.emerald-slider__thumb[data-state="dragging"] {
+  cursor: grabbing;
+}
+
+.emerald-slider__thumb[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSlider/EmSliderTrack.vue b/packages/emerald/src/components/EmSlider/EmSliderTrack.vue
new file mode 100644
index 000000000..ff8647a05
--- /dev/null
+++ b/packages/emerald/src/components/EmSlider/EmSliderTrack.vue
@@ -0,0 +1,42 @@
+<script lang="ts">
+  // Framework
+  import { SliderTrack } from '@vuetify/v0'
+
+  export interface EmSliderTrackProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSliderTrack' })
+</script>
+
+<template>
+  <SliderTrack class="emerald-slider__track">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SliderTrack>
+</template>
+
+<style>
+.emerald-slider__track {
+  position: relative;
+  flex: 1 1 auto;
+  height: 12px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 999px;
+  border: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  background: var(--emerald-secondary-50, #f4f7f9);
+  cursor: pointer;
+}
+
+.emerald-slider[data-orientation="vertical"] .emerald-slider__track {
+  width: 12px;
+  height: 100%;
+}
+
+.emerald-slider__track[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSlider/index.ts b/packages/emerald/src/components/EmSlider/index.ts
new file mode 100644
index 000000000..9f7b823d3
--- /dev/null
+++ b/packages/emerald/src/components/EmSlider/index.ts
@@ -0,0 +1,11 @@
+export type { EmSliderProps } from './EmSlider.vue'
+export { default as EmSlider } from './EmSlider.vue'
+
+export type { EmSliderRangeProps } from './EmSliderRange.vue'
+export { default as EmSliderRange } from './EmSliderRange.vue'
+
+export type { EmSliderThumbProps } from './EmSliderThumb.vue'
+export { default as EmSliderThumb } from './EmSliderThumb.vue'
+
+export type { EmSliderTrackProps } from './EmSliderTrack.vue'
+export { default as EmSliderTrack } from './EmSliderTrack.vue'
diff --git a/packages/emerald/src/components/EmStepper/EmStepper.vue b/packages/emerald/src/components/EmStepper/EmStepper.vue
new file mode 100644
index 000000000..6f11aaccf
--- /dev/null
+++ b/packages/emerald/src/components/EmStepper/EmStepper.vue
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { StepRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmStepperProps extends V0PaperProps {
+    disabled?: boolean
+    enroll?: boolean
+    mandatory?: boolean | 'force'
+  }
+</script>
+
+<script setup lang="ts" generic="T">
+  defineOptions({ name: 'EmStepper' })
+
+  const {
+    disabled = false,
+    enroll = false,
+    mandatory = false,
+    ...paperProps
+  } = defineProps<EmStepperProps>()
+
+  const model = defineModel<T>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-stepper"
+    :data-disabled="disabled || undefined"
+  >
+    <StepRoot
+      v-model="model"
+      :disabled
+      :enroll
+      :mandatory
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </StepRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: var(--emerald-on-background, #2d3139);
+}
+
+.emerald-stepper[data-disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmStepper/EmStepperItem.vue b/packages/emerald/src/components/EmStepper/EmStepperItem.vue
new file mode 100644
index 000000000..cda4346e6
--- /dev/null
+++ b/packages/emerald/src/components/EmStepper/EmStepperItem.vue
@@ -0,0 +1,165 @@
+<script lang="ts">
+  // Framework
+  import { StepItem, useStepRoot } from '@vuetify/v0'
+
+  export interface EmStepperItemProps {
+    id?: string
+    label?: string
+    value?: unknown
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmStepperItem' })
+
+  const {
+    id,
+    label,
+    value,
+    disabled = false,
+  } = defineProps<EmStepperItemProps>()
+
+  const step = useStepRoot('v0:step') as unknown as {
+    get: (id: string) => { index: number } | undefined
+    selectedIndex: { value: number }
+  }
+</script>
+
+<template>
+  <StepItem
+    :id
+    :disabled
+    :label
+    :value
+  >
+    <template #default="slotProps">
+      <div
+        v-bind="slotProps.attrs"
+        class="emerald-stepper__item"
+        :data-completed="(step.selectedIndex.value >= 0 && (step.get(slotProps.id)?.index ?? -1) < step.selectedIndex.value) || undefined"
+        :data-disabled="slotProps.isDisabled || undefined"
+        :data-selected="slotProps.isSelected || undefined"
+      >
+        <span class="emerald-stepper__item-card">
+          <span class="emerald-stepper__item-badge">
+            <slot
+              v-if="(step.selectedIndex.value >= 0 && (step.get(slotProps.id)?.index ?? -1) < step.selectedIndex.value) && $slots.completed"
+              name="completed"
+              v-bind="slotProps"
+            />
+
+            <slot v-else v-bind="slotProps">
+              <span class="emerald-stepper__item-indicator" />
+            </slot>
+          </span>
+        </span>
+
+        <span v-if="$slots.label && slotProps.isSelected" class="emerald-stepper__item-label">
+          <slot name="label" v-bind="slotProps" />
+        </span>
+      </div>
+    </template>
+  </StepItem>
+</template>
+
+<style>
+.emerald-stepper__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+}
+
+.emerald-stepper__item-card {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background: #ffffff;
+  border: 1px solid var(--emerald-secondary-50);
+  border-radius: 6px;
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-secondary-500-channels) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-secondary-500-channels) / 0.09);
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.emerald-stepper__item-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: var(--emerald-secondary-100);
+  border-radius: 4px;
+  color: var(--emerald-neutral-600);
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.emerald-stepper__item-badge svg,
+.emerald-stepper__item-badge :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-stepper__item-indicator {
+  width: 8px;
+  height: 8px;
+  background: currentColor;
+  border-radius: 999px;
+  opacity: 0.6;
+}
+
+.emerald-stepper__item-label {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  color: var(--emerald-neutral-600);
+  font-size: 12px;
+  line-height: normal;
+  white-space: nowrap;
+}
+
+/* Current step — outer ring, stronger border */
+.emerald-stepper__item[data-selected] .emerald-stepper__item-card {
+  border-color: var(--emerald-secondary-500);
+  box-shadow:
+    0 0 0 2px rgb(var(--emerald-secondary-500-channels) / 0.25),
+    0 8px 20px 0 rgb(var(--emerald-secondary-500-channels) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-secondary-500-channels) / 0.09);
+}
+
+/* Completed step — success tint */
+.emerald-stepper__item[data-completed] .emerald-stepper__item-card {
+  border-color: var(--emerald-success-100);
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-success-channels) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-success-channels) / 0.09);
+}
+
+.emerald-stepper__item[data-completed] .emerald-stepper__item-badge {
+  background: transparent;
+  color: var(--emerald-success-600);
+}
+
+.emerald-stepper__item[data-completed] .emerald-stepper__item-card {
+  background: var(--emerald-success-50);
+}
+
+.emerald-stepper__item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.emerald-stepper__item:focus-visible {
+  outline: 2px solid var(--emerald-secondary-500);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmStepper/EmStepperLabel.vue b/packages/emerald/src/components/EmStepper/EmStepperLabel.vue
new file mode 100644
index 000000000..b79fb4e3f
--- /dev/null
+++ b/packages/emerald/src/components/EmStepper/EmStepperLabel.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+  export interface EmStepperLabelProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmStepperLabel' })
+</script>
+
+<template>
+  <span class="emerald-stepper__label">
+    <slot />
+  </span>
+</template>
+
+<style>
+.emerald-stepper__label {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  line-height: 1.3;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 700;
+  font-size: 12px;
+  color: var(--emerald-neutral-700, #4b5563);
+}
+</style>
diff --git a/packages/emerald/src/components/EmStepper/EmStepperLabelDescription.vue b/packages/emerald/src/components/EmStepper/EmStepperLabelDescription.vue
new file mode 100644
index 000000000..130b05142
--- /dev/null
+++ b/packages/emerald/src/components/EmStepper/EmStepperLabelDescription.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+  export interface EmStepperLabelDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmStepperLabelDescription' })
+</script>
+
+<template>
+  <span class="emerald-stepper__label-description">
+    <slot />
+  </span>
+</template>
+
+<style>
+.emerald-stepper__label-description {
+  display: block;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  font-size: 11px;
+  letter-spacing: -0.12px;
+  color: var(--emerald-neutral-600);
+  opacity: 0.6;
+}
+</style>
diff --git a/packages/emerald/src/components/EmStepper/EmStepperSeparator.vue b/packages/emerald/src/components/EmStepper/EmStepperSeparator.vue
new file mode 100644
index 000000000..4ba38369d
--- /dev/null
+++ b/packages/emerald/src/components/EmStepper/EmStepperSeparator.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+  export interface EmStepperSeparatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmStepperSeparator' })
+</script>
+
+<template>
+  <span
+    aria-hidden="true"
+    class="emerald-stepper__separator"
+  />
+</template>
+
+<style>
+.emerald-stepper__separator {
+  height: 2px;
+  width: 64px;
+  border-radius: 8px;
+  background: rgb(var(--emerald-neutral-channels) / 0.1);
+  flex-shrink: 0;
+  transition: background 120ms ease;
+}
+
+/* Separator turns green when it follows a completed step */
+.emerald-stepper__item[data-completed] + .emerald-stepper__separator {
+  background: var(--emerald-success-100);
+}
+</style>
diff --git a/packages/emerald/src/components/EmStepper/index.ts b/packages/emerald/src/components/EmStepper/index.ts
new file mode 100644
index 000000000..d903dbb9c
--- /dev/null
+++ b/packages/emerald/src/components/EmStepper/index.ts
@@ -0,0 +1,14 @@
+export type { EmStepperProps } from './EmStepper.vue'
+export { default as EmStepper } from './EmStepper.vue'
+
+export type { EmStepperItemProps } from './EmStepperItem.vue'
+export { default as EmStepperItem } from './EmStepperItem.vue'
+
+export type { EmStepperLabelProps } from './EmStepperLabel.vue'
+export { default as EmStepperLabel } from './EmStepperLabel.vue'
+
+export type { EmStepperLabelDescriptionProps } from './EmStepperLabelDescription.vue'
+export { default as EmStepperLabelDescription } from './EmStepperLabelDescription.vue'
+
+export type { EmStepperSeparatorProps } from './EmStepperSeparator.vue'
+export { default as EmStepperSeparator } from './EmStepperSeparator.vue'
diff --git a/packages/emerald/src/components/EmSwitch/EmSwitch.vue b/packages/emerald/src/components/EmSwitch/EmSwitch.vue
new file mode 100644
index 000000000..6357ea966
--- /dev/null
+++ b/packages/emerald/src/components/EmSwitch/EmSwitch.vue
@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { SwitchRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export type EmSwitchSize = 'sm' | 'md' | 'lg'
+
+  export interface EmSwitchProps extends V0PaperProps {
+    disabled?: MaybeRefOrGetter<boolean>
+    name?: string
+    value?: unknown
+    label?: string
+    size?: EmSwitchSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSwitch' })
+
+  const {
+    disabled = false,
+    name,
+    value,
+    label,
+    size = 'md',
+    ...paperProps
+  } = defineProps<EmSwitchProps>()
+
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="label"
+    class="emerald-switch"
+    :data-disabled="disabled || undefined"
+    :data-size="size"
+  >
+    <SwitchRoot
+      v-model="model"
+      as="span"
+      class="emerald-switch__root"
+      :disabled
+      :label
+      :name
+      :value
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </SwitchRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: var(--emerald-on-background);
+  font-size: 14px;
+  line-height: 1.4;
+  cursor: pointer;
+  user-select: none;
+}
+
+.emerald-switch[data-disabled] {
+  cursor: not-allowed;
+}
+
+.emerald-switch__root {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  flex-shrink: 0;
+}
+
+.emerald-switch__root:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border: 1px solid var(--emerald-primary-500, #7c5cf6);
+  border-radius: 999px;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSwitch/EmSwitchGroup.vue b/packages/emerald/src/components/EmSwitch/EmSwitchGroup.vue
new file mode 100644
index 000000000..aac926d2c
--- /dev/null
+++ b/packages/emerald/src/components/EmSwitch/EmSwitchGroup.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+  // Framework
+  import { SwitchGroup } from '@vuetify/v0'
+
+  export interface EmSwitchGroupProps {
+    disabled?: boolean
+    mandatory?: boolean | 'force'
+    label?: string
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSwitchGroup' })
+
+  const {
+    disabled = false,
+    mandatory = false,
+    label,
+    name,
+  } = defineProps<EmSwitchGroupProps>()
+
+  const model = defineModel<unknown[]>({ default: () => [] })
+</script>
+
+<template>
+  <SwitchGroup
+    v-model="model"
+    class="emerald-switch-group"
+    :disabled
+    :label
+    :mandatory
+    :name
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SwitchGroup>
+</template>
+
+<style>
+.emerald-switch-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSwitch/EmSwitchThumb.vue b/packages/emerald/src/components/EmSwitch/EmSwitchThumb.vue
new file mode 100644
index 000000000..fe3012704
--- /dev/null
+++ b/packages/emerald/src/components/EmSwitch/EmSwitchThumb.vue
@@ -0,0 +1,61 @@
+<script lang="ts">
+  // Framework
+  import { useSwitchRoot } from '@vuetify/v0'
+
+  export interface EmSwitchThumbProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSwitchThumb' })
+
+  const root = useSwitchRoot('v0:switch:root')
+</script>
+
+<template>
+  <span
+    aria-hidden="true"
+    class="emerald-switch__thumb"
+    :data-disabled="root.isDisabled.value || undefined"
+    :data-state="root.isChecked.value ? 'checked' : 'unchecked'"
+  />
+</template>
+
+<style>
+.emerald-switch__thumb {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: #ffffff;
+  transform: translate(calc(-50% - 8px), -50%);
+  transition: transform 120ms ease;
+  pointer-events: none;
+}
+
+.emerald-switch__thumb[data-state="checked"] {
+  transform: translate(calc(-50% + 8px), -50%);
+}
+
+.emerald-switch[data-size="sm"] .emerald-switch__thumb {
+  width: 12px;
+  height: 12px;
+  transform: translate(calc(-50% - 6px), -50%);
+}
+
+.emerald-switch[data-size="sm"] .emerald-switch__thumb[data-state="checked"] {
+  transform: translate(calc(-50% + 6px), -50%);
+}
+
+.emerald-switch[data-size="lg"] .emerald-switch__thumb {
+  width: 20px;
+  height: 20px;
+  transform: translate(calc(-50% - 10px), -50%);
+}
+
+.emerald-switch[data-size="lg"] .emerald-switch__thumb[data-state="checked"] {
+  transform: translate(calc(-50% + 10px), -50%);
+}
+</style>
diff --git a/packages/emerald/src/components/EmSwitch/EmSwitchTrack.vue b/packages/emerald/src/components/EmSwitch/EmSwitchTrack.vue
new file mode 100644
index 000000000..34cca051f
--- /dev/null
+++ b/packages/emerald/src/components/EmSwitch/EmSwitchTrack.vue
@@ -0,0 +1,68 @@
+<script lang="ts">
+  // Framework
+  import { SwitchTrack } from '@vuetify/v0'
+
+  export interface EmSwitchTrackProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSwitchTrack' })
+</script>
+
+<template>
+  <SwitchTrack class="emerald-switch__track">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SwitchTrack>
+</template>
+
+<style>
+.emerald-switch__track {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  width: 36px;
+  height: 20px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 999px;
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  box-shadow: 0 1px 2px 0 rgba(5, 0, 18, 0.05);
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  overflow: visible;
+}
+
+.emerald-switch[data-size="sm"] .emerald-switch__track {
+  width: 28px;
+  height: 16px;
+}
+
+.emerald-switch[data-size="lg"] .emerald-switch__track {
+  width: 44px;
+  height: 24px;
+}
+
+.emerald-switch:hover .emerald-switch__track[data-state="unchecked"] {
+  background: var(--emerald-primary-50, #f5f3ff);
+  box-shadow: 0 1px 2px 0 rgba(5, 0, 18, 0.1);
+}
+
+.emerald-switch__track[data-state="checked"] {
+  background: var(--emerald-primary-500, #7c5cf6);
+  border-color: var(--emerald-primary-500, #7c5cf6);
+}
+
+.emerald-switch:hover .emerald-switch__track[data-state="checked"] {
+  background: var(--emerald-primary-600, #5f3aed);
+  border-color: var(--emerald-primary-600, #5f3aed);
+  box-shadow: 0 1px 2px 0 rgba(5, 0, 18, 0.1);
+}
+
+.emerald-switch[data-disabled] .emerald-switch__track {
+  opacity: 0.3;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSwitch/index.ts b/packages/emerald/src/components/EmSwitch/index.ts
new file mode 100644
index 000000000..685f9958e
--- /dev/null
+++ b/packages/emerald/src/components/EmSwitch/index.ts
@@ -0,0 +1,11 @@
+export type { EmSwitchProps } from './EmSwitch.vue'
+export { default as EmSwitch } from './EmSwitch.vue'
+
+export type { EmSwitchGroupProps } from './EmSwitchGroup.vue'
+export { default as EmSwitchGroup } from './EmSwitchGroup.vue'
+
+export type { EmSwitchThumbProps } from './EmSwitchThumb.vue'
+export { default as EmSwitchThumb } from './EmSwitchThumb.vue'
+
+export type { EmSwitchTrackProps } from './EmSwitchTrack.vue'
+export { default as EmSwitchTrack } from './EmSwitchTrack.vue'
diff --git a/packages/emerald/src/components/EmTable/EmTable.vue b/packages/emerald/src/components/EmTable/EmTable.vue
new file mode 100644
index 000000000..97f61073b
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/EmTable.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmTableProps extends V0PaperProps {
+    bordered?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTable' })
+
+  const { bordered = true, ...paperProps } = defineProps<EmTableProps>()
+</script>
+
+<template>
+  <div
+    class="emerald-table-wrapper"
+    :data-bordered="bordered || undefined"
+  >
+    <V0Paper
+      v-bind="paperProps"
+      as="table"
+      class="emerald-table"
+    >
+      <slot />
+    </V0Paper>
+  </div>
+</template>
+
+<style>
+.emerald-table-wrapper {
+  box-sizing: border-box;
+  width: 100%;
+  background: #fff;
+  overflow-x: auto;
+}
+
+.emerald-table-wrapper[data-bordered] {
+  padding: 12px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 6px;
+}
+
+.emerald-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: normal;
+  letter-spacing: 0.24px;
+  color: #000;
+  text-align: left;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTable/EmTableBody.vue b/packages/emerald/src/components/EmTable/EmTableBody.vue
new file mode 100644
index 000000000..179017117
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/EmTableBody.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export interface EmTableBodyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTableBody' })
+</script>
+
+<template>
+  <tbody class="emerald-table__body">
+    <slot />
+  </tbody>
+</template>
+
+<style>
+.emerald-table__body .emerald-table__cell {
+  border-bottom: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+}
+
+.emerald-table__body tr:last-child .emerald-table__cell {
+  border-bottom: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTable/EmTableCell.vue b/packages/emerald/src/components/EmTable/EmTableCell.vue
new file mode 100644
index 000000000..8a73c4a15
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/EmTableCell.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+  export type EmTableCellAlign = 'start' | 'center' | 'end'
+
+  export interface EmTableCellProps {
+    align?: EmTableCellAlign
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTableCell' })
+
+  const { align = 'start' } = defineProps<EmTableCellProps>()
+</script>
+
+<template>
+  <td
+    class="emerald-table__cell"
+    :data-align="align"
+  >
+    <slot />
+  </td>
+</template>
+
+<style>
+.emerald-table__cell {
+  padding: 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: normal;
+  letter-spacing: 0.24px;
+  color: #000;
+  vertical-align: middle;
+  background: transparent;
+  transition: background 120ms ease;
+}
+
+.emerald-table__cell[data-align="center"] {
+  text-align: center;
+}
+
+.emerald-table__cell[data-align="end"] {
+  text-align: right;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTable/EmTableHead.vue b/packages/emerald/src/components/EmTable/EmTableHead.vue
new file mode 100644
index 000000000..8032635d5
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/EmTableHead.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+  export interface EmTableHeadProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTableHead' })
+</script>
+
+<template>
+  <thead class="emerald-table__head">
+    <slot />
+  </thead>
+</template>
+
+<style>
+.emerald-table__head .emerald-table__header {
+  background: var(--emerald-secondary-50, #f4f7f9);
+}
+
+.emerald-table__head tr > .emerald-table__header:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+.emerald-table__head tr > .emerald-table__header:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTable/EmTableHeader.vue b/packages/emerald/src/components/EmTable/EmTableHeader.vue
new file mode 100644
index 000000000..6c037e6c6
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/EmTableHeader.vue
@@ -0,0 +1,180 @@
+<script lang="ts">
+  export type EmTableHeaderAlign = 'start' | 'center' | 'end'
+  export type EmTableHeaderSort = 'ascending' | 'descending' | 'none'
+
+  export interface EmTableHeaderProps {
+    align?: EmTableHeaderAlign
+    scope?: 'col' | 'row'
+    sortable?: boolean
+    sort?: EmTableHeaderSort
+    filterable?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTableHeader' })
+
+  const {
+    align = 'start',
+    scope = 'col',
+    sortable = false,
+    sort = 'none',
+    filterable = false,
+  } = defineProps<EmTableHeaderProps>()
+
+  const emit = defineEmits<{
+    sort: []
+    filter: []
+  }>()
+
+  function onSort () {
+    if (sortable) emit('sort')
+  }
+
+  function onFilter () {
+    if (filterable) emit('filter')
+  }
+</script>
+
+<template>
+  <th
+    :aria-sort="sortable ? sort : undefined"
+    class="emerald-table__header"
+    :data-align="align"
+    :data-filterable="filterable || undefined"
+    :data-sort="sortable ? sort : undefined"
+    :data-sortable="sortable || undefined"
+    :scope
+  >
+    <div class="emerald-table__header-inner">
+      <button
+        v-if="sortable"
+        class="emerald-table__header-label"
+        type="button"
+        @click="onSort"
+      >
+        <span><slot /></span>
+
+        <span class="emerald-table__header-sort">
+          <slot name="sort-icon" />
+        </span>
+      </button>
+
+      <span
+        v-else
+        class="emerald-table__header-label"
+      >
+        <slot />
+      </span>
+
+      <button
+        v-if="filterable"
+        aria-label="Filter"
+        class="emerald-table__header-filter"
+        type="button"
+        @click="onFilter"
+      >
+        <slot name="filter-icon" />
+      </button>
+    </div>
+  </th>
+</template>
+
+<style>
+.emerald-table__header {
+  padding: 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: normal;
+  letter-spacing: 0.24px;
+  color: #000;
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.emerald-table__header[data-align="center"] {
+  text-align: center;
+}
+
+.emerald-table__header[data-align="center"] .emerald-table__header-inner {
+  justify-content: center;
+}
+
+.emerald-table__header[data-align="end"] {
+  text-align: right;
+}
+
+.emerald-table__header[data-align="end"] .emerald-table__header-inner {
+  justify-content: flex-end;
+}
+
+.emerald-table__header-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+}
+
+.emerald-table__header-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  cursor: default;
+}
+
+.emerald-table__header[data-sortable] .emerald-table__header-label {
+  cursor: pointer;
+}
+
+.emerald-table__header[data-sortable] .emerald-table__header-label:hover {
+  color: var(--emerald-primary-600, #6446e4);
+}
+
+.emerald-table__header[data-sort="ascending"] .emerald-table__header-label,
+.emerald-table__header[data-sort="descending"] .emerald-table__header-label {
+  color: var(--emerald-primary-600, #6446e4);
+}
+
+.emerald-table__header-sort {
+  display: inline-flex;
+  align-items: center;
+  color: currentColor;
+  opacity: 0.6;
+}
+
+.emerald-table__header[data-sort="ascending"] .emerald-table__header-sort,
+.emerald-table__header[data-sort="descending"] .emerald-table__header-sort {
+  opacity: 1;
+}
+
+.emerald-table__header-filter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  margin-left: auto;
+  background: none;
+  border: 0;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.emerald-table__header-filter:hover {
+  opacity: 1;
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.06);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTable/EmTableRow.vue b/packages/emerald/src/components/EmTable/EmTableRow.vue
new file mode 100644
index 000000000..f7e2641fa
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/EmTableRow.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+  export interface EmTableRowProps {
+    selected?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTableRow' })
+
+  const { selected = false } = defineProps<EmTableRowProps>()
+</script>
+
+<template>
+  <tr
+    class="emerald-table__row"
+    :data-selected="selected || undefined"
+  >
+    <slot />
+  </tr>
+</template>
+
+<style>
+.emerald-table__row[data-selected] .emerald-table__cell {
+  background: var(--emerald-background, #faf9ff);
+}
+
+.emerald-table__body .emerald-table__row:hover .emerald-table__cell {
+  background: rgb(var(--emerald-primary-500-channels) / 0.04);
+}
+
+.emerald-table__body .emerald-table__row[data-selected]:hover .emerald-table__cell {
+  background: var(--emerald-background, #faf9ff);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTable/index.ts b/packages/emerald/src/components/EmTable/index.ts
new file mode 100644
index 000000000..b60150b0d
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/index.ts
@@ -0,0 +1,17 @@
+export type { EmTableProps } from './EmTable.vue'
+export { default as EmTable } from './EmTable.vue'
+
+export type { EmTableBodyProps } from './EmTableBody.vue'
+export { default as EmTableBody } from './EmTableBody.vue'
+
+export type { EmTableCellProps } from './EmTableCell.vue'
+export { default as EmTableCell } from './EmTableCell.vue'
+
+export type { EmTableHeadProps } from './EmTableHead.vue'
+export { default as EmTableHead } from './EmTableHead.vue'
+
+export type { EmTableHeaderProps } from './EmTableHeader.vue'
+export { default as EmTableHeader } from './EmTableHeader.vue'
+
+export type { EmTableRowProps } from './EmTableRow.vue'
+export { default as EmTableRow } from './EmTableRow.vue'
diff --git a/packages/emerald/src/components/EmTabs/EmTabs.vue b/packages/emerald/src/components/EmTabs/EmTabs.vue
new file mode 100644
index 000000000..ac1ec09a1
--- /dev/null
+++ b/packages/emerald/src/components/EmTabs/EmTabs.vue
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { TabsRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { TabsActivation } from '@vuetify/v0'
+
+  export type EmTabsOrientation = 'horizontal' | 'vertical'
+
+  export interface EmTabsProps extends V0PaperProps {
+    disabled?: boolean
+    mandatory?: boolean | 'force'
+    circular?: boolean
+    orientation?: EmTabsOrientation
+    activation?: TabsActivation
+  }
+</script>
+
+<script setup lang="ts" generic="T">
+  defineOptions({ name: 'EmTabs' })
+
+  const {
+    disabled = false,
+    mandatory = 'force',
+    circular = true,
+    orientation = 'horizontal',
+    activation = 'automatic',
+    ...paperProps
+  } = defineProps<EmTabsProps>()
+
+  const model = defineModel<T | T[]>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-tabs"
+    :data-disabled="disabled || undefined"
+    :data-orientation="orientation"
+  >
+    <TabsRoot
+      v-model="model"
+      :activation
+      :circular
+      :disabled
+      :mandatory
+      :orientation
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </TabsRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: var(--emerald-primary-950, #221065);
+}
+
+.emerald-tabs[data-orientation="vertical"] {
+  flex-direction: row;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTabs/EmTabsItem.vue b/packages/emerald/src/components/EmTabs/EmTabsItem.vue
new file mode 100644
index 000000000..8b8bd6d29
--- /dev/null
+++ b/packages/emerald/src/components/EmTabs/EmTabsItem.vue
@@ -0,0 +1,84 @@
+<script lang="ts">
+  // Framework
+  import { TabsItem } from '@vuetify/v0'
+
+  // Types
+  import type { ID } from '@vuetify/v0'
+
+  export interface EmTabsItemProps<V = unknown> {
+    id?: ID
+    value?: V
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts" generic="V = unknown">
+  defineOptions({ name: 'EmTabsItem' })
+
+  const { id, value, disabled = false } = defineProps<EmTabsItemProps<V>>()
+</script>
+
+<template>
+  <TabsItem
+    :id
+    class="emerald-tabs__item"
+    :disabled
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </TabsItem>
+</template>
+
+<style>
+.emerald-tabs__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 4px 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--emerald-primary-950, #221065);
+  background: transparent;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background-color 220ms cubic-bezier(0.4, 0.0, 0.2, 1),
+    color 220ms cubic-bezier(0.4, 0.0, 0.2, 1),
+    box-shadow 220ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+.emerald-tabs__item:hover:not([data-disabled]):not([data-selected]) {
+  background: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.08);
+  color: var(--emerald-primary-900, #361d95);
+}
+
+.emerald-tabs__item[data-selected] {
+  background: var(--emerald-primary-500, #7c5cf6);
+  color: #ffffff;
+  font-weight: 600;
+  box-shadow: 0 1px 2px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.25);
+}
+
+.emerald-tabs__item[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.emerald-tabs__item:focus-visible {
+  outline: 2px solid var(--emerald-primary-500, #7c5cf6);
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+[aria-orientation="vertical"] > .emerald-tabs__item {
+  width: 100%;
+  justify-content: flex-start;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTabs/EmTabsList.vue b/packages/emerald/src/components/EmTabs/EmTabsList.vue
new file mode 100644
index 000000000..9796ea267
--- /dev/null
+++ b/packages/emerald/src/components/EmTabs/EmTabsList.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+  // Framework
+  import { TabsList } from '@vuetify/v0'
+
+  export interface EmTabsListProps {
+    label?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTabsList' })
+
+  const { label } = defineProps<EmTabsListProps>()
+</script>
+
+<template>
+  <TabsList class="emerald-tabs__list" :label>
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </TabsList>
+</template>
+
+<style>
+.emerald-tabs__list {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 8px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.03);
+  width: fit-content;
+}
+
+.emerald-tabs__list[aria-orientation="vertical"] {
+  flex-direction: column;
+  align-items: stretch;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTabs/EmTabsPanel.vue b/packages/emerald/src/components/EmTabs/EmTabsPanel.vue
new file mode 100644
index 000000000..4cac823b5
--- /dev/null
+++ b/packages/emerald/src/components/EmTabs/EmTabsPanel.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+  // Framework
+  import { TabsPanel } from '@vuetify/v0'
+
+  export interface EmTabsPanelProps<V = unknown> {
+    value: V
+  }
+</script>
+
+<script setup lang="ts" generic="V = unknown">
+  defineOptions({ name: 'EmTabsPanel' })
+
+  const { value } = defineProps<EmTabsPanelProps<V>>()
+</script>
+
+<template>
+  <TabsPanel class="emerald-tabs__panel" :value>
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </TabsPanel>
+</template>
+
+<style>
+.emerald-tabs__panel {
+  padding: 12px 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  color: var(--emerald-primary-950, #221065);
+  animation: emerald-tabs-fade 280ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.emerald-tabs__panel[hidden] {
+  display: none;
+}
+
+@keyframes emerald-tabs-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/packages/emerald/src/components/EmTabs/index.ts b/packages/emerald/src/components/EmTabs/index.ts
new file mode 100644
index 000000000..60c7103d5
--- /dev/null
+++ b/packages/emerald/src/components/EmTabs/index.ts
@@ -0,0 +1,11 @@
+export type { EmTabsProps } from './EmTabs.vue'
+export { default as EmTabs } from './EmTabs.vue'
+
+export type { EmTabsItemProps } from './EmTabsItem.vue'
+export { default as EmTabsItem } from './EmTabsItem.vue'
+
+export type { EmTabsListProps } from './EmTabsList.vue'
+export { default as EmTabsList } from './EmTabsList.vue'
+
+export type { EmTabsPanelProps } from './EmTabsPanel.vue'
+export { default as EmTabsPanel } from './EmTabsPanel.vue'
diff --git a/packages/emerald/src/components/EmTag/EmTag.vue b/packages/emerald/src/components/EmTag/EmTag.vue
new file mode 100644
index 000000000..663e84b83
--- /dev/null
+++ b/packages/emerald/src/components/EmTag/EmTag.vue
@@ -0,0 +1,230 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmTagVariant =
+    | 'neutral'
+    | 'primary'
+    | 'success'
+    | 'error'
+    | 'warning'
+    | 'info'
+
+  export type EmTagTone = 'tinted' | 'outlined'
+
+  export type EmTagElevation = 'none' | 'sm' | 'lg'
+
+  export interface EmTagProps extends V0PaperProps {
+    variant?: EmTagVariant
+    tone?: EmTagTone
+    elevation?: EmTagElevation
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTag' })
+
+  const {
+    variant = 'neutral',
+    tone = 'outlined',
+    elevation = 'none',
+    ...paperProps
+  } = defineProps<EmTagProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="span"
+    class="emerald-tag"
+    :data-elevation="elevation"
+    :data-tone="tone"
+    :data-variant="variant"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style scoped>
+.emerald-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  border-radius: 9999px;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+/* ─── Tone: outlined (white chip) — default ─────────── */
+.emerald-tag[data-tone="outlined"] {
+  height: 24px;
+  padding: 2px 10px 2px 6px;
+  background: #ffffff;
+  font-size: 12px;
+  line-height: 15px;
+  letter-spacing: -0.01em;
+}
+
+.emerald-tag[data-tone="outlined"]:not(:has(svg)) {
+  padding: 2px 10px;
+}
+
+/* ─── Tone: tinted (filled chip) ─────────────────────── */
+.emerald-tag[data-tone="tinted"] {
+  height: 24px;
+  padding: 2px 10px 2px 6px;
+  font-size: 11px;
+  line-height: 18px;
+  letter-spacing: -0.02em;
+}
+
+.emerald-tag[data-tone="tinted"]:not(:has(svg)) {
+  padding: 2px 10px;
+}
+
+/* ─── Icon sizing (slot content) ─────────────────────── */
+.emerald-tag :deep(svg) {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* ─── Variant: neutral ───────────────────────────────── */
+.emerald-tag[data-variant="neutral"][data-tone="tinted"] {
+  background: var(--emerald-secondary-50, #f4f7f9);
+  border-color: rgb(var(--emerald-secondary-500-channels, 148 163 184) / 0.1);
+  color: var(--emerald-secondary-900, #4d5462);
+}
+
+.emerald-tag[data-variant="neutral"][data-tone="outlined"] {
+  border-color: var(--emerald-secondary-100, #ecf0f3);
+  color: var(--emerald-secondary-950, #2d3139);
+}
+
+.emerald-tag[data-variant="neutral"][data-elevation="sm"] {
+  box-shadow: 0 3px 6px 0 rgb(var(--emerald-secondary-500-channels, 148 163 184) / 0.09);
+}
+
+.emerald-tag[data-variant="neutral"][data-elevation="lg"] {
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-secondary-500-channels, 148 163 184) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-secondary-500-channels, 148 163 184) / 0.09);
+}
+
+/* ─── Variant: primary ───────────────────────────────── */
+.emerald-tag[data-variant="primary"][data-tone="tinted"] {
+  background: var(--emerald-primary-50, #f5f3ff);
+  border-color: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.1);
+  color: var(--emerald-primary-900, #361d95);
+}
+
+.emerald-tag[data-variant="primary"][data-tone="outlined"] {
+  border-color: var(--emerald-primary-100, #ede9fe);
+  color: var(--emerald-primary-950, #221065);
+}
+
+.emerald-tag[data-variant="primary"][data-elevation="sm"] {
+  box-shadow: 0 3px 6px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.09);
+}
+
+.emerald-tag[data-variant="primary"][data-elevation="lg"] {
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.09);
+}
+
+/* ─── Variant: success ───────────────────────────────── */
+.emerald-tag[data-variant="success"][data-tone="tinted"] {
+  background: var(--emerald-success-50, #f1fcf5);
+  border-color: rgb(var(--emerald-success-700-channels, 30 122 74) / 0.1);
+  color: var(--emerald-success-900, #194e34);
+}
+
+.emerald-tag[data-variant="success"][data-tone="outlined"] {
+  border-color: var(--emerald-success-100, #dff9eb);
+  color: var(--emerald-success-950, #082b1b);
+}
+
+.emerald-tag[data-variant="success"][data-elevation="sm"] {
+  box-shadow: 0 3px 6px 0 rgb(var(--emerald-success-700-channels, 30 122 74) / 0.09);
+}
+
+.emerald-tag[data-variant="success"][data-elevation="lg"] {
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-success-700-channels, 30 122 74) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-success-700-channels, 30 122 74) / 0.09);
+}
+
+/* ─── Variant: error ─────────────────────────────────── */
+.emerald-tag[data-variant="error"][data-tone="tinted"] {
+  background: var(--emerald-error-50, #fdf4f3);
+  border-color: rgb(var(--emerald-error-500-channels, 192 57 43) / 0.1);
+  color: var(--emerald-error-900, #782c24);
+}
+
+.emerald-tag[data-variant="error"][data-tone="outlined"] {
+  border-color: var(--emerald-error-100, #fce6e4);
+  color: var(--emerald-error-950, #41130e);
+}
+
+.emerald-tag[data-variant="error"][data-elevation="sm"] {
+  box-shadow: 0 3px 6px 0 rgb(var(--emerald-error-500-channels, 192 57 43) / 0.09);
+}
+
+.emerald-tag[data-variant="error"][data-elevation="lg"] {
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-error-500-channels, 192 57 43) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-error-500-channels, 192 57 43) / 0.09);
+}
+
+/* ─── Variant: warning ───────────────────────────────── */
+.emerald-tag[data-variant="warning"][data-tone="tinted"] {
+  background: var(--emerald-warning-50, #fbfaeb);
+  border-color: rgb(var(--emerald-warning-700-channels, 176 125 26) / 0.1);
+  color: var(--emerald-warning-900, #663f1d);
+}
+
+.emerald-tag[data-variant="warning"][data-tone="outlined"] {
+  border-color: var(--emerald-warning-100, #f7f2ca);
+  color: var(--emerald-warning-950, #3b200d);
+}
+
+.emerald-tag[data-variant="warning"][data-elevation="sm"] {
+  box-shadow: 0 3px 6px 0 rgb(var(--emerald-warning-700-channels, 176 125 26) / 0.09);
+}
+
+.emerald-tag[data-variant="warning"][data-elevation="lg"] {
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-warning-700-channels, 176 125 26) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-warning-700-channels, 176 125 26) / 0.09);
+}
+
+/* ─── Variant: info ──────────────────────────────────── */
+.emerald-tag[data-variant="info"][data-tone="tinted"] {
+  background: var(--emerald-info-50, #f3f6fc);
+  border-color: rgb(var(--emerald-info-700-channels, 42 95 165) / 0.1);
+  color: var(--emerald-info-900, #1f375b);
+}
+
+.emerald-tag[data-variant="info"][data-tone="outlined"] {
+  border-color: var(--emerald-info-100, #e6edf8);
+  color: var(--emerald-info-950, #000000);
+}
+
+.emerald-tag[data-variant="info"][data-elevation="sm"] {
+  box-shadow: 0 3px 6px 0 rgb(var(--emerald-info-700-channels, 42 95 165) / 0.09);
+}
+
+.emerald-tag[data-variant="info"][data-elevation="lg"] {
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-info-700-channels, 42 95 165) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-info-700-channels, 42 95 165) / 0.09);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTag/index.ts b/packages/emerald/src/components/EmTag/index.ts
new file mode 100644
index 000000000..844832ca8
--- /dev/null
+++ b/packages/emerald/src/components/EmTag/index.ts
@@ -0,0 +1,2 @@
+export { default as EmTag } from './EmTag.vue'
+export type { EmTagProps } from './EmTag.vue'
diff --git a/packages/emerald/src/components/EmTextField/EmTextField.vue b/packages/emerald/src/components/EmTextField/EmTextField.vue
new file mode 100644
index 000000000..485140d6d
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextField.vue
@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { InputRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { FormValidationRule, ValidateOn } from '@vuetify/v0'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export interface EmTextFieldProps extends V0PaperProps {
+    disabled?: MaybeRefOrGetter<boolean>
+    readonly?: MaybeRefOrGetter<boolean>
+    required?: boolean
+    name?: string
+    label?: string
+    type?: string
+    rules?: FormValidationRule[]
+    validateOn?: ValidateOn
+    error?: boolean
+    errorMessages?: string | string[]
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextField' })
+
+  const {
+    disabled = false,
+    readonly: _readonly = false,
+    required = false,
+    name,
+    label,
+    type = 'text',
+    rules = [],
+    validateOn = 'blur',
+    error = false,
+    errorMessages,
+    ...paperProps
+  } = defineProps<EmTextFieldProps>()
+
+  const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-text-field"
+    :data-disabled="disabled || undefined"
+    :data-error="error || undefined"
+  >
+    <InputRoot
+      v-model="model"
+      :disabled
+      :error
+      :error-messages
+      :label
+      :name
+      :readonly="_readonly"
+      :required
+      :rules
+      :type
+      :validate-on
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </InputRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-text-field {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+}
+
+.emerald-text-field[data-error] .emerald-text-field__label {
+  color: var(--emerald-error-700, #b8302a);
+}
+
+.emerald-text-field[data-disabled] {
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/EmTextFieldAppend.vue b/packages/emerald/src/components/EmTextField/EmTextFieldAppend.vue
new file mode 100644
index 000000000..28030c865
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextFieldAppend.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+  export interface EmTextFieldAppendProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldAppend' })
+</script>
+
+<template>
+  <span class="emerald-text-field__append">
+    <slot />
+  </span>
+</template>
+
+<style>
+.emerald-text-field__append {
+  display: inline-flex;
+  align-items: center;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/EmTextFieldControl.vue b/packages/emerald/src/components/EmTextField/EmTextFieldControl.vue
new file mode 100644
index 000000000..ec24abb8c
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextFieldControl.vue
@@ -0,0 +1,114 @@
+<script lang="ts">
+  // Framework
+  import { InputControl } from '@vuetify/v0'
+
+  export interface EmTextFieldControlProps {
+    placeholder?: string
+    autocomplete?: string
+    maxlength?: number
+    min?: number | string
+    max?: number | string
+    step?: number | string
+    inputmode?: string
+    pattern?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldControl' })
+
+  const {
+    placeholder,
+    autocomplete,
+    maxlength,
+    min,
+    max,
+    step,
+    inputmode,
+    pattern,
+  } = defineProps<EmTextFieldControlProps>()
+</script>
+
+<template>
+  <InputControl
+    :autocomplete
+    class="emerald-text-field__control"
+    :inputmode
+    :max
+    :maxlength
+    :min
+    :pattern
+    :placeholder
+    :step
+  >
+    <slot />
+  </InputControl>
+</template>
+
+<style>
+.emerald-text-field__control {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 32px;
+  margin: 0;
+  padding: 6px 8px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 4px;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+  outline: none;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.emerald-text-field__control::placeholder {
+  color: #000000;
+  opacity: 0.3;
+}
+
+.emerald-text-field__control:hover:not([data-disabled]):not([data-focused]) {
+  border-color: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.3);
+  box-shadow:
+    0 1px 3px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.12),
+    0 1px 5px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.2);
+}
+
+.emerald-text-field__control:focus,
+.emerald-text-field__control[data-focused] {
+  border-color: var(--emerald-primary-500, #7c5cf6);
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.12);
+}
+
+.emerald-text-field__control[data-disabled],
+.emerald-text-field[data-disabled] .emerald-text-field__control {
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.05);
+  border-color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.08);
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.4);
+  cursor: not-allowed;
+}
+
+.emerald-text-field__control[data-disabled]::placeholder,
+.emerald-text-field[data-disabled] .emerald-text-field__control::placeholder {
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.4);
+  opacity: 1;
+}
+
+.emerald-text-field__control[data-state="invalid"] {
+  border-color: var(--emerald-error-500, #e5484d);
+}
+
+.emerald-text-field__control[data-state="invalid"]:hover:not([data-disabled]):not([data-focused]) {
+  border-color: var(--emerald-error-700, #b8302a);
+  box-shadow:
+    0 1px 3px 0 rgb(var(--emerald-error-500-channels, 229 72 77) / 0.18),
+    0 1px 5px 0 rgb(var(--emerald-error-500-channels, 229 72 77) / 0.22);
+}
+
+.emerald-text-field__control[data-state="invalid"]:focus,
+.emerald-text-field__control[data-state="invalid"][data-focused] {
+  box-shadow: 0 0 0 2px rgb(var(--emerald-error-500-channels, 229 72 77) / 0.18);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/EmTextFieldDescription.vue b/packages/emerald/src/components/EmTextField/EmTextFieldDescription.vue
new file mode 100644
index 000000000..0d0e6bdcb
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextFieldDescription.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+  // Framework
+  import { InputDescription } from '@vuetify/v0'
+
+  export interface EmTextFieldDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldDescription' })
+</script>
+
+<template>
+  <InputDescription class="emerald-text-field__description">
+    <slot />
+  </InputDescription>
+</template>
+
+<style>
+.emerald-text-field__description {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/EmTextFieldError.vue b/packages/emerald/src/components/EmTextField/EmTextFieldError.vue
new file mode 100644
index 000000000..24bdc3aa0
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextFieldError.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+  // Framework
+  import { InputError } from '@vuetify/v0'
+
+  export interface EmTextFieldErrorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldError' })
+</script>
+
+<template>
+  <InputError class="emerald-text-field__error">
+    <template #default="{ errors }">
+      <slot :errors />
+    </template>
+  </InputError>
+</template>
+
+<style>
+.emerald-text-field__error {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 16px;
+  color: rgb(var(--emerald-error-500-channels, 229 72 77) / 0.85);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/EmTextFieldLabel.vue b/packages/emerald/src/components/EmTextField/EmTextFieldLabel.vue
new file mode 100644
index 000000000..b7fe99b1d
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextFieldLabel.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+  // Framework
+  import { useInputRoot } from '@vuetify/v0'
+
+  export interface EmTextFieldLabelProps {
+    for?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldLabel' })
+
+  const root = useInputRoot('v0:input:root')
+</script>
+
+<template>
+  <label
+    class="emerald-text-field__label"
+    :for="root.id as string"
+  >
+    <slot />
+  </label>
+</template>
+
+<style>
+.emerald-text-field__label {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--emerald-primary-950, #221065);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/EmTextFieldPrepend.vue b/packages/emerald/src/components/EmTextField/EmTextFieldPrepend.vue
new file mode 100644
index 000000000..58bfeb072
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextFieldPrepend.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+  export interface EmTextFieldPrependProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldPrepend' })
+</script>
+
+<template>
+  <span class="emerald-text-field__prepend">
+    <slot />
+  </span>
+</template>
+
+<style>
+.emerald-text-field__prepend {
+  display: inline-flex;
+  align-items: center;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/index.ts b/packages/emerald/src/components/EmTextField/index.ts
new file mode 100644
index 000000000..753e85a62
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/index.ts
@@ -0,0 +1,20 @@
+export type { EmTextFieldProps } from './EmTextField.vue'
+export { default as EmTextField } from './EmTextField.vue'
+
+export type { EmTextFieldAppendProps } from './EmTextFieldAppend.vue'
+export { default as EmTextFieldAppend } from './EmTextFieldAppend.vue'
+
+export type { EmTextFieldControlProps } from './EmTextFieldControl.vue'
+export { default as EmTextFieldControl } from './EmTextFieldControl.vue'
+
+export type { EmTextFieldDescriptionProps } from './EmTextFieldDescription.vue'
+export { default as EmTextFieldDescription } from './EmTextFieldDescription.vue'
+
+export type { EmTextFieldErrorProps } from './EmTextFieldError.vue'
+export { default as EmTextFieldError } from './EmTextFieldError.vue'
+
+export type { EmTextFieldLabelProps } from './EmTextFieldLabel.vue'
+export { default as EmTextFieldLabel } from './EmTextFieldLabel.vue'
+
+export type { EmTextFieldPrependProps } from './EmTextFieldPrepend.vue'
+export { default as EmTextFieldPrepend } from './EmTextFieldPrepend.vue'
diff --git a/packages/emerald/src/components/EmTextarea/EmTextarea.vue b/packages/emerald/src/components/EmTextarea/EmTextarea.vue
new file mode 100644
index 000000000..ae7c21133
--- /dev/null
+++ b/packages/emerald/src/components/EmTextarea/EmTextarea.vue
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { InputRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { FormValidationRule, ValidateOn } from '@vuetify/v0'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export interface EmTextareaProps extends V0PaperProps {
+    disabled?: MaybeRefOrGetter<boolean>
+    readonly?: MaybeRefOrGetter<boolean>
+    required?: boolean
+    name?: string
+    label?: string
+    rules?: FormValidationRule[]
+    validateOn?: ValidateOn
+    error?: boolean
+    errorMessages?: string | string[]
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextarea' })
+
+  const {
+    disabled = false,
+    readonly: _readonly = false,
+    required = false,
+    name,
+    label,
+    rules = [],
+    validateOn = 'blur',
+    error = false,
+    errorMessages,
+    ...paperProps
+  } = defineProps<EmTextareaProps>()
+
+  const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-textarea"
+    :data-disabled="disabled || undefined"
+    :data-error="error || undefined"
+  >
+    <InputRoot
+      v-model="model"
+      :disabled
+      :error
+      :error-messages
+      :label
+      :name
+      :readonly="_readonly"
+      :required
+      :rules
+      :validate-on
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </InputRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-textarea {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+}
+
+.emerald-textarea[data-error] .emerald-textarea__label {
+  color: var(--emerald-error-700, #b8302a);
+}
+
+.emerald-textarea[data-disabled] {
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextarea/EmTextareaControl.vue b/packages/emerald/src/components/EmTextarea/EmTextareaControl.vue
new file mode 100644
index 000000000..35a8ccadd
--- /dev/null
+++ b/packages/emerald/src/components/EmTextarea/EmTextareaControl.vue
@@ -0,0 +1,102 @@
+<script lang="ts">
+  // Framework
+  import { InputControl } from '@vuetify/v0'
+
+  export interface EmTextareaControlProps {
+    placeholder?: string
+    maxlength?: number
+    rows?: number
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextareaControl' })
+
+  const { placeholder, maxlength, rows = 4 } = defineProps<EmTextareaControlProps>()
+</script>
+
+<template>
+  <InputControl
+    as="textarea"
+    class="emerald-textarea__control"
+    :maxlength
+    :placeholder
+    :rows
+  >
+    <slot />
+  </InputControl>
+</template>
+
+<style>
+.emerald-textarea__control {
+  display: block;
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 4px;
+  background: #ffffff;
+  color: var(--emerald-on-background, #1a1c1e);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  resize: vertical;
+  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
+}
+
+.emerald-textarea__control::placeholder {
+  color: rgb(0 0 0 / 0.3);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.emerald-textarea__control:hover:not(:focus):not([disabled]):not([readonly]) {
+  border-color: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.3);
+  box-shadow:
+    0 1px 3px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.12),
+    0 1px 5px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.2);
+}
+
+.emerald-textarea__control:focus {
+  outline: none;
+  border-color: var(--emerald-primary-500, #7c5cf6);
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.12);
+}
+
+.emerald-textarea__control[data-state="invalid"] {
+  border-color: var(--emerald-error-500, #e5484d);
+}
+
+.emerald-textarea__control[data-state="invalid"]:hover:not(:focus):not([disabled]):not([readonly]) {
+  border-color: var(--emerald-error-700, #b8302a);
+  box-shadow:
+    0 1px 3px 0 rgb(var(--emerald-error-500-channels, 229 72 77) / 0.18),
+    0 1px 5px 0 rgb(var(--emerald-error-500-channels, 229 72 77) / 0.22);
+}
+
+.emerald-textarea__control[data-state="invalid"]:focus {
+  box-shadow: 0 0 0 2px rgb(var(--emerald-error-500-channels, 229 72 77) / 0.18);
+}
+
+.emerald-textarea__control[disabled],
+.emerald-textarea__control[data-disabled] {
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.05);
+  border-color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.08);
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.4);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.emerald-textarea__control[disabled]::placeholder,
+.emerald-textarea__control[data-disabled]::placeholder {
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.4);
+  opacity: 1;
+}
+
+.emerald-textarea__control[readonly],
+.emerald-textarea__control[data-readonly] {
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.04);
+  cursor: default;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextarea/EmTextareaDescription.vue b/packages/emerald/src/components/EmTextarea/EmTextareaDescription.vue
new file mode 100644
index 000000000..6b7134136
--- /dev/null
+++ b/packages/emerald/src/components/EmTextarea/EmTextareaDescription.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  // Framework
+  import { InputDescription } from '@vuetify/v0'
+
+  export interface EmTextareaDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextareaDescription' })
+</script>
+
+<template>
+  <InputDescription class="emerald-textarea__description">
+    <slot />
+  </InputDescription>
+</template>
+
+<style>
+.emerald-textarea__description {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 16px;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextarea/EmTextareaError.vue b/packages/emerald/src/components/EmTextarea/EmTextareaError.vue
new file mode 100644
index 000000000..4ad434d7c
--- /dev/null
+++ b/packages/emerald/src/components/EmTextarea/EmTextareaError.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+  // Framework
+  import { InputError } from '@vuetify/v0'
+
+  export interface EmTextareaErrorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextareaError' })
+</script>
+
+<template>
+  <InputError class="emerald-textarea__error">
+    <template #default="{ errors }">
+      <slot :errors />
+    </template>
+  </InputError>
+</template>
+
+<style>
+.emerald-textarea__error {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 16px;
+  color: rgb(var(--emerald-error-500-channels, 229 72 77) / 0.85);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextarea/EmTextareaLabel.vue b/packages/emerald/src/components/EmTextarea/EmTextareaLabel.vue
new file mode 100644
index 000000000..a53d776f6
--- /dev/null
+++ b/packages/emerald/src/components/EmTextarea/EmTextareaLabel.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+  // Framework
+  import { useInputRoot } from '@vuetify/v0'
+
+  export interface EmTextareaLabelProps {
+    for?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextareaLabel' })
+
+  const root = useInputRoot('v0:input:root')
+</script>
+
+<template>
+  <label
+    class="emerald-textarea__label"
+    :for="root.id as string"
+  >
+    <slot />
+  </label>
+</template>
+
+<style>
+.emerald-textarea__label {
+  display: inline-block;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--emerald-on-background, #1a1c1e);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextarea/index.ts b/packages/emerald/src/components/EmTextarea/index.ts
new file mode 100644
index 000000000..e71d4bd2c
--- /dev/null
+++ b/packages/emerald/src/components/EmTextarea/index.ts
@@ -0,0 +1,14 @@
+export type { EmTextareaProps } from './EmTextarea.vue'
+export { default as EmTextarea } from './EmTextarea.vue'
+
+export type { EmTextareaControlProps } from './EmTextareaControl.vue'
+export { default as EmTextareaControl } from './EmTextareaControl.vue'
+
+export type { EmTextareaDescriptionProps } from './EmTextareaDescription.vue'
+export { default as EmTextareaDescription } from './EmTextareaDescription.vue'
+
+export type { EmTextareaErrorProps } from './EmTextareaError.vue'
+export { default as EmTextareaError } from './EmTextareaError.vue'
+
+export type { EmTextareaLabelProps } from './EmTextareaLabel.vue'
+export { default as EmTextareaLabel } from './EmTextareaLabel.vue'
diff --git a/packages/emerald/src/components/EmToast/EmToast.vue b/packages/emerald/src/components/EmToast/EmToast.vue
new file mode 100644
index 000000000..0db5ef92b
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/EmToast.vue
@@ -0,0 +1,168 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmToastVariant = 'primary' | 'success' | 'error' | 'info' | 'warning' | 'neutral'
+
+  export interface EmToastProps extends V0PaperProps {
+    variant?: EmToastVariant
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmToast' })
+
+  const { variant = 'primary', ...paperProps } = defineProps<EmToastProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    aria-live="polite"
+    as="div"
+    class="emerald-toast"
+    :data-variant="variant"
+    role="status"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-toast {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  width: 258px;
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: #ffffff;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  overflow: hidden;
+}
+
+.emerald-toast[data-variant="primary"] {
+  border-color: var(--emerald-primary-50, #f5f3ff);
+  box-shadow: 0 8px 20px 0 rgb(124 92 246 / 0.13), 0 3px 6px 0 rgb(124 92 246 / 0.09);
+  color: var(--emerald-primary-950, #221065);
+}
+
+.emerald-toast[data-variant="success"] {
+  border-color: var(--emerald-success-50, #f1fcf5);
+  box-shadow: 0 8px 20px 0 rgb(30 122 74 / 0.13), 0 3px 6px 0 rgb(30 122 74 / 0.09);
+  color: var(--emerald-success-950, #082b1b);
+}
+
+.emerald-toast[data-variant="error"] {
+  border-color: var(--emerald-error-50, #fdf4f3);
+  box-shadow: 0 8px 20px 0 rgb(192 57 43 / 0.13), 0 3px 6px 0 rgb(192 57 43 / 0.09);
+  color: var(--emerald-error-950, #41130e);
+}
+
+.emerald-toast[data-variant="info"] {
+  border-color: var(--emerald-info-50, #f3f6fc);
+  box-shadow: 0 8px 20px 0 rgb(42 95 165 / 0.13), 0 3px 6px 0 rgb(42 95 165 / 0.09);
+  color: #000000;
+}
+
+.emerald-toast[data-variant="warning"] {
+  border-color: var(--emerald-warning-50, #fbfaeb);
+  box-shadow: 0 8px 20px 0 rgb(176 125 26 / 0.13), 0 3px 6px 0 rgb(176 125 26 / 0.09);
+  color: var(--emerald-warning-950, #3b200d);
+}
+
+.emerald-toast[data-variant="neutral"] {
+  border-color: var(--emerald-secondary-50, #f4f7f9);
+  box-shadow: 0 8px 20px 0 rgb(148 163 184 / 0.13), 0 3px 6px 0 rgb(148 163 184 / 0.09);
+  color: var(--emerald-secondary-950, #2d3139);
+}
+
+.emerald-toast__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  color: #ffffff;
+  overflow: hidden;
+}
+
+.emerald-toast[data-variant="primary"] .emerald-toast__icon {
+  background: var(--emerald-primary-500, #7c5cf6);
+}
+
+.emerald-toast[data-variant="success"] .emerald-toast__icon {
+  background: var(--emerald-success-500, #1e7a4a);
+}
+
+.emerald-toast[data-variant="error"] .emerald-toast__icon {
+  background: var(--emerald-error-500, #c0392b);
+}
+
+.emerald-toast[data-variant="info"] .emerald-toast__icon {
+  background: var(--emerald-info-500, #2a5fa5);
+}
+
+.emerald-toast[data-variant="warning"] .emerald-toast__icon {
+  background: var(--emerald-warning-500, #b07d1a);
+}
+
+.emerald-toast[data-variant="neutral"] .emerald-toast__icon {
+  background: var(--emerald-secondary-500, #94a3b8);
+}
+
+.emerald-toast__body {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.emerald-toast__title {
+  font-weight: 700;
+  font-size: 12px;
+  line-height: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emerald-toast__description {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: normal;
+  letter-spacing: -0.12px;
+  opacity: 0.6;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emerald-toast__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  align-self: flex-start;
+}
+
+.emerald-toast__close:hover {
+  opacity: 1;
+}
+</style>
diff --git a/packages/emerald/src/components/EmToast/EmToastBody.vue b/packages/emerald/src/components/EmToast/EmToastBody.vue
new file mode 100644
index 000000000..8bfb9b60d
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/EmToastBody.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmToastBodyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmToastBody' })
+</script>
+
+<template>
+  <div class="emerald-toast__body">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmToast/EmToastClose.vue b/packages/emerald/src/components/EmToast/EmToastClose.vue
new file mode 100644
index 000000000..ccdcf3c68
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/EmToastClose.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export interface EmToastCloseProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmToastClose' })
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  function onClick (event: MouseEvent) {
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <button
+    aria-label="Close toast"
+    class="emerald-toast__close"
+    type="button"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/packages/emerald/src/components/EmToast/EmToastDescription.vue b/packages/emerald/src/components/EmToast/EmToastDescription.vue
new file mode 100644
index 000000000..2b5f1127e
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/EmToastDescription.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmToastDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmToastDescription' })
+</script>
+
+<template>
+  <div class="emerald-toast__description">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmToast/EmToastIcon.vue b/packages/emerald/src/components/EmToast/EmToastIcon.vue
new file mode 100644
index 000000000..a1d8b12e7
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/EmToastIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmToastIconProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmToastIcon' })
+</script>
+
+<template>
+  <span aria-hidden="true" class="emerald-toast__icon">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmToast/EmToastTitle.vue b/packages/emerald/src/components/EmToast/EmToastTitle.vue
new file mode 100644
index 000000000..107aa265c
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/EmToastTitle.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmToastTitleProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmToastTitle' })
+</script>
+
+<template>
+  <div class="emerald-toast__title">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmToast/index.ts b/packages/emerald/src/components/EmToast/index.ts
new file mode 100644
index 000000000..12042a4e4
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/index.ts
@@ -0,0 +1,17 @@
+export type { EmToastProps, EmToastVariant } from './EmToast.vue'
+export { default as EmToast } from './EmToast.vue'
+
+export type { EmToastBodyProps } from './EmToastBody.vue'
+export { default as EmToastBody } from './EmToastBody.vue'
+
+export type { EmToastCloseProps } from './EmToastClose.vue'
+export { default as EmToastClose } from './EmToastClose.vue'
+
+export type { EmToastDescriptionProps } from './EmToastDescription.vue'
+export { default as EmToastDescription } from './EmToastDescription.vue'
+
+export type { EmToastIconProps } from './EmToastIcon.vue'
+export { default as EmToastIcon } from './EmToastIcon.vue'
+
+export type { EmToastTitleProps } from './EmToastTitle.vue'
+export { default as EmToastTitle } from './EmToastTitle.vue'
diff --git a/packages/emerald/src/components/EmTooltip/EmTooltip.vue b/packages/emerald/src/components/EmTooltip/EmTooltip.vue
new file mode 100644
index 000000000..606963478
--- /dev/null
+++ b/packages/emerald/src/components/EmTooltip/EmTooltip.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+  // Framework
+  import { PopoverRoot } from '@vuetify/v0'
+
+  export interface EmTooltipProps {
+    id?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTooltip' })
+
+  const { id } = defineProps<EmTooltipProps>()
+
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <PopoverRoot
+    :id
+    v-model="model"
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PopoverRoot>
+</template>
diff --git a/packages/emerald/src/components/EmTooltip/EmTooltipActivator.vue b/packages/emerald/src/components/EmTooltip/EmTooltipActivator.vue
new file mode 100644
index 000000000..69d0bcd12
--- /dev/null
+++ b/packages/emerald/src/components/EmTooltip/EmTooltipActivator.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+  // Framework
+  import { PopoverActivator, usePopoverContext } from '@vuetify/v0'
+
+  // Utilities
+  import { onScopeDispose } from 'vue'
+
+  export interface EmTooltipActivatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTooltipActivator' })
+
+  const popover = usePopoverContext()
+
+  let openTimer: ReturnType<typeof setTimeout> | null = null
+  let closeTimer: ReturnType<typeof setTimeout> | null = null
+
+  function clearTimers () {
+    if (openTimer) clearTimeout(openTimer)
+    if (closeTimer) clearTimeout(closeTimer)
+    openTimer = null
+    closeTimer = null
+  }
+
+  onScopeDispose(clearTimers)
+
+  function onEnter () {
+    clearTimers()
+    openTimer = setTimeout(() => popover.open(), 200)
+  }
+
+  function onLeave () {
+    clearTimers()
+    closeTimer = setTimeout(() => popover.close(), 100)
+  }
+</script>
+
+<template>
+  <PopoverActivator
+    class="emerald-tooltip__activator"
+    @blur="onLeave"
+    @focus="onEnter"
+    @mouseenter="onEnter"
+    @mouseleave="onLeave"
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PopoverActivator>
+</template>
diff --git a/packages/emerald/src/components/EmTooltip/EmTooltipContent.vue b/packages/emerald/src/components/EmTooltip/EmTooltipContent.vue
new file mode 100644
index 000000000..5c06b0276
--- /dev/null
+++ b/packages/emerald/src/components/EmTooltip/EmTooltipContent.vue
@@ -0,0 +1,141 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { PopoverContent, usePopoverContext } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmTooltipContentProps extends V0PaperProps {
+    positionArea?: string
+    positionTry?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTooltipContent' })
+
+  const {
+    positionArea = 'top',
+    positionTry = 'most-width top',
+    ...paperProps
+  } = defineProps<EmTooltipContentProps>()
+
+  const context = usePopoverContext()
+  const side = toRef(() => positionArea.split(' ')[0] ?? 'top')
+</script>
+
+<template>
+  <PopoverContent
+    :id="context.id"
+    class="emerald-tooltip__popover"
+    :position-area
+    :position-try
+  >
+    <V0Paper
+      v-bind="paperProps"
+      as="div"
+      class="emerald-tooltip__content"
+      :data-side="side"
+      role="tooltip"
+    >
+      <span class="emerald-tooltip__label">
+        <slot />
+      </span>
+
+      <span aria-hidden="true" class="emerald-tooltip__arrow" />
+    </V0Paper>
+  </PopoverContent>
+</template>
+
+<style>
+.emerald-tooltip__popover {
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  overflow: visible;
+}
+
+.emerald-tooltip__popover::backdrop {
+  background: transparent;
+}
+
+.emerald-tooltip__content {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 8px;
+  background: var(--emerald-neutral-600);
+  border-radius: 6px;
+  box-shadow:
+    0 2px 4px 0 rgba(5, 0, 18, 0.1),
+    0 3px 8px 0 rgba(5, 0, 18, 0.13);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: normal;
+  text-align: center;
+  color: #ffffff;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.emerald-tooltip__content[data-side="top"] {
+  transform: translateY(-9px);
+}
+.emerald-tooltip__content[data-side="bottom"] {
+  transform: translateY(9px);
+}
+.emerald-tooltip__content[data-side="left"] {
+  transform: translateX(-9px);
+}
+.emerald-tooltip__content[data-side="right"] {
+  transform: translateX(9px);
+}
+
+.emerald-tooltip__label {
+  display: inline-block;
+}
+
+.emerald-tooltip__arrow {
+  position: absolute;
+  left: 50%;
+  width: 12px;
+  height: 6px;
+  background: var(--emerald-neutral-600);
+  transform: translateX(-50%);
+}
+
+/* Arrow points toward the activator (opposite of tooltip's side) */
+.emerald-tooltip__content[data-side="top"] .emerald-tooltip__arrow {
+  bottom: -5px;
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+.emerald-tooltip__content[data-side="bottom"] .emerald-tooltip__arrow {
+  top: -5px;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+.emerald-tooltip__content[data-side="left"] .emerald-tooltip__arrow {
+  top: 50%;
+  right: -8px;
+  left: auto;
+  width: 6px;
+  height: 12px;
+  transform: translateY(-50%);
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+}
+.emerald-tooltip__content[data-side="right"] .emerald-tooltip__arrow {
+  top: 50%;
+  left: -8px;
+  width: 6px;
+  height: 12px;
+  transform: translateY(-50%);
+  clip-path: polygon(100% 0, 100% 100%, 0 50%);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTooltip/index.ts b/packages/emerald/src/components/EmTooltip/index.ts
new file mode 100644
index 000000000..26e2d73fc
--- /dev/null
+++ b/packages/emerald/src/components/EmTooltip/index.ts
@@ -0,0 +1,8 @@
+export type { EmTooltipProps } from './EmTooltip.vue'
+export { default as EmTooltip } from './EmTooltip.vue'
+
+export type { EmTooltipActivatorProps } from './EmTooltipActivator.vue'
+export { default as EmTooltipActivator } from './EmTooltipActivator.vue'
+
+export type { EmTooltipContentProps } from './EmTooltipContent.vue'
+export { default as EmTooltipContent } from './EmTooltipContent.vue'
diff --git a/packages/emerald/src/components/EmUpload/EmUpload.vue b/packages/emerald/src/components/EmUpload/EmUpload.vue
new file mode 100644
index 000000000..825427235
--- /dev/null
+++ b/packages/emerald/src/components/EmUpload/EmUpload.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmUploadProps extends V0PaperProps {
+    accept?: string
+    multiple?: boolean
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmUpload' })
+
+  // TODO(emerald): flesh out vs createQueue for upload progress/list when v0 primitive lands
+  const {
+    accept,
+    multiple = false,
+    disabled = false,
+    ...paperProps
+  } = defineProps<EmUploadProps>()
+
+  const model = defineModel<File[]>({ default: () => [] })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-upload"
+    :data-disabled="disabled || undefined"
+  >
+    <slot
+      :accept
+      :disabled
+      :files="model"
+      :multiple
+    />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: var(--emerald-on-background);
+}
+
+.emerald-upload[data-disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmUpload/EmUploadDropzone.vue b/packages/emerald/src/components/EmUpload/EmUploadDropzone.vue
new file mode 100644
index 000000000..3878615a4
--- /dev/null
+++ b/packages/emerald/src/components/EmUpload/EmUploadDropzone.vue
@@ -0,0 +1,95 @@
+<script lang="ts">
+  // Utilities
+  import { shallowRef } from 'vue'
+
+  export interface EmUploadDropzoneProps {
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmUploadDropzone' })
+
+  const { disabled = false } = defineProps<EmUploadDropzoneProps>()
+
+  const emit = defineEmits<{
+    drop: [files: File[]]
+  }>()
+
+  const dragging = shallowRef(false)
+
+  function onDragOver (e: DragEvent) {
+    e.preventDefault()
+    if (!disabled) dragging.value = true
+  }
+
+  function onDragLeave () {
+    dragging.value = false
+  }
+
+  function onDrop (e: DragEvent) {
+    e.preventDefault()
+    dragging.value = false
+    if (disabled) return
+    const files = Array.from(e.dataTransfer?.files ?? [])
+    emit('drop', files)
+  }
+</script>
+
+<template>
+  <div
+    class="emerald-upload__dropzone"
+    :data-disabled="disabled || undefined"
+    :data-dragging="dragging || undefined"
+    @dragleave="onDragLeave"
+    @dragover="onDragOver"
+    @drop="onDrop"
+  >
+    <slot :dragging />
+  </div>
+</template>
+
+<style>
+.emerald-upload__dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px 16px;
+  border: 1.5px dashed rgb(var(--emerald-neutral-channels, 26 28 30) / 0.2);
+  border-radius: 12px;
+  background: var(--emerald-surface, #f5f4ff);
+  color: var(--emerald-on-background, #000);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  cursor: pointer;
+  overflow: clip;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.emerald-upload__dropzone:hover:not([data-disabled]) {
+  border-color: rgb(var(--emerald-primary-500-channels) / 0.5);
+  background: rgb(var(--emerald-primary-500-channels) / 0.06);
+}
+
+.emerald-upload__dropzone[data-dragging] {
+  border-color: var(--emerald-primary-500);
+  background: rgb(var(--emerald-primary-500-channels) / 0.10);
+  transform: scale(0.99);
+}
+
+.emerald-upload__dropzone :deep(svg) {
+  color: var(--emerald-primary-500);
+}
+
+.emerald-upload__dropzone[data-disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmUpload/EmUploadInput.vue b/packages/emerald/src/components/EmUpload/EmUploadInput.vue
new file mode 100644
index 000000000..431a6f54a
--- /dev/null
+++ b/packages/emerald/src/components/EmUpload/EmUploadInput.vue
@@ -0,0 +1,48 @@
+<script lang="ts">
+  export interface EmUploadInputProps {
+    accept?: string
+    multiple?: boolean
+    disabled?: boolean
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmUploadInput' })
+
+  const {
+    accept,
+    multiple = false,
+    disabled = false,
+    name,
+  } = defineProps<EmUploadInputProps>()
+
+  const emit = defineEmits<{
+    change: [files: File[]]
+  }>()
+
+  function onChange (e: Event) {
+    const target = e.target as HTMLInputElement
+    const files = Array.from(target.files ?? [])
+    emit('change', files)
+  }
+</script>
+
+<template>
+  <input
+    :accept
+    class="emerald-upload__input"
+    :disabled
+    :multiple
+    :name
+    type="file"
+    @change="onChange"
+  >
+</template>
+
+<style>
+.emerald-upload__input {
+  font: inherit;
+  color: inherit;
+}
+</style>
diff --git a/packages/emerald/src/components/EmUpload/EmUploadItem.vue b/packages/emerald/src/components/EmUpload/EmUploadItem.vue
new file mode 100644
index 000000000..ee8375e52
--- /dev/null
+++ b/packages/emerald/src/components/EmUpload/EmUploadItem.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+  export interface EmUploadItemProps {
+    name?: string
+    size?: number
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmUploadItem' })
+
+  const { name, size } = defineProps<EmUploadItemProps>()
+</script>
+
+<template>
+  <li class="emerald-upload__item">
+    <slot :name :size>
+      <span>{{ name }}</span>
+      <span v-if="size != null" class="emerald-upload__item-size">{{ size }} B</span>
+    </slot>
+  </li>
+</template>
+
+<style>
+.emerald-upload__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.04);
+}
+
+.emerald-upload__item-size {
+  margin-left: auto;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.6);
+  font-size: 12px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmUpload/EmUploadList.vue b/packages/emerald/src/components/EmUpload/EmUploadList.vue
new file mode 100644
index 000000000..cbd026b18
--- /dev/null
+++ b/packages/emerald/src/components/EmUpload/EmUploadList.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+  export interface EmUploadListProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmUploadList' })
+</script>
+
+<template>
+  <ul class="emerald-upload__list">
+    <slot />
+  </ul>
+</template>
+
+<style>
+.emerald-upload__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmUpload/index.ts b/packages/emerald/src/components/EmUpload/index.ts
new file mode 100644
index 000000000..8540ac254
--- /dev/null
+++ b/packages/emerald/src/components/EmUpload/index.ts
@@ -0,0 +1,14 @@
+export type { EmUploadProps } from './EmUpload.vue'
+export { default as EmUpload } from './EmUpload.vue'
+
+export type { EmUploadDropzoneProps } from './EmUploadDropzone.vue'
+export { default as EmUploadDropzone } from './EmUploadDropzone.vue'
+
+export type { EmUploadInputProps } from './EmUploadInput.vue'
+export { default as EmUploadInput } from './EmUploadInput.vue'
+
+export type { EmUploadItemProps } from './EmUploadItem.vue'
+export { default as EmUploadItem } from './EmUploadItem.vue'
+
+export type { EmUploadListProps } from './EmUploadList.vue'
+export { default as EmUploadList } from './EmUploadList.vue'
diff --git a/packages/emerald/src/components/index.ts b/packages/emerald/src/components/index.ts
new file mode 100644
index 000000000..f5f26bf83
--- /dev/null
+++ b/packages/emerald/src/components/index.ts
@@ -0,0 +1,35 @@
+export * from './EmAccordion'
+export * from './EmAlert'
+export * from './EmAutoComplete'
+export * from './EmAvatar'
+export * from './EmBadge'
+export * from './EmBreadcrumb'
+export * from './EmButton'
+export * from './EmCard'
+export * from './EmCarousel'
+export * from './EmCheckbox'
+export * from './EmContainer'
+export * from './EmDatePicker'
+export * from './EmDialog'
+export * from './EmDivider'
+export * from './EmFlex'
+export * from './EmForm'
+export * from './EmGrid'
+export * from './EmList'
+export * from './EmLoading'
+export * from './EmMenu'
+export * from './EmPagination'
+export * from './EmProgress'
+export * from './EmRadio'
+export * from './EmSelect'
+export * from './EmSlider'
+export * from './EmStepper'
+export * from './EmSwitch'
+export * from './EmTable'
+export * from './EmTabs'
+export * from './EmTag'
+export * from './EmTextarea'
+export * from './EmTextField'
+export * from './EmToast'
+export * from './EmTooltip'
+export * from './EmUpload'
diff --git a/packages/emerald/src/index.ts b/packages/emerald/src/index.ts
new file mode 100644
index 000000000..049366421
--- /dev/null
+++ b/packages/emerald/src/index.ts
@@ -0,0 +1,4 @@
+export * from './adapter'
+export * from './components'
+export * from './plugin'
+export * from './theme'
diff --git a/packages/emerald/src/plugin.ts b/packages/emerald/src/plugin.ts
new file mode 100644
index 000000000..c51ccadd8
--- /dev/null
+++ b/packages/emerald/src/plugin.ts
@@ -0,0 +1,106 @@
+// Framework
+import {
+  createHydrationPlugin,
+  createLocalePlugin,
+  createLoggerPlugin,
+  createStoragePlugin,
+  createThemePlugin,
+} from '@vuetify/v0'
+
+// Adapters
+import { EmeraldStyleSheetAdapter } from './adapter'
+import {
+  error,
+  info,
+  neutral,
+  primary,
+  secondary,
+  success,
+  warning,
+} from './theme'
+
+// Types
+import type {
+  LocalePluginOptions,
+  LoggerPluginOptions,
+  StoragePluginOptions,
+  ThemePluginOptions,
+} from '@vuetify/v0'
+import type { App, Plugin } from 'vue'
+
+export interface EmeraldPluginOptions {
+  theme?: ThemePluginOptions | false
+  locale?: LocalePluginOptions | false
+  logger?: LoggerPluginOptions | false
+  storage?: StoragePluginOptions | false
+  hydration?: boolean
+}
+
+type Scale = Record<string, string>
+
+function scale (name: string, values: Scale): Scale {
+  const out: Scale = {}
+  for (const [key, val] of Object.entries(values)) {
+    out[key === 'DEFAULT' ? name : `${name}-${key}`] = val
+  }
+  return out
+}
+
+export const emeraldColors: Record<string, string> = {
+  ...scale('primary', primary),
+  ...scale('secondary', secondary),
+  ...scale('success', success),
+  ...scale('warning', warning),
+  ...scale('error', error),
+  ...scale('info', info),
+  ...scale('neutral', neutral),
+  'background': '#FAF9FF',
+  'surface': '#F5F4FF',
+  'surface-tint': '#EBE9FE',
+  'divider': '#DEE2E6',
+  'on-primary': '#FFFFFF',
+  'on-background': '#1A1C1E',
+  'on-surface': '#1A1C1E',
+}
+
+function emeraldThemeDefaults (): ThemePluginOptions {
+  return {
+    target: 'html',
+    default: 'emerald',
+    adapter: new EmeraldStyleSheetAdapter(),
+    themes: {
+      emerald: { colors: emeraldColors },
+    },
+  }
+}
+
+export function createEmeraldPlugin (options: EmeraldPluginOptions = {}): Plugin {
+  return {
+    install (app: App) {
+      if (options.hydration !== false) {
+        app.use(createHydrationPlugin())
+      }
+
+      if (options.logger !== false) {
+        app.use(createLoggerPlugin(options.logger || {}))
+      }
+
+      if (options.storage !== false) {
+        app.use(createStoragePlugin(options.storage || {}))
+      }
+
+      if (options.locale !== false) {
+        app.use(createLocalePlugin(options.locale || { default: 'en' }))
+      }
+
+      if (options.theme !== false) {
+        const defaults = emeraldThemeDefaults()
+        const theme = options.theme
+          ? { ...defaults, ...options.theme, themes: { ...defaults.themes, ...options.theme.themes } }
+          : defaults
+
+        app.use(createThemePlugin(theme))
+      }
+    },
+  }
+}
diff --git a/packages/emerald/src/theme.ts b/packages/emerald/src/theme.ts
new file mode 100644
index 000000000..74538e5fe
--- /dev/null
+++ b/packages/emerald/src/theme.ts
@@ -0,0 +1,224 @@
+/**
+ * Emerald Design System — Token Definitions
+ *
+ * Extracted from Juan's Figma spec (March 2026).
+ * These tokens feed into UnoCSS theme config so that
+ * utility classes like `bg-primary`, `text-error-600`, `rounded-lg`
+ * resolve to Emerald's design language.
+ */
+
+// ──────────────────────────────────────────────
+// Brand
+// ──────────────────────────────────────────────
+
+export const primary = {
+  50: '#F5F3FF',
+  100: '#EDE9FE',
+  200: '#DED6FE',
+  300: '#C4B5FD',
+  400: '#A28BFA',
+  500: '#7C5CF6',
+  600: '#5F3AED',
+  700: '#4D28D9',
+  800: '#4021B6',
+  900: '#361D95',
+  950: '#221065',
+  DEFAULT: '#7C5CF6',
+} as const
+
+export const secondary = {
+  50: '#F4F7F9',
+  100: '#ECF0F3',
+  200: '#DCE4E9',
+  300: '#C6D2DB',
+  400: '#AEBCCB',
+  500: '#94A3B8',
+  600: '#828FA9',
+  700: '#6F7A93',
+  800: '#5C6677',
+  900: '#4D5462',
+  950: '#2D3139',
+  DEFAULT: '#94A3B8',
+} as const
+
+// ──────────────────────────────────────────────
+// Surfaces
+// ──────────────────────────────────────────────
+
+export const background = {
+  DEFAULT: '#FAF9FF',
+  dark: '#1A1C1E',
+} as const
+
+export const surface = {
+  DEFAULT: '#F5F4FF',
+  dark: '#1E1C28',
+} as const
+
+// ──────────────────────────────────────────────
+// Semantics
+// ──────────────────────────────────────────────
+
+export const success = {
+  50: '#F1FCF5',
+  100: '#DFF9EB',
+  200: '#C0F2D6',
+  300: '#8EE7B7',
+  400: '#56D290',
+  500: '#2FB86F',
+  600: '#219859',
+  700: '#1E7A4A',
+  800: '#1C5F3C',
+  900: '#194E34',
+  950: '#082B1B',
+  DEFAULT: '#1E7A4A',
+} as const
+
+export const warning = {
+  50: '#FBFAEB',
+  100: '#F7F2CA',
+  200: '#F1E497',
+  300: '#E8D05C',
+  400: '#E0B92F',
+  500: '#D0A322',
+  600: '#B07D1A',
+  700: '#8F5D19',
+  800: '#774A1C',
+  900: '#663F1D',
+  950: '#3B200D',
+  DEFAULT: '#B07D1A',
+} as const
+
+export const error = {
+  50: '#FDF4F3',
+  100: '#FCE6E4',
+  200: '#FAD2CE',
+  300: '#F6B2AB',
+  400: '#EF857A',
+  500: '#E35E50',
+  600: '#CF4233',
+  700: '#C0392B',
+  800: '#902E24',
+  900: '#782C24',
+  950: '#41130E',
+  DEFAULT: '#C0392B',
+} as const
+
+export const info = {
+  50: '#F3F6FC',
+  100: '#E6EDF8',
+  200: '#C7D9F0',
+  300: '#96B8E3',
+  400: '#5E93D2',
+  500: '#3977BE',
+  600: '#2A5FA5',
+  700: '#224A82',
+  800: '#20416C',
+  900: '#1F375B',
+  950: '#000000',
+  DEFAULT: '#2A5FA5',
+} as const
+
+// ──────────────────────────────────────────────
+// Border
+// ──────────────────────────────────────────────
+
+export const border = {
+  DEFAULT: '#94A3B8',
+} as const
+
+export const borderRadius = {
+  'none': '0',
+  'xs': '2px',
+  'sm': '4px',
+  'DEFAULT': '6px',
+  'md': '8px',
+  'lg': '12px',
+  'xl': '16px',
+  '2xl': '24px',
+  'full': '9999px',
+} as const
+
+export const borderWidth = {
+  DEFAULT: '1px',
+  0: '0',
+  1: '1px',
+  2: '2px',
+  3: '3px',
+  4: '4px',
+  6: '6px',
+} as const
+
+// ──────────────────────────────────────────────
+// Shadows
+// ──────────────────────────────────────────────
+
+export const shadow = {
+  xs: '0px 1px 2px 0px rgba(30, 28, 40, 0.05)',
+  sm: '0px 1px 3px 0px rgba(30, 28, 40, 0.10), 0px 1px 2px -1px rgba(30, 28, 40, 0.10)',
+  DEFAULT: '0px 4px 6px -1px rgba(30, 28, 40, 0.10), 0px 2px 4px -2px rgba(30, 28, 40, 0.10)',
+  md: '0px 4px 6px -1px rgba(30, 28, 40, 0.10), 0px 2px 4px -2px rgba(30, 28, 40, 0.10)',
+  lg: '0px 10px 15px -3px rgba(30, 28, 40, 0.10), 0px 4px 6px -4px rgba(30, 28, 40, 0.10)',
+  xl: '0px 20px 25px -5px rgba(30, 28, 40, 0.10), 0px 8px 10px -6px rgba(30, 28, 40, 0.10)',
+} as const
+
+// ──────────────────────────────────────────────
+// Typography
+// ──────────────────────────────────────────────
+
+export const fontFamily = {
+  sans: 'Manrope, system-ui, -apple-system, sans-serif',
+} as const
+
+export const fontSize = {
+  'xs': ['12px', { lineHeight: '1.55', letterSpacing: '0.009em', fontWeight: '400' }],
+  'sm': ['14px', { lineHeight: '1.55', fontWeight: '400' }],
+  'md': ['16px', { lineHeight: '1.60', fontWeight: '400' }],
+  'lg': ['20px', { lineHeight: '1.30', letterSpacing: '-0.01em', fontWeight: '600' }],
+  'xl': ['28px', { lineHeight: '1.15', letterSpacing: '-0.015em', fontWeight: '600' }],
+  '2xl': ['40px', { lineHeight: '1.05', letterSpacing: '-0.05em', fontWeight: '700' }],
+} as const
+
+// ──────────────────────────────────────────────
+// Neutral (dark text/foreground)
+// ──────────────────────────────────────────────
+
+export const neutral = {
+  DEFAULT: '#1A1C1E',
+  50: '#FAF9FF',
+  100: '#F5F4FF',
+  200: '#ECF0F3',
+  300: '#DEE2E6',
+  400: '#94A3B8',
+  500: '#4D5462',
+  600: '#2D3139',
+  700: '#1E1C28',
+  800: '#1A1C1E',
+  900: '#000000',
+} as const
+
+// ──────────────────────────────────────────────
+// Full theme export
+// ──────────────────────────────────────────────
+
+export const emeraldTheme = {
+  colors: {
+    primary,
+    secondary,
+    success,
+    warning,
+    error,
+    info,
+    neutral,
+    background,
+    surface,
+    border,
+    black: '#000000',
+    white: '#FFFFFF',
+  },
+  borderRadius,
+  borderWidth,
+  boxShadow: shadow,
+  fontFamily,
+  fontSize,
+} as const
diff --git a/packages/emerald/src/vite-env.d.ts b/packages/emerald/src/vite-env.d.ts
new file mode 100644
index 000000000..99bbbfa0d
--- /dev/null
+++ b/packages/emerald/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+declare const __DEV__: boolean
+declare const __VERSION__: string
+declare const __VITE_LOGGER_ENABLED__: string
diff --git a/packages/emerald/tsconfig.json b/packages/emerald/tsconfig.json
new file mode 100644
index 000000000..912ec8c59
--- /dev/null
+++ b/packages/emerald/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "allowImportingTsExtensions": false,
+    "composite": true,
+    "incremental": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "customConditions": ["development"],
+    "paths": {
+      "#emerald/*": ["./src/*"],
+      "#emerald": ["./src"],
+      "#paper/*": ["../paper/src/*"],
+      "#paper": ["../paper/src"],
+      "#v0": ["../0/src"],
+      "#v0/*": ["../0/src/*"]
+    },
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "assumeChangesOnlyAffectDirectDependencies": true,
+    "verbatimModuleSyntax": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "esnext",
+    "target": "esnext",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"]
+}
diff --git a/packages/emerald/tsdown.config.mts b/packages/emerald/tsdown.config.mts
new file mode 100644
index 000000000..d2f3564ca
--- /dev/null
+++ b/packages/emerald/tsdown.config.mts
@@ -0,0 +1,36 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'tsdown/config'
+import Vue from 'unplugin-vue/rolldown'
+
+import pkg from './package.json' with { type: 'json' }
+
+const v0 = fileURLToPath(new URL('../0/src', import.meta.url))
+const paper = fileURLToPath(new URL('../paper/src', import.meta.url))
+const emerald = fileURLToPath(new URL('src', import.meta.url))
+const __VERSION__ = JSON.stringify(pkg.version)
+
+export default defineConfig({
+  plugins: [
+    Vue({ isProduction: true }),
+  ],
+  dts: {
+    vue: true,
+  },
+  define: {
+    __DEV__: 'process.env.NODE_ENV !== \'production\'',
+    __VITE_LOGGER_ENABLED__: 'process.env.VITE_LOGGER_ENABLED',
+    __VUE_OPTIONS_API__: 'true',
+    __VUE_PROD_DEVTOOLS__: 'false',
+    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+    __VERSION__,
+  },
+  name: 'paper/emerald',
+  exports: {
+    devExports: 'development',
+  },
+  alias: {
+    '#v0': v0,
+    '#paper': paper,
+    '#emerald': emerald,
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a97f28389..c35ce4277 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,6 +30,9 @@ catalogs:
     '@octokit/openapi-types':
       specifier: ^27.0.0
       version: 27.0.0
+    '@phosphor-icons/vue':
+      specifier: ^2.2.1
+      version: 2.2.1
     '@resvg/resvg-js':
       specifier: ^2.6.2
       version: 2.6.2
@@ -525,6 +528,12 @@ importers:
 
   dev:
     dependencies:
+      '@paper/emerald':
+        specifier: workspace:*
+        version: link:../packages/emerald
+      '@phosphor-icons/vue':
+        specifier: 'catalog:'
+        version: 2.2.1(vue@3.5.33(typescript@6.0.3))
       '@vuetify/paper':
         specifier: workspace:*
         version: link:../packages/paper
@@ -618,6 +627,28 @@ importers:
         specifier: 'catalog:'
         version: 0.5.1
 
+  packages/emerald:
+    dependencies:
+      '@vuetify/paper':
+        specifier: workspace:*
+        version: link:../paper
+      '@vuetify/v0':
+        specifier: workspace:*
+        version: link:../0
+      vue:
+        specifier: '>=3.3.0'
+        version: 3.5.33(typescript@6.0.3)
+    devDependencies:
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.21.10(@tsdown/css@0.21.10)(oxc-resolver@11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0))(synckit@0.11.12)(typescript@6.0.3)(vue-tsc@3.2.7(typescript@6.0.3))
+      typescript:
+        specifier: 'catalog:'
+        version: 6.0.3
+      unplugin-vue:
+        specifier: 'catalog:'
+        version: 7.2.0(@types/node@25.6.0)(esbuild@0.27.4)(jiti@2.6.1)(sass-embedded@1.99.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(vue@3.5.33(typescript@6.0.3))(yaml@2.8.3)
+
   packages/paper:
     dependencies:
       '@vuetify/v0':
@@ -2295,6 +2326,12 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
+  '@phosphor-icons/vue@2.2.1':
+    resolution: {integrity: sha512-3RNg1utc2Z5RwPKWFkW3eXI/0BfQAwXgtFxPUPeSzi55jGYUq16b+UqcgbKLazWFlwg5R92OCLKjDiJjeiJcnA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      vue: '>=3.2.39'
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -8681,6 +8718,10 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
+  '@phosphor-icons/vue@2.2.1(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      vue: 3.5.33(typescript@6.0.3)
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -9949,7 +9990,7 @@ snapshots:
       domhandler: 5.0.3
       htmlparser2: 10.1.0
       picocolors: 1.1.1
-      postcss: 8.5.8
+      postcss: 8.5.14
       postcss-media-query-parser: 0.2.3
     optional: true
 
@@ -13335,7 +13376,7 @@ snapshots:
 
   unhead@2.1.12:
     dependencies:
-      hookable: 6.1.0
+      hookable: 6.1.1
 
   unhead@2.1.13:
     dependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 3b27b2284..e3e014988 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -14,6 +14,7 @@ catalog:
   '@mdi/js': npm:mdi-js-es@7.4.47
   '@octokit/core': ^7.0.6
   '@octokit/openapi-types': ^27.0.0
+  '@phosphor-icons/vue': ^2.2.1
   '@resvg/resvg-js': ^2.6.2
   '@shikijs/langs': ^4.0.2
   '@shikijs/markdown-it': ^4.0.2