PLAYGROUND / COMPONENT EXAMPLES
From interaction
to implementation
Try the components, explore their behavior, and find the guidance to integrate them. Browse Sparrow's shared frontend library by the task at hand.
React · Next.js · TypeScript
Two languages
Explore examples and explanations in English or Chinese.
Light and dark
Choose a light or dark theme, or follow your system preference.
Shared components
Connect interactive demos with guidance for using each component.
EXPLORE / BY USE CASE
Find the piece you need
Start with a specific task across data, files, interactions, and engineering practices.
Data and forms
Input, validation, search, and data display.
Forms and validation
Try validated inputs, selects, dates, and text areas alongside table search controls.
View example and guideData tables
Explore search, sorting, filtering, editable cells, pagination, and tree data.
View example and guideAccess history
Simulate recent visits, navigate history, remove individual entries, or clear the list.
View example and guide
File handling
From uploading files to downloading archives.
Interaction and feedback
Make actions responsive and states clear.
Custom Hooks
Explore infinite scrolling, cross-origin storage, captchas, and redirects with locale routing.
View example and guideLoading states
Preview bouncing and pulsing dots, then simulate a request to see loading states in action.
View example and guideError feedback
Try form validation hints and an animated error page for different feedback scenarios.
View example and guideDrag and move
Move cards and buttons to explore wrapping a single element with Draggable.
View example and guide
Engineering practices
Shared utilities, build configuration, and deployment.
KEEP EXPLORING / THE NEXT STEP
Connect the experience to the code
Continue with the next-intl guide to understand locale routing, message configuration, and context in a multilingual application.