---
title: "Components"
description: "Every component in LaralCN-UI. Copy one into your project, or install it with the CLI."
---

# Components

35 components, grouped by category. Each links to its Markdown page: description, install command, dependencies, usage, and the full Blade source.

## Navigation

- [accordion](https://laralcn-ui.abdulkadersafi.com/components/accordion.md): Collapsible disclosure list (single or multiple open).
- [breadcrumb](https://laralcn-ui.abdulkadersafi.com/components/breadcrumb.md): Shows the path to the current resource as a hierarchy of links.
- [pagination](https://laralcn-ui.abdulkadersafi.com/components/pagination.md): Page navigation with previous, next, numbered links and an ellipsis.
- [tabs](https://laralcn-ui.abdulkadersafi.com/components/tabs.md): Tabbed interface; panels supplied via named slots.

## Feedback

- [alert](https://laralcn-ui.abdulkadersafi.com/components/alert.md): Callout for short, important messages.
- [progress](https://laralcn-ui.abdulkadersafi.com/components/progress.md): Progress bar showing completion of a task.
- [skeleton](https://laralcn-ui.abdulkadersafi.com/components/skeleton.md): Placeholder shown while content loads.
- [toast](https://laralcn-ui.abdulkadersafi.com/components/toast.md): Toast region; dispatch a `toast` window event to show one.

## Overlays

- [alert-dialog](https://laralcn-ui.abdulkadersafi.com/components/alert-dialog.md): Modal that interrupts the user and waits for a deliberate response.
- [dialog](https://laralcn-ui.abdulkadersafi.com/components/dialog.md): Modal dialog with focus trap, backdrop, and Esc-to-close.
- [dropdown-menu](https://laralcn-ui.abdulkadersafi.com/components/dropdown-menu.md): Click-triggered menu with outside-click and Esc to close.
- [hover-card](https://laralcn-ui.abdulkadersafi.com/components/hover-card.md): Preview card shown when a trigger is hovered or focused.
- [sheet](https://laralcn-ui.abdulkadersafi.com/components/sheet.md): Panel that slides in from an edge of the screen.
- [tooltip](https://laralcn-ui.abdulkadersafi.com/components/tooltip.md): Hover/focus tooltip with side positioning.

## Layout

- [aspect-ratio](https://laralcn-ui.abdulkadersafi.com/components/aspect-ratio.md): Holds its children to a fixed width-to-height ratio.
- [card](https://laralcn-ui.abdulkadersafi.com/components/card.md): Container with header, content, and footer slots.
- [collapsible](https://laralcn-ui.abdulkadersafi.com/components/collapsible.md): An interactive panel that expands and collapses its content.
- [scroll-area](https://laralcn-ui.abdulkadersafi.com/components/scroll-area.md): Scrollable region with a styled, themed scrollbar.
- [separator](https://laralcn-ui.abdulkadersafi.com/components/separator.md): Visual or semantic divider.
- [sidebar](https://laralcn-ui.abdulkadersafi.com/components/sidebar.md): Composable, collapsible application sidebar with mobile off-canvas, icon mode, and keyboard toggle.

## Data Display

- [avatar](https://laralcn-ui.abdulkadersafi.com/components/avatar.md): User image with text fallback.
- [badge](https://laralcn-ui.abdulkadersafi.com/components/badge.md): Small status / label pill with variants.
- [carousel](https://laralcn-ui.abdulkadersafi.com/components/carousel.md): Horizontally scrolling slides with snap points and arrow controls.
- [table](https://laralcn-ui.abdulkadersafi.com/components/table.md): Responsive data table wrapper.

## Forms

- [button](https://laralcn-ui.abdulkadersafi.com/components/button.md): Clickable button with variant and size options.
- [checkbox](https://laralcn-ui.abdulkadersafi.com/components/checkbox.md): Native checkbox styled to the theme.
- [input](https://laralcn-ui.abdulkadersafi.com/components/input.md): Form text input.
- [label](https://laralcn-ui.abdulkadersafi.com/components/label.md): Accessible form label.
- [radio](https://laralcn-ui.abdulkadersafi.com/components/radio.md): Native radio input styled to the theme.
- [select](https://laralcn-ui.abdulkadersafi.com/components/select.md): Native select styled to the theme.
- [slider](https://laralcn-ui.abdulkadersafi.com/components/slider.md): Range slider built on a native input, submits with the form.
- [switch](https://laralcn-ui.abdulkadersafi.com/components/switch.md): Toggle switch built on a native checkbox, submits with the form.
- [textarea](https://laralcn-ui.abdulkadersafi.com/components/textarea.md): Multi-line text input.
- [toggle](https://laralcn-ui.abdulkadersafi.com/components/toggle.md): Two-state button built on a native checkbox, submits with the form.
- [toggle-group](https://laralcn-ui.abdulkadersafi.com/components/toggle-group.md): A joined set of toggles, single or multiple selection.