Med-Study UI

Med-Study's React design-system workspace. It combines a complete shadcn component layer built on Base UI with the editorial brand elements used by the public landing page.

Design DNA

• Mist OKLCH neutrals for calm clinical surfaces.
• IBM Plex Serif for editorial display typography.
• Inter for controls, forms, navigation, and product UI.
• Plum, sage, and ochre as restrained accents.
• A compact 4px, 6px, and 8px radius scale across media, controls, and panels.
• Quiet motion, visible focus, and accessible Base UI behavior.

Commands

npm install
npm run storybook
npm run build-storybook
npm run test-storybook
npm run typecheck
npm run lint

Structure

• src/components/ui: shadcn components using @base-ui/react.
• src/components/brand: framework-neutral elements ported from the Med-Study landing page.
• src/index.css: foundations, semantic tokens, fonts, light and dark themes.
• src/stories: component specimens, interaction states, patterns, and design documentation.
• src/stories/component-catalog.stories.tsx: one independently addressable story for each of the 64 requested components.

Component provenance

The 61 published Base UI registry components are installed and maintained through the shadcn CLI. Data Table and Date Picker follow shadcn's documented composition patterns, while Typography is the shared Med-Study type layer; all three live beside the registry components and use the same tokens, radius scale, and interaction conventions.

Consumption

Import the shared stylesheet once at the application root, then consume components by subpath.

import "@med-study/ui/styles.css"

import { Button } from "@med-study/ui/components/button"
import { Heading, Section } from "@med-study/ui/brand"

The shadcn CLI configuration is retained in components.json; new components should continue to use the Base UI foundation.