@1st-pouf

Puffy, pastel claymorphism components and app blocks for React, built with Tailwind CSS v4 and Radix UI.

71 components pro available react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗ pro ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://1st-pouf.worksonmy.dev/r/registry.json

bun bunx shadcn@latest add https://1st-pouf.worksonmy.dev/r/registry.json

fetch registry curl -s https://1st-pouf.worksonmy.dev/r/registry.json

Components

71 total

1st-Pouf base style

Theme tokens, cushion utilities, keyframes, and component chrome. Required by every 1st-Pouf component. Also import @fontsource-variable/nunito once in your ap…

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/base.json

AlertBell ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/alert-bell.json

AspectRatio ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/aspect-ratio.json

Avatar ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/avatar.json

BottomNav ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/bottom-nav.json

Breadcrumb ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/breadcrumb.json

Button ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/button.json

Charts ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/charts.json

Checkbox ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/checkbox.json

Controls (Select, Switch, Tooltip, Dialog, Confirm, Combobox) ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/controls.json

CTA ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/cta.json

Tabs, Accordion, Collapsible ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/disclosure.json

ErrorBoundary ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/error-boundary.json

Empty, Skeleton, ErrorNote ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/feedback.json

Footer ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/footer.json

HoverCard ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/hover-card.json

Icon ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/icon.json

Input ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/input.json

Layout ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/layout.json

Blob, Badge, Dot, Figure ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/media.json

DropdownMenu + ContextMenu ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/menu.json

Menubar ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/menubar.json

NavLink ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/nav-link.json

Navbar ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/navbar.json

NumberInput ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/number-input.json

NumberInput math lib

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/numberinput-math.json

Pagination ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/pagination.json

Progress ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/progress.json

RadioGroup ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/radio-group.json

Stat, Metric ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/readout.json

ScrollArea ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/scroll-area.json

Segmented ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/segmented.json

Separator ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/separator.json

sheet ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/sheet.json

Slider ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/slider.json

Status, Freshness, ModeBanner ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/status.json

Card, RowCard ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/surface.json

Table ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/table.json

Heading, Text, Highlight, Eyebrow ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/text.json

Toast ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/toast.json

Toaster ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/toaster.json

ToggleGroup ui

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/toggle.json

Tone tokens lib

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/tone.json

Dashboard block

An example dashboard — sidebar nav, KPI row, chart, and data table.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/dashboard.json

An example auth screen — card, fields, and buttons.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/login.json

Settings page block

An example settings screen — tabbed sections of form controls.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/settings.json

Chat block

An example messaging UI — a conversation list beside a live thread.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/chat.json

Game HUD block

An example game interface — score, health/XP bars, and a leaderboard.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/game.json

Pricing block

An example pricing page — three plans with feature checklists.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/pricing.json

Blog block

An example blog index — a featured post and a grid of cards.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/blog.json

Profile block

An example profile page — avatar, stats, and tabbed content.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/profile.json

Kanban board block

An example task board — columns of cards with priorities and assignees.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/kanban.json

Music player block

An example now-playing screen — album art, scrubber, and a queue.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/music.json

Social feed block

An example feed — a composer and a stream of posts with reactions.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/feed.json

Todo list block

An example checklist — add, filter, and check off tasks.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/todo.json

Onboarding block

An example setup wizard — a progress bar and step-by-step forms.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/onboarding.json

Weather widget block

An example weather card — current conditions, hourly, and a 5-day forecast.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/weather.json

Quiz block

An example quiz card — progress, questions, and inline scoring.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/quiz.json

Landing page block

A complete marketing route — navbar, hero, proof, features, pricing, CTA, and footer.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/landing.json

Storefront block

A complete commerce route with site chrome, product discovery, a working bag, totals, and order state.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/storefront.json

Support desk block

A complete support workspace with app chrome, queue filters, ticket detail, replies, and status updates.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/support.json

Inbox block

An example email inbox — a message list beside a reading pane.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/inbox.json

Calendar block

An example day agenda with working navigation.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/calendar.json

Contact section block

A high-trust contact section with context, inline validation, and a submitted state.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/contact.json

Testimonials block

A filterable customer-story carousel with outcomes and accessible controls.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/testimonials.json

Customer CRM block

A complete customer workspace with responsive app chrome, filters, lifecycle stages, and notes.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/crm.json

Inventory block

A complete inventory workspace with searchable stock, filters, sortable records, item detail, and receiving actions.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/inventory.json

Editorial desk block

A publishing workspace that moves stories from draft through scheduling to launch.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/editorial.json

Course dashboard block

A learning workspace with a lesson outline, completion controls, and live progress.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/course.json

Event check-in block

A live event workspace with attendee search, attendance filters, summary counts, and working check-in.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/event.json

Booking flow block

A complete service-booking route with site chrome, scheduling, contact details, review, and confirmation.

npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/booking.json