Quick Start

Steps to integrate M3 Components into your Solid.js app

Installation

To add M3 Components to your project, run one of the following commands, depending on your package manager:

npm i @m3-components/solid
yarn add @m3-components/solid
pnpm i @m3-components/solid
bun i @m3-components/solid
deno add npm:@m3-components/solid

Styling

M3 Components uses Tailwind CSS for styling. You don’t need to install Tailwind for the styles to show properly. After installation, simply import the stylesheet:

import "@m3-components/solid/index.css";

You can also import it from your global CSS file:

@import "@m3-components/solid/index.css";

API Design

Each component in this library inherits the properties of its root HTML tag, as defined in solid-js.JSX. This allows you to use standard HTML attributes as props with M3 Components, such as class or id.

To avoid conflicts with native HTML attributes, some component-specific props have been renamed (e.g., variant instead of type).

Note: Since we use Tailwind CSS for styling, any class you specify will be merged with component’s pre-defined class names.