Pick your components.

Eighteen drop-in Web Components — inputs, display, tables, forms, animations, charts, grids, and UI control — each solving a specific problem with elegance and developer-friendly APIs.

Full Name *
John Doe
<smart-input>

SmartInput

Universal input — text, email, password, select, date, file, checkbox, switch, textarea, radio. With validation and events.

View Docs →
🔍 Search tags...
Django × Python × JS ×
<smart-search-input>

SmartSearchInput

Search + multi-select with badge display. Async loading with debounce, keyboard navigation, and AJAX endpoint support.

View Docs →
💾 Save Changes 🗑 Delete
AJAX · confirm modal · auto-icon
<custom-button>

CustomSubmitButton

Form-submitting button with AJAX, auto-detecting icons from label, Bootstrap confirmation modal, and loading spinner.

View Docs →
🏠
Dashboard
Overview
⚙️
Settings
Configure app
<smart-list-tile>

SmartListTile

Flexible list item with leading/trailing icons, active state, ripple effect, disabled state, and AJAX actions on click.

View Docs →
B I U H1
Rich text with formatting...
<smart-quill>

SmartQuill

Rich text editor wrapping Quill.js with form integration, required validation, and clean HTML output via hidden input.

View Docs →
✏️
💾
🗑
ripple · toast · AJAX
<icon-button>

IconButton

Compact icon-only button variant with ripple animation, toast feedback, AJAX GET/POST, and Phosphor icon support.

View Docs →
Name ⇅ Status Email
Alice active a@… 🗑
Bob pending b@… 🗑
<smart-table>

SmartTable

Attribute-driven data table with auto columns, sorting, pagination, infinite scroll, badge filters, POST/CSRF, and delete rows.

View Docs →
shimmer spinner
<smart-image>

SmartImage

Lazy load, shimmer/spinner skeleton, fallback on error, hover zoom, click-to-preview lightbox — all from attributes.

View Docs →
Status
All ▾
Email
Filter…
Apply Reset
<smart-filter-bar>

SmartFilterBar

Declarative filter bar with text, date, and select inputs. Drives any <smart-table> via window events — no direct coupling.

View Docs →
File saved successfully.
New version available.
Unsaved changes.
<smart-toast>

SmartToast

Stacked, auto-dismissing toasts in 5 types. Fire from anywhere with one dispatchEvent() call. Supports promise mode.

View Docs →
full-page · scoped · flicker-safe
<smart-loader>

SmartLoader

Full-page or element-scoped overlay loader with blur backdrop, 200ms flicker prevention, and concurrent-safe show/hide.

View Docs →
🗑
Delete Item?
This action cannot be undone.
Cancel
Delete
<smart-modal>

SmartModal

Branded confirmation modal with custom title, message, and labels. Integrates with SmartTable deletes — replaces window.confirm().

View Docs →
Full Name *
Alice Smith
Role
Admin ▾
Save
AJAX · CSRF · validation · toast
<smart-form>

SmartForm

Declarative AJAX form engine. Wraps SmartInput, SmartSearchInput, and SmartQuill — collects values, validates, handles CSRF, maps field errors, and refreshes tables automatically.

View Docs →
overlay panel fade slide
<smart-motion>

SmartMotion

Barba.js page transition engine. 5 transition types — overlay, fade, slide, scale, panel. Re-executes page scripts, swaps head styles, and fires lifecycle events after every navigation.

View Docs →
scroll hover 8 presets
<smart-effects>

SmartEffects

Anime.js animation engine. 8 built-in presets, 5 trigger modes (page · scroll · hover · click · manual), custom attribute-driven animations, and auto mode for zero-config entrance effects.

View Docs →
Revenue ↑ +12.4%
WS live zoom export
<smart-chart>

SmartChart

Full-featured charting on Chart.js + ApexCharts. API fetch, SmartData source, inline, or WebSocket live. 10+ chart types, 6 palettes, date range filter, drag-to-zoom, goal lines, fullscreen, and CSV/PNG/JSON export.

View Docs →
if="user.role === 'admin'"
mode="remove"
<fallback> replace
if="" · <smart-permission>

SmartPermission

Reactive UI control system. Add if="" to any element — it hides, removes, disables, or shows a fallback based on live smartState. Supports lazy rendering, enter/leave animations, and compound JS expressions.

View Docs →
chart · span 2
kpi
24k
table · span 3
drag resize persist
<smart-grid>

SmartGrid

Declarative CSS Grid layout engine for dashboards. Responsive auto-fit columns, column and row spans, 5 breakpoints, drag-to-reorder, resize handles, masonry mode, and localStorage persistence.

View Docs →