Polished React components, ready to install.
140 animated components, 62 complete app screens and 13 site templates. Built with Tailwind CSS on shadcn/ui conventions, added to your project with one command, and yours to change.
$ npx shadcn@latest add lodeui.com/r/button.jsonBuilt for the stack you already use
- React 19
- Next.js
- Tailwind CSS v4
- shadcn/ui
- Motion
- TypeScript
What you get
Everything you need to build the interface
Start from one component or a whole page. Every piece shares the same tokens, motion and accessibility rules, so they fit together without extra work.
Components
Try them right here
These aren't screenshots. Open the menus, drag the sliders, sign the pad. Every preview is the exact component you install.
7 days selected
Team plan
Up to 10 seats
$104 / mo
$12 each. Drag the label to scrub.
$4 each, up to 3
Showing the board view
Brand color
#E9A23B
Price per night
219 stays
Check your email
Enter the 6-digit code. Hint: it's 424242.
Blocks
Start from a whole screen
Twenty of the screens, across ten kinds of product. Each block is built from Lode components and installs together with them in one command.
Templates
Or start from a whole site
Landing pages with the sections that matter: hero, features, proof, pricing and FAQ. Replace the words and ship.
How it works
From browsing to shipped in three steps
No package to wrap your app in and nothing to keep in sync. You copy what you need, and it is yours.
- 1
Find the right piece
Search or browse by category, try the live preview, and read when to use it and when not to.
⌘K date range picker - 2
Install it
Free components install by URL. Pro ones install by name with your key.
npx shadcn@latest add @lode/date-range-picker - 3
Make it yours
The file lands in your project. Change the markup, the styles or the motion. Nothing breaks on the next release.
components/ui/date-range-picker.tsx
For AI editors
Your AI editor knows Lode too
Add the Lode MCP server with one command and sign in once in your browser. No key to copy. Then Claude Code, Cursor, VS Code or Codex can search the library, read each component's docs and install the right one, instead of writing a weaker version from scratch.
- Search every component, block and template by what it does
- Read usage, props, accessibility and motion notes before writing code
- Install several items with one command, Pro included when your account has it
$ claude mcp add --transport http lode https://lodeui.com/api/mcp
You
Add a settings page with a profile form, notification switches and a delete-account action.
● list_components "settings"
● get_component settings-account
● get_install_command 3 items
✓ Installed settings-account, switch, hold-to-confirm
Quality
Built to the standard you'd hold yourself to
The parts users never mention, until they're missing.
- Accessible by default
- Real buttons, labels and roles. Full keyboard support, visible focus, and focus that returns where it came from.
- Motion with restraint
- Quick springs that explain what changed, and none at all when someone asks their system for reduced motion.
- Responsive everywhere
- Checked at phone, tablet and desktop widths. Wide content scrolls inside itself, never the page.
- Light and dark
- Every component reads CSS variables, so your theme and dark mode apply without touching the code.
- Typed and documented
- TypeScript props with sensible defaults, plus docs that say when to use each piece and when not to.
- No lock-in
- No runtime package and no wrapper. Read it, change it, or delete what you don't need.
What is Lode?
A library of React components, complete app screens and site templates. You try them here, install the ones you need with the shadcn CLI, and they become ordinary files in your project that you can read and change.
Do I need to use shadcn/ui?
No. Lode uses the shadcn CLI to copy files into your project and follows the same conventions: Tailwind CSS, CSS variables for colors, and a small cn() helper. It drops straight into a shadcn project, and works in any React project with Tailwind CSS v4.
What is free and what is Pro?
48 components are free and MIT licensed, with no account needed. Pro unlocks all 140 components, 62 blocks and 13 templates, plus Pro source and agent skills in your AI editor.
Does it work with the Next.js App Router?
Yes. Interactive components are marked "use client", everything else renders on the server, and nothing depends on a specific framework beyond React.
What happens if my yearly plan ends?
Everything you installed stays in your project and keeps working. You just can't install new Pro items until you renew. Lifetime never ends.
Is Lode free for commercial projects?
Yes. The 48 free components are MIT licensed, including commercial use and modification. Pro items can go in as many personal, commercial and client projects as you like. What you can't do is resell the components themselves as a UI kit.
Start with the free components today.
48 components are free, with no account needed. Pro unlocks everything else for $89 a year, or $99 once.