Notion-Style Shadcn/UI Blocks for Marketing Websites

Tailark Mist is a collection of pre-built shadcn/ui blocks that help you construct modern, responsive, Notion-style marketing websites.

This collection includes 16+ blocks such as hero sections, feature highlights, pricing tables, authentication forms, and more.

You can integrate these blocks into your projects using simple copy-paste methods or the shadcn add command.

GitHub Repo

Browse Blocks

Features

✨ Free & Open-Source: Accessible without cost.

🎨 Responsive Design: Works across various devices and screen sizes.

🧩 Tailwind CSS Integration: Use Tailwind CSS for styling and Radix UI for accessibility.

🧱 16+ Blocks: Includes blocks like hero sections, logo clouds, feature lists, integrations, content areas, statistics, team profiles, testimonials, calls to action, footers, pricing tables, comparators, FAQs, login, sign-up, password recovery, and contact forms.

Use Cases

Landing Page Creation: Quickly assemble a compelling landing page using the hero, features, and call-to-action blocks.
Product Showcase Sites: Detail product features, display pricing tables, and include testimonials.
Company Websites: Build out sections like “About Us” (Team block), “Contact,” and “FAQs.”
SaaS Marketing: Construct pages for software services, including integration showcases and login/signup forms.
Portfolio Pages: Use content and feature blocks to present projects and skills effectively.

Related Resources

Shadcn UI: The foundational UI component library. Understanding Shadcn UI is beneficial. https://ui.shadcn.com/
Tailwind CSS: The utility-first CSS framework used by Shadcn UI and Tailark Mist. Familiarity helps with customization. https://tailwindcss.com/

FAQs

Q: Do I need to have Shadcn UI installed to use Tailark Mist?
A: Yes, Tailark Mist is built on top of Shadcn UI, so you’ll need to have Shadcn UI set up in your project first. Follow the Shadcn UI installation guide before adding Tailark Mist components.

Q: Are the components customizable to match my brand colors?
A: Yes, all components inherit your Tailwind CSS configuration and Shadcn UI theme. You can easily customize colors, typography, and other design elements to match your brand.