# Devsloka UI blocks for shadcn/ui

> Animated React components, blocks, backgrounds and hooks built with Tailwind CSS and Motion. Copy the source and make it yours.

Devsloka UI publishes 41 blocks for shadcn/ui, all of them free. In its own words: Animated React components, blocks, backgrounds and hooks built with Tailwind CSS and Motion. Copy the source and make it yours. Its blocks cover login and sign-up, hero, feature, footer and CTA.

Free blocks install with the shadcn CLI under the @devsloka namespace, so the code lands in your project.

- Page, with live previews: https://shadcn.exchange/r/devsloka
- Its own site: https://ui.devsloka.in/?utm_source=shadcn.exchange
- 41 blocks, all free. Last changed 2026-10-28.
- Categories: Hero (5), Pricing (1), Login (8), Features (4), Footer (4), CTA (3), Testimonials (2), FAQ (2), Contact (1), Blog (3), Team (1), Logo cloud (1)
- Search its blocks as JSON: `https://shadcn.exchange/api/catalog?kind=blocks&registry=devsloka&q=<words>`

Each block's page answers in Markdown, source included, at its address with `.md` on the end. [The whole site for agents](https://shadcn.exchange/llms.txt).

## Free blocks

All 41 blocks, in the order its page shows them. Each installs with the command beside it, in a project that has shadcn/ui set up.

- [Blog Magazine](https://shadcn.exchange/r/devsloka/blog-magazine): A magazine-cover grid of photo tiles and solid ink covers. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/blog-magazine.json`
- [CTA Ticket](https://shadcn.exchange/r/devsloka/cta-ticket): An event call to action styled as a printed ticket with a tear-off stub. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/cta-ticket.json`
- [Sign Up Split](https://shadcn.exchange/r/devsloka/sign-up-split): Split sign-up with live password requirements and a plan summary panel. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/sign-up-split.json`
- [CTA Poster](https://shadcn.exchange/r/devsloka/cta-poster): A Swiss-poster call to action on a solid ink field. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/cta-poster.json`
- [Footer Block](https://shadcn.exchange/r/devsloka/footer-block): A Footer Block component for displaying a footer section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/footer-block.json`
- [Pricing Block](https://shadcn.exchange/r/devsloka/pricing-block): A Pricing Block component for displaying pricing plans. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/pricing-block.json`
- [Hero Gradient Mesh Block](https://shadcn.exchange/r/devsloka/hero-gradient-mesh): A Hero Gradient Mesh Block component for displaying a hero section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/hero-gradient-mesh.json`
- [Features Block Four](https://shadcn.exchange/r/devsloka/features-block-four): A Features Block Four component for displaying features. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/features-block-four.json`
- [Changelog Timeline](https://shadcn.exchange/r/devsloka/changelog-timeline): A dated release timeline with New/Improved/Fixed ink tags and optional visuals. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/changelog-timeline.json`
- [Team Block](https://shadcn.exchange/r/devsloka/team-block): A Team Block component for displaying a team section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/team-block.json`
- [Changelog Compact](https://shadcn.exchange/r/devsloka/changelog-compact): A compact, filterable changelog with version links and an RSS link. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/changelog-compact.json`
- [Logo Cloud Block](https://shadcn.exchange/r/devsloka/logo-cloud-1): A Logo Cloud Block component for displaying a logo cloud section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/logo-cloud-1.json`
- [Wave Footer Block](https://shadcn.exchange/r/devsloka/wave-footer): A Wave Footer Block component for displaying a wave footer section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/wave-footer.json`
- [OTP Two-Factor](https://shadcn.exchange/r/devsloka/otp-two-factor): Authenticator two-factor prompt with trust-this-device and a backup code. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/otp-two-factor.json`
- [CTA Split Photo](https://shadcn.exchange/r/devsloka/cta-split-photo): A photo split call to action with numbered reasons and bookable demo times. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/cta-split-photo.json`
- [Hero Floating Elements Block](https://shadcn.exchange/r/devsloka/hero-floating-elements): A Hero Floating Elements Block component for displaying a hero section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/hero-floating-elements.json`
- [Blog Index](https://shadcn.exchange/r/devsloka/blog-index): A year-grouped archive with category filters and a cursor-following preview. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/blog-index.json`
- [Hero Split Reveal Block](https://shadcn.exchange/r/devsloka/hero-split-reveal): A Hero Split Reveal Block component for displaying a hero section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/hero-split-reveal.json`
- [Sign Up Steps](https://shadcn.exchange/r/devsloka/sign-up-steps): Two-step sign-up: account, then workspace, with focus management. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/sign-up-steps.json`
- [OTP Verify](https://shadcn.exchange/r/devsloka/otp-verify): Six-digit email code that submits itself, with a resend countdown. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/otp-verify.json`
- [Sign In Minimal](https://shadcn.exchange/r/devsloka/sign-in-minimal): Editorial single-column sign-in with an optional magic-link mode. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/sign-in-minimal.json`
- [FAQs Block Two](https://shadcn.exchange/r/devsloka/faqs-block-two): A FAQs Block component for displaying frequently asked questions. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/faqs-block-two.json`
- [Testimonials Block](https://shadcn.exchange/r/devsloka/testimonials-block): A Testimonials Block component for displaying a testimonials section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/testimonials-block.json`
- [Newsletter Block Two](https://shadcn.exchange/r/devsloka/newsletter-block-two): A Newsletter Block Two component for displaying a newsletter section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/newsletter-block-two.json`
- [Hero Section Block](https://shadcn.exchange/r/devsloka/hero-section): A Hero Section Block component for displaying a hero section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/hero-section.json`
- [Testimonials Block Two](https://shadcn.exchange/r/devsloka/testimonials-block-2): A Testimonials Block Two component for displaying a testimonials section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/testimonials-block-2.json`
- [Contact Block](https://shadcn.exchange/r/devsloka/contact-block): A Contact Block component for displaying contact information. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/contact-block.json`
- [Feature Interactive Cards Block](https://shadcn.exchange/r/devsloka/feature-interactive-cards): A Feature Interactive Cards Block component for displaying features. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/feature-interactive-cards.json`
- [Blog Featured](https://shadcn.exchange/r/devsloka/blog-featured): A featured story with a large photo beside three recent posts. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/blog-featured.json`
- [Grid Footer Block](https://shadcn.exchange/r/devsloka/grid-footer): A Grid Footer Block component for displaying a grid footer section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/grid-footer.json`
- [404 Poster](https://shadcn.exchange/r/devsloka/not-found-poster): A poster-style 404 on a solid ink field with quick routes home. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/not-found-poster.json`
- [Floating Footer Block](https://shadcn.exchange/r/devsloka/floating-footer): A Floating Footer Block component for displaying a floating footer section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/floating-footer.json`
- [Forgot Password](https://shadcn.exchange/r/devsloka/forgot-password-simple): Request a reset link, then a check-your-email screen with a resend cooldown. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/forgot-password-simple.json`
- [Sign In Split](https://shadcn.exchange/r/devsloka/sign-in-split): Split sign-in with an ink panel, researcher quote and SSO options. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/sign-in-split.json`
- [Features Block](https://shadcn.exchange/r/devsloka/features-block): A Features Block component for displaying features. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/features-block.json`
- [Newsletter Block](https://shadcn.exchange/r/devsloka/newsletter-block): A Newsletter Block component for displaying a newsletter section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/newsletter-block.json`
- [Reset Password](https://shadcn.exchange/r/devsloka/forgot-password-reset): Choose a new password with live requirements and a security panel. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/forgot-password-reset.json`
- [Feature Floating Showcase Block](https://shadcn.exchange/r/devsloka/feature-floating-showcase): A Feature Floating Showcase Block component for displaying features. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/feature-floating-showcase.json`
- [Hero Section Four Block](https://shadcn.exchange/r/devsloka/hero-section-four): A Hero Section Four Block component for displaying a hero section. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/hero-section-four.json`
- [Changelog Release Spread](https://shadcn.exchange/r/devsloka/changelog-release): A single release as a poster spread with an oversized version numeral. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/changelog-release.json`
- [FAQs Block](https://shadcn.exchange/r/devsloka/faqs-block): A FAQs Block component for displaying frequently asked questions. `npx shadcn@latest add https://shadcn.exchange/r/devsloka/faqs-block.json`