AI-first product studio · Vadodara, India

bhattjiconsultants
shadcn/ui · base-nova50+ primitivesTailwind v4Next.js 16

The whole toolbox, out in the open.

A working reference for the primitives behind this demo. Every block below is the actual shadcn component, wired with the same theme, tokens and interaction patterns as the main site.

Back to the studioTalk to a human
ActionsFormsFeedbackOverlaysNavigationDataLayout

01 / Actions

Actions

Buttons, grouped actions, toggles, badges and keyboard hints. Small controls carry most of the product's personality.

Button
Six variants, five sizes, icon-only support.
Button group
Adjacent actions with shared geometry.
https://
Toggle & toggle group
Pressed states for compact controls.
Badge
Status, metadata and taxonomy at a glance.
DefaultSecondaryOutlineBlockedShipped
FeaturedTypeScript
Kbd
Keyboard hints that read like the real thing.
⌘K⇧EnterEsc

Open the command palette with ⌘K

02 / Forms

Forms

Inputs, selects, validation states, OTP, sliders and field composition. The defaults are accessible; the layout is yours.

Input & label
Single-line text with helper copy.
⌘K

Use lowercase letters and hyphens only.

Textarea
Long-form input with a sensible measure.

Keep it messy. We will ask the follow-ups.

Select
A native-feeling menu for larger option sets.
Checkbox, radio, switch
The three binary decisions, side by side.

Dark mode

Toggle the theme from the header.

Slider
Numeric input without a keyboard.
Budget confidence72%
Team size8 people
Input OTP
One-time codes with paste and keyboard support.

Enter the six-digit code.

Field composition
Labels, descriptions and grouped controls in one accessible layout.
Project brief

A small, honest brief is more useful than a long one.

We reply within one business day.

and

03 / Feedback

Feedback

Alerts, progress, loading states, empty states and toasts. Feedback should reduce uncertainty, not add decoration.

Alert
Contextual messages with an optional action.
Progress & spinner
Determinate and indeterminate loading.
Design system86%
x
Eval coverage64%
x
Migration38%
x
Syncing the workspace…
Skeleton
Perceived performance while the real thing loads.
Sonner toast
Transient confirmation without stealing focus.

Toasts appear bottom-right.

Empty state
A useful next step when there is no data.
No experiments yet
Create your first evaluation set to start measuring quality and drift.

04 / Overlays

Overlays

Dialogs, sheets, drawers, menus and hover surfaces. The right overlay is the one that keeps the user in context.

Dialog
Focused, modal and dismissible.
Alert dialog
A deliberate confirmation for destructive work.
Sheet
A side panel for secondary navigation or details.
Drawer
A bottom sheet that works on touch.
Popover
Anchored content for short tasks.
Hover card
A preview that does not require a click.
@shadcn
Tooltip
A short hint, never a paragraph.
Dropdown menu
A compact set of contextual actions.
Context menu
Actions where the user is already looking.
Right-click this surface
Menubar
A desktop-style application menu.

Menus open on click and support arrow-key navigation.

06 / Data

Data

Tables, charts, avatars and item rows. Dense information still needs breathing room.

Table
A compact release list with status.
ReleaseEnvStatusDuration
v2.4.0productionready42s
v2.3.2productionready38s
v2.4.0-rc.1previewready36s
feat/evalspreviewready51s
v2.3.1productionready40s
Chart
A small bar chart with a shared tooltip.
Avatar
Initials, images and presence states.
JBKBSHDOJO+9
Five people online
Item
A flexible row for people, files or integrations.
Production database

Postgres · 2.4 GB

Edge deployment

38 regions · healthy

Jaydeep Bhatt

Owner · admin

07 / Layout

Layout

Cards, aspect ratios, scroll areas, resizable panes, calendars and the sidebar shell. Structure is a feature.

Card
The default container, with header and content.
Release notes
v2.4.0 · 18 Feb 2026
New eval dashboard, faster cold starts and a passkey-first sign-in flow.
Aspect ratio
Stable media frames at any width.

16 : 9

Separator & scroll area
Division and bounded scrolling without page jumps.
DesignEngineeringAI
Collapsible
Progressive disclosure for secondary detail.
Region: bom1 · Commit: 8f2c1a · Duration: 42s · Zero downtime. The previous version remains available for instant rollback.
Resizable
User-controlled panes for dense workspaces.

Preview

Drag the divider to resize.

Inspector

Properties, tokens and overrides.

Calendar & date picker
Single-date selection in an anchored picker.

Selected: February 18th, 2026

Carousel
A touch-friendly sequence of slides.

01

Design

02

Build

03

Evaluate

Sidebar shell
A compact workspace navigation pattern.
b
Atlas
Workspace
Overview

A bounded sidebar shell. In the real app it shrinks to icons and becomes a sheet on mobile.

Pass rate

92.4%

Builds

84

That is the toolbox

Use the primitives. Keep the product.

Every component here is copied into the repo, owned by the team and free to evolve. The demo is a starting point, not a dependency.

Start a project