1st-pouf — 49 React Components, Preview & Copy | 21st

1st-pouf

by moji2002

0components

Installs all 49 components. Without our CLI, run instead.

Auto-indexed

About 1st-pouf

1st-pouf publishes a shadcn registry at 1st-pouf.worksonmy.dev, with 49 components installable through the shadcn CLI.

Components: 49
GitHub stars: 45
Last commit: Aug 30, 2026
Repository: moji2002/1st-pouf

All 49 components

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

AlertBell
alert-bell
clsx1 file
Blog
An example blog index — a featured post and a grid of cards.
base1 file
Booking flow
booking
A complete service-booking route with site chrome, scheduling, contact details, review, and confirmation.
base1 file
BottomNav
bottom-nav
@radix-ui/react-dialog, clsx1 file
Charts
recharts1 file
Chat
An example messaging UI — a conversation list beside a live thread.
clsx1 file
Contact section
contact
A high-trust contact section with context, inline validation, and a submitted state.
base1 file
Controls (Select, Switch, Tooltip, Dialog, Confirm, Combobox)
controls
@radix-ui/react-alert-dialog, @radix-ui/react-dialog, @radix-ui/react-popover, @radix-ui/react-select1 file
Course dashboard
course
A learning workspace with a lesson outline, completion controls, and live progress.
base1 file
Customer CRM
crm
A complete customer workspace with responsive app chrome, filters, lifecycle stages, and notes.
base1 file
CTA
class-variance-authority1 file
Dashboard
An example dashboard — sidebar nav, KPI row, chart, and data table.
base1 file
Tabs, Accordion, Collapsible
disclosure
@radix-ui/react-accordion, @radix-ui/react-collapsible, @radix-ui/react-tabs, clsx1 file
Editorial desk
editorial
A publishing workspace that moves stories from draft through scheduling to launch.
base1 file
ErrorBoundary
error-boundary
base1 file
Event check-in
event
A live event workspace with attendee search, attendance filters, summary counts, and working check-in.
base1 file
Social feed
feed
An example feed — a composer and a stream of posts with reactions.
base1 file
Empty, Skeleton, ErrorNote
feedback
clsx1 file
Footer
base1 file
Game HUD
game
An example game interface — score, health/XP bars, and a leaderboard.
base1 file
Icon
@tabler/icons-react1 file
Inbox
An example email inbox — a message list beside a reading pane.
clsx1 file
Inventory
A complete inventory workspace with searchable stock, filters, sortable records, item detail, and receiving actions.
base1 file
Kanban board
kanban
An example task board — columns of cards with priorities and assignees.
@dnd-kit/core, clsx1 file
Landing page
landing
A complete marketing route — navbar, hero, proof, features, pricing, CTA, and footer.
base1 file
Layout
class-variance-authority1 file
Login screen
login
An example auth screen — card, fields, and buttons.
react-hook-form1 file
Blob, Badge, Dot, Figure
media
class-variance-authority1 file
DropdownMenu + ContextMenu
menu
@radix-ui/react-context-menu, @radix-ui/react-dropdown-menu, clsx, framer-motion1 file
Music player
music
An example now-playing screen — album art, scrubber, and a queue.
base1 file
Navbar
clsx1 file
NavLink
nav-link
clsx1 file
NumberInput
number-input
class-variance-authority1 file
Onboarding
An example setup wizard — a progress bar and step-by-step forms.
react-hook-form1 file
Pricing
An example pricing page — three plans with feature checklists.
base1 file
Profile
An example profile page — avatar, stats, and tabbed content.
base1 file
Quiz
An example quiz card — progress, questions, and inline scoring.
base1 file
Stat, Metric
readout
base, tone1 file
Segmented
clsx1 file
Settings page
settings
An example settings screen — tabbed sections of form controls.
react-hook-form1 file
Status, Freshness, ModeBanner
status
clsx1 file
Storefront
A complete commerce route with site chrome, product discovery, a working bag, totals, and order state.
react-hook-form1 file
Support desk
support
A complete support workspace with app chrome, queue filters, ticket detail, replies, and status updates.
clsx, react-hook-form1 file
Card, RowCard
surface
class-variance-authority1 file
Testimonials
A filterable customer-story carousel with outcomes and accessible controls.
base1 file
Heading, Text, Highlight, Eyebrow
text
class-variance-authority1 file
Toaster
framer-motion1 file
Todo list
todo
An example checklist — add, filter, and check off tasks.
react-hook-form1 file
Weather widget
weather
An example weather card — current conditions, hourly, and a 5-day forecast.
base1 file

From the 1st-pouf readme

1st-Pouf

A puffy, pastel, kid-shaped UI kit for React. Claymorphism — like neumorphism but maximalist: bright, chunky, every surface a cushion. Distributed as a shadcn-style registry, so you copy the source into your project and own it.

Live site · Components · Blocks · Templates · Registry

Every surface a cushion. Big radius. Inner highlight. Inner floor shadow. Outer drop. Pastel everywhere.

Preview

Try every component, block, and template in the browser without an account or local setup. The live galleries are the fastest way to decide whether the claymorphism system fits your product.

Live component catalog	Ready-to-install blocks

Depth is the affordance. Buttons press in; badges stay flat. State you can feel, not just read.
You own the source. Install with the shadcn CLI or copy the file. There is no 1st-Pouf runtime package to version-lock.
Variants, not classNames. Appearance is chosen by props, so your app can't drift off-system. Need an escape hatch? You have the code.
Built on Tailwind CSS v4, Radix UI, class-variance-authority, and Recharts.
71 installable registry items. 40 UI entries plus 28 complete blocks and templates, with live previews before you copy anything.

Install

1st-Pouf needs a React app with Tailwind CSS v4 and the shadcn CLI configured (a components.json).

# the theme (tokens, cushion utilities, keyframes) — comes along automatically,
# but you can add it explicitly
npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/base.json

# a component (pulls in its dependencies + the base)
npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/button.json

Import the theme and the font once in your app entry:

import '@fontsource-variable/nunito'
import './components/pouf/pouf.css'

Then use it:

import { Button } from './components/pouf/Button'

export function Example() {
  return Save
}

To exercise the same consumer-facing imports from this repository without starting the gallery or a test runner:

bun run example:consumer

The command renders a small Card, Stack, Heading, Text, and Button composition through React's server renderer and prints the resulting accessible markup.

Browse every component live at 1st-pouf.worksonmy.dev.

Compatibility

React 18.3.1 and React 19
Tailwind CSS 4
Vite, Next.js, or Astro with React
Modern evergreen browsers; keyboard and reduced-motion behavior are included

Components

Layout (Stack, Row, Grid, Shell, Sidebar, Separator, ScrollArea, AspectRatio) · Typography (Heading, Text, Highlight, Eyebrow) · Surfaces (Card, RowCard, Stat, Metric, Blob, Badge, Dot, Figure, Avatar) · Forms (Button, Input, Textarea, NumberInput, Checkbox, RadioGroup, Slider, Segmented, ToggleGroup) · Overlays (Select, Switch, Dialog, Confirm, Tooltip, Combobox, DropdownMenu, HoverCard, Sheet) · Feedback (Status, Freshness, ModeBanner, Empty, Skeleton, ErrorNote, Toasts, AlertBell, Progress) · Navigation (Tabs, Accordion, Collapsible, NavLink, BottomNav, Breadcrumb, Pagination) · Data (Table, Charts).

Testing copied components

Because 1st-Pouf installs source into your application, test it through the behavior your users observe. The opt-in consumer testing guide includes Vitest/jsdom setup plus copy-paste Button and NumberInput tests. Test files and runner configuration stay in your application; registry installs do not add or overwrite them.

The one rule

No component takes a className or style prop. That is deliberate: it is what keeps a whole app on-system. Choose appearance with variants (tone, size, variant). When you genuinely need to break out, edit the source — it's yours.

Development

1st-Pouf is a bun-workspaces monorepo:

registry/pouf/ — the library source (what users receive) + pouf.css theme + demos
gallery/ — a Vite app that renders every demo, driving the snapshot-equivalence gate
www/ — the 1st-pouf.worksonmy.dev site (Astro), which runs on 1st-Pouf itself

bun install
bun run example:consumer  # render public component APIs without the gallery
bun run gallery      # the demo gallery at :4700
bun run gate         # the snapshot gate (computed styles + pixels)
bun test             # unit tests
bun run social:preview # rebuild docs/social-preview.png at 1280x640

See CONTRIBUTING.md for the workflow and the gate. The repository-ready social preview is at docs/social-preview.png.

Credits

1st-Pouf's visual language is adapted from novusgfx/retro-design-system (styles/39-claymorphism), which is MIT licensed. One deliberate deviation from the reference: ink on pastel, never white — the reference's white-on-pastel buttons fail WCAG AA (measured 1.25:1–1.99:1); 1st-Pouf uses ink uniformly (6.10:1–9.75:1).

License

MIT © Mojtaba Beheshti

Read the rest on GitHub →

What 1st-pouf builds on

The packages and primitives its components pull in, counted across the registry.

base68tone14numberinput-math1

Hooks and utilities

aspect-ratio
avatar
breadcrumb
button
calendar
checkbox
hover-card
input
menubar
pagination
progress
radio-group
scroll-area
separator
sheet
slider
table
toast
toggle

What 1st-pouf shipped recently

Every appearance and removal our crawl has seen in the registry index.

alert-belladdedAug 18, 2026
aspect-ratioaddedAug 18, 2026
avataraddedAug 18, 2026
baseaddedAug 18, 2026
blogaddedAug 18, 2026
bookingaddedAug 18, 2026
bottom-navaddedAug 18, 2026
breadcrumbaddedAug 18, 2026
buttonaddedAug 18, 2026
calendaraddedAug 18, 2026
chartsaddedAug 18, 2026
chataddedAug 18, 2026

Registries like 1st-pouf

OpenStatus

by OpenStatus

components

Kibo UI

by Hayden Bleasel

components

UI TripleD

by Moumen Soliman

108

components

hax-design

by Zachary BENSALEM

components

Browse every shadcn registry we track →

1st-pouf contents

About 1st-pouf

All 49 components

AlertBell

Blog

Booking flow

BottomNav

Charts

Chat

Contact section

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

Course dashboard

Customer CRM

CTA

Dashboard

Tabs, Accordion, Collapsible

Editorial desk

ErrorBoundary

Event check-in

Social feed

Empty, Skeleton, ErrorNote

Footer

Game HUD

Icon

Inbox

Inventory

Kanban board

Landing page

Layout

Login screen

Blob, Badge, Dot, Figure

DropdownMenu + ContextMenu

Music player

Navbar

NavLink

NumberInput

Onboarding

Pricing

Profile

Quiz

Stat, Metric

Segmented

Settings page

Status, Freshness, ModeBanner

Storefront

Support desk

Card, RowCard

Testimonials

Heading, Text, Highlight, Eyebrow

Toaster

Todo list

Weather widget

From the 1st-pouf readme

1st-Pouf

Preview

Install

Compatibility

Components

Testing copied components

The one rule

Development

Credits

License

What 1st-pouf builds on

Hooks and utilities

What 1st-pouf shipped recently

Registries like 1st-pouf