# @omnitend/dashboard-for-laravel

> Vue 3 dashboard components for Laravel with Bootstrap Vue Next
>
> A dual-package library (NPM + Composer) providing 82 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.

## Installation

- [NPM Installation](https://github.com/omnitend/dashboard-for-laravel#npm-package): Install via npm/yarn
- [Composer Installation](https://github.com/omnitend/dashboard-for-laravel#composer-package): Install via Composer for Laravel integration

## Getting Started

- [AI Integration](/guide/ai-integration): Documentation guide
- [Contributing](/guide/contributing): Documentation guide
- [Forms](/guide/forms): Type-safe form handling and validation
- [Getting Started](/guide/getting-started): Quick start guide and core concepts
- [Installation](/guide/installation): Install and configure the package
- [Theming](/guide/theming): Customize appearance with CSS variables
- [TypeScript](/guide/typescript): TypeScript types and best practices

## Base Components (62 components)

Lightweight type-safe wrappers around Bootstrap Vue Next components providing API stability and consistent theming.

- [DAccordion](/components/base/daccordion): Bootstrap Vue Next Accordion wrapper
- [DAccordionItem](/components/base/daccordionitem): Bootstrap Vue Next AccordionItem wrapper
- [DAlert](/components/base/dalert): Bootstrap Vue Next Alert wrapper
- [DAspect](/components/base/daspect): Bootstrap Vue Next Aspect wrapper
- [DAutocomplete](/components/base/dautocomplete): Bootstrap Vue Next Autocomplete wrapper
- [DAvatar](/components/base/davatar): Bootstrap Vue Next Avatar wrapper
- [DBadge](/components/base/dbadge): Bootstrap Vue Next Badge wrapper
- [DBreadcrumb](/components/base/dbreadcrumb): Bootstrap Vue Next Breadcrumb wrapper
- [DButton](/components/base/dbutton): Bootstrap Vue Next Button wrapper
- [DButtonGroup](/components/base/dbuttongroup): Bootstrap Vue Next ButtonGroup wrapper
- [DButtonToolbar](/components/base/dbuttontoolbar): Bootstrap Vue Next ButtonToolbar wrapper
- [DCard](/components/base/dcard): Bootstrap Vue Next Card wrapper
- [DCarousel](/components/base/dcarousel): Bootstrap Vue Next Carousel wrapper
- [DCarouselSlide](/components/base/dcarouselslide): Bootstrap Vue Next CarouselSlide wrapper
- [DCol](/components/base/dcol): Bootstrap Vue Next Col wrapper
- [DCollapse](/components/base/dcollapse): Bootstrap Vue Next Collapse wrapper
- [DContainer](/components/base/dcontainer): Bootstrap Vue Next Container wrapper
- [DDropdown](/components/base/ddropdown): Bootstrap Vue Next Dropdown wrapper
- [DDropdownDivider](/components/base/ddropdowndivider): Bootstrap Vue Next DropdownDivider wrapper
- [DDropdownItem](/components/base/ddropdownitem): Bootstrap Vue Next DropdownItem wrapper
- [DForm](/components/base/dform): Bootstrap Vue Next Form wrapper
- [DFormCheckbox](/components/base/dformcheckbox): Bootstrap Vue Next FormCheckbox wrapper
- [DFormCheckboxGroup](/components/base/dformcheckboxgroup): Bootstrap Vue Next FormCheckboxGroup wrapper
- [DFormFile](/components/base/dformfile): Bootstrap Vue Next FormFile wrapper
- [DFormGroup](/components/base/dformgroup): Bootstrap Vue Next FormGroup wrapper
- [DFormInput](/components/base/dforminput): Bootstrap Vue Next FormInput wrapper
- [DFormInvalidFeedback](/components/base/dforminvalidfeedback): Bootstrap Vue Next FormInvalidFeedback wrapper
- [DFormOtp](/components/base/dformotp): Bootstrap Vue Next FormOtp wrapper
- [DFormRadio](/components/base/dformradio): Bootstrap Vue Next FormRadio wrapper
- [DFormRadioGroup](/components/base/dformradiogroup): Bootstrap Vue Next FormRadioGroup wrapper
- [DFormSelect](/components/base/dformselect): Bootstrap Vue Next FormSelect wrapper
- [DFormSpinbutton](/components/base/dformspinbutton): Bootstrap Vue Next FormSpinbutton wrapper
- [DFormTags](/components/base/dformtags): Bootstrap Vue Next FormTags wrapper
- [DFormText](/components/base/dformtext): Bootstrap Vue Next FormText wrapper
- [DFormTextarea](/components/base/dformtextarea): Bootstrap Vue Next FormTextarea wrapper
- [DFormValidFeedback](/components/base/dformvalidfeedback): Bootstrap Vue Next FormValidFeedback wrapper
- [DImage](/components/base/dimage): Bootstrap Vue Next Image wrapper
- [DInputGroup](/components/base/dinputgroup): Bootstrap Vue Next InputGroup wrapper
- [DLink](/components/base/dlink): Bootstrap Vue Next Link wrapper
- [DListGroup](/components/base/dlistgroup): Bootstrap Vue Next ListGroup wrapper
- [DListGroupItem](/components/base/dlistgroupitem): Bootstrap Vue Next ListGroupItem wrapper
- [DModal](/components/base/dmodal): Bootstrap Vue Next Modal wrapper
- [DNav](/components/base/dnav): Bootstrap Vue Next Nav wrapper
- [DNavItem](/components/base/dnavitem): Bootstrap Vue Next NavItem wrapper
- [DNavbar](/components/base/dnavbar): Bootstrap Vue Next Navbar wrapper
- [DNavbarBrand](/components/base/dnavbarbrand): Bootstrap Vue Next NavbarBrand wrapper
- [DNavbarNav](/components/base/dnavbarnav): Bootstrap Vue Next NavbarNav wrapper
- [DNavbarToggle](/components/base/dnavbartoggle): Bootstrap Vue Next NavbarToggle wrapper
- [DOffcanvas](/components/base/doffcanvas): Bootstrap Vue Next Offcanvas wrapper
- [DOverlay](/components/base/doverlay): Bootstrap Vue Next Overlay wrapper
- [DPagination](/components/base/dpagination): Bootstrap Vue Next Pagination wrapper
- [DPlaceholder](/components/base/dplaceholder): Bootstrap Vue Next Placeholder wrapper
- [DPopover](/components/base/dpopover): Bootstrap Vue Next Popover wrapper
- [DProgress](/components/base/dprogress): Bootstrap Vue Next Progress wrapper
- [DRow](/components/base/drow): Bootstrap Vue Next Row wrapper
- [DSpinner](/components/base/dspinner): Bootstrap Vue Next Spinner wrapper
- [DTab](/components/base/dtab): Bootstrap Vue Next Tab wrapper
- [DTable](/components/base/dtable): Bootstrap Vue Next Table wrapper
- [DTabs](/components/base/dtabs): Bootstrap Vue Next Tabs wrapper
- [DToast](/components/base/dtoast): Bootstrap Vue Next Toast wrapper
- [DToaster](/components/base/dtoaster): Bootstrap Vue Next Toaster wrapper
- [DTooltip](/components/base/dtooltip): Bootstrap Vue Next Tooltip wrapper

## Extended Components (20 components)

Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.

- [DXBasicForm](/components/extended/dxbasicform): Extended dashboard component
- [DXCurrencyInput](/components/extended/dxcurrencyinput): Extended dashboard component
- [DXDashboard](/components/extended/dxdashboard): Complete dashboard layout with sidebar and navbar
- [DXDashboardNavbar](/components/extended/dxdashboardnavbar): Top navbar with user dropdown
- [DXDashboardSidebar](/components/extended/dxdashboardsidebar): Collapsible sidebar with navigation
- [DXField](/components/extended/dxfield): Single-field renderer for any field type with value/span/info/hint slots
- [DXFieldLabel](/components/extended/dxfieldlabel): Extended dashboard component
- [DXForm](/components/extended/dxform): Form renderer driven by field definitions, with optional tabs, conditional fields, per-field slots, async options, nested repeaters, and auto error-tab switching
- [DXFormErrorSummary](/components/extended/dxformerrorsummary): One alert listing every message of the last failed submit, with readable labels, placed next to the submit control
- [DXLoading](/components/extended/dxloading): Extended dashboard component
- [DXModalActions](/components/extended/dxmodalactions): Extended dashboard component
- [DXNumberStepper](/components/extended/dxnumberstepper): Extended dashboard component
- [DXRepeater](/components/extended/dxrepeater): Repeatable nested sub-form (field array) primitive
- [DXSaveButton](/components/extended/dxsavebutton): Extended dashboard component
- [DXStackingTable](/components/extended/dxstackingtable): Extended dashboard component
- [DXStatCard](/components/extended/dxstatcard): Extended dashboard component
- [DXSwitch](/components/extended/dxswitch): Extended dashboard component
- [DXTable](/components/extended/dxtable): Data table with pagination, filtering, and sorting
- [DXTablePagination](/components/extended/dxtablepagination): Extended dashboard component
- [DXUserAvatar](/components/extended/dxuseravatar): Extended dashboard component

## Composables

- [useForm](/guide/forms#useform-composable): Type-safe form state management with validation
- [defineForm](/guide/forms#defineform): Define forms from field definitions with type inference
- [useToast](/components/base/dtoaster): Toast notification system

## PHP Integration

- [BaseFormRequest](/guide/installation#laravel-integration): Laravel form request base class with validation
- [HasApiResponses](/guide/installation#laravel-integration): Trait for consistent API responses
- [PaginatedResource](/guide/installation#laravel-integration): Resource for paginated API responses

## Optional

Additional resources for advanced usage:

- [TypeScript Guide](/guide/typescript): Full type safety and IDE support
- [Theming Guide](/guide/theming): Customize Bootstrap theme with CSS variables
- [Common Patterns](/examples/common-patterns): Real-world usage examples
- [GitHub Repository](https://github.com/omnitend/dashboard-for-laravel): Source code and issue tracker