Introduction

Lode is a library of React components with motion built in. You install a component with the shadcn CLI, or copy its file by hand, and it lands in your repository as plain TSX you can read and change.

Every preview on this site runs the same source you install, so the keyboard behavior, loading states, and motion you try on a page are what you get.

Actions

Things you press: buttons and buttons that show their own progress.

Inputs

Ways to set a value: switches, sliders, number fields, selects, date ranges, codes.

Navigation

Ways to get around: tabs, accordions and the command palette.

Overlay

Things that float above the page: menus, tooltips, dialogs and sheets.

Feedback

Progress and toasts that tell people what just happened.

Data

Charts and numbers that animate when the data changes.

Showpieces

Signature moments, like a folder that fans out its files.

Blocks

Whole screens built from the components: dashboards, billing, AI, finance, inbox, calendar.

Each component page opens with a live Preview and its Code, then covers when to use it, installation, usage, the API, keyboard support, accessibility notes, and exactly how it moves. Start with the Button.