Blocks
Twenty-one ready-made sections — hero, pricing, dashboards, portfolios — each wired with motion.
Blocks are complete page sections, not primitives: each one is a page you can drop into a Nuxt app and adjust to your tokens. They are built from the same components documented here, so the motion reads the same everywhere.
Blog
- Article Page — featured image, author byline, table of contents and related articles.
- Blog Listing — filterable grid of recent posts with staggered entrances.
Dashboard Components
- Analytics Dashboard — KPI cards, a chart and a trend list on one board.
- User Management — table with search, row actions and animated state changes.
E-commerce
- Product Grid — responsive grid with animated filters and quick add.
- Shopping Cart — a slide-in cart with animated line items and totals.
Landing Page
- Feature Showcase — feature wall with staggered reveals and alternating media.
- Testimonial Carousel — reviews on a loop, with portraits and metric callouts.
Portfolio
- Case Study — project breakdown with hero, gallery and outcomes.
- Project Gallery — filterable gallery with layout animations between grid states.
Hero Sections
- Gradient Hero — full-bleed gradient with animated headline and CTA.
Navigation
- Modern Navbar — responsive navbar with dropdowns and a scrolled state.
Features
- Feature Grid — icon cards with staggered entrance on scroll.
- Glare Card Features — feature list where each card catches the light.
Testimonials
- Testimonial Carousel — mobile-friendly testimonial carousel with touch targets.
Pricing
- Pricing Cards — tiered plans with animated highlights and a toggle between cycles.
Call to Action
- Centered CTA — centered call-to-action with animated background.
Footers
- Multi-column Footer — sitemap columns, newsletter signup and social links.
Featured Components
- Animated Gradient — gradient animation behind content.
- Animated Spotlight — interactive spotlight that tracks the pointer.
- Ripple Effect — expanding ripple for backgrounds.
How to use
Copy the code for a block into your own page and adjust the content, then theme it through your Nuxt UI tokens. Every block works standalone; combine them into a page with Templates as a reference.