TavpBlocks — UI Components

124+ real UI components with Tailwind CSS + DaisyUI + Chart.js. Each component renders clean HTML.

Tailwind CSS Components

Interactive

• Button — primary/secondary/danger/ghost
• Modal — dialog with confirm/cancel
• Tabs — tab navigation (Alpine.js)
• Dropdown — dropdown menu
• Toggle — toggle switch
• Accordion — collapsible sections
• Tooltip — hover tooltip
• CopyButton — copy to clipboard
• BackToTop — back to top button

Data Display

• Card — content card with title, body, footer
• StatCard — statistics with trend
• Datatable — data table with search
• Badge — status badges
• StatusBadge — status indicator
• Chip — chip/tag
• Avatar — user avatar (image/initials)
• Rating — rating component
• StarRating — star rating
• FileSize — file size display
• Countdown — countdown timer
• QRCode — QR code generator

Navigation

• Navbar — navigation bar
• Breadcrumb — navigation breadcrumb
• Pagination — page navigation
• Stepper — wizard/stepper
• TableOfContents — table of contents

Feedback

• Alert — alert messages (info/success/error/warning)
• AlertBanner — alert banner
• LoadingSpinner — loading spinner
• ProgressBar — progress indicator
• Skeleton — loading skeleton
• EmptyState — empty state with action
• NotificationBell — notification bell with count

Forms

• SearchBar — search input
• DatePicker — date picker
• TimePicker — time picker
• ColorPicker — color picker
• RangeSlider — range slider
• CheckboxGroup — checkbox group
• RadioGroup — radio group
• SelectWithSearch — select with search
• TagInput — tag input
• RichTextEditor — rich text editor

Layout

• Divider — divider line
• KeyValue — key-value pair
• DescriptionList — description list
• Timeline — event timeline
• Comment — comment component

Media

• ImageGallery — image gallery
• VideoPlayer — video player
• AudioPlayer — audio player
• MapPlaceholder — map placeholder

Code

• CodeBlock — code block with syntax highlighting

Chart.js Components

All Chart.js chart types available via ChartJsComponent base class:

• Chart — bar/line/horizontal (legacy)
• PieChart — pie chart
• LineChart — line chart (smooth/fill)
• BarChart — bar chart (vertical/horizontal/stacked)
• RadarChart — radar/spider chart
• DoughnutChart — doughnut chart
• PolarAreaChart — polar area chart
• BubbleChart — bubble chart (x, y, r)
• ScatterChart — scatter chart (x, y)
• Gauge — circular progress indicator

DaisyUI Components

Semantic component classes built on Tailwind CSS:

Actions

• DaisyButton — btn, btn-primary, btn-secondary, btn-accent, btn-ghost, btn-link, btn-outline, btn-wide, btn-block
• DaisyDropdown — dropdown, dropdown-content
• DaisyModal — modal, modal-box, modal-action
• DaisySwap — swap, swap-on, swap-off

Data Display

• DaisyAccordion — collapse, collapse-arrow, collapse-plus
• DaisyAvatar — avatar, avatar-online, avatar-offline, avatar-placeholder
• DaisyBadge — badge, badge-primary, badge-secondary, badge-outline
• DaisyCard — card, card-body, card-title, card-bordered, card-compact, card-side
• DaisyCarousel — carousel, carousel-item
• DaisyChat — chat, chat-start, chat-end, chat-bubble
• DaisyCollapse — collapse, collapse-arrow, collapse-plus
• DaisyCountdown — countdown
• DaisyDiff — diff, diff-item-1, diff-item-2
• DaisyKbd — kbd
• DaisyStat — stat, stat-title, stat-value, stat-desc
• DaisyTable — table, table-zebra, table-pin-rows, table-pin-cols
• DaisyTimeline — timeline, timeline-box

Navigation

• DaisyBreadcrumbs — breadcrumbs
• DaisyBottomNav — btm-nav, btm-nav-xs, btm-nav-lg
• DaisyLink — link, link-primary, link-secondary, link-accent, link-hover
• DaisyMenu — menu, menu-title, menu-horizontal
• DaisyNavbar — navbar, navbar-start, navbar-center, navbar-end
• DaisyPagination — join, btn
• DaisySteps — steps, step, step-primary

Feedback

• DaisyAlert — alert, alert-info, alert-success, alert-warning, alert-error
• DaisyLoading — loading, loading-spinner, loading-dots, loading-ring, loading-ball, loading-bars, loading-infinity
• DaisyProgress — progress, progress-primary, progress-secondary
• DaisyRadialProgress — radial-progress
• DaisySkeleton — skeleton
• DaisyToast — toast, toast-start, toast-center, toast-end
• DaisyTooltip — tooltip, tooltip-primary, tooltip-secondary

Data Input

• DaisyCheckbox — checkbox, checkbox-primary, checkbox-secondary
• DaisyFileInput — file-input, file-input-bordered
• DaisyRadio — radio, radio-primary, radio-secondary
• DaisyRange — range, range-primary, range-secondary
• DaisyRating — rating, rating-half
• DaisySelect — select, select-bordered, select-primary, select-secondary
• DaisyTextfield — input, input-bordered, input-primary, input-secondary
• DaisyTextarea — textarea, textarea-bordered, textarea-primary, textarea-secondary
• DaisyToggle — toggle, toggle-primary, toggle-secondary

Layout

• DaisyDivider — divider, divider-primary, divider-vertical
• DaisyDrawer — drawer, drawer-content, drawer-side
• DaisyFooter — footer, footer-title
• DaisyHero — hero, hero-content
• DaisyIndicator — indicator, indicator-item
• DaisyJoin — join, join-item
• DaisyMask — mask, mask-squircle, mask-heart, mask-hexagon, mask-circle
• DaisyStack — stack, stack-horizontal

Mockup

• DaisyBrowserMockup — mockup-browser
• DaisyCodeMockup — mockup-code
• DaisyPhoneMockup — mockup-phone
• DaisyWindowMockup — mockup-window

Utility

• DaisyFilter — filter, filter-reset
• DaisyStatus — status, status-primary, status-success, status-warning, status-error
• DaisyValidator — validator, validator-hint

Form Components

• DaisyFormControl — form-control
• DaisyFormGroup — form-control, label
• DaisyLabel — label, label-text
• DaisyHint — label, label-text-alt
• DaisyError — label, label-text-alt, text-error
• DaisySuccess — label, label-text-alt, text-success
• DaisyWarning — label, label-text-alt, text-warning
• DaisyInfo — label, label-text-alt, text-info

Usage in PHP

use Tavp\Blocks\BlockRegistry;

$registry = new BlockRegistry();

// Tailwind Component
$button = $registry->make('Button', [
    'label' => 'Save',
    'variant' => 'primary',
    'href' => '/save'
]);
echo $button->render();

// DaisyUI Component
$daisyBtn = $registry->make('DaisyButton', [
    'label' => 'Click me',
    'variant' => 'primary',
    'size' => 'lg'
]);
echo $daisyBtn->render();

// Chart.js Component
$barChart = $registry->make('BarChart', ['title' => 'Sales']);
$barChart->setLabels(['Jan', 'Feb', 'Mar'])
         ->addDataset('Revenue', [100, 200, 300]);
echo $barChart->render();

Chart.js Usage

use Tavp\Blocks\Components\BarChart;
use Tavp\Blocks\Components\LineChart;
use Tavp\Blocks\Components\PieChart;
use Tavp\Blocks\Components\DoughnutChart;

// Bar Chart
$barChart = new BarChart('Monthly Sales');
$barChart->setLabels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'])
         ->addDataset('Sales', [120, 190, 300, 500, 200, 300], [
             'backgroundColor' => 'rgba(59, 130, 246, 0.5)',
             'borderColor' => 'rgb(59, 130, 246)',
             'borderWidth' => 1,
         ]);
echo $barChart->render();

// Line Chart
$lineChart = new LineChart('Revenue Trend');
$lineChart->setLabels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'])
          ->addDataset('Revenue', [1000, 1200, 900, 1500, 1800, 2000], [
              'borderColor' => 'rgb(34, 197, 94)',
              'backgroundColor' => 'rgba(34, 197, 94, 0.1)',
          ])
          ->setSmooth(true)
          ->setFill(true);
echo $lineChart->render();

// Pie Chart
$pieChart = new PieChart('Market Share');
$pieChart->addSegment('Product A', 35, 'rgba(59, 130, 246, 0.8)')
         ->addSegment('Product B', 25, 'rgba(34, 197, 94, 0.8)')
         ->addSegment('Product C', 20, 'rgba(251, 191, 36, 0.8)')
         ->addSegment('Product D', 20, 'rgba(239, 68, 68, 0.8)');
echo $pieChart->render();

// Doughnut Chart
$doughnutChart = new DoughnutChart('Expenses');
$doughnutChart->addSegment('Marketing', 30, 'rgba(59, 130, 246, 0.8)')
              ->addSegment('Development', 40, 'rgba(34, 197, 94, 0.8)')
              ->addSegment('Operations', 20, 'rgba(251, 191, 36, 0.8)')
              ->addSegment('Admin', 10, 'rgba(239, 68, 68, 0.8)')
              ->setCutout('60%');
echo $doughnutChart->render();

DaisyUI Usage

use Tavp\Blocks\Components\DaisyButton;
use Tavp\Blocks\Components\DaisyCard;
use Tavp\Blocks\Components\DaisyModal;
use Tavp\Blocks\Components\DaisyTable;

// Button
$btn = new DaisyButton('Save', 'primary', 'lg');
echo $btn->render();

// Card
$card = new DaisyCard('Title', 'Body content', 'Footer actions');
echo $card->render();

// Modal
$modal = new DaisyModal('myModal', 'Confirm', 'Are you sure?');
echo $modal->render();
echo $modal->getOpenButton('Open Modal');

// Table
$table = new DaisyTable('md', true); // size, zebra
$table->addColumn('name', 'Name')
      ->addColumn('email', 'Email')
      ->addRow(['name' => 'John', 'email' => 'john@example.com'])
      ->addRow(['name' => 'Jane', 'email' => 'jane@example.com']);
echo $table->render();

Custom Components

Register your own components:

$registry->register('MyButton', \App\Components\MyButton::class);
$button = $registry->make('MyButton', ['label' => 'Custom']);