Configure shadcn preset

[AnaBerg]

Summary

• Initializes shadcn/ui with preset b1D5khSC (radix-mira, neutral base, teal theme, lucide icons).
• Adds the generated shadcn configuration, utility helper, Tailwind theme tokens, and required dependencies.
• Updates the root layout to use the preset font variable while keeping the mono font variable available.

Validation

• bun run typecheck
• bun run lint
• bun run build

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
shareable-docs	Ready	Preview, Comment	Jun 12, 2026 6:58pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR integrates Shadcn UI into the project by adding configuration, design tokens, and utilities. New dependencies enable UI components and styling. Global CSS is rewritten to use Tailwind CSS variables with oklch color values, theme tokens, and dark mode via .dark class. Layout font imports switch from Geist Sans to Inter. A new cn utility enables composable Tailwind class merging throughout the app.

Changes

Shadcn UI Integration & Design System Setup

Layer / File(s)	Summary
Shadcn UI Configuration & Dependencies components.json, package.json	components.json defines Shadcn UI settings (theme, feature flags, Tailwind config, aliases). package.json adds UI/utility packages: class-variance-authority, clsx, lucide-react, radix-ui, shadcn, tailwind-merge, tw-animate-css.
Global Design System & Theme Variables src/app/globals.css	Tailwind imports and a .dark custom variant are added. Light theme :root and dark theme .dark class selector define oklch-based design tokens for colors, chart palette, radius scales, and sidebar variables.
Global Base Layer & Element Styling src/app/globals.css	Global @layer base block applies @apply directives to set border/outline defaults on all elements and apply background, text, and font utilities to body and html.
Font Configuration & Class Composition Utility src/app/layout.tsx, src/lib/utils.ts	Font imports switch from Geist Sans to Inter. cn utility merges Tailwind class names via clsx and tailwind-merge. Layout html element className is updated to use cn() composition with the new fonts.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Shadcn hops onto the scene,
With variables of color, fresh and clean,
Dark mode dances, tokens play,
Design system's here to stay! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is directly related to the changeset, detailing the shadcn/ui initialization, configuration additions, and layout updates that match the file changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title 'Configure shadcn preset' accurately summarizes the main objective of the changeset, which is to initialize and configure shadcn/ui with a specific preset including configuration files, dependencies, and layout updates.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/configure-shadcn-preset

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}