Razor UI - A Complete Library of Blade Components

Sponsor

August 16th, 2021

In0PKsp---Imgur.png

Designing a consistent component library is difficult, expensive, and takes a lot of time.

Our solution? Razor UI: a modern-looking UI kit for Laravel Blade.

Save precious time and money with interactive components and templates that you can drop right into your project.

UI kit for Tailwind CSS

The components come in two variants.

  • HTML — previewable copy-paste HTML templates that use Tailwind CSS and Alpine.js
  • Blade UI — a Laravel package that abstracts all the styling logic into customizable Blade components. Just use the semantic components in your layout, and have a fully designed app

Built for the TALL Stack

Even though Razor UI can be used by anyone who's using Tailwind CSS, Livewire developers will benefit the most from our UI kit.

Imagine if you had a complete design system with ready to use components powered by Blade, Tailwind CSS and Alpine.js.

You'd go from this:

1<section class="py-24">
2 <div class="grid md:grid-cols-[2fr,3fr] gap-6 md:gap-12 mt-6">
3 <aside>
4 <h2 class="text-xl font-semibold tracking-tight">Personal</h2>
5 
6 <p class="mt-1 text-gray-500">
7 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam ducimus enim.
8 </p>
9 </aside>
10 
11 <form
12 class="block p-2 space-y-2 bg-white shadow rounded-xl"
13 action=""
14 >
15 <div class="grid grid-cols-2 gap-6 px-4 py-4">
16 <div class="col-span-2 space-y-2 md:col-span-1">
17 <label
18 class="inline-block text-sm font-medium text-gray-700"
19 for="first_name"
20 >First name</label>
21 
22 <input
23 class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
24 id="first_name"
25 type="text"
26 >
27 </div>
28 
29 <div class="col-span-2 space-y-2 md:col-span-1">
30 <label
31 class="inline-block text-sm font-medium text-gray-700"
32 for="last_name"
33 >Last name</label>
34 
35 <input
36 class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
37 id="last_name"
38 type="text"
39 >
40 </div>
41 
42 <div class="col-span-2 space-y-2">
43 <label
44 class="inline-block text-sm font-medium text-gray-700"
45 for="email"
46 >Email address</label>
47 
48 <input
49 class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
50 id="email"
51 type="email"
52 >
53 </div>
54 
55 <div class="col-span-2 space-y-2">
56 <label
57 class="inline-block text-sm font-medium text-gray-700"
58 for="about_me"
59 >About me</label>
60 
61 <textarea
62 class="block w-full transition duration-75 border-gray-300 rounded-lg shadow-sm focus:border-blue-600 focus:ring-1 focus:ring-inset focus:ring-blue-600"
63 id="about_me"
64 ></textarea>
65 </div>
66 </div>
67 
68 <div class="border-t"></div>
69 
70 <footer class="flex items-center justify-end px-4 py-2 space-x-4">
71 <button
72 class="inline-flex items-center justify-center h-8 px-3 text-sm font-semibold tracking-tight text-white transition bg-blue-600 rounded-lg shadow hover:bg-blue-500 focus:bg-blue-700 focus:outline-none focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-2 focus:ring-white focus:ring-inset"
73 type="submit"
74 >Save details</button>
75 </footer>
76 </form>
77 </div>
78</section>

To this:

1<x-app-ui::form card>
2 <x-slot name="heading">
3 Personal
4 </x-slot>
5 
6 <x-slot name="description">
7 Lorem ipsum dolor sit amet consectetur adipisicing elit.
8 </x-slot>
9 
10 <x-app-ui::input-group>
11 <x-app-ui::input
12 label="First name"
13 name="first_name"
14 />
15 
16 <x-app-ui::input
17 label="Last name"
18 name="last_name"
19 />
20 </x-app-ui::input-group>
21 
22 <x-app-ui::input
23 label="Email address"
24 type="email"
25 name="email"
26 />
27 
28 <x-app-ui::textarea
29 label="About me"
30 name="about"
31 />
32 
33 <x-slot name="actions">
34 <x-app-ui::button
35 type="submit"
36 size="sm"
37 >
38 Save details
39 </x-app-ui::button>
40 </x-slot>
41</x-app-ui::form>

Huge improvement, right?

With Razor UI's re-usable Blade components you don't have to think about naming your own components, the API, and styling.

Simply pick components from our documented library and start building!

Pay once, own it forever

We think great UI components should be accessible to everyone. That's why we decided to go with lifetime licenses rather than monthly or yearly plans. In addition to that, we also offer parity pricing — which means that the packages will be priced according to your country's purchasing power.

So, when you purchase a package you'll own it forever and keep receiving updates at no cost!

The Blade UI package costs $59, and you can use the code LARAVELNEWS during checkout to save 15% on your order.

Filed in:

Eric L. Barnes

Eric is the creator of Laravel News and has been covering Laravel since 2012.