<commit_before>## Problem

You want to add CSS class names to your Ember Components.

## Solution

Set additional class names with the `classNames` property of subclassed components:

```js
classNames: ['active']
```

## Discussion

If desired, you can apply multiple class names.

```js
classNames: ['bold', 'italic', 'blue']
```<commit_msg>Flesh out example for adding CSS classes to component recipe<commit_after>## Problem

You want to add CSS class names to your Ember Components.

## Solution

Set additional class names with the `classNames` property of subclassed components:

```js
App.AwesomeInputComponent = Ember.Component.extend({
  classNames: ['css-framework-fancy-class']  
})
```

```handlebars
{{awesome-input}}
```

```html
<div class="css-framework-fancy-class"></div>
```

## Discussion

If desired, you can apply multiple class names.

```js
classNames: ['bold', 'italic', 'blue']
```
{'fraction_non_alphanumeric': 0.13796909492273732, 'fraction_numerical': 0.0, 'mean_word_length': 5.212328767123288, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6821398', 'n_tokens_mistral': 284, 'n_tokens_neox': 266, 'n_words': 100}