Useful UI Snippets for the most common use cases
UI snippets are combined to make web designs or we can say User Interfaces. Different snippets add interactivity to a web page. Although, there are countless UI snippets that can be used to make a web page in countless different ways some snippets are used very commonly and have become somewhat essential for a UI design. A lot of developers have to reuse the same UI snippets for different UI designs. I have listed down some common UI snippets for the most common use cases.
Buttons
Used for input control, buttons are probably the most important element for your UI designs. Used for putting information on the websites, it’s good to have UI snippets for buttons at your disposal all the time.
<div class="px-6 flex flex-wrap">
<button class="mx-2 my-2 bg-white transition duration-150 ease-in-out rounded text-gray-800 border border-gray-300 px-6 py-2 text-xs hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800">Button</button>
<a href="javascript: void(0)" class="mx-2 my-2 flex items-center bg-gray-100 transition duration-150 ease-in-out hover:bg-gray-200 rounded border border-gray-300 text-gray-600 pl-3 pr-6 py-2 text-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-600">
<span class="h-4 w-4 mr-2">
<img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/button_small-svg1.svg" alt="mail"/>
</span>
Button
</a>
</div>
Text Fields
Talking about input control, another UI snippet that is just as important as the button is a text field. Used to write various information from the user end, text fields are a must-have UI snippet for every developer.
Search Fileds
Search Fields help users navigate through your websites easily. These days it’s very rare to see a website without a search field. This tells how important it is for your design.
Message Boxes
Message boxes come under the category of informational components. It shares information with the user. Many new websites have message boxes in the design telling people about the new updates or sharing helpful information. Not having a Message Box UI snippet would not be recommended if you regularly work on UIs.
<div class="flex items-center justify-center px-4">
<div id="alert" tabindex="0" class="focus:outline-none transition duration-150 ease-in-out w-full lg:w-11/12 mx-auto bg-white dark:bg-gray-800 shadow rounded flex flex-col py-4 md:py-0 items-center md:flex-row justify-between">
<div class="flex flex-col items-center md:flex-row">
<div class="mr-3 p-4 bg-green-400 rounded md:rounded-tr-none md:rounded-br-none text-white">
<img class="focus:outline-none" src="https://tuk-cdn.s3.amazonaws.com/can-uploader/simple-with-action-links-success-svg1.svg" alt="success" />
</div>
<p class="mr-2 text-base font-bold text-gray-800 dark:text-gray-100 mt-2 md:my-0">Success</p>
<div class="h-1 w-1 bg-gray-300 dark:bg-gray-700 rounded-full mr-2 hidden xl:block"></div>
<p class="text-sm lg:text-base dark:text-gray-400 text-gray-600 lg:pt-1 xl:pt-0 sm:mb-0 mb-2 text-center sm:text-left">Your Payment was successful. You can now use our services.</p>
</div>
<div class="flex xl:items-center lg:items-center sm:justify-end justify-center pr-4">
<button class="focus:outline-none focus:text-indigo-500 hover:text-indigo-500 text-sm mr-4 font-bold cursor-pointer text-indigo-700 dark:text-indigo-600">Details</button>
<button class="focus:outline-none focus:text-gray-400 hover:text-gray-400 text-sm cursor-pointer text-gray-600 dark:text-gray-400" onclick="closeAlert()">Dismiss</button>
</div>
</div>
</div>
Grid
Grid is normally designed for responsive designs. Grids give structure to your web page. However, it is important to know when to use a grid. Having a UI snippet for grids is quite normal among devs now.
<div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 pt-6 gap-8">
<div class="rounded border-gray-300 dark:border-gray-700 border-dashed border-2 h-24"></div>
<div class="rounded border-gray-300 dark:border-gray-700 border-dashed border-2 h-24"></div>
</div>
Card
Probably the most popular UI element these days in cards. They are small rectangular or square boxes that hold different information. You will be using a card UI snippet in almost all of your projects.
<div class="flex items-center justify-between w-full">
<div class="flex flex-col lg:flex-row w-full items-start lg:items-center rounded bg-white shadow">
<div class="w-full lg:w-2/3 h-64 dark:bg-gray-800"></div>
<div class="w-full lg:w-1/3 h-24 dark:border-gray-700 lg:h-64 border-t lg:border-t-0 lg:border-r lg:border-l lg:rounded-r dark:bg-gray-700 bg-gray-100"></div>
</div>
</div>
Dropdown
We all have come across a dropdown to select the preferred option while going through a website. Normally famous among E-commerce websites but dropdown has its application in various different domains now.
Radio Buttons
Radio buttons are used for users to choose one option among multiple options. They are often confused with checkboxes. The difference is only one which is that a checkbox is used for selecting one or more options while a radio button is used to select only one option.
Some platforms with premade UI snippets
There are multiple platforms with premade UI snippets ready for developers like us to use. Developers can get code snippets from these platforms and customize them according to their needs. These are some of the best platforms for UI snippets
CodeMyUI
JUSTINMIND
blox
Bootsnip
TUK
My Thoughts
Using UI snippets for the components you are going to use again and again is a no-brainer. Since coding is a tedious task so one should grab any convenience from the outside source with both hands. I personally think that depending too much on these sources wouldn’t be wise but completely neglecting them would make no sense either.