What can you find in the gallery?

Use the gallery to find an example for a job such as opening a menu or making an existing button more visible. Search for that job and open one item so you can read the author, what the example uses and where the source comes from.

Some items are small React controls, while others are larger sections of a page. A gallery preview shows how that item looks in its demo. Your own app still supplies the words, the action and any work that follows the action.

The community gallery and 21st’s hosted Agents product serve different jobs. For finding a button, the useful details are on the item page.

How can you check one example before adding it?

Start with a button that performs one action you can test offline. Bidyut Kundu’s Sheen Pill Button listing points to an original React implementation and its MIT license. That source is a native button with a visible-focus style and classes that reduce some movement.

Check the two source links
Use the item’s Source and License links to identify the original code and the notice. This example uses Tailwind classes and imports a helper that combines them. Check that your project can provide that helper.
Keep the action in your own test screen
In a disposable project or a sketch, decide what the button should do, such as opening display choices. If the source or terms are unclear, use a plain button for the exercise.
Compare the proposed appearance
Check whether the label is readable with your colors and fits on a phone. In a local working version, Tab to the button and check that the focus outline is easy to see. The button should still work with reduced motion on.

What does adding a registry item change?

A registry is a place tools can fetch component files from. An add command can copy those files into your project and bring in packages the example needs. Ask to see the list before you accept the change.

The listing may show the demo code before you sign in and require a free account for the item’s own code on 21st. A registry path may require a key. The original project link is a separate route to the author’s source. Check which route you are using before giving a coding tool permission to make changes.

If the app already has a button component, decide whether the new example should only change one button. Avoid replacing the shared button until you know which other screens use it.

What can you keep and change?

Follow the license for the item you use. The original Sheen Pill Button repository uses MIT, which lets you modify the covered code and requires keeping its copyright and permission notices in copies or substantial portions.

Other gallery items can carry different terms. Check demo images, thumbnails and videos separately before using them. Once you modify a copied file, compare later source changes with your copy before applying a fix.