Build faster with components that are already documented and demoed

These are real examples from the library rendered inline, so users can feel how components behave before opening full docs.

File Tree

Preview nested structures and navigation states live.

live

src

app

layout.tsx

page.tsx

globals.css

api

auth

route.ts

users

route.ts

components

ui

button.tsx

card.tsx

file-tree.tsx

header.tsx

footer.tsx

lib

utils.ts

constants.ts

hooks

use-auth.ts

use-theme.ts

public

favicon.ico

logo.svg

images

hero.png

avatar.jpg

package.json

tsconfig.json

next.config.mjs

tailwind.config.ts

.env.local

.gitignore

README.md

Open full docs

State Flow

See async and transition states update in real time.

live

Current State: idle

IdleReady

>

LoadingProcessing...

>

SuccessComplete!

v

ErrorFailed

Start LoadingSuccessErrorReset

idle → loading → success

loading → error (on failure)

Open full docs

Component Playground

Try an interactive component playground right on this page.

live

Compare playground

Adjust interactive compare props live

PreviewCode

ControlsReset animation

Show all(7 lines)compare-example.tsx

Copy

1<Compare
2  initialSliderPercentage={40}
3  slideMode="drag"
4  showHandlebar
5  autoplay={false}
6  autoplayDuration={3000}
7/>

Controls

initialSliderPercentage

slideMode

showHandlebar

autoplay

autoplayDuration

Open full docs

If you are new to this library, these components show the strongest interactions and best documentation depth.