Component Blocks

Reusable components from chatbot auth docs

Chatbot Blocks

Conversation & Messages

Chat conversation container with user and assistant message rendering.

Chat Conversation Preview
06/15/2025, 10:30
Please analyze the SEO performance for https://example.com and provide actionable recommendations.
06/15/2025, 10:30

SEO Analysis for example.com

I've completed a comprehensive analysis of your website. Here are the key findings:

  • Title Tag: Present but could be more descriptive (currently 35 chars, recommended 50-60)
  • Meta Description: Missing โ€” adding one could improve CTR by 5-10%
  • Page Speed: 2.8s load time (aim for under 2s)
  • Mobile Friendly: Responsive design detected

Overall Score: 72/100 โ€” Good foundation with room for improvement.

06/15/2025, 10:31
Can you help me fix the meta description issue?

Here are 3 suggested meta descriptions for your homepage:

  1. "Example.com โ€” Your trusted platform for innovative solutions. Discover tools, resources and expert guidance to grow your business."
  2. "Transform your workflow with Example.com. Industry-leading tools, 24/7 support, and proven results for businesses of all sizes."
  3. "Example.com helps you achieve more. Explore our suite of professional tools designed to boost productivity and drive growth."

Reasoning

Collapsible AI reasoning/thinking display with streaming support.

Reasoning โ€” Completed
Let me analyze the URL structure and on-page SEO elements for this website... First, I'll check the HTML head section for meta tags, title, and canonical URLs. The title tag is "Example Domain" which is 14 characters. This is quite short โ€” ideally it should be 50-60 characters and include target keywords. Next, I'll check for structured data (JSON-LD, microdata, or RDFa). No structured data found โ€” adding Schema.org markup could help with rich snippets. Looking at the heading hierarchy: There's one H1 tag which is good, but no H2 or H3 subheadings. Adding a clear heading hierarchy helps search engines understand content structure. Final assessment: The site has a clean foundation but needs significant SEO improvements in meta tags, content structure, and technical SEO.
Checking backlink profile and domain authority metrics... Analyzing competitor keyword rankings to identify opportunities...

Tool Invocation

Tool execution display with input/output and status indicators.

Tool Invocation States
่พ“ๅ…ฅๅ‚ๆ•ฐ
{
  "query": "SEO best practices 2025",
  "max_results": 10
}
ๆ‰ง่กŒ็ป“ๆžœ
{
  "results": [
    {
      "title": "Google SEO Starter Guide",
      "url": "https://developers.google.com/search/docs/fundamentals/seo-starter-guide"
    },
    {
      "title": "Moz - Beginner's Guide to SEO",
      "url": "https://moz.com/beginners-guide-to-seo"
    }
  ],
  "total": 15
}
่พ“ๅ…ฅๅ‚ๆ•ฐ
{
  "url": "https://unreachable-site.example"
}
ๆ‰ง่กŒ้”™่ฏฏ
Connection timeout: Unable to reach the target URL after 30s.
Timeline mode:
ๆ‰ง่กŒ็ป“ๆžœ
Successfully fetched page HTML (12.4KB)

Data Card

Collapsible data cards with 11 semantic variants for different content types.

Data Card Variants
SEO Analysis ResultNew
Completed 2 minutes ago

Your website scores 72/100 in overall SEO health.

Key areas for improvement: meta descriptions, page speed, and internal linking.

Content OptimizedDone

3 pages optimized successfully with improved keyword density.

Performance AlertWarning

Core Web Vitals LCP is 3.2s โ€” exceeds the 2.5s threshold.

Execution Plan
5 tasks planned

Keyword research โ†’ Content audit โ†’ Optimization โ†’ Link building โ†’ Monitoring

Team Collaboration
3 agents active

SEO Analyst, Content Writer, and Technical Auditor are working together.

All 11 variants:
Default
variant="default"
Info
variant="info"
Success
variant="success"
Warning
variant="warning"
Error
variant="error"
Thinking
variant="thinking"
Intent
variant="intent"
Plan
variant="plan"
Report
variant="report"
Task
variant="task"
Team
variant="team"

Sources

Collapsible source citations with individual source items and inline badges.

Suggestions

Interactive suggestion prompts and quick suggestion grids.

Suggestion Components
Suggested Next Steps

Web Preview

Rich link preview cards in standard, compact, and grid layouts.

Loaders & Animations

Loading indicators, skeleton loaders, shimmer effects, typewriter animations, and streaming cursor.

Loader Variants
dots
typing
spinner
Analyzing...
pulse

Skeleton Loader:

Streaming Cursor:

Generating SEO report for your website

Shimmer Effect:

Analyzing website performance metrics...

Typewriter Effect:

|

Actions

Message action bar with stop, reload, copy, like/dislike, and share buttons.

Action Bars

Hover to see actions (idle state):

Loading state (with stop button):

Auth Blocks

Auth Prompt

Modal dialog prompting users to log in or register, with feature highlights.

Auth Prompt Modal (Embedded Preview)

Login Required

Sign in to unlock all features

Create an account or sign in to access AI-powered SEO analysis tools.

Secure & Private

Your data is encrypted and protected

AI-Powered

Advanced analysis with latest AI models

Social Login Buttons

OAuth login buttons for Google and GitHub authentication.

OAuth Providers

Social login buttons (live component):

Typical usage with divider:

or continue with

Password Login Form

Email/password login form with validation and show/hide password toggle.

Email & Password Form (Live Component)
Docs Blocks

Breadcrumb Navigation

Hierarchical breadcrumb navigation for documentation pages.

Doc Breadcrumb (Live Component)

Table of Contents

Auto-generated table of contents from Markdown headings with scroll spy.

Table of Contents (Live Component)

Introduction

This guide covers the basics of SEO analysis.

Getting Started

Set up your project for optimal SEO performance.

Configuration

Configure your analysis parameters and API keys.

Advanced Features

Explore advanced capabilities and integrations.

MDX Cards

Card and CardGrid components for documentation pages, used in MDX content.

Reading Progress Bar

Top progress bar that tracks scroll position on documentation pages.

Reading Progress (Static Preview)

The reading progress bar renders at the very top of the viewport. Below are static previews of different progress states:

10% read
45% read
75% read
100% read

Note: The live DocReadingProgress component is scroll-based and renders as a fixed bar at the top of the page.

Stats Grid

Responsive 4-column grid of KPI metric cards.

StatsGrid โ€” 4 columns

Total Revenue

$48,295

+12.5%vs last month

Active Users

3,842

+8.2%vs last month

Bounce Rate

24.3%

-3.1%vs last month

Conversion

3.6%

+0.4%vs last month

Dashboard Layout

Complete dashboard shell with collapsible sidebar and top header.

DashboardLayout Preview

Dashboard Overview

Revenue

$48k

+12%

Users

3,842

+8%

Bounce

24%

-3%

Conv.

3.6%

+0.4%

Hero Section

Landing page hero with title, CTA buttons, and background decorators.

HeroSection
New: 40 components added

Build faster with AI-powered components

Production-ready React components for modern web apps. Theming, dark mode, and accessibility built in.

AJ
BS
CW
DL

12,000+ people already joined

4.9 (2,400 reviews)

Feature Grid

Responsive 3-column feature showcase grid with headline.

FeatureGrid โ€” 3 columns

Features

Everything you need to build faster

A complete toolkit for modern web development, designed to work seamlessly together.

AI Components

Pre-built chatbot, reasoning, and tool invocation components.

Theme System

Fully customizable design tokens with live preview.

shadcn Registry

Install any component with a single npx command.

Dark Mode

First-class dark mode support across all components.

Accessible

Built on Radix UI primitives for full accessibility.

Dashboard Ready

KPI cards, charts, tables, and layouts included.

Pricing Section

Full pricing block with monthly/yearly toggle and plan cards.

PricingSection with Toggle

Simple, transparent pricing

Start free, scale as you grow. No hidden fees.

Starter

For individuals

$0/month
  • 5 projects
  • 10GB storage
  • Community support
  • Custom domain
Recommended

Pro

For growing teams

$49/month
  • Unlimited projects
  • 100GB storage
  • Priority support
  • Custom domain

Enterprise

For large orgs

$149/month
  • Everything in Pro
  • 1TB storage
  • Dedicated manager
  • SSO & SAML

Testimonial Grid

Masonry or uniform grid testimonial section.

TestimonialGrid โ€” Masonry

Testimonials

Loved by developers

โ€œThis component library saved us weeks of development time. The AI components are especially impressive.โ€
AJ

Alice Johnson

CTO, Acme Corp

โ€œThe theme system is a game changer. Our whole brand is consistent now.โ€
BS

Bob Smith

Design Lead, Globex

โ€œIncredible value. Adopted by the team in less than a day.โ€
CW

Carol White

Product Manager, Initech

โ€œBest investment we made this year. The dashboard components alone are worth it.โ€
DL

David Lee

Engineering Manager, Hooli

โ€œClean code, well documented. Exactly what I was looking for.โ€
EM

Eva Martinez

Frontend Dev, Umbrella

FAQ Accordion

Searchable FAQ section with category tabs and smooth animation.

FAQAccordion with Search

Frequently asked questions

CTA Banner

Call-to-action banner with gradient/solid/subtle background variants.

CTABanner Variants
Limited time offer

Ready to get started?

Join thousands of developers building better products.

Try it for free โ€” no credit card required

Logo Banner

Partner logo showcase with marquee scrolling animation.

LogoBanner โ€” Marquee

Trusted by teams at leading companies

Vercel
Next.js
Stripe
Supabase
Linear
Notion
Vercel
Next.js
Stripe
Supabase
Linear
Notion

Step Process

Step-by-step process in horizontal or vertical orientation.

StepProcess โ€” Horizontal & Vertical

How it works

1

Install

npx shadcn add [component-url]

2

Customize

Edit theme in the visual editor

3

Build

Compose into your application

4

Deploy

Ship to production

Comparison Table

Feature comparison table with plan columns and check/cross cells.

ComparisonTable

Compare plans

Features
Free
ProPopular
Enterprise

Projects

5UnlimitedUnlimited

Storage

10 GB100 GB1 TB

Custom domain

Priority support

SSO & SAML

Dedicated manager

Login Form

Complete login form block with email, password, remember me, and social auth.

LoginForm Block

Welcome back

Sign in to your account

Don't have an account?

Solokit - Open Source AI Component Library for React & Next.js