@junco/blocks
Blocks and pages
21 pages and 19 sections. Typed data with fake defaults, variants and slots.
Install
npm i junco @junco/tailwind @junco/blocks @junco/motionapp.css
/* app.css */
@import "tailwindcss";
@import "@junco/tailwind";
/* Let Tailwind see the classes the packages use. */
@source "../node_modules/junco/dist";
@source "../node_modules/@junco/blocks/dist";
@source "../node_modules/@junco/motion/dist";Marketing pages
- Landing page3 variantsA full landing page from marketing blocks: hero, logos, features, pricing, FAQ and CTA. Every section can be replaced or dropped.
- Pricing page2 variantsPlans with a monthly/yearly switch, a highlighted plan, a feature comparison and FAQ.
- Changelog2 variantsRelease notes as a timeline or a compact list, with a subscribe form.
- Blog index2 variantsPosts as a grid or a list, with a featured post and tag filters.
- Blog post2 variantsA long-form article with token-driven prose, author, reading time and a table of contents.
- Waitlist2 variantsA focused sign-up page for a launch, centered or split with a product shot.
- 4042 variantsA friendly not-found page with search and helpful links.
- 5002 variantsA server error page with a retry and a status link.
App pages
- Dashboard2 variantsAnalytics overview: stats with sparklines, revenue and signup charts, top customers and activity.
- Users2 variantsA searchable, sortable user table with role filter, invite dialog, row actions and undo.
- User detailA person's details, activity and sessions, with suspend and reactivate behind a confirmation.
- Settings: profile2 variantsProfile form with unsaved-change tracking, photo upload and a danger zone.
- Settings: billing2 variantsCurrent plan, usage meters, payment method and invoices.
- Team members2 variantsMembers and pending invites with roles and a seat limit.
- API keys2 variantsCreate keys (the secret is shown once, with copy) and revoke them behind a confirmation.
- Notifications2 variantsA channel-by-event switch matrix with pause-all, saved only after a change.
- Empty workspace2 variantsThe first screen of a new workspace, with next steps.
Auth pages
- Log in2 variantsEmail and password with providers, Zod validation and errors from your onSubmit.
- Sign up2 variantsAccount creation with a password strength meter and terms.
- Forgot password2 variantsRequest a reset link, then a clear check-your-email state.
- Onboarding2 variantsThree validated steps: workspace, team and plan, with focus moved to each step.
Marketing blocks
- Hero3 variantsHeadline, description, actions and media. Centered, split, or bold with rotating words.
- Logo cloud2 variantsCustomer logos as a marquee or a grid.
- Feature grid3 variantsFeatures as lines, cards or plain text.
- Feature spotlightAlternating text and product shots for feature stories.
- Stats bandBig numbers that count up when they scroll into view.
- Integration beamsAnimated beams connecting your product to its integrations.
- Testimonials2 variantsCustomer quotes as a grid or a marquee.
- Pricing tablePlan cards with a monthly/yearly switch and a highlighted plan.
- FAQ2 variantsQuestions in an accessible accordion, split or centered.
- Call to action3 variantsA closing pitch with one or two actions.
- Site headerLogo, nav and CTA. Collapses into a sheet menu on phones.
- Site footer2 variantsLink columns, tagline and legal links, full or minimal.
App blocks
- App shell2 variantsSidebar, topbar and content. The sidebar collapses to icons (⌘B) and becomes a sheet on phones.
- Page headerBreadcrumb, title, description, actions and section tabs.
- Stat row2 variantsKey numbers with deltas and sparklines, joined or as cards.
- Charts2 variantsDependency-free area and bar charts in token colors, with a screen-reader table.
- Settings section2 variantsLabel and description on the left, control on the right. Stacks on phones.
- Auth card2 variantsLogo, title, provider buttons, a form and a footer link.
- Activity feedWho did what, when, with avatars and relative times.