API Reference
Complete API documentation for components, utilities, and framework core
Card
Flexible container component with filterClassName for infinite customization
🔧 Props
| Property | Type | Default | Description |
|---|---|---|---|
| class | string | '' | Any Tailwind classes |
| id | string | undefined | HTML id attribute |
| style | string | undefined | Inline styles |
| ...htmlProps | object | {} | Any HTML attributes |
✨ Features
Uses filterClassName for infinite flexibility
No predefined variants - pure Tailwind
Accepts any HTML attributes
Perfect for custom layouts
💻 Examples
Basic Card
return Card(
{ class: 'p-6 bg-white shadow-lg rounded-xl' },
h2({ class: 'text-xl font-semibold mb-2' }, 'Card Title'),
p({ class: 'text-smoke' }, 'Card content goes here')
);▶️ Live Preview
Card Title
Card content goes here
💡 Click "Edit Code" to modify the example
🔄 Click "Apply Changes" to see your modifications
↩️ Click "Reset" to restore original code
Glass Morphism Card
return Card(
{
class: 'p-8 bg-white/90 backdrop-blur-xl shadow-glass rounded-2xl border border-white/50'
},
h2({ class: 'text-2xl font-light mb-4' }, 'Glass Effect'),
p({ class: 'text-smoke' }, 'Beautiful glass morphism effect')
);▶️ Live Preview
Glass Effect
Beautiful glass morphism effect
💡 Click "Edit Code" to modify the example
🔄 Click "Apply Changes" to see your modifications
↩️ Click "Reset" to restore original code
💡 Usage Tips
• Card uses filterClassName for infinite flexibility
• No predefined variants - use any Tailwind classes
• Perfect for custom layouts and containers
• Combine with glass morphism classes for modern effects
🔗 Related
Explore vwf
Discover what vwf can do