The Future of Web Dev
The Future of Web Dev
1st-Pouf: Claymorphism UI Component Library
Create pastel claymorphism UIs in React with editable Tailwind CSS components installed through shadcn/ui CLI.
1st-Pouf is a React UI component registry that provides pastel claymorphism components, blocks, and full-screen templates for your shadcn/ui & Tailwind CSS projects.
It currently includes 38+ UI components across nine categories, plus 14 blocks and 14 templates. The design system uses large radii, layered cushion shadows, pastel accents, and pressed states to create a soft 3D look.
Features
- Installs editable component source through the shadcn CLI.
- Uses Tailwind CSS tokens and CSS utilities for the claymorphism theme.
- Builds interactive controls on Radix UI primitives.
- 6 pastel tones plus semantic tones for state-driven colors.
- Light & Dark themes.
How To Use It
Requirements
Run the initializer when your project does not have components.json:
npx shadcn@latest initInstall a Component
Each component registry item depends on the shared base item. The CLI also installs the npm packages declared by that item.
For example, to add the Button component:
npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/button.jsonInstall the base theme directly when you want pouf.css before adding another component:
npx shadcn@latest add https://1st-pouf.worksonmy.dev/r/base.jsonImport the Theme
The base registry item writes components/pouf/pouf.css. This file acts as the Tailwind CSS entry for 1st-Pouf and already contains @import 'tailwindcss'.
Keep its @source './' directive. Tailwind CSS uses that directive to scan the component source stored next to pouf.css.
Import the font and stylesheet once from your application entry:
import '@fontsource-variable/nunito'
import './components/pouf/pouf.css'Basic Usage
Import the installed UI components from your local components/pouf directory:
import { Button } from './components/pouf/Button'
export function SaveButton() {
return (
<Button tone="mint" type="submit">
Save changes
</Button>
)
}Available Components
| Category | Components |
|---|---|
| Layout | Layout, Separator, ScrollArea, AspectRatio |
| Typography | Text & Headings |
| Surfaces | Card, Stat & Metric, Blob, Avatar |
| Forms | Button, Input & Textarea, NumberInput, Checkbox, RadioGroup, Slider, Segmented, ToggleGroup |
| Overlays | Select, DropdownMenu, ContextMenu, HoverCard, Sheet |
| Navigation | Tabs, NavLink, BottomNav, Breadcrumb, Pagination, Menubar |
| Sections | Navbar, Footer, CTA |
| Feedback | Status, Empty, Toasts, AlertBell, Progress |
| Data | Table, Charts |
Theming and Customization
Component Variants
All UI components use variants for routine style changes. The palette contains these six color tones:
purplepinkbluemintyelloworange
Semantic aliases map state names onto the palette:
updownwarninfoidle
Change Theme Tokens
pouf.css defines Tailwind-facing colors and radii with @theme. Load your overrides after pouf.css:
@theme {
--color-purple: #7c5cff;
--radius-card: 20px;
}Semantic colors use CSS custom properties. Change a state mapping directly when its meaning needs a different accent:
:root {
--down: var(--orange);
}Dark Mode
1st-Pouf activates its dark tokens from document state. Set data-theme="dark" or the conventional dark class on the root element:
<html data-theme="dark">or:
<html class="dark">Alternatives and Related Resources
