# devl blocks for shadcn/ui

> Hand-crafted layouts and UI primitives for shipping fast.

devl publishes 49 blocks for shadcn/ui, all of them free. In its own words: Hand-crafted layouts and UI primitives for shipping fast. Its blocks cover login and sign-up, settings, dashboard, team and navbar.

Free blocks install with the shadcn CLI under the @devl namespace, so the code lands in your project.

- Page, with live previews: https://shadcn.exchange/r/devl
- Its own site: https://devl.dev/?utm_source=shadcn.exchange
- 49 blocks, all free. Last changed 2026-10-28.
- Categories: Dashboard (2), Login (8), Navbar (1), Team (2), E-commerce (1), Chat (1), 404 (1), Settings (7), Coming soon (1)
- Search its blocks as JSON: `https://shadcn.exchange/api/catalog?kind=blocks&registry=devl&q=<words>`

Each block's page answers in Markdown, source included, at its address with `.md` on the end. [The whole site for agents](https://shadcn.exchange/llms.txt).

## Free blocks

All 49 blocks, in the order its page shows them. Each installs with the command beside it, in a project that has shadcn/ui set up.

- [Money](https://shadcn.exchange/r/devl/money): A personal finance home: the balance rolls digit by digit as you switch accounts or pay a bill, the payment lands in your transactions, spending donut and budgets at once, and each budget shows if you’re spending ahead of pace. `npx shadcn@latest add https://shadcn.exchange/r/devl/money.json`
- [Folder View](https://shadcn.exchange/r/devl/folder-view): One folder opened inside a drive, with a folder tree in the sidebar, type filters with counts, a grid of file cards with little drawn previews or a dense table, a bulk bar that rises with a rolling count when you pick a few, and ghost file… `npx shadcn@latest add https://shadcn.exchange/r/devl/folder-view.json`
- [Status Console](https://shadcn.exchange/r/devl/status-console): An ops console where an incident plays out live: services with ticking p95 sparklines, a timeline that moves from investigating to resolved, the fix rolling out in recent deploys, and an on-call card you can page from the keyboard. `npx shadcn@latest add https://shadcn.exchange/r/devl/status-console.json`
- [Connectors](https://shadcn.exchange/r/devl/connectors): Browse every app your product plugs into, grouped by category in tidy two-up cards, with a sticky search, filters that glide, connect buttons that spin and settle into a quiet connected state, and a slide-over for permissions and settings. `npx shadcn@latest add https://shadcn.exchange/r/devl/connectors.json`
- [Waitlist](https://shadcn.exchange/r/devl/waitlist): A join-the-line card: your position rolls down digit by digit, a referral link to copy, and friends who sign up drop into slots while you jump toward the next wave. `npx shadcn@latest add https://shadcn.exchange/r/devl/waitlist.json`
- [Revenue Story](https://shadcn.exchange/r/devl/revenue-overview): A store's revenue told as a story: one big annotated line you can scrub day by day against last period, a plain-sentence summary whose numbers roll, a range switch that morphs the line and moves its notes, and a ranked strip of where the m… `npx shadcn@latest add https://shadcn.exchange/r/devl/revenue-overview.json`
- [Inset Shell](https://shadcn.exchange/r/devl/inset-shell): The frame an app lives in: a sidebar with workspace switcher, nav, colour-dotted projects and an account menu that folds down to an icon rail, beside a rounded inset page with live breadcrumbs and a floating drawer on phones. `npx shadcn@latest add https://shadcn.exchange/r/devl/inset-shell.json`
- [Help Centre](https://shadcn.exchange/r/devl/help-centre): A support site with a search that suggests articles as you type, topic cards, readable articles with a table of contents that follows you, and a feedback form that asks what went wrong. `npx shadcn@latest add https://shadcn.exchange/r/devl/help-centre.json`
- [Forgot Password](https://shadcn.exchange/r/devl/forgot-password): Ask for a reset link, then a confirmation with the address it went to, a resend countdown and a way back to sign in. `npx shadcn@latest add https://shadcn.exchange/r/devl/forgot-password.json`
- [Notes](https://shadcn.exchange/r/devl/notes): A notes app with folders, pinned notes that glide to the top, search that highlights matches as you type, and an editor where typing “[] ”, “- ” or “# ” turns a line into a checklist, bullet or heading. `npx shadcn@latest add https://shadcn.exchange/r/devl/notes.json`
- [API Keys & Webhooks](https://shadcn.exchange/r/devl/developer-settings): Scoped API keys with a show-once secret, roll and revoke, plus webhook endpoints with event picking, a signing secret and a deliveries log where failed sends retry and flip to 200. `npx shadcn@latest add https://shadcn.exchange/r/devl/developer-settings.json`
- [Assistant Start](https://shadcn.exchange/r/devl/assistant-start): The first screen of an AI assistant, with chats and projects down the side, a gooey orb that says hello and a prompt box that gathers tools and connected apps as context, then glides down into the conversation when you send. `npx shadcn@latest add https://shadcn.exchange/r/devl/assistant-start.json`
- [Admin Users](https://shadcn.exchange/r/devl/admin-users): A members admin with seat and 2FA stats, role and status filters, a sortable table you can bulk-edit, an invite dialog that checks emails as chips, and a drawer with each person's devices and activity. `npx shadcn@latest add https://shadcn.exchange/r/devl/admin-users.json`
- [Issue Tracker](https://shadcn.exchange/r/devl/issue-tracker): An issue list you drive with your hands on the keys: J and K to move, S, P, A and L to change status, priority, assignee and labels, X to multi-select, ⌘K for everything else, and rows glide to their new group when they change. `npx shadcn@latest add https://shadcn.exchange/r/devl/issue-tracker.json`
- [Music Player](https://shadcn.exchange/r/devl/music-player): A music app with gradient cover art that glows into the room, a waveform you can scrub, a drag-to-reorder queue and lyrics that follow the song line by line. `npx shadcn@latest add https://shadcn.exchange/r/devl/music-player.json`
- [City Time](https://shadcn.exchange/r/devl/city-time): A local-time page for any city: a live clock whose digits roll, the sun on today's arc, your working hours against theirs with the best time to meet, and the year's clock changes, all re-computed as you switch cities. `npx shadcn@latest add https://shadcn.exchange/r/devl/city-time.json`
- [Docs Site](https://shadcn.exchange/r/devl/docs-site): A documentation site with a top nav, collapsible sidebar, code samples whose language choice follows you across the page, a table of contents that tracks your scroll, ⌘K search over pages and headings, and prev and next cards. `npx shadcn@latest add https://shadcn.exchange/r/devl/docs-site.json`
- [Security Settings](https://shadcn.exchange/r/devl/security-settings): Password, two-factor, passkeys and sessions in grouped rows: a tiny ring counts recommended steps, passkeys are added inline while your device confirms, and signed-out sessions slide off the table one after another. `npx shadcn@latest add https://shadcn.exchange/r/devl/security-settings.json`
- [Split Sign-up](https://shadcn.exchange/r/devl/split-sign-up): A two-panel sign-up: the form validates as you go (live email check, password rules that tick off, a strength bar) beside a product glimpse and rotating customer quotes that fold below on phones. `npx shadcn@latest add https://shadcn.exchange/r/devl/split-sign-up.json`
- [Settings & Plans](https://shadcn.exchange/r/devl/settings-and-plans): Workspace, members, API keys and billing in one calm settings screen: grouped rows, an unsaved-changes bar that springs up, invites and role changes, keys shown once, and usage bars that fill when you open Billing. `npx shadcn@latest add https://shadcn.exchange/r/devl/settings-and-plans.json`
- [First Run](https://shadcn.exchange/r/devl/first-run): A four-step setup for a brand-new AI workspace, with a springy stepper, tools that connect right where they sit, invites as chips, a live preview of your first agent and a calm summary you can jump back from. `npx shadcn@latest add https://shadcn.exchange/r/devl/first-run.json`
- [Members & Roles](https://shadcn.exchange/r/devl/team-roles): Invite people, manage members and pending invites, and tune a role-by-permission matrix with a locked owner column, live head counts and a duplicate-to-customise role. `npx shadcn@latest add https://shadcn.exchange/r/devl/team-roles.json`
- [Video Call](https://shadcn.exchange/r/devl/video-call): A video call where the grid reflows as people drop in and out, whoever is talking gets a soft ring and a pulse, reactions float up the stage, and chat and people slide in beside it. `npx shadcn@latest add https://shadcn.exchange/r/devl/video-call.json`
- [Team Chat](https://shadcn.exchange/r/devl/team-chat): Channels and DMs with grouped messages, reactions that roll their counts, and threads that open in a side panel; send something and a teammate starts typing back. `npx shadcn@latest add https://shadcn.exchange/r/devl/team-chat.json`
- [Co-writing Doc](https://shadcn.exchange/r/devl/co-writing-doc): A document where AI agents write alongside you: coloured cursors with name tags glide between words, an agent types its suggestion letter by letter for you to accept or reject, and comments sit in the margin next to the lines they're about. `npx shadcn@latest add https://shadcn.exchange/r/devl/co-writing-doc.json`
- [Code Review](https://shadcn.exchange/r/devl/code-review): A pull request review with a file tree, split or unified diffs with word-level highlights, inline threads you can reply to and resolve, Viewed checkboxes that fold files away, and an approve or request-changes panel. `npx shadcn@latest add https://shadcn.exchange/r/devl/code-review.json`
- [Pipeline Today](https://shadcn.exchange/r/devl/accounts-crm): A salesperson's morning view: drag deals between stages (or move them with the keyboard) while each column's weighted value and the forecast roll live, and a Focus rail tells you who to act on and why, with one-click email, call and snooze… `npx shadcn@latest add https://shadcn.exchange/r/devl/accounts-crm.json`
- [Checkout](https://shadcn.exchange/r/devl/checkout): A one-page checkout that folds each finished step into a one-line summary: inline validation that clears as you type, delivery choices that re-total the order, a card that flips when you reach the CVC, and a calm confirmation. `npx shadcn@latest add https://shadcn.exchange/r/devl/checkout.json`
- [Conductor](https://shadcn.exchange/r/devl/conductor): Chat with a lead agent while it works: it streams its replies, hands tasks to helpers whose progress ticks along in a side panel and writes what it learns straight into a launch brief you can edit beside the chat. `npx shadcn@latest add https://shadcn.exchange/r/devl/conductor.json`
- [Split Shell](https://shadcn.exchange/r/devl/split-shell): A frame for working with an agent: tasks on the left, its thread in the middle, and a work panel you can drag or nudge with arrow keys to watch its tool calls tick by, the page it's reading and the sources it will cite. `npx shadcn@latest add https://shadcn.exchange/r/devl/split-shell.json`
- [Two-step Setup](https://shadcn.exchange/r/devl/two-step-setup): Turn on authenticator-app 2FA in three calm steps: scan a coded QR or copy the setup key, type the six digits, then copy or download backup codes before you can finish. `npx shadcn@latest add https://shadcn.exchange/r/devl/two-step-setup.json`
- [Prompt Test Bench](https://shadcn.exchange/r/devl/prompt-test-bench): Check a prompt before it ships, with pass rate by version against the bar it has to clear, a unified or side-by-side diff of what changed, and test cases that re-run live from queued to a rolling score. `npx shadcn@latest add https://shadcn.exchange/r/devl/prompt-test-bench.json`
- [Profile](https://shadcn.exchange/r/devl/profile): A social profile with a painted cover, a Follow button that pinches off a notification bell like a droplet, followers that roll up, and posts, replies and a media grid that opens into a lightbox. `npx shadcn@latest add https://shadcn.exchange/r/devl/profile.json`
- [Run Replay](https://shadcn.exchange/r/devl/run-replay): Watch an agent work a task from start to finish: plan steps tick off, tool calls stream into a log, it stops to ask before sending anything, and the draft it's writing fills in beside it. `npx shadcn@latest add https://shadcn.exchange/r/devl/run-replay.json`
- [Verify Email](https://shadcn.exchange/r/devl/verify-email): The 6-digit code step: a centred code field split 3 + 3, a shake when the code is wrong, a resend timer that counts down and a mail icon that turns into a check. `npx shadcn@latest add https://shadcn.exchange/r/devl/verify-email.json`
- [Hairline Shell](https://shadcn.exchange/r/devl/hairline-shell): An app frame drawn edge to edge on single hairlines, with header and footer rules running straight across, a marker that slides along the edge to the current page and a dense issue list you can walk with J and K. `npx shadcn@latest add https://shadcn.exchange/r/devl/hairline-shell.json`
- [Dashboard Header](https://shadcn.exchange/r/devl/dashboard-header): The top of a dashboard: three trend cards, a this-period-versus-last chart you can scrub day by day, and a goal ring that fills as sales come in. `npx shadcn@latest add https://shadcn.exchange/r/devl/dashboard-header.json`
- [Sales Overview](https://shadcn.exchange/r/devl/sales-overview): A year of sales on one page: pick a number up top and the monthly chart, best sellers and channel split all follow it, with a line or bar view to taste. `npx shadcn@latest add https://shadcn.exchange/r/devl/sales-overview.json`
- [Calendar Week](https://shadcn.exchange/r/devl/calendar-week): A week calendar you can push around: drag events to move or stretch them on a 15-minute snap, drag empty time to create one, nudge with the arrow keys, and watch the now line creep down the day. `npx shadcn@latest add https://shadcn.exchange/r/devl/calendar-week.json`
- [Sign In](https://shadcn.exchange/r/devl/sign-in): A minimal centred sign-in: passkey and single sign-on side by side, email and password with a show toggle, a gentle shake when the password is wrong and a check when you’re in. `npx shadcn@latest add https://shadcn.exchange/r/devl/sign-in.json`
- [Drive](https://shadcn.exchange/r/devl/drive): A cloud drive home with a sidebar of places and quick access, start-from-template cards, and folders that glide between a card grid and a tidy table when you switch views, with search, sort and stars. `npx shadcn@latest add https://shadcn.exchange/r/devl/drive.json`
- [Notification Settings](https://shadcn.exchange/r/devl/notification-settings): Channels you can open and tune, per-event email, push and chat toggles grouped under section switches, quiet hours on a small 24-hour track, and a digest line whose item count rolls as you change things. `npx shadcn@latest add https://shadcn.exchange/r/devl/notification-settings.json`
- [Mail](https://shadcn.exchange/r/devl/mail): A three-pane mail client you can run from the keyboard: J and K walk the threads, E archives with an undo, R drops you into a quick reply, and the reading pane slides over the list on phones. `npx shadcn@latest add https://shadcn.exchange/r/devl/mail.json`
- [Sign Up](https://shadcn.exchange/r/devl/sign-up): A minimal centred sign-up: name, work email and a password whose length hint ticks green as you type, with inline errors and the terms in one quiet line. `npx shadcn@latest add https://shadcn.exchange/r/devl/sign-up.json`
- [Profile Settings](https://shadcn.exchange/r/devl/profile-settings): Edit your profile: crop a generated photo in a small dialog, claim a username with a live availability check and suggestions, see your local time on a tiny clock, and save from a bar that springs up when something changes. `npx shadcn@latest add https://shadcn.exchange/r/devl/profile-settings.json`
- [Appearance Settings](https://shadcn.exchange/r/devl/appearance-settings): Theme cards with miniature previews above a compact live app that re-themes with a circular wipe, eases into your accent colour and glides between densities as you change them. `npx shadcn@latest add https://shadcn.exchange/r/devl/appearance-settings.json`
- [Habits](https://shadcn.exchange/r/devl/habits): A habit tracker that makes ticking things off feel good: checks fill and draw in a beat, counted habits fill like a glass, streaks roll up, and a week grid lets you patch the days you forgot to log. `npx shadcn@latest add https://shadcn.exchange/r/devl/habits.json`
- [Not Found](https://shadcn.exchange/r/devl/not-found): A 404 with a compass that dithers between headings until you move your mouse or start searching, plus a did-you-mean fix for the typo, inline search and popular links. `npx shadcn@latest add https://shadcn.exchange/r/devl/not-found.json`
- [Sign-in Card](https://shadcn.exchange/r/devl/sign-in-card): Email and password sign-in with a peek toggle, a one-tap switch to magic links, passkey and SSO buttons, a gentle shake on errors and a calm check-your-inbox state. `npx shadcn@latest add https://shadcn.exchange/r/devl/sign-in-card.json`
