Why Corrosive Components
As a web developer passionate about performance, I wanted a set of components that took full advantage of Qwik’s resumable nature. That’s why I created corrosive components, a library tailored specifically for Qwik to make building performant and interactive UIs a breeze that is feature-complete, easy to use, and independent of any other packages.
How Corrosive Components
Installation via NPM or Bun
You can install the Crossive Components library using npm or bun. Run the following command in your project directory:
npm install crossive-components
bun install crossive-components
Add useStyles(DefaultStyle)
with useStyles(DefaultResources)
or useStyles(DefaultDarkResources)
to the root layout element to apply styles.
import {
DefaultResources, // or(DefaultDarkResources)
DefaultStyle,
} from 'corrosive-components'
export default component$(() => {
useStyles$(DefaultResources) // or(useStyles$(DefaultDarkResources))
useStyles$(DefaultStyle)
return (
// content
)
})
Checkout installation guide for more
Directly Copying Component Source Code
If you prefer not to install the package, you can directly copy the source code for individual components and their styles and use them in your project.
Note that you still need to add DefaultResources
or DefaultDarkResources
to the root layout element.
Styling Overview
Styles in corrosive components consist of two parts, Resources which contain the variables and Styles which contain the regular styles.
Default style is DefaultStyle
and resources are DefaultResources
and DefaultDarkResources
which are compiled inline CSS files.
Checkout styling guide for more
Who Corrosive Components
This article was written by Mahdi Movahedian Atar, the developer and maintainer of corrosive components.
Top comments (0)