Moshimoshi Logo with Doshi

Mshimshi

Hero version with animated Doshi

shim

shi

Small

shim

shi

Medium Animated

shim

shi

Large

shi

Stacked Variant

Doshi Mascot

xsmall

small

medium - animated

large

clickable

Toast Notifications

Modals & Dialogs

Drawer (Mobile-Optimized)

On mobile: Try swiping to close the drawer!

Loading Components

Small Spinner

Medium Spinner

Large Spinner

Loading Dots

Skeleton Loader:

Alerts

Alerts now have improved contrast with backdrop blur and shadows for better readability on complex backgrounds:

Information

This is an informational alert with Doshi!

Success!

Your operation completed successfully.

Warning

Please review this important information.

Error

Something went wrong. Please try again.

Tight Spacing:

First alert with tight spacing

Second alert with tight spacing

Tooltips

On mobile: Tap buttons to show tooltips

Page Header

Dashboard Overview

Monitor your learning progress and achievements

Simple Header

Without breadcrumb or actions

Section Variants

✨Glass Variant

With backdrop blur effect

This is a glass-styled section with a semi-transparent background and backdrop blur.

Solid Variant

This is a solid section with opaque background.

Bordered Variant

This section has a visible border.

Default Variant

This is the default section style.

Stat Cards

Total Users

12,543

↑ 12.5%vs last week

👥

Revenue

$45.2k

↑ 8.3%

💰

Success Rate

98.5%

✅

Errors

↓ 15.2%improving

🚫

Small Card

123

📊

Medium Card

456

📈

Large Card

789

📉

Clickable Card

Click me!

👆

Setting Toggles

Notification Settings

📧

Email Notifications

Receive important updates via email

🔔

Push Notifications

Get instant alerts on your device

📢

Marketing Emails

Receive promotional content and offers

Tabs

Pills Variant:

Underline Variant:

Accordion & Collapse

Accordion (Multiple):

React is a JavaScript library for building user interfaces. It allows you to create reusable UI components.

Next.js is a React framework that provides features like server-side rendering, routing, and API routes out of the box.

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs.

Single Collapse:

This is a single collapsible section. It can be controlled programmatically or used as a standalone component.

Progress Indicators

Default Progress65%

Striped & Animated:

75/100 (75%)

Different Colors:

65%

Small

42%

Medium

89%

Large Animated

Avatars

Premium Badge Sizes:

Avatar Group:

Pro

Pagination

Showing 1 to 20 of 195 results

Small Size:

Large Size with Many Pages:

Form Inputs

Text Input

This is a helpful hint

With Icons

🔍

✨

Filled Variant

Ghost Variant

With Error

This field is required

Disabled

Textarea

Supports markdown

Accept terms and conditions

You must accept to continue

Radio Options:

Option 1

Option 2

Option 3 (Disabled)

Select Dropdowns

Basic Select

With Icons & Search

Filled Variant

Ghost Variant

Multi-Select

Select multiple options

Select up to 3 languages

Cards

Default Card

With subtitle

This is the default card variant with standard styling.

Elevated Card

With shadow

Click me! This card has elevation and hover effects.

Glass Card

Glass variant with backdrop blur and image.

Horizontal Card

Side-by-side layout

This is a horizontal card layout perfect for lists and compact displays. The image can be positioned on either side.

Card with Footer

Interactive elements

Cards can have footers with additional actions or information.

2 hours ago

Loading Skeleton:

Horizontal Skeleton:

Page Container Gradients

Default Gradient

Page container with decorative pattern

Theme Testing

Card Example

This card adapts to the current theme. Switch themes using the toggle in the header to see the changes.

Primary Palette Card

This card showcases how the primary color palette adapts to different themes while maintaining proper contrast.