# [Usage](../../../usage.md) > Registering custom CSS and JS
You can register custom CSS and JS in K-Framework and include automatically when using:
```html
<x-kfw::assets />
```
or when directly using the UI:
```html
<x-kfw::ui>
    <!-- Your content here -->
</x-kfw::ui>
```
The `<x-kfw::assets />` component renders the required CSS, JavaScript, and meta tags. Place it inside the `<head>` of any custom layout, as many times as needed; each render compiles the current versioned bundle.

By simply placing your custom CSS into the folder:
```
/public/vendor/k-framework/custom-css
```
and custom JS into:
```
/public/vendor/k-framework/custom-js
```
every file present will be automatically added to the UI.  
__NOTE:__ the files will be included in alphabetical order, if you need that a file must be loaded before of another, then place a number in as file prefix.

### Example

```
public/vendor/k-framework/custom-css/01-variables.css
public/vendor/k-framework/custom-css/02-dashboard.css
public/vendor/k-framework/custom-js/01-helpers.js
public/vendor/k-framework/custom-js/02-charts-setup.js
```

No registration call is needed — the next render of `<x-kfw::assets />` or `<x-kfw::ui>` picks them up automatically. After editing or adding files, renew the cache so clients re-download them:

```bash
php artisan kfw:refresh-assets
```

See [UI basics](../../styling/basics.md) for the base vs custom layout choice and [Theming](../../styling/theming.md) if your custom CSS is theme overrides.

---

See also: [Usage](../../../usage.md), [UI basics](../../styling/basics.md), [Theming](../../styling/theming.md), [Universal observer](universal_observer.md).