To start using the components in your project, Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link
rel="stylesheet"
href="https://beluga-ui.netlify.app/RootExport.css"
/>Many of Beluga UI components, like Modal, Toast, and others, require the use of JavaScript to function. For proper functioning of those, Copy-paste the following <script> near the end of your pages, right before the closing </body> tag, to enable them.
<script
src="https://beluga-ui.netlify.app/script.js">
</script>- Avatar
- Badges
- Button
- Image
- Input
- Grid
- Alert
- Card
- Navigation
- Toast
- Slider
- Modal
- Typography
- Utils
Alerts can be used to show a message to the user.
- Danger Alert
- Info Alert
- Primary Alert
- Secondary Alert
- Success Alert
- Warning Alert
You can also customize them by adding border, shadow and icon etc.
Avatars can be used for user profile picture.
- Rounde Avatars
- Text Avatars
- Group Avatars
- Overlay on Avatars
- Hover on Avatars
- Square Avatars
- Different Sized Avatars
Badge can be used to show either status of the user (online, or offline) or you can use it show notification count.
- Badge on Icons
- Badge on Avatars
Buttons can be used to make your web page interactive to your user. You can use them to take user action.
- Different Sized Buttons
- Filled Buttons
- Outlined Buttons
- Link Buttons
- Icon only Buttons
- Floating Buttons
- Disabled Buttons
- Hollow Buttons
- Full sized Buttons
- Animmation on Buttons
Cards can be proved very useful. You can use them to display content on an e-commerce app, or on a video library app. You can also use them to show user feedback in the form of text-only card on your site.
- Horizontal Card
- Horizontal small Card
- Vertical Card
- Card with Image
- Text only Card
- Card with Dismiss
CSS Grid can be used to structure elements in rows and columns.
- Two Columns Grid
- Two Rows Grid
- Three Columns Vertical box Grid collage
- Three Columns Horizontal box Grid collage
Image can be used to display large picture on the website.
- Round Image
- Square Image
- Responsive Hero Image
Input can be used to take input from your user. It can make your site more interactive.
- Input Textarea
- Form Input Card
- Input with error
- Double Input form
Modal can be used for creating dialog boxes, to communicate with user.
- Modal Component
- Modal Demo
Navigation can be used to give the user facility to navigate between different pages.
- Desktop Navigation
- Desktop promotional Navigation
- Mobile Navigation
- Mobile collapsed Navigation
Slider can be used to take user input based on some range.
- Input Slider with output
Toast can be used to show notifications to the user.
- Notification Toast with border
- Notification Toast with shadow
- Notification Toast with outline
- Notification Toast with dismiss
Use Typography to format text content on your web site.
- Font sizes
- Font headings
BelugaUI has many utility classes and variables
- Spacing
- Display
- Flex
- Colors
- Border
- Variables
