Component Showcase
Browse and preview all available components in the project
Core
@/components/error-boundary
File:
error-boundary.tsxErrorBoundary (Class Component)
Loading
@/components/loading
File:
loading.tsxLoginFormSkeleton
@/components/loading
File:
loading.tsxDashboardSkeleton
Layouts
@/components/layouts/app-layout
File:
app-layout.tsxAppLayout
@/components/layouts/sidebar-wrapper
File:
sidebar-wrapper.tsxSidebarWrapper
Navigation
@/components/navigation/breadcrumb
File:
breadcrumb.tsxBreadcrumb
@/components/navigation/main-nav
File:
main-nav.tsxMainNav
@/components/navigation/sidebar
File:
sidebar.tsxSidebar (Navigation)
Providers
@/components/providers/theme-provider
File:
theme-provider.tsxThemeProvider
Display
@/components/ui/alert
File:
alert.tsxAlert
Alert Title
@/components/ui/avatar
File:
avatar.tsxAvatar
@/components/ui/badge
File:
badge.tsxBadge
@/components/ui/card
File:
card.tsxCard
Card content goes here
@/components/ui/chart
File:
chart.tsxChart
@/components/ui/data-table
File:
data-table.tsxDataTable
| Name | Role | |
|---|---|---|
| John Doe | john.doe@example.com | Admin |
| Jane Smith | jane.smith@example.com | User |
| Bob Johnson | bob.johnson@example.com | Manager |
@/components/ui/progress
File:
progress.tsxProgress
@/components/ui/separator
File:
separator.tsxSeparator
@/components/ui/skeleton
File:
skeleton.tsxSkeleton
@/components/ui/table
File:
table.tsxTable
| Name | Role | |
|---|---|---|
| John Doe | john.doe@example.com | Admin |
| Jane Smith | jane.smith@example.com | User |
| Bob Johnson | bob.johnson@example.com | Manager |
Action
@/components/ui/button
File:
button.tsxButton
@/components/ui/delete-dialog
File:
delete-dialog.tsxDeleteDialog
@/components/ui/dialog
File:
dialog.tsxDialog
@/components/ui/drawer
File:
drawer.tsxDrawer
@/components/ui/dropdown-menu
File:
dropdown-menu.tsxDropdownMenu
@/components/ui/sheet
File:
sheet.tsxSheet
@/components/ui/tabs
File:
tabs.tsxTabs
Filter
@/components/ui/calendar
File:
calendar.tsxCalendar
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
@/components/ui/checkbox
File:
checkbox.tsxCheckbox
@/components/ui/command
File:
command.tsxCommand
@/components/ui/date-range-picker
File:
date-range-picker.tsxDateRangePicker
@/components/ui/date-time-picker
File:
date-time-picker.tsxDateTimePicker
@/components/ui/field
File:
field.tsxField
This is a helper message
@/components/ui/input
File:
input.tsxInput
@/components/ui/label
File:
label.tsxLabel
@/components/ui/reminder-date-time-picker
File:
reminder-date-time-picker.tsxReminderDateTimePicker
@/components/ui/select
File:
select.tsxSelect
@/components/ui/switch
File:
switch.tsxSwitch
@/components/ui/textarea
File:
textarea.tsxTextarea
Utils
@/components/ui/pagination
File:
pagination.tsxPagination
@/components/ui/popover
File:
popover.tsxPopover
@/components/ui/scroll-area
File:
scroll-area.tsxScrollArea
@/components/ui/sidebar
File:
sidebar.tsxSidebar (UI)
@/components/ui/theme-toggle
File:
theme-toggle.tsxThemeToggle
@/components/ui/tooltip
File:
tooltip.tsxTooltip