PRO-5 · Component library
Every reusable piece, in context.
PHP partials in /views/components/. Each is small, accepts named params, and renders Tailwind utility classes wired up by src/css/app.css's @layer components. To use one: component('name', [...]).
Buttons
Four variants × four sizes. Optional icons, loading state, full-width, link form.
Variants (md size)
Sizes (primary)
With icons + states
Inputs
Text, email, textarea, select. Optional label, hint, error, leading/trailing icons.
We'll send a verification link.
Must be at least 8 characters.
Use {{variable_name}} for placeholders.
Choice controls
Checkbox, radio, toggle switch.
Checkbox
Radio
Toggle
Cards
Generic container. Optional header/body/footer slots. Hoverable variant.
Cold-email opener
A first-touch email proven to get replies from SaaS founders. Tested across multiple LLMs.
Subscription
Current plan
You're on the Pro plan, billed monthly.
Renews May 24.
142
prompts in library
Badges
Visually differentiated: categories are soft fills, the master/featured badge uses a navy gradient with subtle ring, and the three semantic states (success/warning/danger) get a dot indicator so status reads at a glance.
Categories — soft fills (no dot)
Featured — gradient navy with subtle ring
Semantic — soft bg + ring + leading dot
Pills
Filter chips for the dashboard. Toggleable selected state with count.
Modals
Backdrop with blur, centered panel with spring scale-in. ESC + backdrop click to close.
Delete this prompt?
It will move to your trash and can be restored within 30 days.
Fill in prompt variables
This prompt uses 3 placeholders. Provide values and we'll copy the substituted prompt to your clipboard.
Dropdown
Click trigger, outside-click to dismiss, ESC to close.
Tabs
Used on the prompt detail page to switch between LLM outputs.
Hi Sarah,\n\nNoticed your recent post about scaling ops at Linear — really resonated with our work at {company}...Sarah —\n\nYour post on scaling Linear's ops hit hard. We had the exact same hiring conundrum at {company}...Hello Sarah,\n\nYour LinkedIn post about scaling operations at Linear caught my attention. I work at {company}...Lightbox
Full-screen image viewer for prompt screenshots. Arrow keys to navigate.
Toasts
Slide-in notifications from the bottom-right. Auto-dismiss after 4s, or click ✕.
Loading feedback
Spinners for inline loading, skeletons for whole-card placeholders.
Spinner sizes (12 / 18 / 32 / 56 px)
Skeleton card
Empty state
When a list has no items, use this instead of a blank canvas.
No prompts yet
Add your first prompt to start building your library. You can also fork prompts from the master library.
Pagination
Compact with ellipses for long lists. URL-driven so back/forward works.
3 of 12
First page
Last page