Introduction

Viewi UI is a set of ready-made components for Viewi: forms and inputs, data tables, modals, alerts, menus and more. They use Bootstrap 5 styles and Bootstrap Icons.

They are regular Viewi components written in PHP. Like your own components, they render on the server first and then run in the browser, so a page with a data table or a form arrives fully rendered and becomes interactive once the JavaScript loads.

You use them in your templates like any other component:

<TextInput label="Name" model="$name" clearable />
<DataTable columns="$columns" items="$items" paging />

The page below shows some of them in action. Installation explains how to add the package to your application.

Alerts

Accordions

This is the first item's accordion body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is the second item's accordion body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tabs

This is the first item's tab body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is the second item's tab body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Modals

Inputs

Check to include this blog post in the sitemap.

Also, rich text editor based on CKEditor. And VsCode editor based on monaco editor.

Forms and Validations

Already have an account? Login here.
Forgot your password? Reset it here.

Icons

Tables

IdFirstNameActiveCreated
1
Miki Darkness
2025-02-08
2
Miki Darkness
2025-02-08
3
Miki Darkness
2025-02-08
4
Miki Darkness
2025-02-08
5
Miki Darkness
2025-02-08
6
Miki Darkness
2025-02-08
7
Miki Darkness
2025-02-08
8
Miki Darkness
2025-02-08
9
Miki Darkness
2025-02-08
10
Miki Darkness
2025-02-08

And more. This package is constantly being worked on. So, expect more components and examples in the future. Stay tuned.

Enter your credentials