# Getting Started with Gears CSS Library
This guide will walk you through the process of installing Gears and integrating it into your project.
## Installation
To get started, install Gears CSS via npm:
```bash
npm install gears
```
## Usage
Once installed, you can import Gears' CSS into your project using various methods.
### Import in JavaScript (Recommended for bundlers like Webpack, Rollup, Parcel, Vite)
This is the most common way to include Gears in modern JavaScript projects. Add the following line to your main JavaScript entry file (e.g., `src/index.js` or `src/main.js`):
```javascript
import 'gears-css/dist/gears.css';
// For production builds, you might prefer the minified version:
// import 'gears-css/dist/gears.min.css';
```
Your JavaScript bundler will then process this import and include the CSS in your final build.
### Link in HTML (for direct inclusion or CDN usage)
If you are not using a JavaScript bundler, or if you prefer to link the CSS directly in your HTML, you can do so using a `` tag. This is also the method you would use if serving Gears from a CDN.
```html
My Gears CSS Project
```
### HTML Example
Once Gears CSS is included in your project, you can start using its components and utility classes. Here are a few examples combining BEM-named components with utility classes for flexible styling:
```html
Card Title
This is the card body content.
This text uses the primary color.
This is a flex container with primary background.
```
Now that you have Gears CSS integrated, you can proceed to explore its [Configuration](configuration.md) options, understand its [Architecture](architecture.md), or dive into specific [Components](components.md) and [Utilities](utilities.md).