Velvet

A modern, lightweight CSS styles with elegant animations and components. Classes are optional!


Card Component

This is a standard card component with hover effects.

Flat Card

This is a flat card with a border instead of a shadow.


Form Elements


Tables

Name Email Status Actions
John Doe john@example.com Active
Jane Smith jane@example.com Pending

Loading Indicators


Progress Bars


Badges & Labels

Default Primary Secondary Success Warning Danger Pill Outline

Typography & Links

This is a blockquote with hover effects and styling.
Standard Link | No Underline | Button Link
This is a code snippet with hover effect
const velvet = {
  isAwesome: true,
  features: ['animations', 'components', 'utilities']
};

Dark Mode Toggle (simple, but good)

In a real app, you would use JavaScript to toggle the data-theme attribute on the HTML element.