# UI Showcase
Estimated time: 5 minutes
Difficulty: Beginner
The UI Showcase is an interactive, searchable gallery of all 175+ components included in LaraCoreKit. It's the fastest way to explore what's available and copy-paste into your project.
Access the Showcase
http://localhost:8000/ui-showcaseLive: laracorekit.mobrilz.digital/ui-showcase
What You'll Find
Interactive Previews
Every component renders live in the browser — dark mode, RTL, responsive — exactly as it will look in your app.
Copy-Paste Ready Code
Click "Copy Code" on any component to copy the Blade/Livewire markup. Paste into your views and it works.
Multiple Formats
Components shown in:
- Blade (x-component tags)
- HTML/TailwindCSS (raw markup)
- Livewire (wire:* directives)
Component Categories in Showcase
Core
├── Typography — Headings, body text, code
├── Buttons — All variants and sizes
├── Badges — Colors, sizes, pill vs square
└── Icons — Heroicons reference
Forms
├── Inputs — Text, email, password, number
├── Selects — Dropdown, multi-select
├── Textareas — Plain and with character count
├── Checkboxes — Single and group
├── Radios — Button group style
├── Toggles — Switch style
└── File Upload — Drag & drop, image preview
Layout
├── Cards — Basic, profile, stats
├── Modals — Confirmation, form modal
├── Drawers — Slide-in panels
├── Tabs — Horizontal tabs
└── Accordion — Collapsible FAQ
Navigation
├── Navbar — Desktop and mobile
├── Sidebar — With groups + badges
├── Breadcrumbs — Icon and text
└── Pagination — Standard and compact
Data Display
├── Tables — Sortable, with actions
├── Stats Cards — Number, with trend
├── Progress — Bar and ring
└── Timeline — Activity log
Advanced
├── Auth Flows — Login, register, forgot password
├── Media — Gallery, lightbox, video
└── Charts — Bar, line, pie (Alpine.js + Chart.js)Adding Your Own Component to Showcase
- Create your component in
modules/UIShowcase/views/components/ - Register it in the showcase index