diff --git a/.changeset/modern-months-attack.md b/.changeset/modern-months-attack.md
new file mode 100644
index 0000000..c20faa6
--- /dev/null
+++ b/.changeset/modern-months-attack.md
@@ -0,0 +1,6 @@
+---
+"@teiler/svelte": patch
+"@teiler/vue": patch
+---
+
+Change `strict` to `true` in `tsconfig.json`
diff --git a/.changeset/slimy-taxis-rhyme.md b/.changeset/slimy-taxis-rhyme.md
new file mode 100644
index 0000000..c08a15a
--- /dev/null
+++ b/.changeset/slimy-taxis-rhyme.md
@@ -0,0 +1,5 @@
+---
+"@teiler/core": patch
+---
+
+Change `strict` to `true` in `tsconfig.json`
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 93f8ec7..3767c27 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -47,7 +47,7 @@ jobs:
       - name: Install Dependencies
         run: |
           yarn install
-          yarn dlx playwright install --with-deps chromium
+          yarn playwright install --with-deps chromium
       - name: Build
         run: yarn build
       - name: Run tests
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index 81d6832..20afb88 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/package.json b/package.json
index 5f13eb2..cdd89f7 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@typescript-eslint/eslint-plugin": "^8.1.0",
     "@typescript-eslint/parser": "^8.1.0",
     "eslint": "^9.9.0",
+    "playwright": "^1.48.0",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
     "storybook": "^8.1.1",
diff --git a/packages/core/src/constructor.test.ts b/packages/core/src/constructor.test.ts
index 9ba9455..1007ed5 100644
--- a/packages/core/src/constructor.test.ts
+++ b/packages/core/src/constructor.test.ts
@@ -206,7 +206,7 @@ describe('insert', () => {
       hydrate: jest.fn<(ids: string[]) => void>(),
     }
 
-    const definition: StyleDefinition<'div', {}> = {
+    const definition: StyleDefinition<null, {}> = {
       id: 'teiler-1ep7axc',
       styles: [[['from { background-color: red; } to { background-color: green; }'], []]],
       tag: null,
@@ -229,7 +229,7 @@ describe('insert', () => {
       hydrate: jest.fn<(ids: string[]) => void>(),
     }
 
-    const definition: StyleDefinition<'div', {}> = {
+    const definition: StyleDefinition<null, {}> = {
       id: 'tytz3vv',
       styles: [[['body { color: red; }'], []]],
       tag: null,
diff --git a/packages/core/src/constructor.ts b/packages/core/src/constructor.ts
index 98657a8..b0893af 100644
--- a/packages/core/src/constructor.ts
+++ b/packages/core/src/constructor.ts
@@ -5,23 +5,23 @@ import type { Pattern } from './pattern'
 import hash from './hash'
 import { compile, transpile } from './css'
 
-type DefaultTheme = { [key: string]: string | boolean }
+type DefaultTheme = {}
 
 type Arguments<Props> = {
   theme: DefaultTheme
 } & Props
 
-type CSS = { styles: Style<unknown>[]; id: string; __css__: true }
-type Expression<Props> = (props: Arguments<Props>) => string | boolean | CSS
+type CSS<Props> = { styles: Style<Props>[]; id: string; __css__: true }
+type Expression<Props> = (props: Arguments<Props>) => string | boolean | CSS<Props>
 type Raw = string | number
 type Properties<Props> = Expression<Props> | StyleDefinition<HTMLElements, Props> | Pattern<HTMLElements, Props> | TeilerComponent<HTMLElements, Props> | Raw
 type Style<Props> = [string[], Properties<Props>[]]
 
-type StyleDefinition<Target extends HTMLElements | null, Props> = {
+type StyleDefinition<Target extends HTMLElements, Props> = {
   type: 'component' | 'global' | 'keyframes'
   id: string
   styles: Array<Style<Props>>
-  tag: Target | null
+  tag: Target
 }
 
 type TeilerComponent<Target extends HTMLElements, Props> = {
@@ -37,7 +37,7 @@ function styled<Props, Type extends TeilerComponent<HTMLElements, Props>>(
   createComponent: CreateCallback<Type, Props>,
   stringOrBinded: TeilerComponent<HTMLElements, Props> | ReadonlyArray<string>,
   ...properties: Properties<Props>[]
-): ExtendCallback<Type, Props> | Type {
+): Type | ExtendCallback<Type, Props> {
   if (Array.isArray(stringOrBinded)) {
     const strings = stringOrBinded as ReadonlyArray<string>
     const style: Style<Props> = [Array.from(strings), properties]
@@ -45,7 +45,7 @@ function styled<Props, Type extends TeilerComponent<HTMLElements, Props>>(
     return createComponent(styleDefinition)
   } else {
     const binded = stringOrBinded as TeilerComponent<HTMLElements, Props>
-    return (strings: ReadonlyArray<string>, ...properties: Expression<Props>[]) => {
+    return (strings: ReadonlyArray<string>, ...properties: Properties<Props>[]) => {
       const style: Style<Props> = [Array.from(strings), properties]
       const styleDefinition = compiler(binded.styleDefinition.tag, [...binded.styleDefinition.styles, style])
       return createComponent(styleDefinition)
@@ -53,7 +53,7 @@ function styled<Props, Type extends TeilerComponent<HTMLElements, Props>>(
   }
 }
 
-type Compiler = <Target extends HTMLElements | null, Props>(tag: Target, styles: Array<Style<Props>>) => StyleDefinition<Target, Props>
+type Compiler = <Target extends HTMLElements, Props>(tag: Target, styles: Array<Style<Props>>) => StyleDefinition<Target, Props>
 
 const component: Compiler = <Target extends HTMLElements, Props>(tag: Target, styles: Array<Style<Props>>): StyleDefinition<Target, Props> => {
   const id = styles.reduce((acc, [strings]) => acc + strings.join(''), '')
@@ -66,7 +66,7 @@ const component: Compiler = <Target extends HTMLElements, Props>(tag: Target, st
   }
 }
 
-const global: Compiler = <Target extends HTMLElements, Props>(tag: null, styles: Array<Style<Props>>): StyleDefinition<Target, Props> => {
+const global: Compiler = <Target extends HTMLElements, Props>(tag: Target, styles: Array<Style<Props>>): StyleDefinition<Target, Props> => {
   const id = styles.reduce((acc, [strings]) => acc + strings.join(''), '')
 
   return {
@@ -89,14 +89,14 @@ function keyframes(strings: ReadonlyArray<string>, ...properties: Raw[]): StyleD
   }
 }
 
-function css<Props>(strings: ReadonlyArray<string>, ...properties: Exclude<Properties<Props>, Expression<Props>>[]): CSS {
+function css<Props>(strings: ReadonlyArray<string>, ...properties: Exclude<Properties<Props>, Expression<Props>>[]): CSS<Props> {
   const style: Style<Props> = [Array.from(strings), properties]
   const styles = [style]
   const id = styles.reduce((acc, [strings]) => acc + strings.join(''), '')
   return { styles: styles, id: 't' + hash(id), __css__: true }
 }
 
-function insert(sheet: Sheet, definition: StyleDefinition<HTMLElements, unknown>, props: Arguments<unknown>): string | null {
+function insert<Props = {}>(sheet: Sheet, definition: StyleDefinition<HTMLElements, Props>, props: Arguments<Props>): string | null {
   const { styles, type } = definition
   const { css, definitions } = compile(styles, props)
   const compiledId = hash(css)
@@ -120,5 +120,5 @@ function insert(sheet: Sheet, definition: StyleDefinition<HTMLElements, unknown>
   return null
 }
 
-export type { Arguments, Compiler, CreateCallback, CSS, DefaultTheme, Properties, Sheet, Style, StyleDefinition, TeilerComponent, HTMLElements }
+export type { Arguments, Compiler, CreateCallback, CSS, DefaultTheme, Properties, Raw, Sheet, Style, StyleDefinition, TeilerComponent, HTMLElements }
 export { component, css, global, insert, keyframes, styled }
diff --git a/packages/core/src/css.test.ts b/packages/core/src/css.test.ts
index 2e62a8c..45f11c8 100644
--- a/packages/core/src/css.test.ts
+++ b/packages/core/src/css.test.ts
@@ -127,7 +127,7 @@ describe('compile', () => {
   })
 
   test('with css', () => {
-    const css: CSS = {
+    const css: CSS<{}> = {
       id: 't1vxhd59',
       styles: [[['background: ', ';'], ['red']]],
       __css__: true,
diff --git a/packages/core/src/css.ts b/packages/core/src/css.ts
index bc213d1..70db723 100644
--- a/packages/core/src/css.ts
+++ b/packages/core/src/css.ts
@@ -1,4 +1,4 @@
-import type { Arguments, HTMLElements } from './constructor'
+import type { Arguments, HTMLElements, Raw } from './constructor'
 import type { Pattern, Style, StyleDefinition } from '.'
 
 import { middleware, prefixer, rulesheet, serialize, stringify, compile as stylisCompile } from 'stylis'
@@ -11,10 +11,10 @@ type CompileResult<Props> = {
 }
 
 function compile<Props>(styles: Array<Style<Props>>, props: Arguments<Props>): CompileResult<Props> {
-  return styles.reduce(
+  return styles.reduce<CompileResult<Props>>(
     (result, [strings, properties]) => {
       const compiled = strings
-        .reduce((acc, strings, index) => {
+        .reduce<(string | true | Raw)[]>((acc, strings, index) => {
           acc = [...acc, strings]
 
           const property = properties.at(index)
@@ -67,7 +67,7 @@ function compile<Props>(styles: Array<Style<Props>>, props: Arguments<Props>): C
 }
 
 function transpile(css: string): string {
-  const results = []
+  const results: string[] = []
 
   serialize(
     stylisCompile(css),
diff --git a/packages/core/src/pattern.test.ts b/packages/core/src/pattern.test.ts
index 8a4538d..a7d43c9 100644
--- a/packages/core/src/pattern.test.ts
+++ b/packages/core/src/pattern.test.ts
@@ -57,13 +57,13 @@ describe('pattern', () => {
   })
 })
 
-type TestComponent<Target extends HTMLElements, Props> = TeilerComponent<Target, Props> & {
+type TestComponent<Target extends HTMLElements> = TeilerComponent<Target, {}> & {
   render(): string
 }
 
 const sheet = createStyleSheet({})
 
-const createComponent = <Target extends HTMLElements, Props>(styles: StyleDefinition<Target, Props>): TestComponent<Target, Props> => {
+const createComponent = <Target extends HTMLElements>(styles: StyleDefinition<Target, {}>): TestComponent<Target> => {
   return {
     styleDefinition: styles,
     render() {
diff --git a/packages/core/src/pattern.ts b/packages/core/src/pattern.ts
index d5dc53f..543e9b6 100644
--- a/packages/core/src/pattern.ts
+++ b/packages/core/src/pattern.ts
@@ -6,29 +6,29 @@ import hash from './hash'
 
 type PropertiesWithPattern<Props> = Properties<Props> | Pattern<HTMLElements, Props>
 
-type Pattern<Target extends HTMLElements | null, Props> = {
+type Pattern<Target extends HTMLElements, Props = {}> = {
   styles: Style<Props>[]
   tag: Target
   id: string
   __pattern__: true
 }
 
-type ExtendCallback<Target extends HTMLElements | null, Props> = <Component>(string: ReadonlyArray<string>, ...properties: Properties<Infer<Component, Props>>[]) => Pattern<Target, Infer<Component, Props>>
+type ExtendCallback<Target extends HTMLElements, Props> = <Component>(string: ReadonlyArray<string>, ...properties: Properties<Infer<Component, Props>>[]) => Pattern<Target, Infer<Component, Props>>
 
-type Constructor<Target extends HTMLElements | null> = {
-  <Props>(pattern: Pattern<Target, Props>): ExtendCallback<Target, Props>
-  <Props>(string: ReadonlyArray<string>, ...properties: PropertiesWithPattern<Props>[]): Pattern<Target, Props>
+type Constructor<Target extends HTMLElements> = {
+  <Props = {}>(pattern: Pattern<Target, Props>): ExtendCallback<Target, Props>
+  <Props = {}>(string: ReadonlyArray<string>, ...properties: PropertiesWithPattern<Props>[]): Pattern<Target, Props>
 }
 
-type ConstructorWithTags = Constructor<'div'> & { [K in HTMLElements]: Constructor<K> } & { global: Constructor<null> }
-
 type Infer<Component, Props> = Component extends Pattern<HTMLElements, infer P> ? P & Props : Props
 
-const construct = (tag: HTMLElements) => {
-  return <Props>(stringOrPattern: Pattern<HTMLElements, Props> | ReadonlyArray<string>, ...properties: Properties<Props>[]): Pattern<HTMLElements, Props> | ExtendCallback<HTMLElements, Props> => {
+const construct = <Target extends HTMLElements>(tag: Target) => {
+  function create<Props = {}>(stringOrPattern: Pattern<Target, Props>): ExtendCallback<Target, Props>
+  function create<Props = {}>(stringOrPattern: ReadonlyArray<string>, ...properties: PropertiesWithPattern<Props>[]): Pattern<Target, Props>
+  function create<Props>(stringOrPattern: Pattern<Target, Props> | ReadonlyArray<string>, ...properties: Properties<Props>[]): Pattern<Target, Props> | ExtendCallback<Target, Props> {
     if ('__pattern__' in stringOrPattern) {
       return <Component>(strings: ReadonlyArray<string>, ...properties: Properties<Infer<Component, Props>>[]) => {
-        const style: Style<Props> = [Array.from(strings), properties]
+        const style: Style<Infer<Component, Props>> = [Array.from(strings), properties]
         const styles = [...stringOrPattern.styles, style]
         const id = styles.reduce((acc, [strings]) => acc + strings.join(''), '')
         return { styles: styles, id: 't' + hash(id), tag: stringOrPattern.tag, __pattern__: true }
@@ -41,18 +41,23 @@ const construct = (tag: HTMLElements) => {
       return { styles: styles, id: 't' + hash(id), tag, __pattern__: true }
     }
   }
+
+  return create
 }
 
-const pattern = construct('div')
+type HTMLElementsWithoutNull = Exclude<HTMLElements, null>
+type ConstructorWithTags = Constructor<'div'> & { [K in HTMLElementsWithoutNull]: Constructor<K> } & { global: Constructor<null> }
+
+const pattern = construct('div') as ConstructorWithTags
 
 tags.forEach((tag) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   pattern[tag] = construct(tag)
 })
 
 pattern['global'] = construct(null)
 
-const binded = pattern as ConstructorWithTags
-
 type CreateCallback<Target extends HTMLElements, Type extends TeilerComponent<Target, Props>, Props> = (styles: StyleDefinition<Target, Props>) => Type
 
 function sew<Target extends HTMLElements, Props, Type extends TeilerComponent<Target, Props>>(pattern: Pattern<Target, Props>, createComponent: CreateCallback<Target, Type, Props>): Type {
@@ -64,5 +69,5 @@ function sew<Target extends HTMLElements, Props, Type extends TeilerComponent<Ta
   })
 }
 
-export { binded as pattern, sew }
+export { pattern, sew }
 export type { Pattern }
diff --git a/packages/core/src/sheet/index.test.ts b/packages/core/src/sheet/index.test.ts
index e6a23a7..36e50bd 100644
--- a/packages/core/src/sheet/index.test.ts
+++ b/packages/core/src/sheet/index.test.ts
@@ -17,7 +17,7 @@ describe('createStyleSheet CSR', () => {
 })
 
 describe('createStyleSheet SSR', () => {
-  beforeAll(() => (global.document = undefined))
+  beforeAll(() => (global.document = undefined!))
 
   test('should create a new StyleSheet object', () => {
     const sheet = createStyleSheet({})
diff --git a/packages/core/src/sheet/tag.ts b/packages/core/src/sheet/tag.ts
index 4a72fcd..6e778d0 100644
--- a/packages/core/src/sheet/tag.ts
+++ b/packages/core/src/sheet/tag.ts
@@ -1,7 +1,7 @@
 type Tag = {
   insertRule(key: string, rule: string): number
   deleteRule(key: string): void
-  getRule(key: string): string
+  getRule(key: string): string | null
   getAllRules(): string
   getAllKeys(): string[]
   [k: string]: unknown
@@ -55,7 +55,7 @@ export function createBrowserTag(container?: HTMLElement): Tag {
       return inserted.size
     },
     deleteRule: function (key: string): void {
-      rules.removeChild(inserted.get(key))
+      rules.removeChild(inserted.get(key)!)
       inserted.delete(key)
     },
     getRule: function (key: string): string | null {
diff --git a/packages/core/src/tags.ts b/packages/core/src/tags.ts
index 32ad1e4..1db360b 100644
--- a/packages/core/src/tags.ts
+++ b/packages/core/src/tags.ts
@@ -131,5 +131,5 @@ const elements = [
   'text',
 ] as const
 
-export default new Set(elements)
-export type HTMLElements = (typeof elements)[number]
+export default elements
+export type HTMLElements = (typeof elements)[number] | null
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
index c3c8fa0..1776826 100644
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@@ -8,7 +8,7 @@
     "importHelpers": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
-    "strict": false,
+    "strict": true,
     "strictPropertyInitialization": false,
     "sourceMap": true,
     "allowSyntheticDefaultImports": true,
diff --git a/packages/svelte/src/Styled.svelte b/packages/svelte/src/Styled.svelte
index 3e85f88..d80fb41 100644
--- a/packages/svelte/src/Styled.svelte
+++ b/packages/svelte/src/Styled.svelte
@@ -1,4 +1,11 @@
 <script lang="ts">
+  type _Ignore = $$Generic
+  type Props = $$Generic<object>
+
+  type $$Props = {
+    styleDefinition: StyleDefinition<HTMLElements, Props>
+  }
+
   import type { DefaultTheme, HTMLElements, Sheet, StyleDefinition } from '@teiler/core'
   import type { Writable } from 'svelte/store'
 
@@ -7,13 +14,15 @@
   import { getContext } from 'svelte'
   import { context } from './ThemeProvider.svelte'
 
-  export let styleDefinition: StyleDefinition<HTMLElements, unknown>
+  export let styleDefinition: StyleDefinition<HTMLElements, Props>
 
   const sheet: Sheet = getStyleSheet()
 
   const theme: Writable<DefaultTheme> = getContext(context)
 
-  $: styleClassName = insert(sheet, styleDefinition, { ...$$restProps, theme: $theme })
+  $: props = $$restProps as Record<string, unknown> & Props
+
+  $: styleClassName = insert(sheet, styleDefinition, { ...props, theme: $theme })
 
   $: filtredPropsEntries = Object.entries($$restProps).filter(([key, _value]) => key[0] !== '_' && key !== 'class')
   $: filtredProps = Object.fromEntries(filtredPropsEntries)
diff --git a/packages/svelte/src/component.ts b/packages/svelte/src/component.ts
index 53647ce..2d483b0 100644
--- a/packages/svelte/src/component.ts
+++ b/packages/svelte/src/component.ts
@@ -6,11 +6,13 @@ import Styled from './Styled.svelte'
 
 type SvelteTeilerComponent<Target extends HTMLElements, Props> = TeilerComponent<Target, Props> & ComponentType<SvelteComponent>
 
-const createComponent = <Target extends HTMLElements, Props>(styleDefinition: StyleDefinition<Target, Props>): SvelteTeilerComponent<Target, Props> => {
-  return class extends Styled {
+type Options = ConstructorParameters<typeof Styled>[0]
+
+const createComponent = <Target extends HTMLElements, Props extends object = {}>(styleDefinition: StyleDefinition<Target, Props>): SvelteTeilerComponent<Target, Props> => {
+  return class extends Styled<{}, Props> {
     static styleDefinition = styleDefinition
 
-    constructor(options) {
+    constructor(options: Options) {
       super({
         ...options,
         props: {
@@ -34,7 +36,7 @@ type Global = {
   <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<Props>[]): SvelteTeilerComponent<HTMLElements, Props>
 }
 
-type ComponentWithTags = Component<'div'> & { [K in HTMLElements]: Component<K> }
+type ComponentWithTags = Component<'div'> & { [K in Exclude<HTMLElements, null>]: Component<K> }
 
 const construct = (tag: HTMLElements, compiler: Compiler) => {
   return <Props extends object = {}>(stringOrBinded: TeilerComponent<HTMLElements, Props> | TemplateStringsArray, ...properties: Properties<Props>[]) => {
@@ -42,14 +44,14 @@ const construct = (tag: HTMLElements, compiler: Compiler) => {
   }
 }
 
-const baseComponent = construct('div', component)
+const svelteComponent = construct('div', component) as ComponentWithTags
 
 tags.forEach((tag) => {
-  baseComponent[tag] = construct(tag, component)
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  svelteComponent[tag] = construct(tag, component)
 })
 
-const svelteComponent = baseComponent as ComponentWithTags
-
 const svelteGlobal = construct(null, global) as Global
 
 export { svelteComponent as component, svelteGlobal as global, keyframes, createComponent }
diff --git a/packages/svelte/src/sheet.ts b/packages/svelte/src/sheet.ts
index 80fb900..4d5bbe7 100644
--- a/packages/svelte/src/sheet.ts
+++ b/packages/svelte/src/sheet.ts
@@ -1,7 +1,7 @@
 import { type Sheet, createStyleSheet } from '@teiler/core'
 import { getContext } from 'svelte'
 
-export let styleSheet = null
+export let styleSheet: Sheet | null = null
 
 export const StyleSheet = 'STYLE_SHEET'
 
diff --git a/packages/svelte/tsconfig.json b/packages/svelte/tsconfig.json
index 72939d7..0242f82 100644
--- a/packages/svelte/tsconfig.json
+++ b/packages/svelte/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "include": [
-    "src/**/*",
-    "stories/stories.d.ts"
+    "src/**/*"
   ],
   "exclude": [
     "node_modules"
@@ -16,7 +15,7 @@
     "importHelpers": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
-    "strict": false,
+    "strict": true,
     "strictPropertyInitialization": false,
     "sourceMap": true,
     "allowSyntheticDefaultImports": true,
diff --git a/packages/vue/src/Styled.ts b/packages/vue/src/Styled.ts
index 24bd9e2..afc83b3 100644
--- a/packages/vue/src/Styled.ts
+++ b/packages/vue/src/Styled.ts
@@ -1,6 +1,6 @@
 import type { HTMLElements, Sheet, StyleDefinition } from '@teiler/core'
 
-import { insert } from '@teiler/core'
+import { DefaultTheme, insert } from '@teiler/core'
 import { defineComponent, h, inject, toRaw } from 'vue'
 import { context } from './ThemeProvider'
 import { getStyleSheet } from './sheet'
@@ -11,15 +11,15 @@ export default function <Target extends HTMLElements, Props>(styleDefinition: St
     styleDefinition,
     setup() {
       const styleSheet: Sheet = getStyleSheet()
-      const theme = inject(context, {})
+      const theme = inject<DefaultTheme>(context, {})
 
       return { styleSheet, theme }
     },
     render() {
       const slots = this.$slots
-      const attrs = toRaw(this.$attrs)
+      const attrs = toRaw(this.$attrs) as Props & Record<string, unknown>
 
-      const styleClassName = insert(this.styleSheet, styleDefinition, { ...attrs, theme: this.theme })
+      const styleClassName = insert<Props>(this.styleSheet, styleDefinition, { ...attrs, theme: this.theme })
 
       const filtredPropsEntries = Object.entries(attrs).filter(([key]) => key[0] !== '_' && key !== 'class')
       const filtredProps = Object.fromEntries(filtredPropsEntries)
@@ -27,7 +27,7 @@ export default function <Target extends HTMLElements, Props>(styleDefinition: St
       const attrsClass = attrs.class ? ' ' + attrs.class : ''
       const className = `${styleClassName} ${styleDefinition.id}${attrsClass}`
 
-      const defaultSlot = slots.default ? slots.default() : null
+      const defaultSlot = slots.default ? slots.default() : undefined
 
       if (styleDefinition.tag) {
         return h(styleDefinition.tag, { ...filtredProps, className }, defaultSlot)
diff --git a/packages/vue/src/component.ts b/packages/vue/src/component.ts
index 1e3ddc7..eadd152 100644
--- a/packages/vue/src/component.ts
+++ b/packages/vue/src/component.ts
@@ -5,8 +5,10 @@ import Styled from './Styled'
 
 import { component, global, keyframes, styled, tags } from '@teiler/core'
 
+type ElementAttributes<Target extends HTMLElements> = Target extends keyof IntrinsicElementAttributes ? IntrinsicElementAttributes[Target] : {}
+
 type VueRawBindings = { styleSheet: Sheet; theme: DefaultTheme }
-type VueTeilerComponent<Target extends HTMLElements, Props> = TeilerComponent<Target, Props> & DefineComponent<Props, VueRawBindings, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, IntrinsicElementAttributes[Target]>
+type VueTeilerComponent<Target extends HTMLElements, Props> = TeilerComponent<Target, Props> & DefineComponent<Props, VueRawBindings, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, ElementAttributes<Target>>
 
 const createComponent = <Target extends HTMLElements, Props>(styleDefinition: StyleDefinition<Target, Props>): VueTeilerComponent<Target, Props> => {
   const component = Styled(styleDefinition)
@@ -25,7 +27,7 @@ type Global = {
   <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<Props>[]): VueTeilerComponent<HTMLElements, Props>
 }
 
-type ComponentWithTags = Component<'div'> & { [K in HTMLElements]: Component<K> }
+type ComponentWithTags = Component<'div'> & { [K in Exclude<HTMLElements, null>]: Component<K> }
 
 const construct = (tag: HTMLElements, compiler: Compiler) => {
   return <Props extends object = {}>(stringOrBinded: TeilerComponent<HTMLElements, Props> | TemplateStringsArray, ...properties: Properties<Props>[]) => {
@@ -33,14 +35,14 @@ const construct = (tag: HTMLElements, compiler: Compiler) => {
   }
 }
 
-const baseComponent = construct('div', component)
+const vueComponent = construct('div', component) as ComponentWithTags
 
 tags.forEach((tag) => {
-  baseComponent[tag] = construct(tag, component)
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  vueComponent[tag] = construct(tag, component)
 })
 
-const vueComponent = baseComponent as ComponentWithTags
-
 const vueGlobal = construct(null, global) as Global
 
 export type { VueTeilerComponent }
diff --git a/packages/vue/src/sheet.ts b/packages/vue/src/sheet.ts
index 55d11a4..93d2b35 100644
--- a/packages/vue/src/sheet.ts
+++ b/packages/vue/src/sheet.ts
@@ -1,12 +1,12 @@
 import { type Sheet, createStyleSheet } from '@teiler/core'
 import { inject } from 'vue'
 
-export let styleSheet = null
+export let styleSheet: Sheet | null = null
 
 export const StyleSheet = 'STYLE_SHEET'
 
 export function getStyleSheet(): Sheet {
-  const provided = inject<Sheet>('STYLE_SHEET', () => null, true)
+  const provided = inject<Sheet | null>('STYLE_SHEET', () => null, true)
 
   if (provided) {
     return provided
diff --git a/packages/vue/stories/palette.ts b/packages/vue/stories/palette.ts
index 294b207..8dc8115 100644
--- a/packages/vue/stories/palette.ts
+++ b/packages/vue/stories/palette.ts
@@ -31,4 +31,12 @@ const ExtendedButton = component(Button)<{ _test: boolean }>`
   `}
 `
 
-export { Button, ExtendedButton }
+const TestGlobal = pattern.global`
+  body {
+    background: #f0f0f0;
+  }
+`
+
+const Global = sew(TestGlobal, createComponent)
+
+export { Button, ExtendedButton, Global }
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
index ec112dc..241e515 100644
--- a/packages/vue/tsconfig.json
+++ b/packages/vue/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "include": [
-    "src/**/*",
-    "stories/stories.d.ts"
+    "src/**/*.ts"
   ],
   "exclude": [
     "node_modules"
@@ -16,7 +15,7 @@
     "importHelpers": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
-    "strict": false,
+    "strict": true,
     "strictPropertyInitialization": false,
     "sourceMap": true,
     "allowSyntheticDefaultImports": true,
diff --git a/yarn.lock b/yarn.lock
index e1bfac3..b0e9c52 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14435,6 +14435,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"playwright-core@npm:1.48.0":
+  version: 1.48.0
+  resolution: "playwright-core@npm:1.48.0"
+  bin:
+    playwright-core: cli.js
+  checksum: 10/644489b4de9cc181e83eb639a283d3c4f8e4c3b1b1759d7c93b72fd0373b5a66ba376ee6a5ee3eca67f1b773bf15c5e01b6aeedd43c94c355bf4fc0d110713bc
+  languageName: node
+  linkType: hard
+
 "playwright@npm:^1.14.0":
   version: 1.46.1
   resolution: "playwright@npm:1.46.1"
@@ -14450,6 +14459,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"playwright@npm:^1.48.0":
+  version: 1.48.0
+  resolution: "playwright@npm:1.48.0"
+  dependencies:
+    fsevents: "npm:2.3.2"
+    playwright-core: "npm:1.48.0"
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    playwright: cli.js
+  checksum: 10/85b06ae8d0ab7a5a8c9a0d416007b18f35a59455fad40438bda98cbe07c48f338e97b98b1d9214e27f08d6ac284eba0eaab722f5684cd17dd4a47f5b69d004b9
+  languageName: node
+  linkType: hard
+
 "polished@npm:^4.2.2":
   version: 4.2.2
   resolution: "polished@npm:4.2.2"
@@ -16579,6 +16603,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^8.1.0"
     "@typescript-eslint/parser": "npm:^8.1.0"
     eslint: "npm:^9.9.0"
+    playwright: "npm:^1.48.0"
     prettier: "npm:^3.3.3"
     prettier-plugin-svelte: "npm:^3.2.6"
     storybook: "npm:^8.1.1"