Basekit Laravel UI

Component Styleguide & Examples

Form

Buttons

Variants

Sizes

States

With Icons

Form Inputs

Variants

Sizes

States

Helper text goes here

This field is required

Input Variations

Corner Hint

USD

Underline Input

Inset Label

Overlap Label

Pill Input

Input Addons

https://
$
@gmail.com
$ USD

Masked Inputs

Inputs with Icons

Password Input

Number Input

Form Selects

Variants

Sizes

States

Helper text goes here

This field is required

Select Variations

Corner Hint

Optional

Underline

Inset Label

Overlap Label

Pill Select

Select with Icon

Multi Selects

Variants

Sizes

States

Helper text goes here

This field is required

Multi Select Variations

Corner Hint

Optional

Underline

Inset Label

Overlap Label

Pill

With Icon

Form Textareas

Variants

Sizes

States

Helper text goes here

This field is required

Textarea Variations

Corner Hint

Optional

Underline Textarea

Inset Label

Overlap Label

Form Checkboxes

Variants

Sizes

States

This is required

This is a helpful hint

Form Radios

Variants

Sizes

States

Please select an option

Select the option that applies

Form Toggles

Variants

Sizes

States

This setting is required

Enable to activate this feature

Feedback

Alerts

Variants

Custom Icon

Dismissible

With Actions

Empty State

Variants

Primary · No projects

Create your first project.

Secondary · No activity

Your recent activity will appear here.

Success · All caught up

Everything is running smoothly.

Info · No messages

When you receive messages, they will show up here.

Warning · No backups

Add a backup schedule.

Danger · Sync failed

Try again to recover.

Ghost · Nothing here yet

Start by adding some content.

Custom Icon

Star icon

A custom star SVG passed via the icon slot.

Upload icon

A custom cloud upload SVG passed via the icon slot.

Sizes

Small empty state

Compact layout for tight spaces.

Medium empty state

Balanced layout for most pages.

Large empty state

Roomier layout for full pages.

Spinners

Sizes

XS
SM
MD
LG
XL

Variants

Primary
Secondary
Success
Warning
Danger
Info
Ghost
White

With Label

Progress Bars

Variants

Primary 20%
Secondary 35%
Info 55%
Success 75%
Warning 90%
Danger 100%
Ghost 45%
White 65%

Sizes

SM 40%
MD 40%
LG 40%

Skeletons

Variants

Circle sizes

SM
MD
LG

Default (line blocks)

SM
MD
LG

Text variant

SM
MD
LG

Tooltips

Positions

Triggers

Hover Link
Hover Text

Custom Content

Toasts

Variants

Custom Icon

Custom Content

With Actions

Layout

Container

Sizes

size="sm"

size="md"

size="lg"

size="xl"

size="full"

Not Centered

size="sm" :is-centered="false"

Divider

Variants

solid (default)

dashed

dotted

Tones

light

default

dark

With Label

Vertical

Left Right

Stack

Vertical (default)

Item 1
Item 2
Item 3

Horizontal

Item 1
Item 2
Item 3

Spacing

spacing="xs"

A
B
C

spacing="sm"

A
B
C

spacing="md"

A
B
C

spacing="lg"

A
B
C

spacing="xl"

A
B
C

Alignment (align)

align="start"

A
B
C

align="center"

A
B
C

align="end"

A
B
C

align="stretch"

A
B
C

Justify

justify="start"

A
B
C

justify="center"

A
B
C

justify="end"

A
B
C

justify="between"

A
B
C

justify="around"

A
B
C

Grid

Column Counts

cols="2"

1
2

cols="3"

1
2
3

cols="4"

1
2
3
4

cols="6"

1
2
3
4
5
6

Gap Sizes

gap="xs"

A
B
C

gap="sm"

A
B
C

gap="md"

A
B
C

gap="lg"

A
B
C

gap="xl"

A
B
C

Responsive Grid

Resize the preview or use the preset buttons to test responsive behavior.

•
1
2
3
4

Display

Card

Default

Card Header

Card body content with header and footer slots.

Bordered Variant

Bordered Card

Card with bordered variant styling.

Without Body Padding

Card Image
Full-bleed body content.

Badge

Variants

Primary Secondary Success Warning Danger Info Ghost

Sizes

SM MD LG

With Icon

Verified Review Blocked

Dot Indicator

Primary Success Warning Danger

Avatar

Sizes

JD
sm
JD
md
JD
lg
JD
xl

Shapes

JD
round
JD
soft
JD
square

Status Indicators

JD
online
JD
away
JD
busy
JD
offline

Image And Fallback

Jane Doe
Image
John Smith
Fallback

Table

Types

basic

Name Role Status
Jane Doe Admin Active
John Smith Editor Active
Sarah Brown Viewer Inactive

dropdown (responsive column visibility)

Dropdown Table Preview

Resize to see hidden columns and the column menu behavior

•
Name Role Status
Jane Doe Admin Active
John Smith Editor Active
Sarah Brown Viewer Inactive

stacked (responsive detail rows)

Stacked Table Preview

Resize to see compact stacked behavior on small widths

•
Name Role Status Actions
Jane Doe Admin Active
Role: Admin
Status: Active
John Smith Editor Active
Role: Editor
Status: Active
Sarah Brown Viewer Inactive
Role: Viewer
Status: Inactive

Variants

variant="default"

Name Role
Jane Doe Admin

variant="bordered"

Name Role
Jane Doe Admin

variant="striped"

Name Role
Jane Doe Admin

variant="hoverable"

Name Role
Jane Doe Admin

Sizes

size="sm"

Name Role
Jane Doe Admin

size="md"

Name Role
Jane Doe Admin

size="lg"

Name Role
Jane Doe Admin

Empty State

Name Role Status
No records found.

List

Variants

default

  • First item
  • Second item
  • Third item

divided

  • First item
  • Second item
  • Third item

bordered

  • First item
  • Second item
  • Third item

Markers

disc

  • Alpha
  • Beta
  • Gamma

circle

  • Alpha
  • Beta
  • Gamma

square

  • Alpha
  • Beta
  • Gamma

decimal

  1. Alpha
  2. Beta
  3. Gamma

none

  • Alpha
  • Beta
  • Gamma

Description List

Variants

default

Framework
Laravel
Styling
Tailwind CSS 4
Templates
Blade Components

horizontal

Framework
Laravel
Styling
Tailwind CSS 4
Templates
Blade Components

striped

Framework
Laravel
Styling
Tailwind CSS 4
Templates
Blade Components

Gap Sizes

gap="sm"

Key
Value

gap="md"

Key
Value

gap="lg"

Key
Value

Stat

Trend Directions

Revenue
$12,345
+12%
Refunds
$1,200
-4%
Visitors
8,430
0%

With Icon

Orders
342
+8%
Users
1,847
+23%

Without Change

Total Items
4,096

Dialog

Accordion

Variants

Default

Basekit Laravel UI is a set of reusable, customizable Blade components styled with Tailwind CSS.
You can install the package via Composer using `composer require basekit-laravel/basekit-laravel-ui`.
Yes! The components are built with Tailwind CSS, so you can easily override styles.

Bordered

Includes buttons, forms, modals, dropdowns, tables, and more. All components are fully accessible.
Optimized for performance with minimal CSS and JavaScript footprint.
Comprehensive documentation with usage examples for every component.

Flush

Start by installing the package and publishing the config file.
Customize colors, fonts, and spacing using Tailwind CSS configuration.
Learn about slots, variants, and custom component composition.

Separated

Over 30 components including forms, navigation, feedback, and layout elements.
All components follow WAI-ARIA best practices and are keyboard navigable.

Sizes

SM

This is a compact accordion with smaller padding and font sizes.
Perfect for tight spaces or when you need to conserve vertical space.

MD

Medium is the default accordion size and works well for most content blocks.
It provides a balanced amount of spacing and readable typography.

LG

This is a larger accordion with more generous padding and larger text.
Use this size when you want to draw more attention to the accordion content.

Modals

Sizes

Use Cases

Advanced Example

Form Modal