BUILD DESK

From visual reference to working interface.

LIVE PREVIEW / 01

A library in motion.

UIDiscovery / Library overviewLIVE CATALOG

Actual catalog totals. Choose a collection to explore.

Browse ios apps →

Number animation: Magic UI on 21st.dev. Adapted for reduced motion and accessible totals.

INTERACTION LAB / 02

Small movements. Clear feedback.

Try the controls. These examples use sample data and respect reduced-motion preferences.

Progress that responds

A compact gauge for milestones, completion and usage.

CompletionBased on Magic UI · MIT

A chart that changes with you

Switch the period to compare two sample series.

MONSUN

Original UIDiscovery example · 200ms transitions

UIDISCOVERY × 21ST.DEV

Reference it. Then build it.

UIDiscovery gives you the visual direction. 21st.dev gives you an official place to find editable React components. Keep the reference, prompt the shape, and make the implementation your own.

Browse 21st.dev

heroUIDISCOVERY → 21ST

Hero → working start

Use a UIDiscovery hero as the visual north star, then choose an editable React component to get the first layout on screen.

See referencesFind a component

pricingUIDISCOVERY → 21ST

Pricing → decision surface

Compare pricing patterns in UIDiscovery, then open 21st.dev to pick the component primitive that fits the product’s buying moment.

See referencesFind a component

featuresUIDISCOVERY → 21ST

Features → product proof

Turn a feature section reference into a real component system instead of leaving it as a screenshot in a moodboard.

See referencesFind a component

testimonialsUIDISCOVERY → 21ST

Testimonials → trust

Study how real products place social proof, then use a ready component as the implementation starting point.

See referencesFind a component

ctaUIDISCOVERY → 21ST

CTA → next action

Finish the flow by turning a visual call to action into a clear, usable interaction.

See referencesFind a component

Explore each component on 21st.dev. Build prompts are written for UIDiscovery; imported open-source components retain their author and license notices.

THE SOURCE DIRECTORY