Skip to main content

Components1,249
Blocks7,903
3D Models3,392
Illustrations986
Mockups344
Icons186
Fonts955
Shaders108
Backgrounds99
Skills114
All assets2,538

Skeuomorphic Music Card
Event ticket
Quick Settings Tiles
Nightly prices
Animated Color Selector
Blur Glide Menu

Animated React and Tailwind components: copy the code or let your agent add it

Explore Components

Figma463
Framer765
Webflow23
Coded171
Decks66
Notion39
All templates1,398

Dark Bento UI Kit
ElementX
FINA
Snow Dashboard UI Kit
Finance & Banking Mobile App
Paradise App UI Kit

463 Figma templates by real designers, popular first

Explore Figma templates

Websites2,925
Sections4,476
Interface4,492
Branding1,026
OG Images816
All inspiration13,735

Shopify editions
Air Inc
Oryzo
More Nutrition
Poster
Giga Ai

Hand-picked websites with a live screencast on every card

Explore Websites

Code Block React Component – Smooth UI • Craftwork

Components/Smooth UI

Code Block

Pro

An animated code block with copy-to-clipboard, line highlighting and a typing reveal mode, built on a lightweight tokeniser.

Category: Cards
Built with: React, Tailwind, Radix, Motion
Installs: @radix-ui/react-slot class-variance-authority clsx lucide-react motion tailwind-merge
Files: code-block.tsx + 2 more, a few lines of CSS

The prompt tells your agent to rebuild the styles on your project's tokens, so it fits in like it was made there.

Smooth UI

by Eduardo Calvo

231 components

Copyright (c) 2024 Eduardo Calvo. Open source, added by Craftwork. The license line stays in the copied code.

More like this

FreeEvent ticket

Case Study Flip Stack

Notifications Center

Skeuomorphic Music Card

Client Tweet Card

Flight Status Card

Code Comparison