From a little detail
to your next project.

Everything starts with a little play.

1. Find your interaction.

   Browse the gallery or search for what you need. Every preview is interactive. Try a switch, choose a tab, or check off a task.

2. Make it feel like you.

   Open a component by its name or Customize button. Adjust the accent, corners, and motion. A shared link keeps those settings.

3. Bring it into your project.

   In the Code tab of a Free component, copy the Component and Styles files. The Usage tab includes setup instructions. The source uses React and Phosphor Icons.

   npm install @phosphor-icons/react

   Import the provided CSS with your component. The live preview and downloaded code use the same component source.

4. Keep the good ones.

   Save a component after customizing to remember your version. This preview saves to this browser only; clearing browser data removes the collection.