diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..29eed89
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,63 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# This workflow will build a Java project with Gradle and cache/restore any dependencies to improve the workflow execution time
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-java-with-gradle
+
+name: Deploy to central
+
+on: workflow_dispatch
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    uses: ./.github/workflows/gradle.yml
+  deploy:
+    needs: build
+    strategy:
+      matrix:
+        include:
+          - target: publishIosArm64PublicationToSonatypeRepository
+            os: macos-latest
+          - target: publishAndroidReleasePublicationToSonatypeRepository
+            os: ubuntu-latest
+          - target: publishJvmPublicationToSonatypeRepository
+            os: ubuntu-latest
+          - target: publishLinuxX64PublicationToSonatypeRepository
+            os: ubuntu-latest
+          - target: publishKotlinMultiplatformPublicationToSonatypeRepository
+            os: ubuntu-latest
+    runs-on: ${{ matrix.os }}
+    steps:
+    - uses: actions/checkout@v3
+    - name: Validate Gradle Wrapper
+      uses: gradle/wrapper-validation-action@v1
+    - uses: actions/cache@v3
+      with:
+        path: |
+          ~/.konan
+        key: ${{ runner.os }}-${{ hashFiles('**/.lock') }}
+    - name: Import GPG key
+      uses: crazy-max/ghaction-import-gpg@v5
+      with:
+        gpg_private_key: ${{ secrets.OSSRH_GPG_SECRET_KEY }}
+        passphrase: ${{ secrets.OSSRH_GPG_SECRET_KEY_PASSWORD }}
+    - name: Set up JDK 17
+      uses: actions/setup-java@v3
+      with:
+        java-version: '17'
+        distribution: 'temurin'
+    - name: Gradle publish
+      uses: gradle/gradle-build-action@ce999babab2de1c4b649dc15f0ee67e6246c994f
+      with:
+        arguments: |
+          ${{ matrix.target }}
+          closeSonatypeStagingRepository
+          -Psigning.gnupg.passphrase='${{secrets.OSSRH_GPG_SECRET_KEY_PASSWORD}}'
+          -Psigning.gnupg.keyName='${{secrets.OSSRH_GPG_SECRET_KEY_ID}}'
+          -PsonatypeUsername='${{secrets.OSSRH_USERNAME}}'
+          -PsonatypePassword='${{secrets.OSSRH_PASSWORD}}'
+
diff --git a/.github/workflows/gradle.yml b/.github/workflows/gradle.yml
new file mode 100644
index 0000000..608253f
--- /dev/null
+++ b/.github/workflows/gradle.yml
@@ -0,0 +1,54 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# This workflow will build a Java project with Gradle and cache/restore any dependencies to improve the workflow execution time
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-java-with-gradle
+
+name: Java CI with Gradle
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  workflow_call:
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        include:
+          - target: iosSimulatorArm64Test
+            os: macos-latest
+          - target: jvmTest
+            os: ubuntu-latest
+          - target: linuxX64Test
+            os: ubuntu-latest
+          - target: testDebugUnitTest
+            os: ubuntu-latest
+          - target: testReleaseUnitTest
+            os: ubuntu-latest
+    runs-on: ${{ matrix.os }}
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Validate Gradle Wrapper
+      uses: gradle/wrapper-validation-action@v1
+    - uses: actions/cache@v3
+      with:
+        path: |
+          ~/.konan
+        key: ${{ runner.os }}-${{ hashFiles('**/.lock') }}
+    - name: Set up JDK 17
+      uses: actions/setup-java@v3
+      with:
+        java-version: '17'
+        distribution: 'temurin'
+    - name: Build with Gradle
+      uses: gradle/gradle-build-action@ce999babab2de1c4b649dc15f0ee67e6246c994f
+      with:
+        arguments: ${{ matrix.target }}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e510fa9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,10 @@
+*.iml
+.gradle
+.idea
+.DS_Store
+build
+captures
+.externalNativeBuild
+.cxx
+local.properties
+xcuserdata
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..fc73b50
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2023 JetBrains s.r.o. and and respective authors and developers.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9ece996
--- /dev/null
+++ b/README.md
@@ -0,0 +1,58 @@
+[![official project](http://jb.gg/badges/official.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
+
+# Multiplatform library template
+
+## What is it?
+
+It is the barebones library project intended to quickly bootstrap a Kotlin Multiplatform library, that is deployable to Maven Central.
+
+It has only one function: generate the [Fibonacci sequence](https://en.wikipedia.org/wiki/Fibonacci_sequence) starting from platform-provided numbers. Also, it has a test for each platform just to be sure that tests run.
+
+Note that no other actions or tools usually required for the library development are set up, such as [tracking of backwards compatibility]
+(https://kotlinlang.org/docs/jvm-api-guidelines-backward-compatibility.html#tools-designed-to-enforce-backward-compatibility), explicit API mode,
+licensing, contribution guideline, code of conduct and others.
+
+## How do I build it?
+
+1. - [x] Clone this repository ot just [use it as template](https://github.com/Kotlin/multiplatform-library-template/generate)
+1. - [ ] Edit library module name and include it in [`settings.gradle.kts`](settings.gradle.kts#L18)
+1. - [ ] Edit [`groupId` and `version`](convention-plugins/src/main/kotlin/module.publication.gradle.kts#L10-L11)
+    1. If you need the Android support update namespace [there](library/build.gradle.kts#L38) too
+    1. If you don't need an Android support delete the [`android` section](library/build.gradle.kts#L37-L43)
+1. - [ ] Edit [build targets you need](library/build.gradle.kts#L9-L21)
+
+At this stage, you have everything set to work with Kotlin Multiplatform. The project should be buildable (but you might need to provide actual starting values for the platforms you need).
+
+## How do I make it build on GitHub Actions?
+
+To make it work on GitHub actions, you need to update the [`matrix` section in `gradle.yml`](.github/workflows/gradle.yml#L25-L34). If you didn't change platforms in `build.gradle.kts` you don't need to touch anything. But still read it to understand how it works.
+
+Also, currently, it only runs tests, but you can change this behaviour as you wish by modifying `matrix` and the Gradle [build command](.github/workflows/gradle.yml#L52)
+
+## How do I deploy it to Maven Central?
+
+The most part of the job is already automated for you. However, deployment to Maven Central requires some manual work from your side. 
+
+1. - [ ] Create an account at [Sonatype issue tracker](https://issues.sonatype.org/secure/Signup!default.jspa)
+1. - [ ] [Create an issue](https://issues.sonatype.org/secure/CreateIssue.jspa?issuetype=21&pid=10134) to create new project for you
+1. - [ ] You will have to prove that you own your desired namespace
+1. - [ ] Create a GPG key with `gpg --gen-key`, use the same email address you used to sign up to the Sonatype Jira
+1. - [ ] Find your key id in the output of the previous command looking like `D89FAAEB4CECAFD199A2F5E612C6F735F7A9A519`
+1. - [ ] Upload your key to a keyserver, for example 
+    ```bash
+    gpg --send-keys --keyserver keyserver.ubuntu.com "<your key id>"
+    ```
+1. - [ ] Now you should create secrets available to your GitHub Actions
+    1. via `gh` command
+    ```bash
+    gh secret set OSSRH_GPG_SECRET_KEY -a actions --body "$(gpg --export-secret-key --armor "<your key id>")"
+    gh secret set OSSRH_GPG_SECRET_KEY_ID -a actions --body "<your key id>"
+    gh secret set OSSRH_GPG_SECRET_KEY_PASSWORD -a actions --body "<your key password>"
+    gh secret set OSSRH_PASSWORD -a actions --body "<your sonatype account password>"
+    gh secret set OSSRH_USERNAME -a actions --body "<your sonatype account username>"
+    ```
+    1. Or via the interface in `Settings` → `Secrets and Variables` → `Actions`, same variables as in 1.
+1. - [ ] Edit deployment pom parameters in [`module.publication.gradle.kts`](convention-plugins/src/main/kotlin/module.publication.gradle.kts#L25-L44)
+1. - [ ] Edit deploy targets in [`deploy.yml`](.github/workflows/deploy.yml#L23-L36)
+1. - [ ] Call deployment manually when ready [in Actions](../../actions/workflows/deploy.yml) → `Run Workflow`
+1. - [ ] When you see in your account on https://oss.sonatype.org that everything is fine, you can release your staging repositories and add target `releaseSonatypeStagingRepository` to `deploy.yml` [after this line](.github/workflows/deploy.yml#L60). This way artifacts will be published to central automatically when tests pass.
diff --git a/build.gradle.kts b/build.gradle.kts
new file mode 100644
index 0000000..dfe59b7
--- /dev/null
+++ b/build.gradle.kts
@@ -0,0 +1,4 @@
+plugins {
+    id("root.publication")
+    alias(libs.plugins.kotlinMultiplatform).apply(false)
+}
diff --git a/convention-plugins/build.gradle.kts b/convention-plugins/build.gradle.kts
new file mode 100644
index 0000000..5e77211
--- /dev/null
+++ b/convention-plugins/build.gradle.kts
@@ -0,0 +1,7 @@
+plugins {
+    `kotlin-dsl`
+}
+
+dependencies {
+    implementation(libs.nexus.publish)
+}
\ No newline at end of file
diff --git a/convention-plugins/settings.gradle.kts b/convention-plugins/settings.gradle.kts
new file mode 100644
index 0000000..ffb42e8
--- /dev/null
+++ b/convention-plugins/settings.gradle.kts
@@ -0,0 +1,21 @@
+pluginManagement {
+    repositories {
+        google()
+        gradlePluginPortal()
+        mavenCentral()
+    }
+}
+
+dependencyResolutionManagement {
+    repositories {
+        google()
+        gradlePluginPortal()
+        mavenCentral()
+    }
+
+    versionCatalogs {
+        create("libs") {
+            from(files("../gradle/libs.versions.toml"))
+        }
+    }
+}
\ No newline at end of file
diff --git a/convention-plugins/src/main/kotlin/module.publication.gradle.kts b/convention-plugins/src/main/kotlin/module.publication.gradle.kts
new file mode 100644
index 0000000..e18c9f1
--- /dev/null
+++ b/convention-plugins/src/main/kotlin/module.publication.gradle.kts
@@ -0,0 +1,51 @@
+import org.gradle.api.publish.maven.MavenPublication
+import org.gradle.api.tasks.bundling.Jar
+import org.gradle.kotlin.dsl.`maven-publish`
+
+plugins {
+    `maven-publish`
+    signing
+}
+
+publishing {
+    // Configure all publications
+    publications.withType<MavenPublication> {
+        // Stub javadoc.jar artifact
+        artifact(tasks.register("${name}JavadocJar", Jar::class) {
+            archiveClassifier.set("javadoc")
+            archiveAppendix.set(this@withType.name)
+        })
+
+        // Provide artifacts information required by Maven Central
+        pom {
+            name.set("Kotlin Multiplatform library template")
+            description.set("Dummy library to test deployment to Maven Central")
+            url.set("https://github.com/Kotlin/multiplatform-library-template")
+
+            licenses {
+                license {
+                    name.set("MIT")
+                    url.set("https://opensource.org/licenses/MIT")
+                }
+            }
+            developers {
+                developer {
+                    id.set("JetBrains")
+                    name.set("JetBrains Team")
+                    organization.set("JetBrains")
+                    organizationUrl.set("https://www.jetbrains.com")
+                }
+            }
+            scm {
+                url.set("https://github.com/Kotlin/multiplatform-library-template")
+            }
+        }
+    }
+}
+
+signing {
+    if (project.hasProperty("signing.gnupg.keyName")) {
+        useGpgCmd()
+        sign(publishing.publications)
+    }
+}
diff --git a/convention-plugins/src/main/kotlin/root.publication.gradle.kts b/convention-plugins/src/main/kotlin/root.publication.gradle.kts
new file mode 100644
index 0000000..12e295f
--- /dev/null
+++ b/convention-plugins/src/main/kotlin/root.publication.gradle.kts
@@ -0,0 +1,19 @@
+plugins {
+    id("io.github.gradle-nexus.publish-plugin")
+}
+
+allprojects {
+    group = "org.jetbrains.kotlinx.multiplatform-library-template"
+    version = "0.0.1"
+}
+
+nexusPublishing {
+    // Configure maven central repository
+    // https://github.com/gradle-nexus/publish-plugin#publishing-to-maven-central-via-sonatype-ossrh
+    repositories {
+        sonatype {  //only for users registered in Sonatype after 24 Feb 2021
+            nexusUrl.set(uri("https://s01.oss.sonatype.org/service/local/"))
+            snapshotRepositoryUrl.set(uri("https://s01.oss.sonatype.org/content/repositories/snapshots/"))
+        }
+    }
+}
diff --git a/detekt.yml b/detekt.yml
new file mode 100644
index 0000000..ceac090
--- /dev/null
+++ b/detekt.yml
@@ -0,0 +1,786 @@
+build:
+  maxIssues: 0
+  excludeCorrectable: false
+  weights:
+  # complexity: 2
+  # LongParameterList: 1
+  # style: 1
+  # comments: 1
+
+config:
+  validation: true
+  warningsAsErrors: true
+  checkExhaustiveness: true
+  # when writing own rules with new properties, exclude the property path e.g.: 'my_rule_set,.*>.*>[my_property]'
+  excludes: ''
+
+processors:
+  active: true
+  exclude:
+    - 'DetektProgressListener'
+  # - 'KtFileCountProcessor'
+  # - 'PackageCountProcessor'
+  # - 'ClassCountProcessor'
+  # - 'FunctionCountProcessor'
+  # - 'PropertyCountProcessor'
+  # - 'ProjectComplexityProcessor'
+  # - 'ProjectCognitiveComplexityProcessor'
+  # - 'ProjectLLOCProcessor'
+  # - 'ProjectCLOCProcessor'
+  # - 'ProjectLOCProcessor'
+  # - 'ProjectSLOCProcessor'
+  # - 'LicenseHeaderLoaderExtension'
+
+console-reports:
+  active: true
+  exclude:
+    - 'ProjectStatisticsReport'
+    - 'ComplexityReport'
+    - 'NotificationReport'
+    - 'FindingsReport'
+    - 'FileBasedFindingsReport'
+  #  - 'LiteFindingsReport'
+
+output-reports:
+  active: true
+  exclude:
+    - 'TxtOutputReport'
+    - 'XmlOutputReport'
+    # - 'HtmlOutputReport'
+    - 'MdOutputReport'
+    - 'SarifOutputReport'
+
+comments:
+  active: true
+  AbsentOrWrongFileLicense:
+    active: false
+    licenseTemplateFile: 'license.template'
+    licenseTemplateIsRegex: false
+  CommentOverPrivateFunction:
+    active: false
+  CommentOverPrivateProperty:
+    active: false
+  DeprecatedBlockTag:
+    active: false
+  EndOfSentenceFormat:
+    active: false
+    endOfSentenceFormat: '([.?!][ \t\n\r\f<])|([.?!:]$)'
+  KDocReferencesNonPublicProperty:
+    active: false
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+  OutdatedDocumentation:
+    active: false
+    matchTypeParameters: true
+    matchDeclarationsOrder: true
+    allowParamOnConstructorProperties: false
+  UndocumentedPublicClass:
+    active: false
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+    searchInNestedClass: true
+    searchInInnerClass: true
+    searchInInnerObject: true
+    searchInInnerInterface: true
+    searchInProtectedClass: false
+  UndocumentedPublicFunction:
+    active: false
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+    searchProtectedFunction: false
+  UndocumentedPublicProperty:
+    active: false
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+    searchProtectedProperty: false
+
+complexity:
+  active: true
+  CognitiveComplexMethod:
+    active: false
+    threshold: 15
+  ComplexCondition:
+    active: true
+    threshold: 6
+  ComplexInterface:
+    active: false
+    threshold: 10
+    includeStaticDeclarations: false
+    includePrivateDeclarations: false
+    ignoreOverloaded: false
+  CyclomaticComplexMethod:
+    active: false
+    threshold: 15
+    ignoreSingleWhenExpression: false
+    ignoreSimpleWhenEntries: false
+    ignoreNestingFunctions: false
+    nestingFunctions:
+      - 'also'
+      - 'apply'
+      - 'forEach'
+      - 'isNotNull'
+      - 'ifNull'
+      - 'let'
+      - 'run'
+      - 'use'
+      - 'with'
+  LabeledExpression:
+    active: false
+    ignoredLabels: [ ]
+  LargeClass:
+    active: true
+    threshold: 600
+  LongMethod:
+    active: false
+    threshold: 120
+  LongParameterList:
+    active: false
+    functionThreshold: 20
+    constructorThreshold: 20
+    ignoreDefaultParameters: true
+    ignoreDataClasses: true
+    ignoreAnnotatedParameter: [ 'Preview', 'Composable' ]
+  MethodOverloading:
+    active: false
+    threshold: 6
+  NamedArguments:
+    active: false
+    threshold: 3
+    ignoreArgumentsMatchingNames: false
+  NestedBlockDepth:
+    active: true
+    threshold: 4
+  NestedScopeFunctions:
+    active: false
+    threshold: 1
+    functions:
+      - 'kotlin.apply'
+      - 'kotlin.run'
+      - 'kotlin.with'
+      - 'kotlin.let'
+      - 'kotlin.also'
+  ReplaceSafeCallChainWithRun:
+    active: false
+  StringLiteralDuplication:
+    active: false
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+    threshold: 3
+    ignoreAnnotation: true
+    excludeStringsWithLessThan5Characters: true
+    ignoreStringsRegex: '$^'
+  TooManyFunctions:
+    active: false
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+    thresholdInFiles: 11
+    thresholdInClasses: 11
+    thresholdInInterfaces: 11
+    thresholdInObjects: 11
+    thresholdInEnums: 11
+    ignoreDeprecated: false
+    ignorePrivate: false
+    ignoreOverridden: false
+
+coroutines:
+  active: true
+  GlobalCoroutineUsage:
+    active: false
+  InjectDispatcher:
+    active: false
+    dispatcherNames:
+      - 'IO'
+      - 'Default'
+      - 'Unconfined'
+  RedundantSuspendModifier:
+    active: true
+  SleepInsteadOfDelay:
+    active: true
+  SuspendFunSwallowedCancellation:
+    active: false
+  SuspendFunWithCoroutineScopeReceiver:
+    active: false
+  SuspendFunWithFlowReturnType:
+    active: true
+
+empty-blocks:
+  active: true
+  EmptyCatchBlock:
+    active: true
+    allowedExceptionNameRegex: '_|(ignore|expected).*'
+  EmptyClassBlock:
+    active: true
+  EmptyDefaultConstructor:
+    active: true
+  EmptyDoWhileBlock:
+    active: true
+  EmptyElseBlock:
+    active: true
+  EmptyFinallyBlock:
+    active: true
+  EmptyForBlock:
+    active: true
+  EmptyFunctionBlock:
+    active: true
+    ignoreOverridden: false
+  EmptyIfBlock:
+    active: true
+  EmptyInitBlock:
+    active: true
+  EmptyKtFile:
+    active: true
+  EmptySecondaryConstructor:
+    active: true
+  EmptyTryBlock:
+    active: true
+  EmptyWhenBlock:
+    active: true
+  EmptyWhileBlock:
+    active: true
+
+exceptions:
+  active: true
+  ExceptionRaisedInUnexpectedLocation:
+    active: true
+    methodNames:
+      - 'equals'
+      - 'finalize'
+      - 'hashCode'
+      - 'toString'
+  InstanceOfCheckForException:
+    active: true
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+  NotImplementedDeclaration:
+    active: false
+  ObjectExtendsThrowable:
+    active: false
+  PrintStackTrace:
+    active: true
+  RethrowCaughtException:
+    active: true
+  ReturnFromFinally:
+    active: true
+    ignoreLabeled: false
+  SwallowedException:
+    active: true
+    ignoredExceptionTypes:
+      - 'InterruptedException'
+      - 'MalformedURLException'
+      - 'NumberFormatException'
+      - 'ParseException'
+    allowedExceptionNameRegex: '_|(ignore|expected).*'
+  ThrowingExceptionFromFinally:
+    active: true
+  ThrowingExceptionInMain:
+    active: false
+  ThrowingExceptionsWithoutMessageOrCause:
+    active: true
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+    exceptions:
+      - 'ArrayIndexOutOfBoundsException'
+      - 'Exception'
+      - 'IllegalArgumentException'
+      - 'IllegalMonitorStateException'
+      - 'IllegalStateException'
+      - 'IndexOutOfBoundsException'
+      - 'NullPointerException'
+      - 'RuntimeException'
+      - 'Throwable'
+  ThrowingNewInstanceOfSameException:
+    active: true
+  TooGenericExceptionCaught:
+    active: false
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+    exceptionNames:
+      - 'ArrayIndexOutOfBoundsException'
+      - 'Error'
+      - 'Exception'
+      - 'IllegalMonitorStateException'
+      - 'IndexOutOfBoundsException'
+      - 'RuntimeException'
+      - 'Throwable'
+    allowedExceptionNameRegex: '_|(ignore|expected).*'
+  TooGenericExceptionThrown:
+    active: true
+    exceptionNames:
+      - 'Error'
+      - 'Exception'
+      - 'RuntimeException'
+      - 'Throwable'
+
+naming:
+  active: true
+  BooleanPropertyNaming:
+    active: true
+    allowedPattern: '^(is|has|are|should|can|will|did)'
+  ClassNaming:
+    active: true
+    classPattern: '[A-Z][a-zA-Z0-9]*'
+  ConstructorParameterNaming:
+    active: true
+    parameterPattern: '[a-z][A-Za-z0-9]*'
+    privateParameterPattern: '[a-z][A-Za-z0-9]*'
+    excludeClassPattern: '$^'
+  EnumNaming:
+    active: true
+    enumEntryPattern: '[A-Z][_a-zA-Z0-9]*'
+  ForbiddenClassName:
+    active: false
+    forbiddenName: [ ]
+  FunctionMaxLength:
+    active: false
+    maximumFunctionNameLength: 30
+  FunctionMinLength:
+    active: false
+    minimumFunctionNameLength: 3
+  FunctionNaming:
+    active: true
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+    functionPattern: '[a-zA-Z][a-zA-Z0-9]*'
+    excludeClassPattern: '$^'
+    ignoreAnnotated: [ 'Preview', 'Composable' ]
+  FunctionParameterNaming:
+    active: true
+    parameterPattern: '[a-z][A-Za-z0-9]*'
+    excludeClassPattern: '$^'
+  InvalidPackageDeclaration:
+    active: true
+    rootPackage: ''
+    requireRootInDeclaration: false
+  LambdaParameterNaming:
+    active: false
+    parameterPattern: '[a-z][A-Za-z0-9]*|_'
+  MatchingDeclarationName:
+    active: true
+    mustBeFirst: true
+  MemberNameEqualsClassName:
+    active: true
+    ignoreOverridden: true
+  NoNameShadowing:
+    active: true
+  NonBooleanPropertyPrefixedWithIs:
+    active: true
+  ObjectPropertyNaming:
+    active: true
+    constantPattern: '[A-Za-z][_A-Za-z0-9]*'
+    propertyPattern: '[A-Za-z][_A-Za-z0-9]*'
+    privatePropertyPattern: '(_)?[A-Za-z][_A-Za-z0-9]*'
+  PackageNaming:
+    active: true
+    packagePattern: '[a-z]+(\.[a-z][A-Za-z0-9]*)*'
+  TopLevelPropertyNaming:
+    active: true
+    constantPattern: '[A-Z][_A-Z0-9]*'
+    propertyPattern: '[A-Za-z][_A-Za-z0-9]*'
+    privatePropertyPattern: '_?[A-Za-z][_A-Za-z0-9]*'
+  VariableMaxLength:
+    active: false
+    maximumVariableNameLength: 64
+  VariableMinLength:
+    active: false
+    minimumVariableNameLength: 1
+  VariableNaming:
+    active: true
+    variablePattern: '[a-z][A-Za-z0-9]*'
+    privateVariablePattern: '(_)?[a-z][A-Za-z0-9]*'
+    excludeClassPattern: '$^'
+
+performance:
+  active: true
+  ArrayPrimitive:
+    active: true
+  CouldBeSequence:
+    active: false
+    threshold: 3
+  ForEachOnRange:
+    active: true
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+  SpreadOperator:
+    active: true
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+  UnnecessaryPartOfBinaryExpression:
+    active: false
+  UnnecessaryTemporaryInstantiation:
+    active: true
+
+potential-bugs:
+  active: true
+  AvoidReferentialEquality:
+    active: true
+    forbiddenTypePatterns:
+      - 'kotlin.String'
+  CastNullableToNonNullableType:
+    active: false
+  CastToNullableType:
+    active: false
+  Deprecation:
+    active: false
+  DontDowncastCollectionTypes:
+    active: false
+  DoubleMutabilityForCollection:
+    active: true
+    mutableTypes:
+      - 'kotlin.collections.MutableList'
+      - 'kotlin.collections.MutableMap'
+      - 'kotlin.collections.MutableSet'
+      - 'java.util.ArrayList'
+      - 'java.util.LinkedHashSet'
+      - 'java.util.HashSet'
+      - 'java.util.LinkedHashMap'
+      - 'java.util.HashMap'
+  ElseCaseInsteadOfExhaustiveWhen:
+    active: false
+    ignoredSubjectTypes: [ ]
+  EqualsAlwaysReturnsTrueOrFalse:
+    active: true
+  EqualsWithHashCodeExist:
+    active: true
+  ExitOutsideMain:
+    active: false
+  ExplicitGarbageCollectionCall:
+    active: true
+  HasPlatformType:
+    active: true
+  IgnoredReturnValue:
+    active: true
+    restrictToConfig: true
+    returnValueAnnotations:
+      - 'CheckResult'
+      - '*.CheckResult'
+      - 'CheckReturnValue'
+      - '*.CheckReturnValue'
+    ignoreReturnValueAnnotations:
+      - 'CanIgnoreReturnValue'
+      - '*.CanIgnoreReturnValue'
+    returnValueTypes:
+      - 'kotlin.sequences.Sequence'
+      - 'kotlinx.coroutines.flow.*Flow'
+      - 'java.util.stream.*Stream'
+    ignoreFunctionCall: [ ]
+  ImplicitDefaultLocale:
+    active: true
+  ImplicitUnitReturnType:
+    active: false
+    allowExplicitReturnType: true
+  InvalidRange:
+    active: true
+  IteratorHasNextCallsNextMethod:
+    active: true
+  IteratorNotThrowingNoSuchElementException:
+    active: true
+  LateinitUsage:
+    active: false
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+    ignoreOnClassesPattern: ''
+  MapGetWithNotNullAssertionOperator:
+    active: true
+  MissingPackageDeclaration:
+    active: false
+    excludes: [ '**/*.kts' ]
+  NullCheckOnMutableProperty:
+    active: false
+  NullableToStringCall:
+    active: false
+  PropertyUsedBeforeDeclaration:
+    active: false
+  UnconditionalJumpStatementInLoop:
+    active: false
+  UnnecessaryNotNullCheck:
+    active: false
+  UnnecessaryNotNullOperator:
+    active: true
+  UnnecessarySafeCall:
+    active: true
+  UnreachableCatchBlock:
+    active: true
+  UnreachableCode:
+    active: true
+  UnsafeCallOnNullableType:
+    active: true
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**' ]
+  UnsafeCast:
+    active: true
+  UnusedUnaryOperator:
+    active: true
+  UselessPostfixExpression:
+    active: true
+  WrongEqualsTypeParameter:
+    active: true
+
+style:
+  active: true
+  AlsoCouldBeApply:
+    active: false
+  BracesOnIfStatements:
+    active: false
+    singleLine: 'never'
+    multiLine: 'always'
+  BracesOnWhenStatements:
+    active: false
+    singleLine: 'necessary'
+    multiLine: 'consistent'
+  CanBeNonNullable:
+    active: false
+  CascadingCallWrapping:
+    active: false
+    includeElvis: true
+  ClassOrdering:
+    active: true
+  CollapsibleIfStatements:
+    active: false
+  DataClassContainsFunctions:
+    active: false
+    conversionFunctionPrefix:
+      - 'to'
+    allowOperators: false
+  DataClassShouldBeImmutable:
+    active: false
+  DestructuringDeclarationWithTooManyEntries:
+    active: true
+    maxDestructuringEntries: 3
+  DoubleNegativeLambda:
+    active: false
+    negativeFunctions:
+      - reason: 'Use `takeIf` instead.'
+        value: 'takeUnless'
+      - reason: 'Use `all` instead.'
+        value: 'none'
+    negativeFunctionNameParts:
+      - 'not'
+      - 'non'
+  EqualsNullCall:
+    active: true
+  EqualsOnSignatureLine:
+    active: false
+  ExplicitCollectionElementAccessMethod:
+    active: false
+  ExplicitItLambdaParameter:
+    active: true
+  ExpressionBodySyntax:
+    active: false
+    includeLineWrapping: false
+  ForbiddenAnnotation:
+    active: false
+    annotations:
+      - reason: 'it is a java annotation. Use `Suppress` instead.'
+        value: 'java.lang.SuppressWarnings'
+      - reason: 'it is a java annotation. Use `kotlin.Deprecated` instead.'
+        value: 'java.lang.Deprecated'
+      - reason: 'it is a java annotation. Use `kotlin.annotation.MustBeDocumented` instead.'
+        value: 'java.lang.annotation.Documented'
+      - reason: 'it is a java annotation. Use `kotlin.annotation.Target` instead.'
+        value: 'java.lang.annotation.Target'
+      - reason: 'it is a java annotation. Use `kotlin.annotation.Retention` instead.'
+        value: 'java.lang.annotation.Retention'
+      - reason: 'it is a java annotation. Use `kotlin.annotation.Repeatable` instead.'
+        value: 'java.lang.annotation.Repeatable'
+      - reason: 'Kotlin does not support @Inherited annotation, see https://youtrack.jetbrains.com/issue/KT-22265'
+        value: 'java.lang.annotation.Inherited'
+  ForbiddenComment:
+    active: true
+    comments:
+      - reason: 'Forbidden FIXME todo marker in comment, please fix the problem.'
+        value: 'FIXME:'
+      - reason: 'Forbidden STOPSHIP todo marker in comment, please address the problem before shipping the code.'
+        value: 'STOPSHIP:'
+      - reason: 'Forbidden TODO todo marker in comment, please do the changes.'
+        value: 'TODO:'
+    allowedPatterns: ''
+  ForbiddenImport:
+    active: false
+    imports: [ ]
+    forbiddenPatterns: ''
+  ForbiddenMethodCall:
+    active: false
+    methods:
+      - reason: 'print does not allow you to configure the output stream. Use a logger instead.'
+        value: 'kotlin.io.print'
+      - reason: 'println does not allow you to configure the output stream. Use a logger instead.'
+        value: 'kotlin.io.println'
+  ForbiddenSuppress:
+    active: false
+    rules: [ ]
+  ForbiddenVoid:
+    active: true
+    ignoreOverridden: false
+    ignoreUsageInGenerics: false
+  FunctionOnlyReturningConstant:
+    active: true
+    ignoreOverridableFunction: true
+    ignoreActualFunction: true
+    excludedFunctions: [ ]
+  LoopWithTooManyJumpStatements:
+    active: true
+    maxJumpCount: 1
+  MagicNumber:
+    active: true
+    excludes: [ '**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**', '**/*.kts' ]
+    ignoreNumbers:
+      - '-1'
+      - '0'
+      - '1'
+      - '2'
+    ignoreHashCodeFunction: true
+    ignorePropertyDeclaration: true
+    ignoreLocalVariableDeclaration: false
+    ignoreConstantDeclaration: true
+    ignoreCompanionObjectPropertyDeclaration: true
+    ignoreAnnotation: false
+    ignoreNamedArgument: true
+    ignoreEnums: false
+    ignoreRanges: false
+    ignoreExtensionFunctions: true
+  MandatoryBracesLoops:
+    active: false
+  MaxChainedCallsOnSameLine:
+    active: false
+    maxChainedCalls: 5
+  MaxLineLength:
+    active: true
+    maxLineLength: 200
+    excludePackageStatements: true
+    excludeImportStatements: true
+    excludeCommentStatements: false
+    excludeRawStrings: true
+  MayBeConst:
+    active: true
+  ModifierOrder:
+    active: true
+  MultilineLambdaItParameter:
+    active: false
+  MultilineRawStringIndentation:
+    active: false
+    indentSize: 4
+    trimmingMethods:
+      - 'trimIndent'
+      - 'trimMargin'
+  NestedClassesVisibility:
+    active: true
+  NewLineAtEndOfFile:
+    active: true
+  NoTabs:
+    active: false
+  NullableBooleanCheck:
+    active: false
+  ObjectLiteralToLambda:
+    active: true
+  OptionalAbstractKeyword:
+    active: true
+  OptionalUnit:
+    active: false
+  OptionalWhenBraces:
+    active: false
+  PreferToOverPairSyntax:
+    active: false
+  ProtectedMemberInFinalClass:
+    active: true
+  RedundantExplicitType:
+    active: false
+  RedundantHigherOrderMapUsage:
+    active: true
+  RedundantVisibilityModifierRule:
+    active: false
+  ReturnCount:
+    active: true
+    max: 4
+    excludedFunctions:
+      - 'equals'
+    excludeLabeled: false
+    excludeReturnFromLambda: true
+    excludeGuardClauses: false
+  SafeCast:
+    active: true
+  SerialVersionUIDInSerializableClass:
+    active: true
+  SpacingBetweenPackageAndImports:
+    active: false
+  StringShouldBeRawString:
+    active: false
+    maxEscapedCharacterCount: 2
+    ignoredCharacters: [ ]
+  ThrowsCount:
+    active: true
+    max: 2
+    excludeGuardClauses: false
+  TrailingWhitespace:
+    active: false
+  TrimMultilineRawString:
+    active: false
+    trimmingMethods:
+      - 'trimIndent'
+      - 'trimMargin'
+  UnderscoresInNumericLiterals:
+    active: false
+    acceptableLength: 4
+    allowNonStandardGrouping: false
+  UnnecessaryAbstractClass:
+    active: true
+  UnnecessaryAnnotationUseSiteTarget:
+    active: false
+  UnnecessaryApply:
+    active: true
+  UnnecessaryBackticks:
+    active: false
+  UnnecessaryBracesAroundTrailingLambda:
+    active: false
+  UnnecessaryFilter:
+    active: true
+  UnnecessaryInheritance:
+    active: true
+  UnnecessaryInnerClass:
+    active: false
+  UnnecessaryLet:
+    active: false
+  UnnecessaryParentheses:
+    active: false
+    allowForUnclearPrecedence: false
+  UntilInsteadOfRangeTo:
+    active: false
+  UnusedImports:
+    active: true
+  UnusedParameter:
+    active: true
+    allowedNames: 'ignored|expected'
+  UnusedPrivateClass:
+    active: true
+  UnusedPrivateMember:
+    active: true
+    allowedNames: ''
+  UnusedPrivateProperty:
+    active: true
+    allowedNames: '_|ignored|expected|serialVersionUID'
+  UseAnyOrNoneInsteadOfFind:
+    active: true
+  UseArrayLiteralsInAnnotations:
+    active: true
+  UseCheckNotNull:
+    active: true
+  UseCheckOrError:
+    active: true
+  UseDataClass:
+    active: false
+    allowVars: false
+  UseEmptyCounterpart:
+    active: false
+  UseIfEmptyOrIfBlank:
+    active: false
+  UseIfInsteadOfWhen:
+    active: false
+    ignoreWhenContainingVariableDeclaration: false
+  UseIsNullOrEmpty:
+    active: true
+  UseLet:
+    active: false
+  UseOrEmpty:
+    active: true
+  UseRequire:
+    active: true
+  UseRequireNotNull:
+    active: true
+  UseSumOfInsteadOfFlatMapSize:
+    active: false
+  UselessCallOnNotNull:
+    active: true
+  UtilityClassWithPublicConstructor:
+    active: true
+  VarCouldBeVal:
+    active: true
+    ignoreLateinitVar: false
+  WildcardImport:
+    active: true
+    excludeImports:
+      - 'java.util.*'
diff --git a/gradle.properties b/gradle.properties
new file mode 100644
index 0000000..5e4d56d
--- /dev/null
+++ b/gradle.properties
@@ -0,0 +1,12 @@
+#Gradle
+org.gradle.jvmargs=-Xmx2048M -Dfile.encoding=UTF-8 -Dkotlin.daemon.jvm.options\="-Xmx2048M"
+org.gradle.caching=true
+org.gradle.configuration-cache=true
+#Kotlin
+kotlin.code.style=official
+kotlin.js.compiler=ir
+#MPP
+kotlin.mpp.enableCInteropCommonization=true
+#Android
+android.useAndroidX=true
+android.nonTransitiveRClass=true
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
new file mode 100644
index 0000000..308b462
--- /dev/null
+++ b/gradle/libs.versions.toml
@@ -0,0 +1,22 @@
+[versions]
+compose = "1.5.12"
+kobweb = "0.16.2"
+kotlin = "1.9.22"
+materialWeb = "v1.2.0"
+nexus-publish = "2.0.0-rc-1"
+
+[libraries]
+kobweb-core = { module = "com.varabyte.kobweb:kobweb-core ", version.ref = "kobweb" }
+kobweb-silk = { module = "com.varabyte.kobweb:kobweb-silk", version.ref = "kobweb" }
+kobwebx-markdown = { module = "com.varabyte.kobwebx:kobwebx-markdown", version.ref = "kobweb" }
+silk-foundation = { module = "com.varabyte.kobweb:silk-foundation", version.ref = "kobweb" }
+silk-icons-fa = { module = "com.varabyte.kobwebx:silk-icons-fa", version.ref = "kobweb" }
+silk-icons-mdi = { module = "com.varabyte.kobwebx:silk-icons-mdi", version.ref = "kobweb" }
+
+kotlin-test = { module = "org.jetbrains.kotlin:kotlin-test", version.ref = "kotlin" }
+
+nexus-publish = { module = "io.github.gradle-nexus.publish-plugin:io.github.gradle-nexus.publish-plugin.gradle.plugin", version.ref = "nexus-publish" }
+
+[plugins]
+jetbrainsCompose = { id = "org.jetbrains.compose", version.ref = "compose" }
+kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
diff --git a/gradle/wrapper/gradle-wrapper.jar b/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 0000000..afba109
Binary files /dev/null and b/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
new file mode 100644
index 0000000..0c85a1f
--- /dev/null
+++ b/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,6 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.1-bin.zip
+networkTimeout=10000
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
diff --git a/gradlew b/gradlew
new file mode 100755
index 0000000..65dcd68
--- /dev/null
+++ b/gradlew
@@ -0,0 +1,244 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045 
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045 
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+# Collect all arguments for the java command;
+#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
+#     shell script including quotes and variable substitutions, so put them in
+#     double quotes to make sure that they get re-expanded; and
+#   * put everything else in single quotes, so that it's not re-expanded.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"
diff --git a/gradlew.bat b/gradlew.bat
new file mode 100644
index 0000000..93e3f59
--- /dev/null
+++ b/gradlew.bat
@@ -0,0 +1,92 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
diff --git a/library/build.gradle.kts b/library/build.gradle.kts
new file mode 100644
index 0000000..9c0d9b7
--- /dev/null
+++ b/library/build.gradle.kts
@@ -0,0 +1,29 @@
+plugins {
+    alias(libs.plugins.kotlinMultiplatform)
+    alias(libs.plugins.jetbrainsCompose)
+    id("module.publication")
+}
+
+kotlin {
+    applyDefaultHierarchyTemplate()
+
+    js(IR) {
+        browser {
+            commonWebpackConfig {
+                scssSupport {
+                    enabled.set(true)
+                }
+            }
+        }
+//        binaries.executable()
+    }
+
+    sourceSets {
+        jsMain.dependencies {
+            implementation(compose.html.core)
+            implementation(compose.runtime)
+            implementation(libs.kobweb.silk)
+            api(npm("@material/web", libs.versions.materialWeb.get()))
+        }
+    }
+}
diff --git a/library/src/jsMain/kotlin/material/web/common/Common.kt b/library/src/jsMain/kotlin/material/web/common/Common.kt
new file mode 100644
index 0000000..a662959
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/common/Common.kt
@@ -0,0 +1,4 @@
+package material.web.common
+
+@JsName("require")
+external fun jsRequire(module: String): dynamic
diff --git a/library/src/jsMain/kotlin/material/web/common/InvalidCallException.kt b/library/src/jsMain/kotlin/material/web/common/InvalidCallException.kt
new file mode 100644
index 0000000..8f97fb2
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/common/InvalidCallException.kt
@@ -0,0 +1,3 @@
+package material.web.common
+
+internal class InvalidCallException : Exception()
diff --git a/library/src/jsMain/kotlin/material/web/common/MdElement.kt b/library/src/jsMain/kotlin/material/web/common/MdElement.kt
new file mode 100644
index 0000000..709a2ee
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/common/MdElement.kt
@@ -0,0 +1,35 @@
+package material.web.common
+
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.css.StyleScope
+import org.jetbrains.compose.web.dom.ElementBuilder
+import org.jetbrains.compose.web.dom.ElementScope
+import org.jetbrains.compose.web.dom.TagElement
+import org.w3c.dom.Element
+
+@Composable
+fun <TElement : MdElement> MdTagElement(
+    tagName: String,
+    applyAttrs: (AttrsScope<TElement>.() -> Unit)?,
+    content: (@Composable ElementScope<TElement>.() -> Unit)?,
+) = TagElement(
+    elementBuilder = ElementBuilder.createBuilder(tagName),
+    applyAttrs = applyAttrs,
+    content = content
+)
+
+abstract class MdElement : Element()
+
+var AttrsScope<Element>.slot: String
+    get() {
+        throw InvalidCallException()
+    }
+    set(value) {
+        this.attr("slot", value)
+    }
+
+
+fun <T> StyleScope.propertyOf(propertyName: String, value: T?) = value?.let {
+    property(propertyName, org.jetbrains.compose.web.css.StylePropertyValue(it.toString()))
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Badge.kt b/library/src/jsMain/kotlin/material/web/component/Badge.kt
new file mode 100644
index 0000000..7e1fd57
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Badge.kt
@@ -0,0 +1,26 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Badge(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    value: String = "",
+) {
+    val tag = "badge"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            attr("value", value)
+        },
+        content = {}
+    ).also { jsRequire("@material/web/labs/badge/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Button.kt b/library/src/jsMain/kotlin/material/web/component/Button.kt
new file mode 100644
index 0000000..7fb82b6
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Button.kt
@@ -0,0 +1,210 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticMouseEvent
+import com.varabyte.kobweb.compose.css.CSSLengthOrPercentageNumericValue
+import com.varabyte.kobweb.compose.foundation.layout.Box
+import com.varabyte.kobweb.compose.foundation.layout.Row
+import com.varabyte.kobweb.compose.foundation.layout.RowScope
+import com.varabyte.kobweb.compose.ui.Alignment
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.onClick
+import com.varabyte.kobweb.compose.ui.modifiers.size
+import com.varabyte.kobweb.compose.ui.styleModifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.css.CSSColorValue
+import org.jetbrains.compose.web.css.px
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+private fun BaseButton(
+    attrs: AttrBuilderContext<MdElement>?,
+    name: String,
+    onClick: (SyntheticMouseEvent) -> Unit,
+    leadingIcon: @Composable (() -> Unit)?,
+    trailingIcon: @Composable (() -> Unit)?,
+    disabled: Boolean,
+    content: @Composable RowScope.() -> Unit,
+) {
+    MdTagElement(
+        tagName = "md-$name-button",
+        applyAttrs = Modifier
+            .onClick { evt ->
+                onClick(evt)
+                evt.stopPropagation()
+            }
+            .toAttrs {
+                attrs?.invoke(this)
+                classes("md-button")
+                trailingIcon?.let { attr("hasIcon", "") }
+                if (disabled) attr("disabled", "")
+            },
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            leadingIcon?.let {
+                it()
+                Box(Modifier.size(8.px))
+            }
+            content()
+            trailingIcon?.let {
+                Box(Modifier.size(8.px))
+                it()
+            }
+        }
+    }.also { jsRequire("@material/web/button/$name-button.js") }
+}
+
+@Composable
+fun ElevatedButton(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    onClick: (SyntheticMouseEvent) -> Unit,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    trailingIcon: @Composable (() -> Unit)? = null,
+    disabled: Boolean = false,
+    containerColor: CSSColorValue? = null,
+    labelTextColor: CSSColorValue? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    labelTextFont: String? = null,
+    content: @Composable RowScope.() -> Unit,
+) {
+    val tag = "elevated"
+    BaseButton(
+        name = tag,
+        onClick = onClick,
+        disabled = disabled,
+        leadingIcon = leadingIcon,
+        trailingIcon = trailingIcon,
+        attrs = Modifier
+            .styleModifier {
+                containerColor?.let { property("--md-$tag-button-container-color", it.toString()) }
+                labelTextColor?.let { property("--md-$tag-button-label-text-color", it.toString()) }
+                containerShape?.let { property("--md-$tag-button-container-shape", it.toString()) }
+                labelTextFont?.let { property("--md-$tag-button-label-text-font", it) }
+            }.toAttrs { attrs?.invoke(this) },
+        content = content
+    )
+}
+
+@Composable
+fun FilledButton(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    onClick: (SyntheticMouseEvent) -> Unit,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    trailingIcon: @Composable (() -> Unit)? = null,
+    disabled: Boolean = false,
+    containerColor: CSSColorValue? = null,
+    disabledContainerColor: CSSColorValue? = null,
+    labelTextColor: CSSColorValue? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    labelTextFont: String? = null,
+    content: @Composable RowScope.() -> Unit,
+) {
+    val tag = "filled"
+    BaseButton(
+        name = tag,
+        onClick = onClick,
+        disabled = disabled,
+        leadingIcon = leadingIcon,
+        trailingIcon = trailingIcon,
+        attrs = Modifier.styleModifier {
+            containerColor?.let { property("--md-$tag-button-container-color", it.toString()) }
+            disabledContainerColor?.let { property("--md-$tag-button-disabled-container-color", it.toString()) }
+            labelTextColor?.let { property("--md-$tag-button-label-text-color", it.toString()) }
+            containerShape?.let { property("--md-$tag-button-container-shape", it.toString()) }
+            labelTextFont?.let { property("--md-$tag-button-label-text-font", it) }
+        }.toAttrs { attrs?.invoke(this) },
+        content = content
+    )
+}
+
+@Composable
+fun OutlinedButton(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    onClick: (SyntheticMouseEvent) -> Unit,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    trailingIcon: @Composable (() -> Unit)? = null,
+    disabled: Boolean = false,
+    containerColor: CSSColorValue? = null,
+    labelTextColor: CSSColorValue? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    labelTextFont: String? = null,
+    content: @Composable RowScope.() -> Unit,
+) {
+    val tag = "outlined"
+    BaseButton(
+        name = tag,
+        onClick = onClick,
+        disabled = disabled,
+        leadingIcon = leadingIcon,
+        trailingIcon = trailingIcon,
+        attrs = Modifier.styleModifier {
+            containerColor?.let { property("--md-$tag-button-outline-color", it.toString()) }
+            labelTextColor?.let { property("--md-$tag-button-label-text-color", it.toString()) }
+            containerShape?.let { property("--md-$tag-button-container-shape", it.toString()) }
+            labelTextFont?.let { property("--md-$tag-button-label-text-font", it) }
+        }.toAttrs { attrs?.invoke(this) },
+        content = content
+    )
+}
+
+@Composable
+fun FilledTonalButton(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    onClick: (SyntheticMouseEvent) -> Unit,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    trailingIcon: @Composable (() -> Unit)? = null,
+    disabled: Boolean = false,
+    containerColor: CSSColorValue? = null,
+    labelTextColor: CSSColorValue? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    labelTextFont: String? = null,
+    content: @Composable RowScope.() -> Unit,
+) {
+    val tag = "filled-tonal"
+    BaseButton(
+        name = tag,
+        onClick = onClick,
+        disabled = disabled,
+        leadingIcon = leadingIcon,
+        trailingIcon = trailingIcon,
+        attrs = Modifier.styleModifier {
+            containerColor?.let { property("--md-$tag-button-outline-color", it.toString()) }
+            labelTextColor?.let { property("--md-$tag-button-label-text-color", it.toString()) }
+            containerShape?.let { property("--md-$tag-button-container-shape", it.toString()) }
+            labelTextFont?.let { property("--md-$tag-button-label-text-font", it) }
+        }.toAttrs { attrs?.invoke(this) },
+        content = content
+    )
+}
+
+@Composable
+fun TextButton(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    onClick: (SyntheticMouseEvent) -> Unit,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    trailingIcon: @Composable (() -> Unit)? = null,
+    disabled: Boolean = false,
+    labelTextColor: CSSColorValue? = null,
+    labelTextFont: String? = null,
+    content: @Composable RowScope.() -> Unit,
+) {
+    val tag = "text"
+    BaseButton(
+        name = "text",
+        onClick = onClick,
+        disabled = disabled,
+        leadingIcon = leadingIcon,
+        trailingIcon = trailingIcon,
+        attrs = Modifier.styleModifier {
+            labelTextColor?.let { property("--md-$tag-button-label-text-color", it.toString()) }
+            labelTextFont?.let { property("--md-$tag-button-label-text-font", it) }
+        }.toAttrs { attrs?.invoke(this) },
+        content = content
+    )
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Checkbox.kt b/library/src/jsMain/kotlin/material/web/component/Checkbox.kt
new file mode 100644
index 0000000..b30f077
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Checkbox.kt
@@ -0,0 +1,56 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticMouseEvent
+import com.varabyte.kobweb.compose.css.CSSLengthOrPercentageNumericValue
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.onClick
+import com.varabyte.kobweb.compose.ui.styleModifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.css.CSSColorValue
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Checkbox(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    value: Boolean? = null,
+    onClick: (SyntheticMouseEvent) -> Unit = {},
+    checked: Boolean = false,
+    indeterminate: Boolean = false,
+    disabled: Boolean = false,
+    shape: CSSLengthOrPercentageNumericValue? = null,
+    containerSize: CSSLengthOrPercentageNumericValue? = null,
+    outlineColor: CSSColorValue? = null,
+    outlineWidth: CSSLengthOrPercentageNumericValue? = null,
+    selectedContainerColor: CSSColorValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "checkbox"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier
+            .onClick { onClick(it) }
+            .styleModifier {
+                shape?.let { property("--md-$tag-container-shape", it.toString()) }
+                containerSize?.let { property("--md-$tag-container-size", it.toString()) }
+                outlineColor?.let { property("--md-$tag-outline-color", it.toString()) }
+                selectedContainerColor?.let { property("--md-$tag-selected-container-color", it.toString()) }
+                outlineWidth?.let { property("--md-$tag-outline-width", it.toString()) }
+            }
+            .toAttrs {
+                attrs?.invoke(this)
+                value?.let { attr("value", it.toString()) }
+                if (disabled) attr("disabled", "")
+                if (checked) {
+                    attr("checked", "")
+                }
+                indeterminate?.let { attr("indeterminate", "") }
+            },
+        content = content
+    ).also { jsRequire("@material/web/checkbox/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Chip.kt b/library/src/jsMain/kotlin/material/web/component/Chip.kt
new file mode 100644
index 0000000..a1e54c6
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Chip.kt
@@ -0,0 +1,207 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticMouseEvent
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.onClick
+import com.varabyte.kobweb.compose.ui.styleModifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.css.CSSColorValue
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+private fun BaseChip(
+    attrs: AttrBuilderContext<MdElement>?,
+    label: String,
+    elevated: Boolean,
+    disabled: Boolean,
+    alwaysFocusable: Boolean,
+    tagName: String,
+    selectedContainerColor: CSSColorValue?,
+    outlineColor: CSSColorValue?,
+    labelTextColor: CSSColorValue?,
+    containerShape: String?,
+    iconSize: String?,
+    onClick: (SyntheticMouseEvent) -> Unit,
+    content: ContentBuilder<MdElement>?,
+) {
+    MdTagElement(
+        tagName = "md-$tagName",
+        applyAttrs = Modifier
+            .onClick { onClick(it) }
+            .styleModifier {
+                selectedContainerColor?.let { property("--md-filter-chip-selected-container-color", it.toString()) }
+                outlineColor?.let { property("--md-outlined-text-field-outline-color", it.toString()) }
+                labelTextColor?.let { property("--md-filter-chip-label-text-color", it.toString()) }
+                containerShape?.let { property("--md-outlined-text-field-container-shape", it) }
+                iconSize?.let { property("--md-filter-chip-icon-size", it) }
+            }
+            .toAttrs {
+                attrs?.invoke(this)
+                if (elevated) attr("elevated", "")
+                if (disabled) attr("disabled", "")
+                if (alwaysFocusable) attr("alwaysFocusable", "")
+                attr("label", label)
+            },
+        content = content
+    ).also { jsRequire("@material/web/chips/$tagName.js") }
+}
+
+@Composable
+fun InputChip(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    label: String,
+    avatar: Boolean = false,
+    removeOnly: Boolean = false,
+    elevated: Boolean = false,
+    disabled: Boolean = false,
+    alwaysFocusable: Boolean = false,
+    selectedContainerColor: CSSColorValue? = null,
+    outlineColor: CSSColorValue? = null,
+    labelTextColor: CSSColorValue? = null,
+    containerShape: String? = null,
+    iconSize: String? = null,
+    onClick: (SyntheticMouseEvent) -> Unit = {},
+    content: ContentBuilder<MdElement>? = null,
+) {
+    BaseChip(
+        tagName = "input-chip",
+        onClick = onClick,
+        content = content,
+        label = label,
+        elevated = elevated,
+        disabled = disabled,
+        alwaysFocusable = alwaysFocusable,
+        selectedContainerColor = selectedContainerColor,
+        outlineColor = outlineColor,
+        labelTextColor = labelTextColor,
+        containerShape = containerShape,
+        iconSize = iconSize,
+        attrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            if (avatar) attr("avatar", "")
+            if (removeOnly) attr("removeOnly", "")
+        }
+    )
+}
+
+@Composable
+fun SuggestionChip(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    label: String,
+    elevated: Boolean = false,
+    disabled: Boolean = false,
+    alwaysFocusable: Boolean = false,
+    selectedContainerColor: CSSColorValue? = null,
+    outlineColor: CSSColorValue? = null,
+    labelTextColor: CSSColorValue? = null,
+    containerShape: String? = null,
+    iconSize: String? = null,
+    onClick: (SyntheticMouseEvent) -> Unit = {},
+    content: ContentBuilder<MdElement>? = null,
+) {
+    BaseChip(
+        attrs = attrs,
+        tagName = "suggestion-chip",
+        onClick = onClick,
+        content = content,
+        label = label,
+        elevated = elevated,
+        disabled = disabled,
+        alwaysFocusable = alwaysFocusable,
+        selectedContainerColor = selectedContainerColor,
+        outlineColor = outlineColor,
+        labelTextColor = labelTextColor,
+        containerShape = containerShape,
+        iconSize = iconSize,
+    )
+}
+
+@Composable
+fun FilterChip(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    label: String,
+    selected: Boolean = false,
+    removable: Boolean = false,
+    elevated: Boolean = false,
+    disabled: Boolean = false,
+    alwaysFocusable: Boolean = false,
+    selectedContainerColor: CSSColorValue? = null,
+    outlineColor: CSSColorValue? = null,
+    labelTextColor: CSSColorValue? = null,
+    containerShape: String? = null,
+    iconSize: String? = null,
+    onClick: (SyntheticMouseEvent) -> Unit = {},
+    content: ContentBuilder<MdElement>? = null,
+) {
+    BaseChip(
+        tagName = "filter-chip",
+        onClick = onClick,
+        content = content,
+        label = label,
+        elevated = elevated,
+        disabled = disabled,
+        alwaysFocusable = alwaysFocusable,
+        selectedContainerColor = selectedContainerColor,
+        outlineColor = outlineColor,
+        labelTextColor = labelTextColor,
+        containerShape = containerShape,
+        iconSize = iconSize,
+        attrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            if (removable) attr("removable", "")
+            if (selected) attr("selected", "")
+        }
+    )
+}
+
+@Composable
+fun AssistChip(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    label: String,
+    elevated: Boolean = false,
+    disabled: Boolean = false,
+    alwaysFocusable: Boolean = false,
+    selectedContainerColor: CSSColorValue? = null,
+    outlineColor: CSSColorValue? = null,
+    labelTextColor: CSSColorValue? = null,
+    containerShape: String? = null,
+    iconSize: String? = null,
+    onClick: (SyntheticMouseEvent) -> Unit = {},
+    content: ContentBuilder<MdElement>? = null,
+) {
+    BaseChip(
+        attrs = attrs,
+        tagName = "assist-chip",
+        onClick = onClick,
+        content = content,
+        label = label,
+        elevated = elevated,
+        disabled = disabled,
+        alwaysFocusable = alwaysFocusable,
+        selectedContainerColor = selectedContainerColor,
+        outlineColor = outlineColor,
+        labelTextColor = labelTextColor,
+        containerShape = containerShape,
+        iconSize = iconSize
+    )
+}
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun ChipSet(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "chip-set"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = attrs,
+        content = content
+    ).also { jsRequire("@material/web/chips/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Dialog.kt b/library/src/jsMain/kotlin/material/web/component/Dialog.kt
new file mode 100644
index 0000000..fccc99e
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Dialog.kt
@@ -0,0 +1,54 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticEvent
+import com.varabyte.kobweb.compose.css.Overflow
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import kotlinx.browser.document
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import material.web.common.slot
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.Span
+import org.w3c.dom.events.EventTarget
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Dialog(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    open: Boolean = true,
+    onOpening: ((SyntheticEvent<EventTarget>) -> Unit) = {},
+    onOpened: ((SyntheticEvent<EventTarget>) -> Unit) = {},
+    onClosing: ((SyntheticEvent<EventTarget>) -> Unit) = {},
+    onClosed: ((SyntheticEvent<EventTarget>) -> Unit) = {},
+    onCancel: ((SyntheticEvent<EventTarget>) -> Unit) = {},
+    headline: (@Composable () -> Unit)? = null,
+    actions: (@Composable () -> Unit)? = null,
+    content: @Composable () -> Unit,
+) {
+    val tag = "dialog"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            if (open) attr("open", "")
+            addEventListener("opening") { onOpening(it) }
+            addEventListener("opened") {
+                onOpened(it)
+                document.body?.style?.overflowY = Overflow.Hidden.toString()
+            }
+            addEventListener("closing") { onClosing(it) }
+            addEventListener("closed") {
+                onClosed(it)
+                document.body?.style?.overflowY = Overflow.Auto.toString()
+            }
+            addEventListener("cancel") { onCancel(it) }
+        },
+    ) {
+        headline?.let { Span({ slot = "headline" }) { it() } }
+        actions?.let { Span({ slot = "actions" }) { it() } }
+        Span({ slot = "content" }) { content() }
+    }.also { jsRequire("@material/web/dialog/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Divider.kt b/library/src/jsMain/kotlin/material/web/component/Divider.kt
new file mode 100644
index 0000000..4e9cc42
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Divider.kt
@@ -0,0 +1,30 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Divider(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    inset: Boolean = false,
+    insetStart: Boolean = false,
+    insetEnd: Boolean = false,
+) {
+    val tag = "divider"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            if (inset) attr("inset", "")
+            if (insetStart) attr("inset-start", "")
+            if (insetEnd) attr("inset-end", "")
+        },
+        content = {}
+    ).also { jsRequire("@material/web/divider/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Elevation.kt b/library/src/jsMain/kotlin/material/web/component/Elevation.kt
new file mode 100644
index 0000000..3d0ecb5
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Elevation.kt
@@ -0,0 +1,30 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.styleModifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.css.CSSStyleVariable
+import org.jetbrains.compose.web.css.StylePropertyNumber
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Elevation(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    level: Int,
+) {
+    val tag = "elevation"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier
+            .styleModifier { mdElevationLevel(level) }
+            .toAttrs(attrs),
+        content = null
+    ).also { jsRequire("@material/web/elevation/$tag.js") }
+}
+
+private val mdElevationLevel = CSSStyleVariable<StylePropertyNumber>("--md-elevation-level")
diff --git a/library/src/jsMain/kotlin/material/web/component/Fab.kt b/library/src/jsMain/kotlin/material/web/component/Fab.kt
new file mode 100644
index 0000000..3e98e05
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Fab.kt
@@ -0,0 +1,39 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticMouseEvent
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.onClick
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Fab(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    label: String? = null,
+    fabSize: FabSize = FabSize.MEDIUM,
+    onClick: (SyntheticMouseEvent) -> Unit = {},
+    modifier: Modifier = Modifier,
+    content: ContentBuilder<MdElement>? = null,
+) = MdTagElement(
+    tagName = "md-fab",
+    applyAttrs = modifier
+        .onClick { onClick(it) }
+        .toAttrs {
+            attrs?.invoke(this)
+            label?.let { attr("label", it) }
+            attr("size", fabSize.value)
+        },
+    content = content
+).also { jsRequire("@material/web/fab/fab.js") }
+
+enum class FabSize(val value: String) {
+    SMALL("small"),
+    MEDIUM("medium"),
+    LARGE("large")
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Field.kt b/library/src/jsMain/kotlin/material/web/component/Field.kt
new file mode 100644
index 0000000..d85271f
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Field.kt
@@ -0,0 +1,75 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+private fun BaseField(
+    attrs: AttrBuilderContext<MdElement>?,
+    name: String,
+    label: String?,
+    value: String?,
+    errorText: String?,
+    isError: Boolean,
+    content: ContentBuilder<MdElement>?,
+) {
+    MdTagElement(
+        tagName = "md-$name-field",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            classes("md-field")
+            if (label != null) attr("label", label)
+            if (value != null) attr("value", value)
+            if (errorText != null) attr("errorText", errorText)
+            if (isError) attr("error", "")
+        },
+        content = content
+    ).also { jsRequire("@material/web/field/$name-field.js") }
+}
+
+@Composable
+fun FilledField(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    label: String? = null,
+    value: String? = null,
+    errorText: String? = null,
+    isError: Boolean = false,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    BaseField(
+        name = "filled",
+        label = label,
+        value = value,
+        errorText = errorText,
+        isError = isError,
+        attrs = attrs,
+        content = content
+    )
+}
+
+@Composable
+fun OutlinedField(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    label: String? = null,
+    value: String? = null,
+    errorText: String? = null,
+    isError: Boolean = false,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    BaseField(
+        attrs = attrs,
+        name = "outlined",
+        label = label,
+        value = value,
+        errorText = errorText,
+        isError = isError,
+        content = content
+    )
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/FocusRing.kt b/library/src/jsMain/kotlin/material/web/component/FocusRing.kt
new file mode 100644
index 0000000..4b1735c
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/FocusRing.kt
@@ -0,0 +1,27 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun FocusRing(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    visible: Boolean? = null,
+    inward: Boolean = false,
+) {
+    MdTagElement(
+        tagName = "md-focus-ring",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            if (visible != null) attr("visible", "")
+            if (inward) attr("inward", "")
+        },
+        content = null
+    ).also { jsRequire("@material/web/focus/md-focus-ring.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Icon.kt b/library/src/jsMain/kotlin/material/web/component/Icon.kt
new file mode 100644
index 0000000..6199ce8
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Icon.kt
@@ -0,0 +1,24 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.Text
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Icon(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    iconIdentifier: String,
+) {
+    val tag = "icon"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier.toAttrs(attrs),
+        content = { Text(iconIdentifier) }
+    ).also { jsRequire("@material/web/icon/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/IconButton.kt b/library/src/jsMain/kotlin/material/web/component/IconButton.kt
new file mode 100644
index 0000000..2fcfb31
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/IconButton.kt
@@ -0,0 +1,169 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticMouseEvent
+import com.varabyte.kobweb.compose.css.CSSLengthOrPercentageNumericValue
+import com.varabyte.kobweb.compose.css.CSSPercentageNumericValue
+import com.varabyte.kobweb.compose.css.Height
+import com.varabyte.kobweb.compose.css.Width
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.onClick
+import com.varabyte.kobweb.compose.ui.styleModifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.css.CSSColorValue
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+private fun BaseIconButton(
+    tagName: String,
+    attrs: AttrBuilderContext<MdElement>?,
+    toggle: Boolean?,
+    selected: Boolean?,
+    disabled: Boolean?,
+    onClick: (SyntheticMouseEvent) -> Unit,
+    content: ContentBuilder<MdElement>?,
+) {
+    MdTagElement(
+        tagName = "md-$tagName",
+        applyAttrs = Modifier
+            .onClick { onClick(it) }
+            .toAttrs {
+                attrs?.invoke(this)
+                toggle?.let { attr("toggle", "") }
+                selected?.let { attr("selected", "") }
+                disabled?.let { attr("disabled", "") }
+            },
+        content = content
+    ).also { jsRequire("@material/web/iconbutton/$tagName.js") }
+}
+
+@Composable
+fun IconButton(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    toggle: Boolean? = null,
+    selected: Boolean? = null,
+    disabled: Boolean? = null,
+    onClick: (SyntheticMouseEvent) -> Unit = {},
+    iconColor: CSSColorValue? = null,
+    stateLayerShape: String? = null,
+    iconSize: CSSColorValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "icon-button"
+    BaseIconButton(
+        tagName = tag,
+        toggle = toggle,
+        selected = selected,
+        disabled = disabled,
+        onClick = onClick,
+        attrs = Modifier.styleModifier {
+            iconColor?.let { property("--md-$tag-icon-color", it.toString()) }
+            stateLayerShape?.let { property("--md-$tag-state-layer-shape", it) }
+            iconSize?.let { property("--md-$tag-icon-size", it.toString()) }
+        }.toAttrs(attrs),
+        content = content
+    )
+}
+
+@Composable
+fun FilledIconButton(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    toggle: Boolean? = null,
+    selected: Boolean? = null,
+    disabled: Boolean? = null,
+    onClick: (SyntheticMouseEvent) -> Unit = {},
+    selectedContainerColor: CSSColorValue? = null,
+    buttonContainerShape: CSSLengthOrPercentageNumericValue? = null,
+    buttonContainerWidth: Width? = null,
+    buttonContainerHeight: Height? = null,
+    iconSize: CSSPercentageNumericValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "filled-icon-button"
+    BaseIconButton(
+        tagName = tag,
+        toggle = toggle,
+        selected = selected,
+        disabled = disabled,
+        onClick = onClick,
+        attrs = Modifier.styleModifier {
+            selectedContainerColor?.let { property("--md-$tag-selected-container-color", it.toString()) }
+            buttonContainerShape?.let { property("--md-$tag-button-container-shape", it.toString()) }
+            buttonContainerWidth?.let { property("--md-$tag-button-container-width", it.toString()) }
+            buttonContainerHeight?.let { property("--md-$tag-button-container-height", it.toString()) }
+            iconSize?.let { property("--md-$tag-icon-size", it.toString()) }
+        }.toAttrs(attrs),
+        content = content
+    )
+}
+
+@Composable
+fun OutlinedIconButton(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    toggle: Boolean? = null,
+    selected: Boolean? = null,
+    disabled: Boolean? = null,
+    onClick: (SyntheticMouseEvent) -> Unit = {},
+    outlineColor: CSSColorValue? = null,
+    outlineWidth: CSSLengthOrPercentageNumericValue? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    containerWidth: Width? = null,
+    containerHeight: Height? = null,
+    iconSize: CSSLengthOrPercentageNumericValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "outlined-icon-button"
+    BaseIconButton(
+        tagName = tag,
+        toggle = toggle,
+        selected = selected,
+        disabled = disabled,
+        onClick = onClick,
+        attrs = Modifier.styleModifier {
+            outlineColor?.let { property("--md-$tag-outline-color", it.toString()) }
+            outlineWidth?.let { property("--md-$tag-outline-width", it.toString()) }
+            containerShape?.let { property("--md-$tag-container-shape", it.toString()) }
+            containerWidth?.let { property("--md-$tag-container-width", it.toString()) }
+            containerHeight?.let { property("--md-$tag-container-height", it.toString()) }
+            iconSize?.let { property("--md-$tag-icon-size", it.toString()) }
+        }.toAttrs(attrs),
+        content = content
+    )
+}
+
+@Composable
+fun FilledTonalIconButton(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    toggle: Boolean? = null,
+    selected: Boolean? = null,
+    disabled: Boolean? = null,
+    onClick: (SyntheticMouseEvent) -> Unit = {},
+    containerColor: CSSColorValue? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    containerWidth: Width? = null,
+    containerHeight: Height? = null,
+    iconSize: CSSLengthOrPercentageNumericValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "filled-tonal-icon-button"
+    BaseIconButton(
+        tagName = "filled-tonal-icon-button",
+        toggle = toggle,
+        selected = selected,
+        disabled = disabled,
+        onClick = onClick,
+        attrs = Modifier.styleModifier {
+            containerColor?.let { property("--md-$tag-container-color", it.toString()) }
+            containerShape?.let { property("--md-$tag-container-shape", it.toString()) }
+            containerWidth?.let { property("--md-$tag-container-width", it.toString()) }
+            containerHeight?.let { property("--md-$tag-container-height", it.toString()) }
+            iconSize?.let { property("--md-$tag-icon-size", it.toString()) }
+        }.toAttrs(attrs),
+        content = content
+    )
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/List.kt b/library/src/jsMain/kotlin/material/web/component/List.kt
new file mode 100644
index 0000000..3bd6b60
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/List.kt
@@ -0,0 +1,44 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun List(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "list"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = attrs,
+        content = content
+    ).also { jsRequire("@material/web/list/$tag.js") }
+}
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun ListItem(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    headline: String? = null,
+    supportingText: String? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "list-item"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            headline?.let { attr("headline", it) }
+            supportingText?.let { attr("supportingText", it) }
+        },
+        content = content
+    ).also { jsRequire("@material/web/list/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/NavigationBar.kt b/library/src/jsMain/kotlin/material/web/component/NavigationBar.kt
new file mode 100644
index 0000000..ce6d865
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/NavigationBar.kt
@@ -0,0 +1,22 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun NavigationBar(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "navigation-bar"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = attrs,
+        content = content
+    ).also { jsRequire("@material/web/labs/navigationbar/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/NavigationDrawer.kt b/library/src/jsMain/kotlin/material/web/component/NavigationDrawer.kt
new file mode 100644
index 0000000..9c55802
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/NavigationDrawer.kt
@@ -0,0 +1,55 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun ModalNavigationDrawer(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    opened: Boolean = false,
+    content: ContentBuilder<NavigationDrawerElement>? = null,
+) {
+    val tag = "navigation-drawer-modal"
+    MdTagElement(
+        tagName = "md-navigation-drawer-modal",
+        applyAttrs = Modifier.toAttrs {
+            if (opened) attr("opened", "")
+        },
+        content = content
+    ).also { jsRequire("@material/web/labs/navigationdrawer/$tag.js") }
+}
+
+abstract class NavigationDrawerElement : MdElement()
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun NavigationDrawer(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    opened: Boolean = false,
+    pivot: Pivot? = null,
+    content: ContentBuilder<NavigationDrawerElement>? = null,
+) {
+    val tag = "navigation-drawer"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            if (opened) attr("opened", "")
+            pivot?.let { attr("pivot", it.value) }
+        },
+        content = content,
+    ).also { jsRequire("@material/web/labs/navigationdrawer/$tag.js") }
+}
+
+
+enum class Pivot(val value: String) {
+    START("start"),
+    END("end"),
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/NavigationTab.kt b/library/src/jsMain/kotlin/material/web/component/NavigationTab.kt
new file mode 100644
index 0000000..b8f73d9
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/NavigationTab.kt
@@ -0,0 +1,43 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticMouseEvent
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.onClick
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun NavigationTab(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    label: String,
+    disabled: Boolean = false,
+    active: Boolean = false,
+    hideInactiveLabels: Boolean = false,
+    badgeValue: String? = null,
+    showBadge: Boolean = false,
+    onClick: (SyntheticMouseEvent) -> Unit = {},
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "navigation-tab"
+    MdTagElement(
+        tagName = "navigation-tab",
+        applyAttrs = Modifier
+            .onClick { onClick(it) }
+            .toAttrs {
+                attrs?.invoke(this)
+                attr("label", label)
+                if (disabled) attr("disabled", "")
+                if (active) attr("active", "")
+                if (hideInactiveLabels) attr("hide-inactive-labels", "")
+                badgeValue?.let { attr("badge-value", it) }
+                if (showBadge) attr("show-badge-dot", "")
+            },
+        content = content
+    ).also { jsRequire("@material/web/labs/navigationtab/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Progress.kt b/library/src/jsMain/kotlin/material/web/component/Progress.kt
new file mode 100644
index 0000000..24f711c
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Progress.kt
@@ -0,0 +1,81 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+private fun BaseProgress(
+    attrs: AttrBuilderContext<MdElement>?,
+    tagName: String,
+    value: Float?,
+    buffer: Float?,
+    intermediate: Boolean,
+    fourColor: Boolean,
+    content: ContentBuilder<MdElement>?,
+) {
+    MdTagElement(
+        tagName = "md-$tagName",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            classes("md-progress")
+            value?.let {
+                require(it in 0f..1f)
+                attr("value", it.toString())
+            }
+            buffer?.let {
+                require(it in 0f..1f)
+                attr("buffer", it.toString())
+            }
+            if (intermediate) attr("indeterminate", "")
+            if (fourColor) attr("four-color", "")
+        },
+        content = content
+    ).also { jsRequire("@material/web/labs/progress/$tagName.js") }
+}
+
+@Composable
+fun CircularProgress(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    value: Float? = null,
+    buffer: Float? = null,
+    intermediate: Boolean = false,
+    fourColor: Boolean = false,
+) {
+    val tag = "circular-progress"
+    BaseProgress(
+        attrs = attrs,
+        tagName = tag,
+        value = value,
+        buffer = buffer,
+        intermediate = intermediate,
+        fourColor = fourColor,
+        content = null
+    )
+}
+
+@Composable
+fun LinearProgress(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    value: Float? = null,
+    buffer: Float? = null,
+    intermediate: Boolean = false,
+    fourColor: Boolean = false,
+) {
+    val tag = "linear-progress"
+    BaseProgress(
+        tagName = tag,
+        value = value,
+        buffer = buffer,
+        intermediate = intermediate,
+        fourColor = fourColor,
+        attrs = attrs,
+        content = null
+    )
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Radio.kt b/library/src/jsMain/kotlin/material/web/component/Radio.kt
new file mode 100644
index 0000000..606b642
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Radio.kt
@@ -0,0 +1,40 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticEvent
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.w3c.dom.events.EventTarget
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Radio(
+    attrs: AttrBuilderContext<MdElement>?,
+    value: String? = null,
+    checked: Boolean = false,
+    name: String? = null,
+    disabled: Boolean = false,
+    onChange: (SyntheticEvent<EventTarget>) -> Unit = {},
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "radio"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            value?.let { attr("value", it) }
+            if (checked) attr("checked", "")
+            name?.let { attr("name", it) }
+            if (disabled) attr("disabled", "")
+            addEventListener("change") {
+                onChange(it)
+            }
+        },
+        content = content
+    ).also { jsRequire("@material/web/radio/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Ripple.kt b/library/src/jsMain/kotlin/material/web/component/Ripple.kt
new file mode 100644
index 0000000..41f38d2
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Ripple.kt
@@ -0,0 +1,26 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Ripple(
+    attrs: AttrBuilderContext<MdElement>?,
+    disabled: Boolean? = null,
+) {
+    val tag = "ripple"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            disabled?.let { attr("disabled", "") }
+        },
+        content = null
+    ).also { jsRequire("@material/web/ripple/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Select.kt b/library/src/jsMain/kotlin/material/web/component/Select.kt
new file mode 100644
index 0000000..cb21d90
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Select.kt
@@ -0,0 +1,103 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticEvent
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.w3c.dom.events.EventTarget
+
+@Composable
+fun MdSelectTagElement(
+    attrs: AttrBuilderContext<MdElement>?,
+    tagName: String,
+    label: String,
+    supportingText: String? = null,
+    errorText: String? = null,
+    required: Boolean? = null,
+    onChange: (SyntheticEvent<EventTarget>) -> Unit = {},
+    content: ContentBuilder<MdElement>? = null,
+) {
+    MdTagElement(
+        tagName = tagName,
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            classes("md-select")
+            attr("label", label)
+            supportingText?.let { attr("supportingText", it) }
+            errorText?.let { attr("errorText", it) }
+            required?.let { attr("required", "") }
+            addEventListener("change") {
+                onChange(it)
+            }
+        },
+        content = content
+    )
+}
+
+@Composable
+fun FilledSelect(
+    attrs: AttrBuilderContext<MdElement>?,
+    label: String,
+    supportingText: String? = null,
+    errorText: String? = null,
+    required: Boolean? = null,
+    onChange: (SyntheticEvent<EventTarget>) -> Unit = {},
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "filled-select"
+    MdSelectTagElement(
+        tagName = "md-$tag",
+        label = label,
+        supportingText = supportingText,
+        errorText = errorText,
+        required = required,
+        onChange = onChange,
+        attrs = attrs,
+        content = content
+    )
+}
+
+@Composable
+fun OutlinedSelect(
+    attrs: AttrBuilderContext<MdElement>?,
+    label: String,
+    supportingText: String? = null,
+    errorText: String? = null,
+    required: Boolean? = null,
+    onChange: (SyntheticEvent<EventTarget>) -> Unit = {},
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "outlined-select"
+    MdSelectTagElement(
+        tagName = "md-$tag",
+        label = label,
+        supportingText = supportingText,
+        errorText = errorText,
+        required = required,
+        onChange = onChange,
+        attrs = attrs,
+        content = content
+    )
+}
+
+@Composable
+fun SelectOption(
+    value: String = "",
+    headline: String? = null,
+    modifier: Modifier = Modifier,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "select-option"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = modifier.toAttrs {
+            attr("value", value)
+            headline?.let { attr("headline", it) }
+        },
+        content = content
+    )
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Slider.kt b/library/src/jsMain/kotlin/material/web/component/Slider.kt
new file mode 100644
index 0000000..a84108d
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Slider.kt
@@ -0,0 +1,46 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.HTMLInputElement
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Slider(
+    attrs: AttrBuilderContext<MdElement>?,
+    value: Float,
+    min: Float,
+    max: Float,
+    step: Float,
+    valueLabel: String? = null,
+    withTickMarks: Boolean = false,
+    withLabel: Boolean = false,
+    disabled: Boolean = false,
+    onChange: (Float) -> Unit = {},
+) {
+    val tag = "slider"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier
+            .toAttrs {
+                attrs?.invoke(this)
+                attr("value", value.toString())
+                attr("min", min.toString())
+                attr("max", max.toString())
+                attr("step", step.toString())
+                valueLabel?.let { attr("valueLabel", valueLabel) }
+                if (withTickMarks) attr("withTickMarks", "")
+                if (withLabel) attr("withLabel", "")
+                if (disabled) attr("disabled", "")
+                addEventListener("change") {
+                    onChange((it.target as? HTMLInputElement)?.value?.toFloat() ?: 0f)
+                }
+            },
+        content = null
+    ).also { jsRequire("@material/web/slider/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Switch.kt b/library/src/jsMain/kotlin/material/web/component/Switch.kt
new file mode 100644
index 0000000..a637ac8
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Switch.kt
@@ -0,0 +1,42 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticMouseEvent
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.onClick
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Switch(
+    attrs: AttrBuilderContext<MdElement>?,
+    value: Boolean? = null,
+    selected: Boolean = false,
+    onClick: (SyntheticMouseEvent) -> Unit = {},
+    icons: Boolean = false,
+    showOnlySelectedIcon: Boolean = false,
+    disabled: Boolean = false,
+) {
+    val tag = "switch"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier
+            .onClick {
+                println("Switch.onClick: $it")
+                onClick(it)
+            }
+            .toAttrs {
+                attrs?.invoke(this)
+                value?.let { attr("value", it.toString()) }
+                if (selected) attr("selected", "")
+                if (icons) attr("icons", "")
+                if (showOnlySelectedIcon) attr("showOnlySelectedIcon", "")
+                if (disabled) attr("disabled", "")
+            },
+        content = null
+    ).also { jsRequire("@material/web/switch/$tag.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/Tabs.kt b/library/src/jsMain/kotlin/material/web/component/Tabs.kt
new file mode 100644
index 0000000..ed71f47
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/Tabs.kt
@@ -0,0 +1,85 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticEvent
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.w3c.dom.events.EventTarget
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Tabs(
+    attrs: AttrBuilderContext<MdElement>?,
+    activeTabIndex: Int,
+    selectOnFocus: Boolean = true,
+    onChange: (SyntheticEvent<EventTarget>) -> Unit = {},
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "tabs"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            attr("activeTabIndex", activeTabIndex.toString())
+            if (selectOnFocus) attr("selectOnFocus", "")
+            addEventListener("change") {
+                onChange(it)
+            }
+        },
+        content = content
+    ).also { jsRequire("@material/web/tabs/$tag.js") }
+}
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun PrimaryTab(
+    attrs: AttrBuilderContext<MdElement>?,
+    disabled: Boolean = false,
+    active: Boolean = false,
+    focusable: Boolean = true,
+    inlineIcon: Boolean = false,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "primary-tab"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            if (disabled) attr("disabled", "")
+            if (active) attr("active", "")
+            if (focusable) attr("focusable", "")
+            if (inlineIcon) attr("inlineIcon", "")
+        },
+        content = content
+    ).also { jsRequire("@material/web/tabs/$tag.js") }
+}
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun SecondaryTab(
+    attrs: AttrBuilderContext<MdElement>?,
+    disabled: Boolean = false,
+    active: Boolean = false,
+    focusable: Boolean = true,
+    inlineIcon: Boolean = false,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "secondary-tab"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier.toAttrs {
+            attrs?.invoke(this)
+            if (disabled) attr("disabled", "")
+            if (active) attr("active", "")
+            if (focusable) attr("focusable", "")
+            if (inlineIcon) attr("inlineIcon", "")
+        },
+        content = content
+    ).also { jsRequire("@material/web/tabs/$tag.js") }
+}
+
diff --git a/library/src/jsMain/kotlin/material/web/component/TextField.kt b/library/src/jsMain/kotlin/material/web/component/TextField.kt
new file mode 100644
index 0000000..a49a92e
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/TextField.kt
@@ -0,0 +1,613 @@
+package material.web.component
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.css.CSSLengthOrPercentageNumericValue
+import com.varabyte.kobweb.compose.css.FontWeight
+import com.varabyte.kobweb.compose.css.Width
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.styleModifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import material.web.common.propertyOf
+import material.web.common.slot
+import org.jetbrains.compose.web.attributes.AutoComplete
+import org.jetbrains.compose.web.css.CSSColorValue
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.Span
+import org.w3c.dom.HTMLInputElement
+
+/**
+ * [Documentation](https://github.com/material-components/material-web/blob/main/docs/components/text-field.md)
+ * [All Tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-text-field.scss)
+ */
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+private fun BaseTextField(
+    attrs: AttrBuilderContext<MdElement>?,
+    tagName: String,
+    value: String,
+    onInput: (String) -> Unit,
+    label: String?,
+    type: TextFieldType,
+    placeholder: String?,
+    leadingIcon: (@Composable () -> Unit)?,
+    trailingIcon: (@Composable () -> Unit)?,
+    required: Boolean,
+    disabled: Boolean,
+    autoComplete: AutoComplete?,
+    error: Boolean,
+    errorText: String?,
+    prefixText: String?,
+    suffixText: String?,
+    rows: Int?,
+    cols: Int?,
+    max: String?,
+    maxLength: Int?,
+    min: String?,
+    minLength: Int?,
+    pattern: String?,
+    readOnly: Boolean,
+    multiple: Boolean,
+    step: String?,
+    hasLeadingIcon: Boolean,
+    hasTrailingIcon: Boolean,
+    supportingText: String?,
+    textDirection: String?,
+) {
+    MdTagElement(
+        tagName = "md-$tagName",
+        applyAttrs = Modifier
+            .toAttrs {
+                attrs?.invoke(this)
+                classes("md-text-field")
+
+                prop({ element: HTMLInputElement, value: String -> element.value = value }, value)
+
+                attr("type", type.value)
+                label?.let { attr("label", it.toString()) }
+                placeholder?.let { attr("placeholder", it.toString()) }
+                if (hasLeadingIcon) attr("has-leading-icon", "")
+                if (hasTrailingIcon) attr("has-trailing-icon", "")
+                if (required) attr("required", "")
+                if (error) attr("error", "")
+                errorText?.let { attr("error-text", it.toString()) }
+                prefixText?.let { attr("prefix-text", it.toString()) }
+                suffixText?.let { attr("suffix-text", it.toString()) }
+                if (disabled) attr("disabled", "")
+                supportingText?.let { attr("supporting-text", it.toString()) }
+                textDirection?.let { attr("text-direction", it.toString()) }
+                rows?.let { attr("rows", it.toString()) }
+                cols?.let { attr("cols", it.toString()) }
+                max?.let { attr("max", it.toString()) }
+                maxLength?.let { attr("max-length", it.toString()) }
+                min?.let { attr("min", it.toString()) }
+                minLength?.let { attr("min-length", it.toString()) }
+                pattern?.let { attr("pattern", it.toString()) }
+                if (readOnly) attr("readOnly", "")
+                if (multiple) attr("multiple", "")
+                step?.let { attr("step", it.toString()) }
+                autoComplete?.let { attr("autocomplete", it.toString()) }
+
+                addEventListener("input") {
+                    onInput(it.nativeEvent.target.asDynamic().value.unsafeCast<String>())
+                }
+            },
+    ) {
+        leadingIcon?.let {
+            Span({ slot = "leading-icon" }) { it() }
+        }
+
+        trailingIcon?.let {
+            Span({ slot = "trailing-icon" }) { it() }
+        }
+    }.also { jsRequire("@material/web/textfield/$tagName.js") }
+}
+
+enum class TextFieldType(val value: String) {
+    EMAIL("email"),
+    NUMBER("number"),
+    PASSWORD("password"),
+    SEARCH("search"),
+    TEL("tel"),
+    TEXT("text"),
+    URL("url"),
+    TEXTAREA("textarea"),
+}
+
+@Composable
+fun FilledTextField(
+    attrs: AttrBuilderContext<MdElement>?,
+    value: String,
+    onInput: (String) -> Unit,
+    label: String? = null,
+    type: TextFieldType = TextFieldType.TEXT,
+    placeholder: String? = null,
+    leadingIcon: (@Composable () -> Unit)? = null,
+    trailingIcon: (@Composable () -> Unit)? = null,
+    required: Boolean = false,
+    disabled: Boolean = false,
+    autoComplete: AutoComplete = AutoComplete.off,
+    error: Boolean = false,
+    errorText: String? = null,
+    prefixText: String? = null,
+    suffixText: String? = null,
+    rows: Int? = null,
+    cols: Int? = null,
+    max: String? = null,
+    maxLength: Int? = null,
+    min: String? = null,
+    minLength: Int? = null,
+    pattern: String? = null,
+    readOnly: Boolean = false,
+    multiple: Boolean = false,
+    step: String? = null,
+    hasLeadingIcon: Boolean = false,
+    hasTrailingIcon: Boolean = false,
+    supportingText: String? = null,
+    textDirection: String? = null,
+    // Styles
+    activeIndicatorColor: CSSColorValue? = null,
+    activeIndicatorHeight: String? = null,
+    bottomSpace: CSSLengthOrPercentageNumericValue? = null,
+    caretColor: CSSColorValue? = null,
+    containerColor: CSSColorValue? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    containerShapeEndEnd: CSSLengthOrPercentageNumericValue? = null,
+    containerShapeEndStart: CSSLengthOrPercentageNumericValue? = null,
+    containerShapeStartEnd: CSSLengthOrPercentageNumericValue? = null,
+    containerShapeStartStart: CSSLengthOrPercentageNumericValue? = null,
+    disabledActiveIndicatorColor: CSSColorValue? = null,
+    disabledActiveIndicatorHeight: String? = null,
+    disabledActiveIndicatorOpacity: String? = null,
+    disabledContainerColor: CSSColorValue? = null,
+    disabledContainerOpacity: String? = null,
+    disabledInputTextColor: CSSColorValue? = null,
+    disabledInputTextOpacity: CSSLengthOrPercentageNumericValue? = null,
+    disabledLabelTextColor: CSSColorValue? = null,
+    disabledLabelTextOpacity: CSSLengthOrPercentageNumericValue? = null,
+    disabledLeadingIconColor: CSSColorValue? = null,
+    disabledLeadingIconOpacity: CSSLengthOrPercentageNumericValue? = null,
+    disabledSupportingTextColor: CSSColorValue? = null,
+    disabledSupportingTextOpacity: CSSLengthOrPercentageNumericValue? = null,
+    disabledTrailingIconColor: CSSColorValue? = null,
+    disabledTrailingIconOpacity: CSSLengthOrPercentageNumericValue? = null,
+    errorActiveIndicatorColor: CSSColorValue? = null,
+    errorFocusActiveIndicatorColor: CSSColorValue? = null,
+    errorFocusCaretColor: CSSColorValue? = null,
+    errorFocusInputTextColor: CSSColorValue? = null,
+    errorFocusLabelTextColor: CSSColorValue? = null,
+    errorFocusLeadingIconColor: CSSColorValue? = null,
+    errorFocusSupportingTextColor: CSSColorValue? = null,
+    errorFocusTrailingIconColor: CSSColorValue? = null,
+    errorHoverActiveIndicatorColor: CSSColorValue? = null,
+    errorHoverInputTextColor: CSSColorValue? = null,
+    errorHoverLabelTextColor: CSSColorValue? = null,
+    errorHoverLeadingIconColor: CSSColorValue? = null,
+    errorHoverStateLayerColor: CSSColorValue? = null,
+    errorHoverStateLayerOpacity: String? = null,
+    errorHoverSupportingTextColor: CSSColorValue? = null,
+    errorHoverTrailingIconColor: CSSColorValue? = null,
+    errorInputTextColor: CSSColorValue? = null,
+    errorLabelTextColor: CSSColorValue? = null,
+    errorLeadingIconColor: CSSColorValue? = null,
+    errorSupportingTextColor: CSSColorValue? = null,
+    errorTrailingIconColor: CSSColorValue? = null,
+    focusActiveIndicatorColor: CSSColorValue? = null,
+    focusActiveIndicatorHeight: String? = null,
+    focusCaretColor: CSSColorValue? = null,
+    focusInputTextColor: CSSColorValue? = null,
+    focusLabelTextColor: CSSColorValue? = null,
+    focusLeadingIconColor: CSSColorValue? = null,
+    focusSupportingTextColor: CSSColorValue? = null,
+    focusTrailingIconColor: CSSColorValue? = null,
+    hoverActiveIndicatorColor: CSSColorValue? = null,
+    hoverActiveIndicatorHeight: String? = null,
+    hoverInputTextColor: CSSColorValue? = null,
+    hoverLabelTextColor: CSSColorValue? = null,
+    hoverLeadingIconColor: CSSColorValue? = null,
+    hoverStateLayerColor: CSSColorValue? = null,
+    hoverStateLayerOpacity: String? = null,
+    hoverSupportingTextColor: CSSColorValue? = null,
+    hoverTrailingIconColor: CSSColorValue? = null,
+    inputTextColor: CSSColorValue? = null,
+    inputTextFont: String? = null,
+    inputTextLineHeight: CSSLengthOrPercentageNumericValue? = null,
+    inputTextPlaceholderColor: CSSColorValue? = null,
+    inputTextPrefixColor: CSSColorValue? = null,
+    inputTextPrefixTrailingSpace: CSSLengthOrPercentageNumericValue? = null,
+    inputTextSize: CSSLengthOrPercentageNumericValue? = null,
+    inputTextSuffixColor: CSSColorValue? = null,
+    inputTextSuffixLeadingSpace: CSSLengthOrPercentageNumericValue? = null,
+    inputTextWeight: FontWeight? = null,
+    labelTextColor: CSSColorValue? = null,
+    labelTextFont: String? = null,
+    labelTextLineHeight: CSSLengthOrPercentageNumericValue? = null,
+    labelTextPopulatedLineHeight: CSSLengthOrPercentageNumericValue? = null,
+    labelTextPopulatedSize: CSSLengthOrPercentageNumericValue? = null,
+    labelTextSize: CSSLengthOrPercentageNumericValue? = null,
+    labelTextWeight: FontWeight? = null,
+    leadingIconColor: CSSColorValue? = null,
+    leadingIconSize: CSSLengthOrPercentageNumericValue? = null,
+    leadingSpace: CSSLengthOrPercentageNumericValue? = null,
+    supportingTextColor: CSSColorValue? = null,
+    supportingTextFont: String? = null,
+    supportingTextLineHeight: CSSLengthOrPercentageNumericValue? = null,
+    supportingTextSize: CSSLengthOrPercentageNumericValue? = null,
+    supportingTextWeight: FontWeight? = null,
+    topSpace: CSSLengthOrPercentageNumericValue? = null,
+    trailingIconColor: CSSColorValue? = null,
+    trailingIconSize: CSSLengthOrPercentageNumericValue? = null,
+    trailingSpace: CSSLengthOrPercentageNumericValue? = null,
+    withLabelBottomSpace: String? = null,
+    withLabelTopSpace: String? = null,
+) {
+    val tag = "filled-text-field"
+    BaseTextField(
+        tagName = tag,
+        value = value,
+        onInput = onInput,
+        label = label,
+        placeholder = placeholder,
+        leadingIcon = leadingIcon,
+        trailingIcon = trailingIcon,
+        hasLeadingIcon = hasLeadingIcon,
+        hasTrailingIcon = hasTrailingIcon,
+        type = type,
+        autoComplete = autoComplete,
+        required = required,
+        disabled = disabled,
+        error = error,
+        errorText = errorText,
+        prefixText = prefixText,
+        suffixText = suffixText,
+        supportingText = supportingText,
+        textDirection = textDirection,
+        rows = rows,
+        cols = cols,
+        max = max,
+        maxLength = maxLength,
+        min = min,
+        minLength = minLength,
+        pattern = pattern,
+        readOnly = readOnly,
+        multiple = multiple,
+        step = step,
+        attrs = Modifier.styleModifier {
+            propertyOf("--md-$tag-active-indicator-color", activeIndicatorColor)
+            propertyOf("--md-$tag-active-indicator-height", activeIndicatorHeight)
+            propertyOf("--md-$tag-bottom-space", bottomSpace)
+            propertyOf("--md-$tag-caret-color", caretColor)
+            propertyOf("--md-$tag-container-color", containerColor)
+            propertyOf("--md-$tag-container-shape", containerShape)
+            propertyOf("--md-$tag-container-shape-end-end", containerShapeEndEnd)
+            propertyOf("--md-$tag-container-shape-end-start", containerShapeEndStart)
+            propertyOf("--md-$tag-container-shape-start-end", containerShapeStartEnd)
+            propertyOf("--md-$tag-container-shape-start-start", containerShapeStartStart)
+            propertyOf("--md-$tag-disabled-active-indicator-color", disabledActiveIndicatorColor)
+            propertyOf("--md-$tag-disabled-active-indicator-height", disabledActiveIndicatorHeight)
+            propertyOf("--md-$tag-disabled-active-indicator-opacity", disabledActiveIndicatorOpacity)
+            propertyOf("--md-$tag-disabled-container-color", disabledContainerColor)
+            propertyOf("--md-$tag-disabled-container-opacity", disabledContainerOpacity)
+            propertyOf("--md-$tag-disabled-input-text-color", disabledInputTextColor)
+            propertyOf("--md-$tag-disabled-input-text-opacity", disabledInputTextOpacity)
+            propertyOf("--md-$tag-disabled-label-text-color", disabledLabelTextColor)
+            propertyOf("--md-$tag-disabled-label-text-opacity", disabledLabelTextOpacity)
+            propertyOf("--md-$tag-disabled-leading-icon-color", disabledLeadingIconColor)
+            propertyOf("--md-$tag-disabled-leading-icon-opacity", disabledLeadingIconOpacity)
+            propertyOf("--md-$tag-disabled-supporting-text-color", disabledSupportingTextColor)
+            propertyOf("--md-$tag-disabled-supporting-text-opacity", disabledSupportingTextOpacity)
+            propertyOf("--md-$tag-disabled-trailing-icon-color", disabledTrailingIconColor)
+            propertyOf("--md-$tag-disabled-trailing-icon-opacity", disabledTrailingIconOpacity)
+            propertyOf("--md-$tag-error-active-indicator-color", errorActiveIndicatorColor)
+            propertyOf("--md-$tag-error-focus-active-indicator-color", errorFocusActiveIndicatorColor)
+            propertyOf("--md-$tag-error-focus-caret-color", errorFocusCaretColor)
+            propertyOf("--md-$tag-error-focus-input-text-color", errorFocusInputTextColor)
+            propertyOf("--md-$tag-error-focus-label-text-color", errorFocusLabelTextColor)
+            propertyOf("--md-$tag-error-focus-leading-icon-color", errorFocusLeadingIconColor)
+            propertyOf("--md-$tag-error-focus-supporting-text-color", errorFocusSupportingTextColor)
+            propertyOf("--md-$tag-error-focus-trailing-icon-color", errorFocusTrailingIconColor)
+            propertyOf("--md-$tag-error-hover-active-indicator-color", errorHoverActiveIndicatorColor)
+            propertyOf("--md-$tag-error-hover-input-text-color", errorHoverInputTextColor)
+            propertyOf("--md-$tag-error-hover-label-text-color", errorHoverLabelTextColor)
+            propertyOf("--md-$tag-error-hover-leading-icon-color", errorHoverLeadingIconColor)
+            propertyOf("--md-$tag-error-hover-state-layer-color", errorHoverStateLayerColor)
+            propertyOf("--md-$tag-error-hover-state-layer-opacity", errorHoverStateLayerOpacity)
+            propertyOf("--md-$tag-error-hover-supporting-text-color", errorHoverSupportingTextColor)
+            propertyOf("--md-$tag-error-hover-trailing-icon-color", errorHoverTrailingIconColor)
+            propertyOf("--md-$tag-error-input-text-color", errorInputTextColor)
+            propertyOf("--md-$tag-error-label-text-color", errorLabelTextColor)
+            propertyOf("--md-$tag-error-leading-icon-color", errorLeadingIconColor)
+            propertyOf("--md-$tag-error-supporting-text-color", errorSupportingTextColor)
+            propertyOf("--md-$tag-error-trailing-icon-color", errorTrailingIconColor)
+            propertyOf("--md-$tag-focus-active-indicator-color", focusActiveIndicatorColor)
+            propertyOf("--md-$tag-focus-active-indicator-height", focusActiveIndicatorHeight)
+            propertyOf("--md-$tag-focus-caret-color", focusCaretColor)
+            propertyOf("--md-$tag-focus-input-text-color", focusInputTextColor)
+            propertyOf("--md-$tag-focus-label-text-color", focusLabelTextColor)
+            propertyOf("--md-$tag-focus-leading-icon-color", focusLeadingIconColor)
+            propertyOf("--md-$tag-focus-supporting-text-color", focusSupportingTextColor)
+            propertyOf("--md-$tag-focus-trailing-icon-color", focusTrailingIconColor)
+            propertyOf("--md-$tag-hover-active-indicator-color", hoverActiveIndicatorColor)
+            propertyOf("--md-$tag-hover-active-indicator-height", hoverActiveIndicatorHeight)
+            propertyOf("--md-$tag-hover-input-text-color", hoverInputTextColor)
+            propertyOf("--md-$tag-hover-label-text-color", hoverLabelTextColor)
+            propertyOf("--md-$tag-hover-leading-icon-color", hoverLeadingIconColor)
+            propertyOf("--md-$tag-hover-state-layer-color", hoverStateLayerColor)
+            propertyOf("--md-$tag-hover-state-layer-opacity", hoverStateLayerOpacity)
+            propertyOf("--md-$tag-hover-supporting-text-color", hoverSupportingTextColor)
+            propertyOf("--md-$tag-hover-trailing-icon-color", hoverTrailingIconColor)
+            propertyOf("--md-$tag-input-text-color", inputTextColor)
+            propertyOf("--md-$tag-input-text-font", inputTextFont)
+            propertyOf("--md-$tag-input-text-line-height", inputTextLineHeight)
+            propertyOf("--md-$tag-input-text-placeholder-color", inputTextPlaceholderColor)
+            propertyOf("--md-$tag-input-text-prefix-color", inputTextPrefixColor)
+            propertyOf("--md-$tag-input-text-prefix-trailing-space", inputTextPrefixTrailingSpace)
+            propertyOf("--md-$tag-input-text-size", inputTextSize)
+            propertyOf("--md-$tag-input-text-suffix-color", inputTextSuffixColor)
+            propertyOf("--md-$tag-input-text-suffix-leading-space", inputTextSuffixLeadingSpace)
+            propertyOf("--md-$tag-input-text-weight", inputTextWeight)
+            propertyOf("--md-$tag-label-text-color", labelTextColor)
+            propertyOf("--md-$tag-label-text-font", labelTextFont)
+            propertyOf("--md-$tag-label-text-line-height", labelTextLineHeight)
+            propertyOf("--md-$tag-label-text-populated-line-height", labelTextPopulatedLineHeight)
+            propertyOf("--md-$tag-label-text-populated-size", labelTextPopulatedSize)
+            propertyOf("--md-$tag-label-text-size", labelTextSize)
+            propertyOf("--md-$tag-label-text-weight", labelTextWeight)
+            propertyOf("--md-$tag-leading-icon-color", leadingIconColor)
+            propertyOf("--md-$tag-leading-icon-size", leadingIconSize)
+            propertyOf("--md-$tag-leading-space", leadingSpace)
+            propertyOf("--md-$tag-supporting-text-color", supportingTextColor)
+            propertyOf("--md-$tag-supporting-text-font", supportingTextFont)
+            propertyOf("--md-$tag-supporting-text-line-height", supportingTextLineHeight)
+            propertyOf("--md-$tag-supporting-text-size", supportingTextSize)
+            propertyOf("--md-$tag-supporting-text-weight", supportingTextWeight)
+            propertyOf("--md-$tag-top-space", topSpace)
+            propertyOf("--md-$tag-trailing-icon-color", trailingIconColor)
+            propertyOf("--md-$tag-trailing-icon-size", trailingIconSize)
+            propertyOf("--md-$tag-trailing-space", trailingSpace)
+            propertyOf("--md-$tag-with-label-bottom-space", withLabelBottomSpace)
+            propertyOf("--md-$tag-with-label-top-space", withLabelTopSpace)
+        }.toAttrs(attrs)
+    )
+}
+
+@Composable
+fun OutlinedTextField(
+    attrs: AttrBuilderContext<MdElement>?,
+    value: String,
+    onInput: (String) -> Unit,
+    label: String? = null,
+    type: TextFieldType = TextFieldType.TEXT,
+    placeholder: String? = null,
+    leadingIcon: (@Composable () -> Unit)? = null,
+    trailingIcon: (@Composable () -> Unit)? = null,
+    required: Boolean = false,
+    disabled: Boolean = false,
+    autoComplete: AutoComplete = AutoComplete.off,
+    error: Boolean = false,
+    errorText: String? = null,
+    prefixText: String? = null,
+    suffixText: String? = null,
+    rows: Int? = null,
+    cols: Int? = null,
+    max: String? = null,
+    maxLength: Int? = null,
+    min: String? = null,
+    minLength: Int? = null,
+    pattern: String? = null,
+    readOnly: Boolean = false,
+    multiple: Boolean = false,
+    step: String? = null,
+    hasLeadingIcon: Boolean = false,
+    hasTrailingIcon: Boolean = false,
+    supportingText: String? = null,
+    textDirection: String? = null,
+    // Styles
+    bottomSpace: CSSLengthOrPercentageNumericValue? = null,
+    caretColor: CSSColorValue? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    containerShapeEndEnd: CSSLengthOrPercentageNumericValue? = null,
+    containerShapeEndStart: CSSLengthOrPercentageNumericValue? = null,
+    containerShapeStartEnd: CSSLengthOrPercentageNumericValue? = null,
+    containerShapeStartStart: CSSLengthOrPercentageNumericValue? = null,
+    disabledInputTextColor: CSSColorValue? = null,
+    disabledInputTextOpacity: CSSLengthOrPercentageNumericValue? = null,
+    disabledLabelTextColor: CSSColorValue? = null,
+    disabledLabelTextOpacity: CSSLengthOrPercentageNumericValue? = null,
+    disabledLeadingIconColor: CSSColorValue? = null,
+    disabledLeadingIconOpacity: CSSLengthOrPercentageNumericValue? = null,
+    disabledOutlineColor: CSSColorValue? = null,
+    disabledOutlineOpacity: CSSLengthOrPercentageNumericValue? = null,
+    disabledOutlineWidth: CSSLengthOrPercentageNumericValue? = null,
+    disabledSupportingTextColor: CSSColorValue? = null,
+    disabledSupportingTextOpacity: CSSLengthOrPercentageNumericValue? = null,
+    disabledTrailingIconColor: CSSColorValue? = null,
+    disabledTrailingIconOpacity: CSSLengthOrPercentageNumericValue? = null,
+    errorFocusCaretColor: CSSColorValue? = null,
+    errorFocusInputTextColor: CSSColorValue? = null,
+    errorFocusLabelTextColor: CSSColorValue? = null,
+    errorFocusLeadingIconColor: CSSColorValue? = null,
+    errorFocusOutlineColor: CSSColorValue? = null,
+    errorFocusSupportingTextColor: CSSColorValue? = null,
+    errorFocusTrailingIconColor: CSSColorValue? = null,
+    errorHoverInputTextColor: CSSColorValue? = null,
+    errorHoverLabelTextColor: CSSColorValue? = null,
+    errorHoverLeadingIconColor: CSSColorValue? = null,
+    errorHoverOutlineColor: CSSColorValue? = null,
+    errorHoverSupportingTextColor: CSSColorValue? = null,
+    errorHoverTrailingIconColor: CSSColorValue? = null,
+    errorInputTextColor: CSSColorValue? = null,
+    errorLabelTextColor: CSSColorValue? = null,
+    errorLeadingIconColor: CSSColorValue? = null,
+    errorOutlineColor: CSSColorValue? = null,
+    errorSupportingTextColor: CSSColorValue? = null,
+    errorTrailingIconColor: CSSColorValue? = null,
+    focusCaretColor: CSSColorValue? = null,
+    focusInputTextColor: CSSColorValue? = null,
+    focusLabelTextColor: CSSColorValue? = null,
+    focusLeadingIconColor: CSSColorValue? = null,
+    focusOutlineColor: CSSColorValue? = null,
+    focusOutlineWidth: Width? = null,
+    focusSupportingTextColor: CSSColorValue? = null,
+    focusTrailingIconColor: CSSColorValue? = null,
+    hoverInputTextColor: CSSColorValue? = null,
+    hoverLabelTextColor: CSSColorValue? = null,
+    hoverLeadingIconColor: CSSColorValue? = null,
+    hoverOutlineColor: CSSColorValue? = null,
+    hoverOutlineWidth: Width? = null,
+    hoverSupportingTextColor: CSSColorValue? = null,
+    hoverTrailingIconColor: CSSColorValue? = null,
+    inputTextColor: CSSColorValue? = null,
+    inputTextFont: String? = null,
+    inputTextLineHeight: CSSLengthOrPercentageNumericValue? = null,
+    inputTextPlaceholderColor: CSSColorValue? = null,
+    inputTextPrefixColor: CSSColorValue? = null,
+    inputTextPrefixTrailingSpace: CSSLengthOrPercentageNumericValue? = null,
+    inputTextSize: CSSLengthOrPercentageNumericValue? = null,
+    inputTextSuffixColor: CSSColorValue? = null,
+    inputTextSuffixLeadingSpace: CSSLengthOrPercentageNumericValue? = null,
+    inputTextWeight: FontWeight? = null,
+    labelTextColor: CSSColorValue? = null,
+    labelTextFont: String? = null,
+    labelTextLineHeight: CSSLengthOrPercentageNumericValue? = null,
+    labelTextPopulatedLineHeight: CSSLengthOrPercentageNumericValue? = null,
+    labelTextPopulatedSize: CSSLengthOrPercentageNumericValue? = null,
+    labelTextSize: CSSLengthOrPercentageNumericValue? = null,
+    labelTextWeight: FontWeight? = null,
+    leadingIconColor: CSSColorValue? = null,
+    leadingIconSize: CSSLengthOrPercentageNumericValue? = null,
+    leadingSpace: CSSLengthOrPercentageNumericValue? = null,
+    outlineColor: CSSColorValue? = null,
+    outlineWidth: Width? = null,
+    supportingTextColor: CSSColorValue? = null,
+    supportingTextFont: String? = null,
+    supportingTextLineHeight: CSSLengthOrPercentageNumericValue? = null,
+    supportingTextSize: CSSLengthOrPercentageNumericValue? = null,
+    supportingTextWeight: FontWeight? = null,
+    topSpace: CSSLengthOrPercentageNumericValue? = null,
+    trailingIconColor: CSSColorValue? = null,
+    trailingIconSize: CSSLengthOrPercentageNumericValue? = null,
+    trailingSpace: CSSLengthOrPercentageNumericValue? = null,
+) {
+    val tag = "outlined-text-field"
+    BaseTextField(
+        tagName = tag,
+        value = value,
+        onInput = onInput,
+        label = label,
+        placeholder = placeholder,
+        leadingIcon = leadingIcon,
+        trailingIcon = trailingIcon,
+        hasLeadingIcon = hasLeadingIcon,
+        hasTrailingIcon = hasTrailingIcon,
+        type = type,
+        autoComplete = autoComplete,
+        required = required,
+        disabled = disabled,
+        error = error,
+        errorText = errorText,
+        prefixText = prefixText,
+        suffixText = suffixText,
+        supportingText = supportingText,
+        textDirection = textDirection,
+        rows = rows,
+        cols = cols,
+        max = max,
+        maxLength = maxLength,
+        min = min,
+        minLength = minLength,
+        pattern = pattern,
+        readOnly = readOnly,
+        multiple = multiple,
+        step = step,
+        attrs = Modifier.styleModifier {
+            propertyOf("--md-$tag-bottom-space", bottomSpace)
+            propertyOf("--md-$tag-caret-color", caretColor)
+            propertyOf("--md-$tag-container-shape", containerShape)
+            propertyOf("--md-$tag-container-shape-end-end", containerShapeEndEnd)
+            propertyOf("--md-$tag-container-shape-end-start", containerShapeEndStart)
+            propertyOf("--md-$tag-container-shape-start-end", containerShapeStartEnd)
+            propertyOf("--md-$tag-container-shape-start-start", containerShapeStartStart)
+            propertyOf("--md-$tag-disabled-input-text-color", disabledInputTextColor)
+            propertyOf("--md-$tag-disabled-input-text-opacity", disabledInputTextOpacity)
+            propertyOf("--md-$tag-disabled-label-text-color", disabledLabelTextColor)
+            propertyOf("--md-$tag-disabled-label-text-opacity", disabledLabelTextOpacity)
+            propertyOf("--md-$tag-disabled-leading-icon-color", disabledLeadingIconColor)
+            propertyOf("--md-$tag-disabled-leading-icon-opacity", disabledLeadingIconOpacity)
+            propertyOf("--md-$tag-disabled-outline-color", disabledOutlineColor)
+            propertyOf("--md-$tag-disabled-outline-opacity", disabledOutlineOpacity)
+            propertyOf("--md-$tag-disabled-outline-width", disabledOutlineWidth)
+            propertyOf("--md-$tag-disabled-supporting-text-color", disabledSupportingTextColor)
+            propertyOf("--md-$tag-disabled-supporting-text-opacity", disabledSupportingTextOpacity)
+            propertyOf("--md-$tag-disabled-trailing-icon-color", disabledTrailingIconColor)
+            propertyOf("--md-$tag-disabled-trailing-icon-opacity", disabledTrailingIconOpacity)
+            propertyOf("--md-$tag-error-focus-caret-color", errorFocusCaretColor)
+            propertyOf("--md-$tag-error-focus-input-text-color", errorFocusInputTextColor)
+            propertyOf("--md-$tag-error-focus-label-text-color", errorFocusLabelTextColor)
+            propertyOf("--md-$tag-error-focus-leading-icon-color", errorFocusLeadingIconColor)
+            propertyOf("--md-$tag-error-focus-outline-color", errorFocusOutlineColor)
+            propertyOf("--md-$tag-error-focus-supporting-text-color", errorFocusSupportingTextColor)
+            propertyOf("--md-$tag-error-focus-trailing-icon-color", errorFocusTrailingIconColor)
+            propertyOf("--md-$tag-error-hover-input-text-color", errorHoverInputTextColor)
+            propertyOf("--md-$tag-error-hover-label-text-color", errorHoverLabelTextColor)
+            propertyOf("--md-$tag-error-hover-leading-icon-color", errorHoverLeadingIconColor)
+            propertyOf("--md-$tag-error-hover-outline-color", errorHoverOutlineColor)
+            propertyOf("--md-$tag-error-hover-supporting-text-color", errorHoverSupportingTextColor)
+            propertyOf("--md-$tag-error-hover-trailing-icon-color", errorHoverTrailingIconColor)
+            propertyOf("--md-$tag-error-input-text-color", errorInputTextColor)
+            propertyOf("--md-$tag-error-label-text-color", errorLabelTextColor)
+            propertyOf("--md-$tag-error-leading-icon-color", errorLeadingIconColor)
+            propertyOf("--md-$tag-error-outline-color", errorOutlineColor)
+            propertyOf("--md-$tag-error-supporting-text-color", errorSupportingTextColor)
+            propertyOf("--md-$tag-error-trailing-icon-color", errorTrailingIconColor)
+            propertyOf("--md-$tag-focus-caret-color", focusCaretColor)
+            propertyOf("--md-$tag-focus-input-text-color", focusInputTextColor)
+            propertyOf("--md-$tag-focus-label-text-color", focusLabelTextColor)
+            propertyOf("--md-$tag-focus-leading-icon-color", focusLeadingIconColor)
+            propertyOf("--md-$tag-focus-outline-color", focusOutlineColor)
+            propertyOf("--md-$tag-focus-outline-width", focusOutlineWidth)
+            propertyOf("--md-$tag-focus-supporting-text-color", focusSupportingTextColor)
+            propertyOf("--md-$tag-focus-trailing-icon-color", focusTrailingIconColor)
+            propertyOf("--md-$tag-hover-input-text-color", hoverInputTextColor)
+            propertyOf("--md-$tag-hover-label-text-color", hoverLabelTextColor)
+            propertyOf("--md-$tag-hover-leading-icon-color", hoverLeadingIconColor)
+            propertyOf("--md-$tag-hover-outline-color", hoverOutlineColor)
+            propertyOf("--md-$tag-hover-outline-width", hoverOutlineWidth)
+            propertyOf("--md-$tag-hover-supporting-text-color", hoverSupportingTextColor)
+            propertyOf("--md-$tag-hover-trailing-icon-color", hoverTrailingIconColor)
+            propertyOf("--md-$tag-input-text-color", inputTextColor)
+            propertyOf("--md-$tag-input-text-font", inputTextFont)
+            propertyOf("--md-$tag-input-text-line-height", inputTextLineHeight)
+            propertyOf("--md-$tag-input-text-placeholder-color", inputTextPlaceholderColor)
+            propertyOf("--md-$tag-input-text-prefix-color", inputTextPrefixColor)
+            propertyOf("--md-$tag-input-text-prefix-trailing-space", inputTextPrefixTrailingSpace)
+            propertyOf("--md-$tag-input-text-size", inputTextSize)
+            propertyOf("--md-$tag-input-text-suffix-color", inputTextSuffixColor)
+            propertyOf("--md-$tag-input-text-suffix-leading-space", inputTextSuffixLeadingSpace)
+            propertyOf("--md-$tag-input-text-weight", inputTextWeight)
+            propertyOf("--md-$tag-label-text-color", labelTextColor)
+            propertyOf("--md-$tag-label-text-font", labelTextFont)
+            propertyOf("--md-$tag-label-text-line-height", labelTextLineHeight)
+            propertyOf("--md-$tag-label-text-populated-line-height", labelTextPopulatedLineHeight)
+            propertyOf("--md-$tag-label-text-populated-size", labelTextPopulatedSize)
+            propertyOf("--md-$tag-label-text-size", labelTextSize)
+            propertyOf("--md-$tag-label-text-weight", labelTextWeight)
+            propertyOf("--md-$tag-leading-icon-color", leadingIconColor)
+            propertyOf("--md-$tag-leading-icon-size", leadingIconSize)
+            propertyOf("--md-$tag-leading-space", leadingSpace)
+            propertyOf("--md-$tag-outline-color", outlineColor)
+            propertyOf("--md-$tag-outline-width", outlineWidth)
+            propertyOf("--md-$tag-supporting-text-color", supportingTextColor)
+            propertyOf("--md-$tag-supporting-text-font", supportingTextFont)
+            propertyOf("--md-$tag-supporting-text-line-height", supportingTextLineHeight)
+            propertyOf("--md-$tag-supporting-text-size", supportingTextSize)
+            propertyOf("--md-$tag-supporting-text-weight", supportingTextWeight)
+            propertyOf("--md-$tag-top-space", topSpace)
+            propertyOf("--md-$tag-trailing-icon-color", trailingIconColor)
+            propertyOf("--md-$tag-trailing-icon-size", trailingIconSize)
+            propertyOf("--md-$tag-trailing-space", trailingSpace)
+        }.toAttrs(attrs)
+    )
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/labs/Card.kt b/library/src/jsMain/kotlin/material/web/component/labs/Card.kt
new file mode 100644
index 0000000..85b8da8
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/labs/Card.kt
@@ -0,0 +1,147 @@
+package material.web.component.labs
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.css.CSSLengthOrPercentageNumericValue
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.styleModifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.css.CSSColorValue
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+private fun BaseCard(
+    tag: String,
+    attrs: AttrBuilderContext<MdElement>? = null,
+    elevation: Int?,
+    containerShape: CSSLengthOrPercentageNumericValue?,
+    shadowColor: CSSColorValue?,
+    content: ContentBuilder<MdElement>?,
+) {
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier
+            .styleModifier {
+                elevation?.let { property("--md-$tag-container-elevation", elevation.toString()) }
+                containerShape?.let { property("--md-$tag-container-shape", it) }
+                shadowColor?.let { property("--md-$tag-container-shadow-color", it.toString()) }
+            }
+            .toAttrs {
+                classes("card")
+                attrs?.invoke(this)
+            },
+        content = content
+    ).also { jsRequire("@material/web/labs/card/$tag.js") }
+}
+
+@Composable
+fun ElevatedCard(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    elevation: Int? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    shadowColor: CSSColorValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "elevated-card"
+    BaseCard(
+        tag = tag,
+        attrs = attrs,
+        elevation = elevation,
+        containerShape = containerShape,
+        shadowColor = shadowColor,
+        content = content
+    )
+}
+
+@Composable
+fun ElevatedCard(
+    modifier: Modifier = Modifier,
+    elevation: Int? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    shadowColor: CSSColorValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    ElevatedCard(
+        attrs = modifier.toAttrs(),
+        elevation = elevation,
+        containerShape = containerShape,
+        shadowColor = shadowColor,
+        content = content
+    )
+}
+
+@Composable
+fun OutlinedCard(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    elevation: Int? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    shadowColor: CSSColorValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "outlined-card"
+    BaseCard(
+        tag = tag,
+        attrs = attrs,
+        elevation = elevation,
+        containerShape = containerShape,
+        shadowColor = shadowColor,
+        content = content
+    )
+}
+
+@Composable
+fun OutlinedCard(
+    modifier: Modifier = Modifier,
+    elevation: Int? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    shadowColor: CSSColorValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    OutlinedCard(
+        attrs = modifier.toAttrs(),
+        elevation = elevation,
+        containerShape = containerShape,
+        shadowColor = shadowColor,
+        content = content
+    )
+}
+
+@Composable
+fun FilledCard(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    elevation: Int? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    shadowColor: CSSColorValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    val tag = "filled-card"
+    BaseCard(
+        tag = tag,
+        attrs = attrs,
+        elevation = elevation,
+        containerShape = containerShape,
+        shadowColor = shadowColor,
+        content = content
+    )
+}
+
+@Composable
+fun FilledCard(
+    modifier: Modifier = Modifier,
+    elevation: Int? = null,
+    containerShape: CSSLengthOrPercentageNumericValue? = null,
+    shadowColor: CSSColorValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    FilledCard(
+        attrs = modifier.toAttrs(),
+        elevation = elevation,
+        containerShape = containerShape,
+        shadowColor = shadowColor,
+        content = content
+    )
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/labs/OutlinedSegmentedButtonSet.kt b/library/src/jsMain/kotlin/material/web/component/labs/OutlinedSegmentedButtonSet.kt
new file mode 100644
index 0000000..cfb8ecd
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/labs/OutlinedSegmentedButtonSet.kt
@@ -0,0 +1,332 @@
+package material.web.component.labs
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.css.CSSLengthOrPercentageNumericValue
+import com.varabyte.kobweb.compose.css.FontWeight
+import com.varabyte.kobweb.compose.css.Height
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.styleModifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.css.CSSColorValue
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+private fun BaseOutlinedSegmentedButtonSet(
+    attrs: AttrBuilderContext<MdElement>?,
+    containerHeight: CSSLengthOrPercentageNumericValue?,
+    disabledIconColor: CSSColorValue?,
+    disabledLabelTextColor: CSSColorValue?,
+    disabledOutlineColor: CSSColorValue?,
+    hoverStateLayerOpacity: CSSLengthOrPercentageNumericValue?,
+    labelTextFont: String?,
+    labelTextLineHeight: Height?,
+    labelTextSize: CSSLengthOrPercentageNumericValue?,
+    labelTextWeight: FontWeight?,
+    outlineColor: CSSColorValue?,
+    pressedStateLayerOpacity: CSSLengthOrPercentageNumericValue?,
+    selectedContainerColor: CSSColorValue?,
+    selectedFocusIconColor: CSSColorValue?,
+    selectedFocusLabelTextColor: CSSColorValue?,
+    selectedHoverIconColor: CSSColorValue?,
+    selectedHoverLabelTextColor: CSSColorValue?,
+    selectedHoverStateLayerColor: CSSColorValue?,
+    selectedLabelTextColor: CSSColorValue?,
+    selectedPressedIconColor: CSSColorValue?,
+    selectedPressedLabelTextColor: CSSColorValue?,
+    selectedPressedStateLayerColor: CSSColorValue?,
+    shape: CSSLengthOrPercentageNumericValue?,
+    unselectedFocusIconColor: CSSColorValue?,
+    unselectedFocusLabelTextColor: CSSColorValue?,
+    unselectedHoverIconColor: CSSColorValue?,
+    unselectedHoverLabelTextColor: CSSColorValue?,
+    unselectedHoverStateLayerColor: CSSColorValue?,
+    unselectedLabelTextColor: CSSColorValue?,
+    unselectedPressedIconColor: CSSColorValue?,
+    unselectedPressedLabelTextColor: CSSColorValue?,
+    unselectedPressedStateLayerColor: CSSColorValue?,
+    iconSize: CSSLengthOrPercentageNumericValue?,
+    selectedIconColor: CSSColorValue?,
+    unselectedIconColor: CSSColorValue?,
+    shapeStartStart: CSSLengthOrPercentageNumericValue?,
+    shapeStartEnd: CSSLengthOrPercentageNumericValue?,
+    shapeEndEnd: CSSLengthOrPercentageNumericValue?,
+    shapeEndStart: CSSLengthOrPercentageNumericValue?,
+    content: ContentBuilder<MdElement>?,
+) {
+    val tag = "outlined-segmented-button-set"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier.styleModifier {
+            containerHeight?.let { property("--md-$tag-container-height", it.toString()) }
+            disabledIconColor?.let { property("--md-$tag-disabled-icon-color", it.toString()) }
+            disabledLabelTextColor?.let { property("--md-$tag-disabled-label-text-color", it.toString()) }
+            disabledOutlineColor?.let { property("--md-$tag-disabled-outline-color", it.toString()) }
+            hoverStateLayerOpacity?.let { property("--md-$tag-hover-state-layer-opacity", it.toString()) }
+            labelTextFont?.let { property("--md-$tag-label-text-font", it) }
+            labelTextLineHeight?.let { property("--md-$tag-label-text-line-height", it.toString()) }
+            labelTextSize?.let { property("--md-$tag-label-text-size", it.toString()) }
+            labelTextWeight?.let { property("--md-$tag-label-text-weight", it.toString()) }
+            outlineColor?.let { property("--md-$tag-outline-color", it.toString()) }
+            pressedStateLayerOpacity?.let { property("--md-$tag-pressed-state-layer-opacity", it.toString()) }
+            selectedContainerColor?.let { property("--md-$tag-selected-container-color", it.toString()) }
+            selectedFocusIconColor?.let { property("--md-$tag-selected-focus-icon-color", it.toString()) }
+            selectedFocusLabelTextColor?.let {
+                property(
+                    "--md-$tag-selected-focus-label-text-color",
+                    it.toString()
+                )
+            }
+            selectedHoverIconColor?.let { property("--md-$tag-selected-hover-icon-color", it.toString()) }
+            selectedHoverLabelTextColor?.let {
+                property(
+                    "--md-$tag-selected-hover-label-text-color",
+                    it.toString()
+                )
+            }
+            selectedHoverStateLayerColor?.let {
+                property(
+                    "--md-$tag-selected-hover-state-layer-color",
+                    it.toString()
+                )
+            }
+            selectedLabelTextColor?.let { property("--md-$tag-selected-label-text-color", it.toString()) }
+            selectedPressedIconColor?.let { property("--md-$tag-selected-pressed-icon-color", it.toString()) }
+            selectedPressedLabelTextColor?.let {
+                property(
+                    "--md-$tag-selected-pressed-label-text-color",
+                    it.toString()
+                )
+            }
+            selectedPressedStateLayerColor?.let {
+                property(
+                    "--md-$tag-selected-pressed-state-layer-color",
+                    it.toString()
+                )
+            }
+            shape?.let { property("--md-$tag-shape", it.toString()) }
+            unselectedFocusIconColor?.let { property("--md-$tag-unselected-focus-icon-color", it.toString()) }
+            unselectedFocusLabelTextColor?.let {
+                property(
+                    "--md-$tag-unselected-focus-label-text-color",
+                    it.toString()
+                )
+            }
+            unselectedHoverIconColor?.let { property("--md-$tag-unselected-hover-icon-color", it.toString()) }
+            unselectedHoverLabelTextColor?.let {
+                property(
+                    "--md-$tag-unselected-hover-label-text-color",
+                    it.toString()
+                )
+            }
+            unselectedHoverStateLayerColor?.let {
+                property(
+                    "--md-$tag-unselected-hover-state-layer-color",
+                    it.toString()
+                )
+            }
+            unselectedLabelTextColor?.let { property("--md-$tag-unselected-label-text-color", it.toString()) }
+            unselectedPressedIconColor?.let { property("--md-$tag-unselected-pressed-icon-color", it.toString()) }
+            unselectedPressedLabelTextColor?.let {
+                property(
+                    "--md-$tag-unselected-pressed-label-text-color",
+                    it.toString()
+                )
+            }
+            unselectedPressedStateLayerColor?.let {
+                property(
+                    "--md-$tag-unselected-pressed-state-layer-color",
+                    it.toString()
+                )
+            }
+            iconSize?.let { property("--md-$tag-icon-size", it.toString()) }
+            selectedIconColor?.let { property("--md-$tag-selected-icon-color", it.toString()) }
+            unselectedIconColor?.let { property("--md-$tag-unselected-icon-color", it.toString()) }
+            shapeStartStart?.let { property("--md-$tag-shape-start-start", it.toString()) }
+            shapeStartEnd?.let { property("--md-$tag-shape-start-end", it.toString()) }
+            shapeEndEnd?.let { property("--md-$tag-shape-end-end", it.toString()) }
+            shapeEndStart?.let { property("--md-$tag-shape-end-start", it.toString()) }
+        }.toAttrs {
+            attrs?.invoke(this)
+        },
+        content = content
+    ).also { jsRequire("@material/web/labs/segmentedbuttonset/$tag.js") }
+}
+
+@Composable
+fun OutlinedSegmentedButtonSet(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    containerHeight: CSSLengthOrPercentageNumericValue? = null,
+    disabledIconColor: CSSColorValue? = null,
+    disabledLabelTextColor: CSSColorValue? = null,
+    disabledOutlineColor: CSSColorValue? = null,
+    hoverStateLayerOpacity: CSSLengthOrPercentageNumericValue? = null,
+    labelTextFont: String? = null,
+    labelTextLineHeight: Height? = null,
+    labelTextSize: CSSLengthOrPercentageNumericValue? = null,
+    labelTextWeight: FontWeight? = null,
+    outlineColor: CSSColorValue? = null,
+    pressedStateLayerOpacity: CSSLengthOrPercentageNumericValue? = null,
+    selectedContainerColor: CSSColorValue? = null,
+    selectedFocusIconColor: CSSColorValue? = null,
+    selectedFocusLabelTextColor: CSSColorValue? = null,
+    selectedHoverIconColor: CSSColorValue? = null,
+    selectedHoverLabelTextColor: CSSColorValue? = null,
+    selectedHoverStateLayerColor: CSSColorValue? = null,
+    selectedLabelTextColor: CSSColorValue? = null,
+    selectedPressedIconColor: CSSColorValue? = null,
+    selectedPressedLabelTextColor: CSSColorValue? = null,
+    selectedPressedStateLayerColor: CSSColorValue? = null,
+    shape: CSSLengthOrPercentageNumericValue? = null,
+    unselectedFocusIconColor: CSSColorValue? = null,
+    unselectedFocusLabelTextColor: CSSColorValue? = null,
+    unselectedHoverIconColor: CSSColorValue? = null,
+    unselectedHoverLabelTextColor: CSSColorValue? = null,
+    unselectedHoverStateLayerColor: CSSColorValue? = null,
+    unselectedLabelTextColor: CSSColorValue? = null,
+    unselectedPressedIconColor: CSSColorValue? = null,
+    unselectedPressedLabelTextColor: CSSColorValue? = null,
+    unselectedPressedStateLayerColor: CSSColorValue? = null,
+    iconSize: CSSLengthOrPercentageNumericValue? = null,
+    selectedIconColor: CSSColorValue? = null,
+    unselectedIconColor: CSSColorValue? = null,
+    shapeStartStart: CSSLengthOrPercentageNumericValue? = null,
+    shapeStartEnd: CSSLengthOrPercentageNumericValue? = null,
+    shapeEndEnd: CSSLengthOrPercentageNumericValue? = null,
+    shapeEndStart: CSSLengthOrPercentageNumericValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    BaseOutlinedSegmentedButtonSet(
+        attrs = attrs,
+        containerHeight = containerHeight,
+        disabledIconColor = disabledIconColor,
+        disabledLabelTextColor = disabledLabelTextColor,
+        disabledOutlineColor = disabledOutlineColor,
+        hoverStateLayerOpacity = hoverStateLayerOpacity,
+        labelTextFont = labelTextFont,
+        labelTextLineHeight = labelTextLineHeight,
+        labelTextSize = labelTextSize,
+        labelTextWeight = labelTextWeight,
+        outlineColor = outlineColor,
+        pressedStateLayerOpacity = pressedStateLayerOpacity,
+        selectedContainerColor = selectedContainerColor,
+        selectedFocusIconColor = selectedFocusIconColor,
+        selectedFocusLabelTextColor = selectedFocusLabelTextColor,
+        selectedHoverIconColor = selectedHoverIconColor,
+        selectedHoverLabelTextColor = selectedHoverLabelTextColor,
+        selectedHoverStateLayerColor = selectedHoverStateLayerColor,
+        selectedLabelTextColor = selectedLabelTextColor,
+        selectedPressedIconColor = selectedPressedIconColor,
+        selectedPressedLabelTextColor = selectedPressedLabelTextColor,
+        selectedPressedStateLayerColor = selectedPressedStateLayerColor,
+        shape = shape,
+        unselectedFocusIconColor = unselectedFocusIconColor,
+        unselectedFocusLabelTextColor = unselectedFocusLabelTextColor,
+        unselectedHoverIconColor = unselectedHoverIconColor,
+        unselectedHoverLabelTextColor = unselectedHoverLabelTextColor,
+        unselectedHoverStateLayerColor = unselectedHoverStateLayerColor,
+        unselectedLabelTextColor = unselectedLabelTextColor,
+        unselectedPressedIconColor = unselectedPressedIconColor,
+        unselectedPressedLabelTextColor = unselectedPressedLabelTextColor,
+        unselectedPressedStateLayerColor = unselectedPressedStateLayerColor,
+        iconSize = iconSize,
+        selectedIconColor = selectedIconColor,
+        unselectedIconColor = unselectedIconColor,
+        shapeStartStart = shapeStartStart,
+        shapeStartEnd = shapeStartEnd,
+        shapeEndEnd = shapeEndEnd,
+        shapeEndStart = shapeEndStart,
+        content = content
+    )
+}
+
+@Composable
+fun OutlinedSegmentedButtonSet(
+    modifier: Modifier = Modifier,
+    containerHeight: CSSLengthOrPercentageNumericValue? = null,
+    disabledIconColor: CSSColorValue? = null,
+    disabledLabelTextColor: CSSColorValue? = null,
+    disabledOutlineColor: CSSColorValue? = null,
+    hoverStateLayerOpacity: CSSLengthOrPercentageNumericValue? = null,
+    labelTextFont: String? = null,
+    labelTextLineHeight: Height? = null,
+    labelTextSize: CSSLengthOrPercentageNumericValue? = null,
+    labelTextWeight: FontWeight? = null,
+    outlineColor: CSSColorValue? = null,
+    pressedStateLayerOpacity: CSSLengthOrPercentageNumericValue? = null,
+    selectedContainerColor: CSSColorValue? = null,
+    selectedFocusIconColor: CSSColorValue? = null,
+    selectedFocusLabelTextColor: CSSColorValue? = null,
+    selectedHoverIconColor: CSSColorValue? = null,
+    selectedHoverLabelTextColor: CSSColorValue? = null,
+    selectedHoverStateLayerColor: CSSColorValue? = null,
+    selectedLabelTextColor: CSSColorValue? = null,
+    selectedPressedIconColor: CSSColorValue? = null,
+    selectedPressedLabelTextColor: CSSColorValue? = null,
+    selectedPressedStateLayerColor: CSSColorValue? = null,
+    shape: CSSLengthOrPercentageNumericValue? = null,
+    unselectedFocusIconColor: CSSColorValue? = null,
+    unselectedFocusLabelTextColor: CSSColorValue? = null,
+    unselectedHoverIconColor: CSSColorValue? = null,
+    unselectedHoverLabelTextColor: CSSColorValue? = null,
+    unselectedHoverStateLayerColor: CSSColorValue? = null,
+    unselectedLabelTextColor: CSSColorValue? = null,
+    unselectedPressedIconColor: CSSColorValue? = null,
+    unselectedPressedLabelTextColor: CSSColorValue? = null,
+    unselectedPressedStateLayerColor: CSSColorValue? = null,
+    iconSize: CSSLengthOrPercentageNumericValue? = null,
+    selectedIconColor: CSSColorValue? = null,
+    unselectedIconColor: CSSColorValue? = null,
+    shapeStartStart: CSSLengthOrPercentageNumericValue? = null,
+    shapeStartEnd: CSSLengthOrPercentageNumericValue? = null,
+    shapeEndEnd: CSSLengthOrPercentageNumericValue? = null,
+    shapeEndStart: CSSLengthOrPercentageNumericValue? = null,
+    content: ContentBuilder<MdElement>? = null,
+) {
+    OutlinedSegmentedButtonSet(
+        attrs = modifier.toAttrs(),
+        containerHeight = containerHeight,
+        disabledIconColor = disabledIconColor,
+        disabledLabelTextColor = disabledLabelTextColor,
+        disabledOutlineColor = disabledOutlineColor,
+        hoverStateLayerOpacity = hoverStateLayerOpacity,
+        labelTextFont = labelTextFont,
+        labelTextLineHeight = labelTextLineHeight,
+        labelTextSize = labelTextSize,
+        labelTextWeight = labelTextWeight,
+        outlineColor = outlineColor,
+        pressedStateLayerOpacity = pressedStateLayerOpacity,
+        selectedContainerColor = selectedContainerColor,
+        selectedFocusIconColor = selectedFocusIconColor,
+        selectedFocusLabelTextColor = selectedFocusLabelTextColor,
+        selectedHoverIconColor = selectedHoverIconColor,
+        selectedHoverLabelTextColor = selectedHoverLabelTextColor,
+        selectedHoverStateLayerColor = selectedHoverStateLayerColor,
+        selectedLabelTextColor = selectedLabelTextColor,
+        selectedPressedIconColor = selectedPressedIconColor,
+        selectedPressedLabelTextColor = selectedPressedLabelTextColor,
+        selectedPressedStateLayerColor = selectedPressedStateLayerColor,
+        shape = shape,
+        unselectedFocusIconColor = unselectedFocusIconColor,
+        unselectedFocusLabelTextColor = unselectedFocusLabelTextColor,
+        unselectedHoverIconColor = unselectedHoverIconColor,
+        unselectedHoverLabelTextColor = unselectedHoverLabelTextColor,
+        unselectedHoverStateLayerColor = unselectedHoverStateLayerColor,
+        unselectedLabelTextColor = unselectedLabelTextColor,
+        unselectedPressedIconColor = unselectedPressedIconColor,
+        unselectedPressedLabelTextColor = unselectedPressedLabelTextColor,
+        unselectedPressedStateLayerColor = unselectedPressedStateLayerColor,
+        iconSize = iconSize,
+        selectedIconColor = selectedIconColor,
+        unselectedIconColor = unselectedIconColor,
+        shapeStartStart = shapeStartStart,
+        shapeStartEnd = shapeStartEnd,
+        shapeEndEnd = shapeEndEnd,
+        shapeEndStart = shapeEndStart,
+        content = content
+    )
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/labs/SegmentedButton.kt b/library/src/jsMain/kotlin/material/web/component/labs/SegmentedButton.kt
new file mode 100644
index 0000000..f8e7c04
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/labs/SegmentedButton.kt
@@ -0,0 +1,334 @@
+package material.web.component.labs
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.css.CSSLengthOrPercentageNumericValue
+import com.varabyte.kobweb.compose.css.Height
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.onClick
+import com.varabyte.kobweb.compose.ui.styleModifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.css.CSSColorValue
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun BaseSegmentedButton(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    label: String?,
+    selected: Boolean,
+    onClick: () -> Unit,
+    containerHeight: Height?,
+    disabledIconColor: CSSColorValue?,
+    disabledLabelTextColor: CSSColorValue?,
+    disabledOutlineColor: CSSColorValue?,
+    hoverStateLayerOpacity: CSSLengthOrPercentageNumericValue?,
+    labelTextFont: String?,
+    labelTextLineHeight: CSSLengthOrPercentageNumericValue?,
+    labelTextSize: CSSLengthOrPercentageNumericValue?,
+    labelTextWeight: Height?,
+    outlineColor: CSSColorValue?,
+    pressedStateLayerOpacity: CSSLengthOrPercentageNumericValue?,
+    selectedContainerColor: CSSColorValue?,
+    selectedFocusIconColor: CSSColorValue?,
+    selectedFocusLabelTextColor: CSSColorValue?,
+    selectedHoverIconColor: CSSColorValue?,
+    selectedHoverLabelTextColor: CSSColorValue?,
+    selectedHoverStateLayerColor: CSSColorValue?,
+    selectedLabelTextColor: CSSColorValue?,
+    selectedPressedIconColor: CSSColorValue?,
+    selectedPressedLabelTextColor: CSSColorValue?,
+    selectedPressedStateLayerColor: CSSColorValue?,
+    shape: CSSLengthOrPercentageNumericValue?,
+    unselectedFocusIconColor: CSSColorValue?,
+    unselectedFocusLabelTextColor: CSSColorValue?,
+    unselectedHoverIconColor: CSSColorValue?,
+    unselectedHoverLabelTextColor: CSSColorValue?,
+    unselectedHoverStateLayerColor: CSSColorValue?,
+    unselectedLabelTextColor: CSSColorValue?,
+    unselectedPressedIconColor: CSSColorValue?,
+    unselectedPressedLabelTextColor: CSSColorValue?,
+    unselectedPressedStateLayerColor: CSSColorValue?,
+    iconSize: CSSLengthOrPercentageNumericValue?,
+    selectedIconColor: CSSColorValue?,
+    unselectedIconColor: CSSColorValue?,
+    spacingLeading: CSSLengthOrPercentageNumericValue?,
+    spacingTrailing: CSSLengthOrPercentageNumericValue?,
+) {
+    val tag = "outlined-segmented-button"
+    MdTagElement(
+        tagName = "md-$tag",
+        applyAttrs = Modifier
+            .onClick { onClick() }
+            .styleModifier {
+                containerHeight?.let { property("--md-$tag-container-height", it.toString()) }
+                disabledIconColor?.let { property("--md-$tag-disabled-icon-color", it.toString()) }
+                disabledLabelTextColor?.let { property("--md-$tag-disabled-label-text-color", it.toString()) }
+                disabledOutlineColor?.let { property("--md-$tag-disabled-outline-color", it.toString()) }
+                hoverStateLayerOpacity?.let { property("--md-$tag-hover-state-layer-opacity", it.toString()) }
+                labelTextFont?.let { property("--md-$tag-label-text-font", it) }
+                labelTextLineHeight?.let { property("--md-$tag-label-text-line-height", it.toString()) }
+                labelTextSize?.let { property("--md-$tag-label-text-size", it.toString()) }
+                labelTextWeight?.let { property("--md-$tag-label-text-weight", it.toString()) }
+                outlineColor?.let { property("--md-$tag-outline-color", it.toString()) }
+                pressedStateLayerOpacity?.let { property("--md-$tag-pressed-state-layer-opacity", it.toString()) }
+                selectedContainerColor?.let { property("--md-$tag-selected-container-color", it.toString()) }
+                selectedFocusIconColor?.let { property("--md-$tag-selected-focus-icon-color", it.toString()) }
+                selectedFocusLabelTextColor?.let {
+                    property(
+                        "--md-$tag-selected-focus-label-text-color",
+                        it.toString()
+                    )
+                }
+                selectedHoverIconColor?.let { property("--md-$tag-selected-hover-icon-color", it.toString()) }
+                selectedHoverLabelTextColor?.let {
+                    property(
+                        "--md-$tag-selected-hover-label-text-color",
+                        it.toString()
+                    )
+                }
+                selectedHoverStateLayerColor?.let {
+                    property(
+                        "--md-$tag-selected-hover-state-layer-color",
+                        it.toString()
+                    )
+                }
+                selectedLabelTextColor?.let { property("--md-$tag-selected-label-text-color", it.toString()) }
+                selectedPressedIconColor?.let { property("--md-$tag-selected-pressed-icon-color", it.toString()) }
+                selectedPressedLabelTextColor?.let {
+                    property(
+                        "--md-$tag-selected-pressed-label-text-color",
+                        it.toString()
+                    )
+                }
+                selectedPressedStateLayerColor?.let {
+                    property(
+                        "--md-$tag-selected-pressed-state-layer-color",
+                        it.toString()
+                    )
+                }
+                shape?.let { property("--md-$tag-shape", it.toString()) }
+                unselectedFocusIconColor?.let { property("--md-$tag-unselected-focus-icon-color", it.toString()) }
+                unselectedFocusLabelTextColor?.let {
+                    property(
+                        "--md-$tag-unselected-focus-label-text-color",
+                        it.toString()
+                    )
+                }
+                unselectedHoverIconColor?.let { property("--md-$tag-unselected-hover-icon-color", it.toString()) }
+                unselectedHoverLabelTextColor?.let {
+                    property(
+                        "--md-$tag-unselected-hover-label-text-color",
+                        it.toString()
+                    )
+                }
+                unselectedHoverStateLayerColor?.let {
+                    property(
+                        "--md-$tag-unselected-hover-state-layer-color",
+                        it.toString()
+                    )
+                }
+                unselectedLabelTextColor?.let { property("--md-$tag-unselected-label-text-color", it.toString()) }
+                unselectedPressedIconColor?.let { property("--md-$tag-unselected-pressed-icon-color", it.toString()) }
+                unselectedPressedLabelTextColor?.let {
+                    property(
+                        "--md-$tag-unselected-pressed-label-text-color",
+                        it.toString()
+                    )
+                }
+                unselectedPressedStateLayerColor?.let {
+                    property(
+                        "--md-$tag-unselected-pressed-state-layer-color",
+                        it.toString()
+                    )
+                }
+                iconSize?.let { property("--md-$tag-icon-size", it.toString()) }
+                selectedIconColor?.let { property("--md-$tag-selected-icon-color", it.toString()) }
+                unselectedIconColor?.let { property("--md-$tag-unselected-icon-color", it.toString()) }
+                spacingLeading?.let { property("--md-$tag-spacing-leading", it.toString()) }
+                spacingTrailing?.let { property("--md-$tag-spacing-trailing", it.toString()) }
+            }
+            .toAttrs {
+                attrs?.invoke(this)
+                label?.let { attr("label", it) }
+                if (selected) attr("selected", "")
+            },
+        content = null
+    ).also { jsRequire("@material/web/labs/segmentedbutton/$tag.js") }
+}
+
+@Composable
+fun SegmentedButton(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    label: String? = null,
+    selected: Boolean = false,
+    onClick: () -> Unit = {},
+    containerHeight: Height? = null,
+    disabledIconColor: CSSColorValue? = null,
+    disabledLabelTextColor: CSSColorValue? = null,
+    disabledOutlineColor: CSSColorValue? = null,
+    hoverStateLayerOpacity: CSSLengthOrPercentageNumericValue? = null,
+    labelTextFont: String? = null,
+    labelTextLineHeight: CSSLengthOrPercentageNumericValue? = null,
+    labelTextSize: CSSLengthOrPercentageNumericValue? = null,
+    labelTextWeight: Height? = null,
+    outlineColor: CSSColorValue? = null,
+    pressedStateLayerOpacity: CSSLengthOrPercentageNumericValue? = null,
+    selectedContainerColor: CSSColorValue? = null,
+    selectedFocusIconColor: CSSColorValue? = null,
+    selectedFocusLabelTextColor: CSSColorValue? = null,
+    selectedHoverIconColor: CSSColorValue? = null,
+    selectedHoverLabelTextColor: CSSColorValue? = null,
+    selectedHoverStateLayerColor: CSSColorValue? = null,
+    selectedLabelTextColor: CSSColorValue? = null,
+    selectedPressedIconColor: CSSColorValue? = null,
+    selectedPressedLabelTextColor: CSSColorValue? = null,
+    selectedPressedStateLayerColor: CSSColorValue? = null,
+    shape: CSSLengthOrPercentageNumericValue? = null,
+    unselectedFocusIconColor: CSSColorValue? = null,
+    unselectedFocusLabelTextColor: CSSColorValue? = null,
+    unselectedHoverIconColor: CSSColorValue? = null,
+    unselectedHoverLabelTextColor: CSSColorValue? = null,
+    unselectedHoverStateLayerColor: CSSColorValue? = null,
+    unselectedLabelTextColor: CSSColorValue? = null,
+    unselectedPressedIconColor: CSSColorValue? = null,
+    unselectedPressedLabelTextColor: CSSColorValue? = null,
+    unselectedPressedStateLayerColor: CSSColorValue? = null,
+    iconSize: CSSLengthOrPercentageNumericValue? = null,
+    selectedIconColor: CSSColorValue? = null,
+    unselectedIconColor: CSSColorValue? = null,
+    spacingLeading: CSSLengthOrPercentageNumericValue? = null,
+    spacingTrailing: CSSLengthOrPercentageNumericValue? = null,
+) {
+    BaseSegmentedButton(
+        attrs = attrs,
+        label = label,
+        selected = selected,
+        onClick = onClick,
+        containerHeight = containerHeight,
+        disabledIconColor = disabledIconColor,
+        disabledLabelTextColor = disabledLabelTextColor,
+        disabledOutlineColor = disabledOutlineColor,
+        hoverStateLayerOpacity = hoverStateLayerOpacity,
+        labelTextFont = labelTextFont,
+        labelTextLineHeight = labelTextLineHeight,
+        labelTextSize = labelTextSize,
+        labelTextWeight = labelTextWeight,
+        outlineColor = outlineColor,
+        pressedStateLayerOpacity = pressedStateLayerOpacity,
+        selectedContainerColor = selectedContainerColor,
+        selectedFocusIconColor = selectedFocusIconColor,
+        selectedFocusLabelTextColor = selectedFocusLabelTextColor,
+        selectedHoverIconColor = selectedHoverIconColor,
+        selectedHoverLabelTextColor = selectedHoverLabelTextColor,
+        selectedHoverStateLayerColor = selectedHoverStateLayerColor,
+        selectedLabelTextColor = selectedLabelTextColor,
+        selectedPressedIconColor = selectedPressedIconColor,
+        selectedPressedLabelTextColor = selectedPressedLabelTextColor,
+        selectedPressedStateLayerColor = selectedPressedStateLayerColor,
+        shape = shape,
+        unselectedFocusIconColor = unselectedFocusIconColor,
+        unselectedFocusLabelTextColor = unselectedFocusLabelTextColor,
+        unselectedHoverIconColor = unselectedHoverIconColor,
+        unselectedHoverLabelTextColor = unselectedHoverLabelTextColor,
+        unselectedHoverStateLayerColor = unselectedHoverStateLayerColor,
+        unselectedLabelTextColor = unselectedLabelTextColor,
+        unselectedPressedIconColor = unselectedPressedIconColor,
+        unselectedPressedLabelTextColor = unselectedPressedLabelTextColor,
+        unselectedPressedStateLayerColor = unselectedPressedStateLayerColor,
+        iconSize = iconSize,
+        selectedIconColor = selectedIconColor,
+        unselectedIconColor = unselectedIconColor,
+        spacingLeading = spacingLeading,
+        spacingTrailing = spacingTrailing,
+    )
+}
+
+@Composable
+fun SegmentedButton(
+    modifier: Modifier = Modifier,
+    label: String? = null,
+    selected: Boolean = false,
+    onClick: () -> Unit = {},
+    containerHeight: Height? = null,
+    disabledIconColor: CSSColorValue? = null,
+    disabledLabelTextColor: CSSColorValue? = null,
+    disabledOutlineColor: CSSColorValue? = null,
+    hoverStateLayerOpacity: CSSLengthOrPercentageNumericValue? = null,
+    labelTextFont: String? = null,
+    labelTextLineHeight: CSSLengthOrPercentageNumericValue? = null,
+    labelTextSize: CSSLengthOrPercentageNumericValue? = null,
+    labelTextWeight: Height? = null,
+    outlineColor: CSSColorValue? = null,
+    pressedStateLayerOpacity: CSSLengthOrPercentageNumericValue? = null,
+    selectedContainerColor: CSSColorValue? = null,
+    selectedFocusIconColor: CSSColorValue? = null,
+    selectedFocusLabelTextColor: CSSColorValue? = null,
+    selectedHoverIconColor: CSSColorValue? = null,
+    selectedHoverLabelTextColor: CSSColorValue? = null,
+    selectedHoverStateLayerColor: CSSColorValue? = null,
+    selectedLabelTextColor: CSSColorValue? = null,
+    selectedPressedIconColor: CSSColorValue? = null,
+    selectedPressedLabelTextColor: CSSColorValue? = null,
+    selectedPressedStateLayerColor: CSSColorValue? = null,
+    shape: CSSLengthOrPercentageNumericValue? = null,
+    unselectedFocusIconColor: CSSColorValue? = null,
+    unselectedFocusLabelTextColor: CSSColorValue? = null,
+    unselectedHoverIconColor: CSSColorValue? = null,
+    unselectedHoverLabelTextColor: CSSColorValue? = null,
+    unselectedHoverStateLayerColor: CSSColorValue? = null,
+    unselectedLabelTextColor: CSSColorValue? = null,
+    unselectedPressedIconColor: CSSColorValue? = null,
+    unselectedPressedLabelTextColor: CSSColorValue? = null,
+    unselectedPressedStateLayerColor: CSSColorValue? = null,
+    iconSize: CSSLengthOrPercentageNumericValue? = null,
+    selectedIconColor: CSSColorValue? = null,
+    unselectedIconColor: CSSColorValue? = null,
+    spacingLeading: CSSLengthOrPercentageNumericValue? = null,
+    spacingTrailing: CSSLengthOrPercentageNumericValue? = null,
+) {
+    BaseSegmentedButton(
+        attrs = modifier.toAttrs(),
+        label = label,
+        selected = selected,
+        onClick = onClick,
+        containerHeight = containerHeight,
+        disabledIconColor = disabledIconColor,
+        disabledLabelTextColor = disabledLabelTextColor,
+        disabledOutlineColor = disabledOutlineColor,
+        hoverStateLayerOpacity = hoverStateLayerOpacity,
+        labelTextFont = labelTextFont,
+        labelTextLineHeight = labelTextLineHeight,
+        labelTextSize = labelTextSize,
+        labelTextWeight = labelTextWeight,
+        outlineColor = outlineColor,
+        pressedStateLayerOpacity = pressedStateLayerOpacity,
+        selectedContainerColor = selectedContainerColor,
+        selectedFocusIconColor = selectedFocusIconColor,
+        selectedFocusLabelTextColor = selectedFocusLabelTextColor,
+        selectedHoverIconColor = selectedHoverIconColor,
+        selectedHoverLabelTextColor = selectedHoverLabelTextColor,
+        selectedHoverStateLayerColor = selectedHoverStateLayerColor,
+        selectedLabelTextColor = selectedLabelTextColor,
+        selectedPressedIconColor = selectedPressedIconColor,
+        selectedPressedLabelTextColor = selectedPressedLabelTextColor,
+        selectedPressedStateLayerColor = selectedPressedStateLayerColor,
+        shape = shape,
+        unselectedFocusIconColor = unselectedFocusIconColor,
+        unselectedFocusLabelTextColor = unselectedFocusLabelTextColor,
+        unselectedHoverIconColor = unselectedHoverIconColor,
+        unselectedHoverLabelTextColor = unselectedHoverLabelTextColor,
+        unselectedHoverStateLayerColor = unselectedHoverStateLayerColor,
+        unselectedLabelTextColor = unselectedLabelTextColor,
+        unselectedPressedIconColor = unselectedPressedIconColor,
+        unselectedPressedLabelTextColor = unselectedPressedLabelTextColor,
+        unselectedPressedStateLayerColor = unselectedPressedStateLayerColor,
+        iconSize = iconSize,
+        selectedIconColor = selectedIconColor,
+        unselectedIconColor = unselectedIconColor,
+        spacingLeading = spacingLeading,
+        spacingTrailing = spacingTrailing,
+    )
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/labs/menu/Menu.kt b/library/src/jsMain/kotlin/material/web/component/labs/menu/Menu.kt
new file mode 100644
index 0000000..4020bd0
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/labs/menu/Menu.kt
@@ -0,0 +1,84 @@
+package material.web.component.labs.menu
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticEvent
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.onClick
+import com.varabyte.kobweb.compose.ui.modifiers.position
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.css.Position
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.w3c.dom.events.EventTarget
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun Menu(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    anchor: String? = null,
+    position: Position = Position.Absolute,
+    quick: Boolean = false,
+    hasOverflow: Boolean = false,
+    open: Boolean = false,
+    xOffset: Int = 0,
+    yOffset: Int = 0,
+    typeAHeadDelay: Int? = null,
+    anchorCorner: Corner? = null,
+    stayOpenOnOutsideClick: Boolean = false,
+    stayOpenOnFocusOut: Boolean = false,
+    skipRestoreFocus: Boolean = false,
+    defaultFocusState: FocusState? = null,
+    isSubmenu: Boolean = false,
+    onOpening: ((SyntheticEvent<EventTarget>) -> Unit) = {},
+    onOpened: ((SyntheticEvent<EventTarget>) -> Unit) = {},
+    onClosing: ((SyntheticEvent<EventTarget>) -> Unit) = {},
+    onClosed: ((SyntheticEvent<EventTarget>) -> Unit) = {},
+    content: ContentBuilder<MdElement>? = null,
+) {
+    MdTagElement(
+        tagName = "md-menu",
+        applyAttrs = Modifier
+            .position(position)
+            .onClick { evt ->
+                evt.preventDefault()
+            }
+            .toAttrs {
+                attrs?.invoke(this)
+                anchor?.let { attr("anchor", it) }
+                if (quick) attr("quick", "")
+                if (hasOverflow) attr("hasOverflow", "")
+                if (open) attr("open", "")
+                if (xOffset != 0) attr("xOffset", xOffset.toString())
+                if (yOffset != 0) attr("yOffset", yOffset.toString())
+                typeAHeadDelay?.let { attr("typeaheadDelay", it.toString()) }
+                anchorCorner?.let { attr("anchorCorner", it.value) }
+                if (stayOpenOnOutsideClick) attr("stayOpenOnOutsideClick", "")
+                if (stayOpenOnFocusOut) attr("stayOpenOnFocusout", "")
+                if (skipRestoreFocus) attr("skipRestoreFocus", "")
+                defaultFocusState?.let { attr("defaultFocusState", it.value) }
+                if (isSubmenu) attr("isSubmenu", "")
+                addEventListener("opening") { onOpening(it) }
+                addEventListener("opened") { onOpened(it) }
+                addEventListener("closing") { onClosing(it) }
+                addEventListener("closed") { onClosed(it) }
+            },
+        content = content
+    ).also { jsRequire("@material/web/menu/menu.js") }
+}
+
+enum class Corner(val value: String) {
+    END_START("end-start"),
+    END_END("end-end"),
+    START_START("start-start"),
+    START_END("start-end"),
+}
+
+enum class FocusState(val value: String) {
+    NONE("none"),
+    LIST_ROOT("list-root"),
+    FIRST_ITEM("first-item"),
+    LAST_ITEM("last-item"),
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/labs/menu/MenuItem.kt b/library/src/jsMain/kotlin/material/web/component/labs/menu/MenuItem.kt
new file mode 100644
index 0000000..312db1f
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/labs/menu/MenuItem.kt
@@ -0,0 +1,56 @@
+package material.web.component.labs.menu
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticEvent
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.onClick
+import com.varabyte.kobweb.compose.ui.styleModifier
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import material.web.common.slot
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.Span
+import org.w3c.dom.events.EventTarget
+
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun MenuItem(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    onClick: (SyntheticEvent<EventTarget>) -> Unit = {},
+    selected: Boolean = false,
+    disabled: Boolean = false,
+    keepOpen: Boolean = false,
+    supportingText: @Composable (() -> Unit)? = null,
+    trailingSupportingText: @Composable (() -> Unit)? = null,
+    content: ContentBuilder<MdElement>?,
+) {
+    MdTagElement(
+        tagName = "md-menu-item",
+        applyAttrs = Modifier
+            .onClick { evt ->
+                onClick(evt)
+                evt.stopPropagation()
+            }
+            .styleModifier {
+                property("--md-menu-item-selected-container-color", "#b2ff59")
+            }
+            .toAttrs {
+                attrs?.invoke(this)
+                if (keepOpen) attr("keepOpen", "")
+                if (selected) attr("selected", "")
+                if (disabled) attr("disabled", "")
+            },
+    ) {
+        supportingText?.let {
+            Span({ slot = "supporting-text" }) { it() }
+        }
+        trailingSupportingText?.let {
+            Span({ slot = "trailing-supporting-text" }) { it() }
+        }
+        content?.invoke(this)
+    }.also { jsRequire("@material/web/menu/menu-item.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/component/labs/menu/SubMenu.kt b/library/src/jsMain/kotlin/material/web/component/labs/menu/SubMenu.kt
new file mode 100644
index 0000000..b68c5e6
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/component/labs/menu/SubMenu.kt
@@ -0,0 +1,45 @@
+package material.web.component.labs.menu
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticEvent
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.onClick
+import com.varabyte.kobweb.compose.ui.toAttrs
+import material.web.common.MdElement
+import material.web.common.MdTagElement
+import material.web.common.jsRequire
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.w3c.dom.events.EventTarget
+
+@Suppress("UnsafeCastFromDynamic")
+@Composable
+fun SubMenu(
+    attrs: AttrBuilderContext<MdElement>? = null,
+    anchorCorner: Corner? = null,
+    menuCorner: Corner? = null,
+    hoverOpenDelay: Int? = null,
+    hoverCloseDelay: Int? = null,
+    isSubMenu: Boolean = false,
+    onCLick: (SyntheticEvent<EventTarget>) -> Unit = {},
+    content: ContentBuilder<MdElement>?,
+) {
+    MdTagElement(
+        tagName = "md-sub-menu",
+        applyAttrs = Modifier
+            .onClick { evt ->
+                println("Evt: ${evt.target.asDynamic().id}")
+                onCLick(evt)
+                evt.stopPropagation()
+            }
+            .toAttrs {
+                attrs?.invoke(this)
+                anchorCorner?.let { attr("anchorCorner", it.value) }
+                menuCorner?.let { attr("menuCorner", it.value) }
+                hoverOpenDelay?.let { attr("hoverOpenDelay", it.toString()) }
+                hoverCloseDelay?.let { attr("hoverCloseDelay", it.toString()) }
+                if (isSubMenu) attr("isSubMenu", "")
+            },
+        content = content
+    ).also { jsRequire("@material/web/menu/sub-menu.js") }
+}
diff --git a/library/src/jsMain/kotlin/material/web/theming/MaterialTheme.kt b/library/src/jsMain/kotlin/material/web/theming/MaterialTheme.kt
new file mode 100644
index 0000000..17f81b8
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/theming/MaterialTheme.kt
@@ -0,0 +1,98 @@
+package material.web.theming
+
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.web.css.CSSColorValue
+import org.jetbrains.compose.web.css.CSSStyleVariable
+import org.jetbrains.compose.web.css.Color
+import org.jetbrains.compose.web.css.Style
+import org.jetbrains.compose.web.css.StyleSheet
+import org.jetbrains.compose.web.css.backgroundColor
+import org.jetbrains.compose.web.css.value
+
+@Composable
+fun MaterialTheme(
+    colorScheme: WebColorScheme? = null,
+    fontScheme: WebFontScheme? = null,
+    content: @Composable () -> Unit,
+) {
+    if (colorScheme != null) {
+        Style(colorScheme.asStylesheet())
+    } else {
+        Style(DefaultBackground)
+    }
+    if (fontScheme != null) {
+        Style(fontScheme.asStyleSheet())
+    }
+
+    content()
+}
+
+private object DefaultBackground : StyleSheet() {
+    init {
+        root style {
+            backgroundColor(MaterialTheme.colors.surfaceContainerLowest.value(Color("#FFFFFF")))
+        }
+    }
+}
+
+object MaterialTheme {
+    @Suppress("ClassName")
+    object colors {
+        val primary = CSSStyleVariable<CSSColorValue>("md-sys-color-primary")
+        val primaryContainer = CSSStyleVariable<CSSColorValue>("md-sys-color-primary-container")
+        val onPrimary = CSSStyleVariable<CSSColorValue>("md-sys-color-on-primary")
+        val onPrimaryContainer = CSSStyleVariable<CSSColorValue>("md-sys-color-on-primary-container")
+        val secondary = CSSStyleVariable<CSSColorValue>("md-sys-color-secondary")
+        val secondaryContainer = CSSStyleVariable<CSSColorValue>("md-sys-color-secondary-container")
+        val onSecondary = CSSStyleVariable<CSSColorValue>("md-sys-color-on-secondary")
+        val onSecondaryContainer = CSSStyleVariable<CSSColorValue>("md-sys-color-on-secondary-container")
+        val tertiary = CSSStyleVariable<CSSColorValue>("md-sys-color-tertiary")
+        val tertiaryContainer = CSSStyleVariable<CSSColorValue>("md-sys-color-tertiary-container")
+        val onTertiary = CSSStyleVariable<CSSColorValue>("md-sys-color-on-tertiary")
+        val onTertiaryContainer = CSSStyleVariable<CSSColorValue>("md-sys-color-on-tertiary-container")
+        val error = CSSStyleVariable<CSSColorValue>("md-sys-color-error")
+        val errorContainer = CSSStyleVariable<CSSColorValue>("md-sys-color-error-container")
+        val onError = CSSStyleVariable<CSSColorValue>("md-sys-color-on-error")
+        val onErrorContainer = CSSStyleVariable<CSSColorValue>("md-sys-color-on-error-container")
+        val outline = CSSStyleVariable<CSSColorValue>("md-sys-color-outline")
+        val background = CSSStyleVariable<CSSColorValue>("md-sys-color-background")
+        val onBackground = CSSStyleVariable<CSSColorValue>("md-sys-color-on-background")
+        val surface = CSSStyleVariable<CSSColorValue>("md-sys-color-surface")
+        val onSurface = CSSStyleVariable<CSSColorValue>("md-sys-color-on-surface")
+        val surfaceDim = CSSStyleVariable<CSSColorValue>("md-sys-color-surface-dim")
+        val surfaceBright = CSSStyleVariable<CSSColorValue>("md-sys-color-surface-bright")
+        val surfaceContainerLowest = CSSStyleVariable<CSSColorValue>("md-sys-color-surface-container-lowest")
+        val surfaceContainerLow = CSSStyleVariable<CSSColorValue>("md-sys-color-surface-container-low")
+        val surfaceContainer = CSSStyleVariable<CSSColorValue>("md-sys-color-surface-container")
+        val surfaceContainerHigh = CSSStyleVariable<CSSColorValue>("md-sys-color-surface-container-high")
+        val surfaceContainerHighest = CSSStyleVariable<CSSColorValue>("md-sys-color-surface-container-highest")
+        val surfaceVariant = CSSStyleVariable<CSSColorValue>("md-sys-color-surface-variant")
+        val onSurfaceVariant = CSSStyleVariable<CSSColorValue>("md-sys-color-on-surface-variant")
+        val inverseSurface = CSSStyleVariable<CSSColorValue>("md-sys-color-inverse-surface")
+        val inverseOnSurface = CSSStyleVariable<CSSColorValue>("md-sys-color-inverse-on-surface")
+        val inversePrimary = CSSStyleVariable<CSSColorValue>("md-sys-color-inverse-primary")
+        val shadow = CSSStyleVariable<CSSColorValue>("md-sys-color-shadow")
+        val surfaceTint = CSSStyleVariable<CSSColorValue>("md-sys-color-surface-tint")
+        val outlineVariant = CSSStyleVariable<CSSColorValue>("md-sys-color-outline-variant")
+        val scrim = CSSStyleVariable<CSSColorValue>("md-sys-color-scrim")
+    }
+
+    @Suppress("ClassName")
+    object typography : TypeScaleTokens("md-sys-typescale") {
+        object displayLarge : Role("display-large")
+        object displayMedium : Role("display-medium")
+        object displaySmall : Role("display-small")
+        object headlineLarge : Role("headline-large")
+        object headlineMedium : Role("headline-medium")
+        object headlineSmall : Role("headline-small")
+        object titleLarge : Role("title-large")
+        object titleMedium : Role("title-medium")
+        object titleSmall : Role("title-small")
+        object bodyLarge : Role("body-large")
+        object bodyMedium : Role("body-medium")
+        object bodySmall : Role("body-small")
+        object labelLarge : Role("label-large")
+        object labelMedium : Role("label-medium")
+        object labelSmall : Role("label-small")
+    }
+}
diff --git a/library/src/jsMain/kotlin/material/web/theming/WebColorScheme.kt b/library/src/jsMain/kotlin/material/web/theming/WebColorScheme.kt
new file mode 100644
index 0000000..db98efb
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/theming/WebColorScheme.kt
@@ -0,0 +1,95 @@
+package material.web.theming
+
+import material.web.theming.MaterialTheme.colors.onTertiaryContainer
+import org.jetbrains.compose.web.css.CSSColorValue
+import org.jetbrains.compose.web.css.StyleSheet
+import org.jetbrains.compose.web.css.backgroundColor
+import org.jetbrains.compose.web.css.color
+import org.jetbrains.compose.web.css.value
+
+data class WebColorScheme(
+    val primary: CSSColorValue,
+    val primaryContainer: CSSColorValue,
+    val onPrimary: CSSColorValue,
+    val onPrimaryContainer: CSSColorValue,
+    val secondary: CSSColorValue,
+    val secondaryContainer: CSSColorValue,
+    val onSecondary: CSSColorValue,
+    val onSecondaryContainer: CSSColorValue,
+    val tertiary: CSSColorValue,
+    val tertiaryContainer: CSSColorValue,
+    val onTertiary: CSSColorValue,
+    val onTertiaryContainer: CSSColorValue,
+    val error: CSSColorValue,
+    val errorContainer: CSSColorValue,
+    val onError: CSSColorValue,
+    val onErrorContainer: CSSColorValue,
+    val outline: CSSColorValue,
+    val background: CSSColorValue,
+    val onBackground: CSSColorValue,
+    val surface: CSSColorValue,
+    val onSurface: CSSColorValue,
+    val surfaceDim: CSSColorValue,
+    val surfaceBright: CSSColorValue,
+    val surfaceContainerLowest: CSSColorValue,
+    val surfaceContainerLow: CSSColorValue,
+    val surfaceContainer: CSSColorValue,
+    val surfaceContainerHigh: CSSColorValue,
+    val surfaceContainerHighest: CSSColorValue,
+    val surfaceVariant: CSSColorValue,
+    val onSurfaceVariant: CSSColorValue,
+    val inverseSurface: CSSColorValue,
+    val inverseOnSurface: CSSColorValue,
+    val inversePrimary: CSSColorValue,
+    val shadow: CSSColorValue,
+    val surfaceTint: CSSColorValue,
+    val outlineVariant: CSSColorValue,
+    val scrim: CSSColorValue
+) {
+    fun asStylesheet(): StyleSheet = StyleSheet().apply {
+        root style {
+            backgroundColor(MaterialTheme.colors.surfaceContainerLowest.value())
+            color(MaterialTheme.colors.onBackground.value())
+        }
+
+        universal style {
+            MaterialTheme.colors.primary(this@WebColorScheme.primary)
+            MaterialTheme.colors.primaryContainer(this@WebColorScheme.primaryContainer)
+            MaterialTheme.colors.onPrimary(this@WebColorScheme.primary)
+            MaterialTheme.colors.onPrimaryContainer(this@WebColorScheme.onPrimaryContainer)
+            MaterialTheme.colors.secondary(this@WebColorScheme.secondary)
+            MaterialTheme.colors.secondaryContainer(this@WebColorScheme.secondaryContainer)
+            MaterialTheme.colors.onSecondary(this@WebColorScheme.secondary)
+            MaterialTheme.colors.onSecondaryContainer(this@WebColorScheme.onSecondaryContainer)
+            MaterialTheme.colors.tertiary(this@WebColorScheme.tertiary)
+            MaterialTheme.colors.tertiaryContainer(this@WebColorScheme.tertiaryContainer)
+            MaterialTheme.colors.onTertiary(this@WebColorScheme.tertiary)
+            MaterialTheme.colors.onTertiaryContainer(this@WebColorScheme.onTertiaryContainer)
+            MaterialTheme.colors.error(this@WebColorScheme.error)
+            MaterialTheme.colors.errorContainer(this@WebColorScheme.errorContainer)
+            MaterialTheme.colors.onError(this@WebColorScheme.onError)
+            MaterialTheme.colors.onErrorContainer(this@WebColorScheme.onErrorContainer)
+            MaterialTheme.colors.outline(this@WebColorScheme.outline)
+            MaterialTheme.colors.background(this@WebColorScheme.background)
+            MaterialTheme.colors.onBackground(this@WebColorScheme.onBackground)
+            MaterialTheme.colors.surface(this@WebColorScheme.surface)
+            MaterialTheme.colors.onSurface(this@WebColorScheme.onSurface)
+            MaterialTheme.colors.surfaceDim(this@WebColorScheme.surfaceDim)
+            MaterialTheme.colors.surfaceBright(this@WebColorScheme.surfaceBright)
+            MaterialTheme.colors.surfaceContainerLowest(this@WebColorScheme.surfaceContainerLowest)
+            MaterialTheme.colors.surfaceContainerLow(this@WebColorScheme.surfaceContainerLow)
+            MaterialTheme.colors.surfaceContainer(this@WebColorScheme.surfaceContainer)
+            MaterialTheme.colors.surfaceContainerHigh(this@WebColorScheme.surfaceContainerHigh)
+            MaterialTheme.colors.surfaceContainerHighest(this@WebColorScheme.surfaceContainerHighest)
+            MaterialTheme.colors.surfaceVariant(this@WebColorScheme.surfaceVariant)
+            MaterialTheme.colors.onSurfaceVariant(this@WebColorScheme.onSurfaceVariant)
+            MaterialTheme.colors.inverseSurface(this@WebColorScheme.inverseSurface)
+            MaterialTheme.colors.inverseOnSurface(this@WebColorScheme.inverseOnSurface)
+            MaterialTheme.colors.inversePrimary(this@WebColorScheme.inversePrimary)
+            MaterialTheme.colors.shadow(this@WebColorScheme.shadow)
+            MaterialTheme.colors.surfaceTint(this@WebColorScheme.surfaceTint)
+            MaterialTheme.colors.outlineVariant(this@WebColorScheme.outlineVariant)
+            MaterialTheme.colors.scrim(this@WebColorScheme.scrim)
+        }
+    }
+}
diff --git a/library/src/jsMain/kotlin/material/web/theming/WebFontScheme.kt b/library/src/jsMain/kotlin/material/web/theming/WebFontScheme.kt
new file mode 100644
index 0000000..24413f6
--- /dev/null
+++ b/library/src/jsMain/kotlin/material/web/theming/WebFontScheme.kt
@@ -0,0 +1,120 @@
+package material.web.theming
+
+import org.jetbrains.compose.web.css.CSSNumeric
+import org.jetbrains.compose.web.css.CSSSizeValue
+import org.jetbrains.compose.web.css.CSSStyleVariable
+import org.jetbrains.compose.web.css.CSSUnit
+import org.jetbrains.compose.web.css.CSSUnitValueTyped
+import org.jetbrains.compose.web.css.StylePropertyString
+import org.jetbrains.compose.web.css.StyleScope
+import org.jetbrains.compose.web.css.StyleSheet
+import org.jetbrains.compose.web.css.cssRem
+import org.jetbrains.compose.web.css.fontFamily
+import org.jetbrains.compose.web.css.fontSize
+import org.jetbrains.compose.web.css.fontWeight
+import org.jetbrains.compose.web.css.letterSpacing
+import org.jetbrains.compose.web.css.lineHeight
+import org.jetbrains.compose.web.css.value
+
+data class WebFontScheme(
+    val displayLarge: FontConfig,
+    val displayMedium: FontConfig,
+    val displaySmall: FontConfig,
+    val headlineLarge: FontConfig,
+    val headlineMedium: FontConfig,
+    val headlineSmall: FontConfig,
+    val titleLarge: FontConfig,
+    val titleMedium: FontConfig,
+    val titleSmall: FontConfig,
+    val bodyLarge: FontConfig,
+    val bodyMedium: FontConfig,
+    val bodySmall: FontConfig,
+    val labelLarge: FontConfig,
+    val labelMedium: FontConfig,
+    val labelSmall: FontConfig,
+) {
+    fun StyleScope.configureTokens(role: TypeScaleTokens.Role, fontConfig: FontConfig) {
+        role.font(fontConfig.font)
+        role.size(fontConfig.size)
+        role.lineHeight(fontConfig.lineHeight)
+        role.letterSpacing(fontConfig.letterSpacing)
+        role.weight(fontConfig.weight)
+    }
+
+    fun asStyleSheet(): StyleSheet = StyleSheet().apply {
+        universal style {
+            configureTokens(MaterialTheme.typography.displayLarge, displayLarge)
+            configureTokens(MaterialTheme.typography.displayMedium, displayMedium)
+            configureTokens(MaterialTheme.typography.displaySmall, displaySmall)
+
+            configureTokens(MaterialTheme.typography.headlineLarge, headlineLarge)
+            configureTokens(MaterialTheme.typography.headlineMedium, headlineMedium)
+            configureTokens(MaterialTheme.typography.headlineSmall, headlineSmall)
+
+            configureTokens(MaterialTheme.typography.titleLarge, titleLarge)
+            configureTokens(MaterialTheme.typography.titleMedium, titleMedium)
+            configureTokens(MaterialTheme.typography.titleSmall, titleSmall)
+
+            configureTokens(MaterialTheme.typography.bodyLarge, bodyLarge)
+            configureTokens(MaterialTheme.typography.bodyMedium, bodyMedium)
+            configureTokens(MaterialTheme.typography.bodySmall, bodySmall)
+
+            configureTokens(MaterialTheme.typography.labelLarge, labelLarge)
+            configureTokens(MaterialTheme.typography.labelMedium, labelMedium)
+            configureTokens(MaterialTheme.typography.labelSmall, labelSmall)
+        }
+    }
+}
+
+val defaultFontScheme = WebFontScheme(
+    displayLarge = FontConfig("Roboto", 57.sp, 64.sp, (-0.25 / 57).cssRem, "400"),
+    displayMedium = FontConfig("Roboto", 45.sp, 52.sp, 0.cssRem, "400"),
+    displaySmall = FontConfig("Roboto", 36.sp, 44.sp, 0.cssRem, "400"),
+    headlineLarge = FontConfig("Roboto", 32.sp, 40.sp, 0.cssRem, "400"),
+    headlineMedium = FontConfig("Roboto", 28.sp, 36.sp, 0.cssRem, "400"),
+    headlineSmall = FontConfig("Roboto", 24.sp, 32.sp, 0.cssRem, "400"),
+    titleLarge = FontConfig("Roboto", 22.sp, 28.sp, 0.cssRem, "400"),
+    titleMedium = FontConfig("Roboto", 16.sp, 24.sp, (0.15 / 16).cssRem, "500"),
+    titleSmall = FontConfig("Roboto", 14.sp, 20.sp, (0.1 / 14).cssRem, "500"),
+    bodyLarge = FontConfig("Roboto", 16.sp, 24.sp, (0.5 / 16).cssRem, "400"),
+    bodyMedium = FontConfig("Roboto", 14.sp, 20.sp, (0.25 / 14).cssRem, "400"),
+    bodySmall = FontConfig("Roboto", 12.sp, 16.sp, (0.4 / 12).cssRem, "400"),
+    labelLarge = FontConfig("Roboto", 14.sp, 20.sp, (0.1 / 14).cssRem, "500"),
+    labelMedium = FontConfig("Roboto", 12.sp, 16.sp, (0.5 / 12).cssRem, "500"),
+    labelSmall = FontConfig("Roboto", 11.sp, 16.sp, (0.5 / 11).cssRem, "500"),
+)
+
+open class TypeScaleTokens(
+    val tokenBase: String,
+) {
+    open inner class Role(
+        tokenName: String,
+    ) {
+        val font = CSSStyleVariable<StylePropertyString>("$tokenBase-$tokenName-font")
+        val size = CSSStyleVariable<CSSNumeric>("$tokenBase-$tokenName-size")
+        val lineHeight = CSSStyleVariable<CSSNumeric>("$tokenBase-$tokenName-line-height")
+        val letterSpacing = CSSStyleVariable<CSSNumeric>("$tokenBase-$tokenName-letter-spacing")
+        val weight = CSSStyleVariable<StylePropertyString>("$tokenBase-$tokenName-weight")
+    }
+
+    companion object {
+        fun StyleScope.applyStyle(role: Role) {
+            fontFamily(role.font.value().toString())
+            fontSize(role.size.value())
+            lineHeight(role.lineHeight.value())
+            letterSpacing(role.letterSpacing.value())
+            fontWeight(role.weight.value().toString())
+        }
+    }
+}
+
+data class FontConfig(
+    val font: String,
+    val size: CSSNumeric,
+    val lineHeight: CSSNumeric,
+    val letterSpacing: CSSNumeric,
+    val weight: String,
+)
+
+val Number.sp
+    get(): CSSSizeValue<CSSUnit.rem> = CSSUnitValueTyped(this.toFloat() * 0.0625f, CSSUnit.rem)
diff --git a/settings.gradle.kts b/settings.gradle.kts
new file mode 100644
index 0000000..e823dcf
--- /dev/null
+++ b/settings.gradle.kts
@@ -0,0 +1,24 @@
+enableFeaturePreview("TYPESAFE_PROJECT_ACCESSORS")
+
+pluginManagement {
+    includeBuild("convention-plugins")
+    repositories {
+        google()
+        mavenCentral()
+        gradlePluginPortal()
+    }
+}
+
+dependencyResolutionManagement {
+    repositories {
+        google()
+        mavenCentral()
+        maven("https://us-central1-maven.pkg.dev/varabyte-repos/public")
+    }
+}
+
+rootProject.name = "MaterialWeb-ComposeHtml"
+
+include(
+    ":library",
+)