---
name: "@1st-pouf"
slug: "1st-pouf"
description: "Puffy, pastel claymorphism components and app blocks for React, built with Tailwind CSS v4 and Radix UI."
category: "Charts/data viz"
tags: ["audio", "auth", "blocks", "buttons", "cards", "charts", "cms", "dashboard", "e-commerce", "editor", "forms", "gaming", "icons", "loaders", "marketing", "media", "navigation", "onboarding", "overlays", "pro-available", "tables"]
framework: "react"
license: "MIT"
author: "moji2002"
website: "https://1st-pouf.worksonmy.dev"
github: "https://github.com/moji2002/1st-pouf"
registry: "https://1st-pouf.worksonmy.dev/r/registry.json"
pro: true
pro_url: "https://1st-pouf.worksonmy.dev/blocks/pricing"
github_stars: 32
component_count: 71
generated_at: "2026-09-05T09:50:59.044Z"
---

# @1st-pouf

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

## Links

- Website: https://1st-pouf.worksonmy.dev
- GitHub: https://github.com/moji2002/1st-pouf
- Registry JSON: https://1st-pouf.worksonmy.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/1st-pouf
- This file: https://sh4dcn.vercel.app/md/1st-pouf.md
- Pro / pricing: https://1st-pouf.worksonmy.dev/blocks/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/registry.json
pnpm dlx shadcn@latest add https://1st-pouf.worksonmy.dev/r/registry.json
bunx shadcn@latest add https://1st-pouf.worksonmy.dev/r/registry.json
# clone the source repo
git clone https://github.com/moji2002/1st-pouf.git
# fetch the raw registry index
curl -s https://1st-pouf.worksonmy.dev/r/registry.json
```

## Components (71)

| name | type | description | install |
| --- | --- | --- | --- |
| base | registry: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` |
| alert-bell | registry:ui | AlertBell | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/alert-bell.json` |
| aspect-ratio | registry:ui | AspectRatio | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/aspect-ratio.json` |
| avatar | registry:ui | Avatar | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/avatar.json` |
| bottom-nav | registry:ui | BottomNav | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/bottom-nav.json` |
| breadcrumb | registry:ui | Breadcrumb | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/breadcrumb.json` |
| button | registry:ui | Button | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/button.json` |
| charts | registry:ui | Charts | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/charts.json` |
| checkbox | registry:ui | Checkbox | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/checkbox.json` |
| controls | registry:ui | Controls (Select, Switch, Tooltip, Dialog, Confirm, Combobox) | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/controls.json` |
| cta | registry:ui | CTA | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/cta.json` |
| disclosure | registry:ui | Tabs, Accordion, Collapsible | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/disclosure.json` |
| error-boundary | registry:ui | ErrorBoundary | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/error-boundary.json` |
| feedback | registry:ui | Empty, Skeleton, ErrorNote | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/feedback.json` |
| footer | registry:ui | Footer | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/footer.json` |
| hover-card | registry:ui | HoverCard | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/hover-card.json` |
| icon | registry:ui | Icon | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/icon.json` |
| input | registry:ui | Input | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/input.json` |
| layout | registry:ui | Layout | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/layout.json` |
| media | registry:ui | Blob, Badge, Dot, Figure | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/media.json` |
| menu | registry:ui | DropdownMenu + ContextMenu | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/menu.json` |
| menubar | registry:ui | Menubar | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/menubar.json` |
| nav-link | registry:ui | NavLink | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/nav-link.json` |
| navbar | registry:ui | Navbar | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/navbar.json` |
| number-input | registry:ui | NumberInput | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/number-input.json` |
| numberinput-math | registry:lib | NumberInput math | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/numberinput-math.json` |
| pagination | registry:ui | Pagination | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/pagination.json` |
| progress | registry:ui | Progress | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/progress.json` |
| radio-group | registry:ui | RadioGroup | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/radio-group.json` |
| readout | registry:ui | Stat, Metric | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/readout.json` |
| scroll-area | registry:ui | ScrollArea | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/scroll-area.json` |
| segmented | registry:ui | Segmented | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/segmented.json` |
| separator | registry:ui | Separator | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/separator.json` |
| sheet | registry:ui | sheet | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/sheet.json` |
| slider | registry:ui | Slider | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/slider.json` |
| status | registry:ui | Status, Freshness, ModeBanner | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/status.json` |
| surface | registry:ui | Card, RowCard | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/surface.json` |
| table | registry:ui | Table | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/table.json` |
| text | registry:ui | Heading, Text, Highlight, Eyebrow | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/text.json` |
| toast | registry:ui | Toast | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/toast.json` |
| toaster | registry:ui | Toaster | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/toaster.json` |
| toggle | registry:ui | ToggleGroup | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/toggle.json` |
| tone | registry:lib | Tone tokens | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/tone.json` |
| dashboard | registry:block | An example dashboard — sidebar nav, KPI row, chart, and data table. | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/dashboard.json` |
| login | registry:block | An example auth screen — card, fields, and buttons. | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/login.json` |
| settings | registry:block | An example settings screen — tabbed sections of form controls. | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/settings.json` |
| chat | registry: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 | registry: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 | registry:block | An example pricing page — three plans with feature checklists. | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/pricing.json` |
| blog | registry: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 | registry:block | An example profile page — avatar, stats, and tabbed content. | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/profile.json` |
| kanban | registry: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 | registry:block | An example now-playing screen — album art, scrubber, and a queue. | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/music.json` |
| feed | registry: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 | registry:block | An example checklist — add, filter, and check off tasks. | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/todo.json` |
| onboarding | registry: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 | registry: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 | registry:block | An example quiz card — progress, questions, and inline scoring. | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/quiz.json` |
| landing | registry: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 | registry: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 | registry: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 | registry: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 | registry:block | An example day agenda with working navigation. | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/calendar.json` |
| contact | registry: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 | registry:block | A filterable customer-story carousel with outcomes and accessible controls. | `npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/testimonials.json` |
| crm | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @1st-pouf to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/1st-pouf.md) for the component list.
2. Fetch the machine-readable index: https://1st-pouf.worksonmy.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: 1st-pouf).
```