# Usage

Why this matters: this is the hub that ties layout (UI & styling) to building blocks (components) to helpers (utilities) — learn the pattern once, then mix forms, visuals, and backend utilities on any page.

**How to read this wiki:** follow the learning path in order — install first, then UI basics for layout, then components/basics for the `::make()` pattern, then specific forms/visuals, then utilities as needed.

Learning path:

1. [Installation](installation.md) — run `php artisan kfw:update` and verify `config/k-framework` + `public/vendor/k-framework`.
2. [UI basics and config](usage/styling/basics.md) — choose base `<x-kfw::ui>` or custom `<x-kfw::assets />` layout.
3. [How to use components and standard attributes](usage/components/basics.md) — build with class `::make()` in controller + `return view(..., compact(...))`, or call fully-qualified class directly in Blade.
4. Forms and visuals below — e.g. `usage/components/forms/form.md`, `usage/components/visuals/card.md`, `usage/components/visuals/table.md`.
5. Utilities below — frontend (animations, popups, loader, session messages) and backend (API, resources, cloner, roles).

How sections connect: UI & Styling gives you the page shell (logo, navigation, dark mode, theming). Components fill the shell — start with [How to use components and standard attributes](usage/components/basics.md), then pick a Form component for input and a Visual component for display. Utilities add behavior — frontend utilities enhance the Blade layer, backend utilities power controllers/models/resources. A typical page uses all three: UI layout + Form/Table components + session-messages/validation or API/resource helper.

End-to-end shape (same pattern everywhere — build with class `::make()` in controller and echo in Blade, or call fully-qualified class directly in Blade):

Build in controller:

```php
use KFramework\Components\Visual\Card;
use KFramework\Components\Forms\Input;

public function show()
{
    $card = Card::make()->setContent(
        Input::make('email')->setLabel('Email')->setPlaceholder('you@example.com')
    );

    return view('demo', compact('card'));
}
```

Echo in Blade:

```php
{!! $card !!}
{!! \KFramework\Components\Visual\Card::make()->setContent(
    \KFramework\Components\Forms\Input::make('email')->setLabel('Email')
) !!}
```

## UI & Styling
Guidelines on tailoring the framework to meet specific project needs, including tips on modifying default settings and extending core features for unique use cases.


1. [UI basics and config](usage/styling/basics.md)  
2. [App logo](usage/styling/logo.md)  
3. [Navigation](usage/styling/navigation.md)  
4. [Light/dark mode](usage/styling/dark_mode.md)  
5. [Theming](usage/styling/theming.md)  

---
## Components, classes, helpers and utilities
Read more, in details, on standard and shared attributes for each component and see how to implement them, with examples.

1. ### [How to use components and standard attributes](usage/components/basics.md)
2. ### Front-end: utilities  
   - [Animations](usage/utilities/frontend/animations.md)  
   - [Registering custom CSS and JS](usage/utilities/frontend/registering_assets.md)  
   - [Print HTML Javascript](usage/utilities/frontend/print_html.md)  
   - [Simple popup](usage/utilities/frontend/simple_popup.md)  
   - [Loader overlay](usage/utilities/frontend/loader_overlay.md)  
   - [Session messages](usage/utilities/frontend/session_messages.md)  
   - [Universal observer](usage/utilities/frontend/universal_observer.md)  
3. ### Back-end: utilities  
   - [API](usage/utilities/backend/api.md)
   - [Form autofill](usage/utilities/backend/form_autofill.md)  
   - [Resources](usage/utilities/backend/resources.md)  
     - [Roles resource](usage/utilities/backend/roles_resource.md)  
     - [User resource](usage/utilities/backend/users_resource.md)  
   - [User profile](usage/utilities/backend/user_profile.md)  
   - [Model Syncer](usage/utilities/backend/model_syncer.md)  
   - [Records Cloner](usage/utilities/backend/records_cloner.md)  
    - [Universal Deep Cloner](usage/utilities/backend/universal_deep_cloner.md)  
    - [Roles Helper](usage/utilities/backend/roles_helper.md)  
    - [Email helper](usage/utilities/backend/email_helper.md)  
    - [DateTime helper](usage/utilities/backend/datetime_helper.md)  
    - [Response helper](usage/utilities/backend/response_helper.md)  
    - [Security](usage/utilities/backend/security.md)  
    - [Caching](usage/utilities/backend/caching.md)  
    - [Clear expired cache](usage/utilities/backend/clear_expired_cache.md)  
    - [Framework update](usage/utilities/backend/kfw_update.md)  
    - [Framework publish](usage/utilities/backend/kfw_publish.md)  
    - [Framework refresh assets](usage/utilities/backend/kfw_refresh_assets.md)  
    - [Framework configs update](usage/utilities/backend/kfw_configs_update.md)  
    - [Framework remigrate](usage/utilities/backend/kfw_remigrate.md)  
4. ### Components: Forms  
   A set of visual components to easily build forms  
   - [Form](usage/components/forms/form.md)  
   - [Checkbox](usage/components/forms/checkbox.md)  
   - [File Uploader](usage/components/forms/file_uploader.md)  
   - [Input](usage/components/forms/input.md)  
   - [Repeater](usage/components/forms/repeater.md)  
   - [Select](usage/components/forms/select.md)  
   - [Text Area](usage/components/forms/text_area.md)  
5. ### Components: Visuals  
   A set of visual components to easily build your blade layout  
   - [Alert](usage/components/visuals/alert.md)
   - [Button](usage/components/visuals/button.md)  
   - [Button group](usage/components/visuals/button_group.md)  
   - [Calendar](usage/components/visuals/calendar.md)  
    - [Card](usage/components/visuals/card.md)  
    - [Carousel](usage/components/visuals/carousel.md)  
    - [Chart](usage/components/visuals/chart.md)
   - [CodeView](usage/components/visuals/codeview.md)  
   - [FastCard](usage/components/visuals/fastcard.md)  
   - [Fieldset](usage/components/visuals/fieldset.md)  
   - [File Downloader](usage/components/visuals/file_downloader.md)  
   - [HTMLView](usage/components/visuals/htmlview.md)  
   - [Menu](usage/components/visuals/menu.md)  
   - [Modal](usage/components/visuals/modal.md)  
   - [QRCode](usage/components/visuals/qrcode.md)  
    - [Table](usage/components/visuals/table.md)  
    - [Tabs](usage/components/visuals/tabs.md)  
    - [TreeView](usage/components/visuals/treeview.md)  
6. ### Components: Other
    - [Notification](usage/components/others/notification.md)

**See also / Next steps:** new to the framework? Read [Installation](installation.md) then [UI basics and config](usage/styling/basics.md) then [How to use components and standard attributes](usage/components/basics.md). For background on bundled JS/CSS and composer packages, see [Dependencies](dependencies.md).