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

Conversation

Container with auto-scroll and scroll-to-bottom button

Conversation Container

What is React Server Components?

React Server Components (RSC) is a new paradigm in React that allows components to be rendered on the server. This reduces the JavaScript bundle sent to the client and enables direct access to server-side resources.

Key benefits include:

Zero bundle size for server components
Direct database/filesystem access
Automatic code splitting
Streaming with Suspense for progressive rendering

How does it compare to SSR?

While SSR renders the full page on each request and hydrates on the client, RSC renders individual components on the server without hydration. This means server components never ship JavaScript to the client.

Message

User and assistant message bubbles with actions

User & Assistant Messages

05/01/2026, 01:33

Help me analyze the SEO performance of my website.

05/01/2026, 01:33

I'll analyze your website's SEO performance. Here are the key metrics I found:

Domain Authority: 45/100
Organic Traffic: 12,500 visits/month
Indexed Pages: 342

Data Card

Collapsible cards with multiple variants for different data types

Card Variants

Default Carddefault

Variant: default

Info Cardinfo

Variant: info

This is the content area of the info data card. It supports rich content and is collapsible.

Success Cardsuccess

Variant: success

Warning Cardwarning

Variant: warning

Error Carderror

Variant: error

Thinking Cardthinking

Variant: thinking

Intent Cardintent

Variant: intent

Plan Cardplan

Variant: plan

Report Cardreport

Variant: report

Task Cardtask

Variant: task

Team Cardteam

Variant: team

Tool Invocation

Timeline-based tool execution display with status indicators

Tool Invocation Timeline

输入参数

{
  "query": "Next.js performance optimization",
  "limit": 10
}

执行结果

Found 10 relevant results for "Next.js performance optimization"

Tool States

执行结果

State: input-streaming

执行结果

State: input-available

执行结果

State: output-available

执行错误

Connection timeout after 30s

Loader

Loading states, skeletons, and streaming cursor

Loader Variants

Dots

Loading...

Typing

AI is typing

Spinner

Processing...

Pulse

Thinking...

Skeleton & Streaming Cursor

Skeleton (3 lines)

Skeleton (5 lines)

Streaming Cursor

The AI is generating a response

Loader Sizes

Small

Medium

Large

Reasoning

Collapsible thinking/reasoning display for AI models

Reasoning States

The user is asking about SEO optimization. Let me analyze the key factors: 1. Technical SEO - site speed, mobile responsiveness, structured data 2. Content quality - relevance, depth, freshness 3. Backlink profile - authority, diversity, relevance I should provide actionable recommendations based on these factors.

Processing the website data and comparing against industry benchmarks...

Sources

Citation and source reference components

Sources Panel

Next.js Documentation

The official Next.js documentation with guides and API reference.

nextjs.org

React Learn

Interactive tutorials and documentation for React.

react.dev

Vercel AI SDK 4.0

Announcement of the new AI SDK with enhanced streaming support.

vercel.com

Source Badge

React Server Components1 improve performance by reducing client-side JavaScript2 while maintaining the component model developers love3.

Suggestions

Suggestion cards and quick-action prompts

Suggestions Card

Follow-up Questions

Quick Suggestions Grid

Code Block

Syntax-highlighted code display with copy and download

Code Block with Line Numbers

LoadingState.tsxtsx

1 import { Shimmer } from "@/lib/chatbot";
2  
3 export function LoadingState() {
4   return (
5     <div className="flex items-center gap-2">
6       <Shimmer duration={2}>
7         Loading content...
8       </Shimmer>
9     </div>
10   );
11 }

Inline Code

Use the Shimmer component for loading states and Typewriter for text animation effects. Import them from @/lib/chatbot.

Web Preview

Link preview cards with OG image support

Web Preview Card

nextjs.org

Next.js by Vercel - The React Framework

Next.js enables you to create high-quality web applications with the power of React components.

https://nextjs.org

vercel.com

Vercel AI SDK

Build AI-powered applications with React, Next.js, and the Vercel AI SDK.

https://vercel.com/ai

Compact Web Preview

React Documentation Tailwind CSS TypeScript

Shimmer

Animated text shimmer effect for loading states

Shimmer Variants

Default (duration: 2s)

Generating your SEO report...

Fast (duration: 1s)

Analyzing keywords...

Slow (duration: 4s)

Processing large dataset, please wait...

As heading (as="h2")

Loading Dashboard

Typewriter

Character-by-character text reveal animation

Typewriter Effect

Default speed (30ms)

|

Fast speed (10ms)

|

Actions

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

Action Variants

Default (hover to show)

Hover over this area to reveal the actions bar.

Loading state (always visible)

Minimal (copy only)

Inline Citation

Inline source citations with tooltips

Inline Citations

React Server Components

React Server Components RFC

react.dev

Server Components let you write components that render on the server.

react.dev

represent a fundamental shift in how we build React applications. Unlike traditional SSR

Understanding SSR vs RSC

nextjs.org

Server Rendering strategies including Static, Dynamic, and Streaming.

nextjs.org

, they enable zero-bundle-size components that execute entirely on the server

Zero-Bundle-Size React Server Components

vercel.com

.

Metric Card

KPI cards with trend indicator, percentage change, and icon slot.

MetricCard Variants

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

Avg. Session

4m 32s

0%unchanged

MetricCard Loading State

Stats Badge

Inline statistics badges with trend direction and dot indicator.

StatsBadge Variants

+12.5%-3.2%0%+5.8%-1.4%

Status Indicator

Service status dot with pulse animation and semantic color variants.

StatusIndicator Variants

Online

Degraded

Maintenance

Offline

All systems operational

User Avatar

User avatar with image, initials fallback, and status badge.

UserAvatar Sizes & Status

AJ

BS

CW

DL

EM

Avatar Group

Stacked avatar group with overflow count and hover tooltip.

AvatarGroup

AJ

Alice Johnson

BS

Bob Smith

CW

Carol White

+2

FW

Frank Wu

GK

Grace Kim

HB

Henry Brown

Activity Feed

Timeline activity feed with avatar/icon/dot prefix types.

ActivityFeed with Mixed Prefixes

New user signed up

alice@example.com created an account

2m ago

Payment processed

$249 subscription renewed

15m ago

Deploy failed

Production deployment encountered an error

1h ago

API rate limit warning

80% of monthly quota used

3h ago

Mini Chart

Pure SVG sparkline charts (line/area/bar) without external dependencies.

MiniChart Types

line chart

area chart

bar chart

Progress Ring

Animated SVG circular progress ring with label and custom color.

ProgressRing Sizes

75%

Storage

75% used

42%

CPU

42% load

90%

Memory

90% used

Quota

33% used

Data Table

Sortable data table with striped rows, loading state, and empty placeholder.

DataTable with Sorting

Name	Plan	Status	Revenue
Acme Corp	Enterprise	Active	$12,400
Globex	Pro	Active	$3,200
Initech	Starter	Inactive	$480
Umbrella Ltd	Pro	Active	$5,900
Hooli	Enterprise	Active	$18,700

Filter Bar

Flexible filter toolbar with search, dropdowns, and clear all action.

FilterBar with Search and Dropdowns

Feature Card

Feature highlight card with icon, title, and description in three variants.

FeatureCard Variants

Simple Variant

Clean and minimal card without borders.

Bordered Variant

Card with a subtle border and hover shadow.

Gradient Variant

Card with a gradient background and glow.

Testimonial Card

User testimonial card with quote, author info, and star rating.

TestimonialCard

“This product changed our workflow completely. The AI features are incredibly intuitive.”

AJ

Alice Johnson

CTO, Acme Corp

“Incredible value for the price. Our team adopted it in less than a day.”

BS

Bob Smith

Product Manager, Globex Inc

Pricing Card

Pricing plan card with feature list, CTA button, and recommended variant.

PricingCard

Starter

For individuals

$0/month

5 projects
10GB storage
Community support

Recommended

Pro

For growing teams

$49/month

Unlimited projects
100GB storage
Priority support

Enterprise

For large orgs

Custom

Everything in Pro
SSO & SAML
Dedicated support

Announcement Bar

Dismissible page-top announcement bar with multiple color variants.

AnnouncementBar Variants

New feature: AI-powered search is now available!

Learn more →

System maintenance scheduled for Sunday, 2:00 AM UTC.

All systems operational. No incidents reported.

Newsletter Form

Email subscription form with loading, success, and error states.

NewsletterForm

Horizontal layout (default)

No spam, unsubscribe anytime.

Vertical layout

Social Proof

Social proof widget with stacked avatars, user count, and rating.

SocialProof

AJ

BS

CW

DL

12,000+ developers already use this

4.9 (2,400 reviews)

Breadcrumb Nav

Responsive breadcrumb navigation with custom separator and home icon.

BreadcrumbNav

Form Field

Form field wrapper with label, helper text, and error message.

FormField States

Email address

We'll never share your email address.

UsernameOptionalMust be unique

Password

Password must be at least 8 characters.

Tag Input

Tag input with Enter/comma creation, color variants, and max count.

TagInput

Blue tags

reacttypescript

Green tags, max 3

reacttypescript

Rating Input

Interactive star/heart/thumb rating with half-star support.

RatingInput Variants

4 / 5

3.5 / 5

3 / 5

Search Input

Enhanced search input with clear button, loading state, and shortcut hint.

SearchInput Variants

⌘K

Slider Input

Range slider with single/dual-thumb mode and value display.

SliderInput Variants

Single slider

60

0100

Range slider

2080

0100

Color Picker

Color picker with preset swatches, hex input, and native color picker.

ColorPicker

#3b82f6

Toggle Group

Single/multi-select toggle group with icon and text modes.

ToggleGroup Variants

Selected: center

Selected: grid

OTP Input

6-digit OTP input with auto-focus, paste support, and error shake animation.

OTPInput

Type 123456 to verify (any other code shows error animation)

Date Picker

Calendar date picker with month navigation and disabled dates.

DatePicker

Multi Select

Multi-select dropdown with search, tag display, and select-all.

MultiSelect

1 selected: react

1	import { Shimmer } from "@/lib/chatbot";
2
3	export function LoadingState() {
4	return (
5	<div className="flex items-center gap-2">
6	<Shimmer duration={2}>
7	Loading content...
8	</Shimmer>
9	</div>
10	);
11	}

AI Elements

Conversation

Message

Data Card

Tool Invocation

Loader

Reasoning

Sources

Suggestions

Code Block

Web Preview

Next.js by Vercel - The React Framework

Vercel AI SDK

Shimmer

Loading Dashboard

Typewriter

Actions

Inline Citation

Metric Card

Stats Badge

Status Indicator

User Avatar

Avatar Group

Activity Feed

Mini Chart

Progress Ring

Data Table

Filter Bar

Feature Card

Simple Variant

Bordered Variant

Gradient Variant

Testimonial Card

Pricing Card

Starter

Pro

Enterprise

Announcement Bar

Newsletter Form

Social Proof

Breadcrumb Nav

Form Field

Tag Input

Rating Input

Search Input

Slider Input

Color Picker

Toggle Group

OTP Input

Date Picker

Multi Select

Fade In

Slide In

Scale In

Stagger List

Count Up

Text Reveal

Flip Card

Magnetic Button

Ripple Button

Confetti Button

Marquee

Orbit

Spotlight Card

Particle Burst

Floating Badge