Credits
This site builds on the work of other people. Each piece below names who made it, how it is licensed, and where it shows up here.
Adapted means we took the structure or behaviour and rebuilt it in this site’s own markup and styles. Used (modified) means the published code is included, with the changes made for this site listed at the top of each file.
-
Button
shadcn, MIT license, used (modified)
Every button on the site: the real default, secondary, outline, ghost and link variants, with this site’s colours, 6 px corners and 44 px height.
See the original on 21st.dev -
Sheet
shadcn, MIT license, adapted
How the phone menu behaves: the page behind it is locked while it is open, and focus returns to the Menu button when it closes.
See the original on 21st.dev -
404 with popular links (error-2)
Oliver (olewandowski1), MIT-0 license, used (modified)
The page-not-found page: a big number, a message, then a bordered list of pages. The search field is left out and the words are ours.
See the original on 21st.dev -
Blur Fade
Dillion Verma (Magic UI), MIT license, adapted
The fade-up of section headings as they scroll into view: the same 6 px blur, 12 px rise, 400 ms ease-out and 50 px entry margin, rebuilt as a CSS transition. It never runs without script or under reduced motion.
See the original on 21st.dev -
Sticky Scroll Reveal
Manu Arora (Aceternity), MIT license, adapted
The idea behind the home page journey: text on one side, a picture that stays in place and changes with each step, and the current step read at full strength (in 300 ms) while the others step back.
See the original on 21st.dev -
Feature Tab Switcher (feature-11)
hirael, MIT license, used (modified)
The app tour: the heading, the numbered list and the picture frame are the real Feature 11 markup, with the tabs rebuilt as a native radio group so it works without script.
See the original on 21st.dev -
Vertical How It Works Timeline (how-it-works-02)
LN (ln-dev7), MIT license, used (modified)
The four explanations on the How it works page: the real dashed rail, numbered nodes and cards of How It Works 02, with a drawing beside each step. The icon tiles are left out.
See the original on 21st.dev -
Minimal Centered Hero (hero-24)
LN (ln-dev7), MIT license, used (modified)
The text block at the top of the home page: a label, the headline, one plain line and the buttons.
See the original on 21st.dev -
Feature With Image
Tommy Jepsen, MIT license, used (modified)
The text-beside-a-picture sections of the Product and Reports pages: the real Feature With Image layout, with this site’s own pictures in the picture box.
See the original on 21st.dev -
Feature With Advantages
Tommy Jepsen, MIT license, used (modified)
The Sensor and Gateway blocks on the Product page: the real Feature With Advantages heading and list, with numbered marks in place of the check icons and a drawing between them.
See the original on 21st.dev -
Timeline
cubby-ui, MIT license, adapted
The vertical rail on the About page, behind the four statements: the same spacing, 24 px indicators and 2 px separators. The source builds on Base UI, so it is rebuilt rather than included.
See the original on 21st.dev -
Apple Card Carousel (carousel-08)
ShadcnSpace, MIT license, adapted
The install steps row on the How it works page: the same card widths and spacing, the previous and next buttons under the row on the right (disabled at each end), and drag with a mouse. The source needs Embla, so it is rebuilt; the row itself scrolls natively.
See the original on 21st.dev -
Scroll Spy
Özer (interior.dev), MIT license, adapted
The “On this page” navigation on the How it works and Privacy pages: the same layout, the bold-label width lock, the sliding highlight, the 420 ms wait before a change is announced and the 900 ms hold after a click. The source needs the motion library, so it is rebuilt.
See the original on 21st.dev -
Article With Author Sidebar (article-5)
Oliver (olewandowski1), MIT-0 license, used (modified)
The Privacy page: the real Article With Author Sidebar layout, a narrow column of text with a sticky list of its sections beside it. The sample text, author card and newsletter form are left out.
See the original on 21st.dev