Taskly is a paid Astro theme for the marketing site of a task-management, project-planning or team-collaboration product. It is built with Astro 7 and Tailwind CSS 4 and covers the site around the product, from three homepages with a coded product dashboard to pricing, integrations, solutions by team, a project template gallery, a help center, a status page and careers, in English and French.
It costs $79 with a license for 5 projects, or comes with every premium theme in the All Access Pass from $99.
At a glance
- Price and license: $79 one-time, 5 projects. Or included in the All Access Pass.
- Built with: Astro 7.3, Tailwind CSS 4.3, Pagefind, Preline, Lenis, Lucide icons and medium-zoom
- Size: 3 homepages, 30 inner page designs, 47 section components
- Layouts: 9 sections with 2 or 3 layouts each, plus 4 footer layouts
- Product mockups: 6, coded in HTML and Tailwind CSS: dashboard, team chat, calendar, conversation list, gauge and template previews
- Languages: English and French. One script removes French.
- Color scheme: one light pastel palette, no dark mode
- Figma file: no
- Output: static site for Netlify, Vercel, Cloudflare Pages or any static host
- Released: October 2026
Use cases
Task and project management apps. The main homepage opens with the coded dashboard, then feature cards, integrations, a product overview, reviews and pricing with a monthly and yearly switch. The template gallery shows boards, lists, calendars and timelines.
Team collaboration and workspace tools. The second homepage has a split hero, a stats panel, solution tabs by team and proof points, backed by a page per team and an integrations directory.
Productivity apps with a free plan or trial. The third homepage puts a sign-up form in the hero, then alternating feature rows, scrolling review cards, an integrations cloud and the latest changelog release.
Agency and client work tools. Use the agencies solution page, the project templates and the request-a-demo page to show how teams and clients work in the product.
Pages included
- Features page
- Pricing with a monthly and yearly toggle, a savings badge and a plan comparison table
- Integrations directory and a page per integration
- Solutions overview and a page per team, such as product and engineering, marketing, operations and agencies
- Project template gallery and a page per template, with a coded board, list, calendar or timeline preview
- Changelog with release pages, tags, pagination and RSS
- Blog with author cards, categories, tags, pagination and RSS
- Help center landing page with search, topic cards and popular articles that link to your docs
- System status page template with sample services, uptime bars and incidents
- About, reviews, careers with a page per role, contact and request-a-demo pages
- Log in, sign-up and password reset page designs
- Privacy, terms and cookie policy pages, FAQ and a 404 page in each language
- A layout gallery that previews each section's layouts
Features
- Product dashboard, chat and calendar coded in HTML, so you rename projects and change numbers in a content file instead of editing images
- Section layouts chosen with one value in a content file, no code changes; any page can switch between 4 footer layouts
- Site search (Cmd+K) built with Pagefind, covering both languages, no external service
- Mega menu with columns, a featured card and nested flyouts that turns into an accordion on phones
- Announcement bar that visitors can close
- SEO: canonical and Open Graph tags, a share image per page, sitemap, hreflang and RSS
- JSON-LD for your organization, website, pages, blog posts, FAQ and job postings
- AI search: llms.txt, a Markdown copy of each page, a Copy page and Ask AI menu, and robots.txt switches for AI crawlers
- Optional IndexNow script that tells Bing and other participating search engines which pages changed
- Cookie consent that holds analytics and marketing scripts until the visitor accepts
- Contact form for Formsubmit, Formspree or Netlify Forms; Mailchimp newsletter forms
- MDX shortcodes for posts: callouts, steps, tabs, code tabs, file trees and keyboard keys
- Reduced-motion support for animations and smooth scrolling
- Site settings, colors and menus each in one file: config.toml, theme.css and one menu file per language
Customize with AI coding tools
Taskly includes AGENTS.md, CLAUDE.md, GEMINI.md, rules for Cursor, GitHub Copilot and Windsurf, and SKILLS.md with recipes for adding a section or page, reordering the homepage, adding a language and rebranding. Text, menus and section options live in Markdown, TOML and JSON files, so most changes are content edits.
Not included
- Your app. The dashboard, chat and calendar are coded mockups with sample data, not a working product.
- Sign-in, accounts and billing. The auth and pricing pages are designs with no auth or checkout code.
- Help articles or a documentation system. The help center links to your own docs.
- A CMS. Content lives in files in your repository.
- Live status data, dark mode and a Figma file.
When to choose another theme
- Your product is developer-facing, such as an API, AI, cloud or dev tool, and you want code samples and dark mode: Kivo.
- You want a general B2B SaaS product site with a matching Figma file: Stella.
- You are pre-launch and need a smaller page set: Upstart.
- Your docs must live inside the same site: choose a docs theme.
FAQ
Is the product dashboard on the homepage a screenshot? No. The dashboard, team chat, calendar, gauge and template previews are coded in HTML and Tailwind CSS. Their sample tasks, people and figures live in content files, so you can change them without editing an image.
Does the pricing page have a monthly and yearly switch? Yes. The plan cards have a monthly and yearly toggle with a savings badge, and the pricing page adds a plan comparison table. Plans link to your sign-up or contact page; there is no billing integration.
Can I connect the log in and sign-up pages to my app? The log in, sign-up and password reset pages are designs with no auth code. Point the form to your backend or your auth provider's endpoint, and the social sign-in buttons to your provider.
Does the help center include help articles? No. It is a landing page with a search box, topic cards and a list of popular articles. Each link points to your own docs or help desk pages once you set it.
Does Taskly have dark mode? No. Taskly ships one light color palette. Colors are tokens in one file, so you can change the palette in one place.
What do I need installed? Node.js 22.12 or later and npm. Install with npm ci, preview with npm run dev and build with npm run build. Site search works on the built site, not in the dev server.
