{"_id":"@capengage/studio-ui","name":"@capengage/studio-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@capengage/studio-ui","version":"0.1.0","type":"module","description":"A modern, customizable React UI component library that works seamlessly with React, Next.js, and Vite","keywords":["react","nextjs","vite","ui","components","design-system","tailwind","typescript"],"author":{"name":"Capengage"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/capengage/studio-ui.git"},"homepage":"https://github.com/capengage/studio-ui#readme","bugs":{"url":"https://github.com/capengage/studio-ui/issues"},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"},"./styles.css":"./dist/styles.css"},"scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@storybook/addon-essentials":"^7.6.10","@storybook/addon-interactions":"^7.6.10","@storybook/addon-links":"^7.6.10","@storybook/blocks":"^7.6.10","@storybook/react":"^7.6.10","@storybook/react-vite":"^7.6.10","@storybook/testing-library":"^0.2.2","@types/react":"^18.2.55","@types/react-dom":"^18.2.19","@typescript-eslint/eslint-plugin":"^6.21.0","@typescript-eslint/parser":"^6.21.0","@vitejs/plugin-react":"^4.2.1","autoprefixer":"^10.4.17","eslint":"^8.56.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.5","eslint-plugin-storybook":"^0.6.15","postcss":"^8.4.35","react":"^18.2.0","react-dom":"^18.2.0","storybook":"^7.6.10","tailwindcss":"^3.4.1","typescript":"^5.3.3","vite":"^5.0.12","vite-plugin-dts":"^3.7.2"},"dependencies":{"clsx":"^2.1.0"},"_id":"@capengage/studio-ui@0.1.0","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-syaC4bEzFra1qON6X0v3KQQT8ud1br49T0bUkRmqwHX3R9X6ruk6rrwY1EdV4yJEI64aLhBGgd+YzrdU4VP+XA==","shasum":"ac3a288111adaae400e3bdf63fa7caa4ba5304dd","tarball":"https://registry.npmjs.org/@capengage/studio-ui/-/studio-ui-0.1.0.tgz","fileCount":26,"unpackedSize":71228,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCzTLGB8YcHW8GVvnLCjrW/DaSzsNTZGf4gXxtr4Znq/AIgeGWvyUdYwfI+PYi+rWdtlSynTsBb2ydE4IunelHxtbE="}]},"_npmUser":{"name":"capengage","email":"goutam.k@capengage.com"},"directories":{},"maintainers":[{"name":"capengage","email":"goutam.k@capengage.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/studio-ui_0.1.0_1762280280345_0.9172893061545744"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-04T18:18:00.276Z","0.1.0":"2025-11-04T18:18:00.544Z","modified":"2025-11-04T18:18:01.166Z"},"maintainers":[{"name":"capengage","email":"goutam.k@capengage.com"}],"description":"A modern, customizable React UI component library that works seamlessly with React, Next.js, and Vite","homepage":"https://github.com/capengage/studio-ui#readme","keywords":["react","nextjs","vite","ui","components","design-system","tailwind","typescript"],"repository":{"type":"git","url":"git+https://github.com/capengage/studio-ui.git"},"author":{"name":"Capengage"},"bugs":{"url":"https://github.com/capengage/studio-ui/issues"},"license":"MIT","readme":"# Studio UI\r\n\r\nA modern, customizable React UI component library that works seamlessly with React, Next.js, and Vite. Built with TypeScript and Tailwind CSS for maximum flexibility and developer experience.\r\n\r\n## ✨ Features\r\n\r\n- 🎨 **Customizable Theme System** - CSS variables for easy theming\r\n- 📦 **Tree-shakeable** - Only import what you need\r\n- 🎯 **TypeScript First** - Full type safety and IntelliSense support\r\n- ⚡ **Vite & Next.js Ready** - Optimized for modern build tools\r\n- 🎭 **Storybook Documentation** - Interactive component playground\r\n- 🎪 **Multiple Variants** - Flexible component configurations\r\n- 🌈 **Tailwind CSS** - Utility-first styling\r\n- ♿ **Accessible** - Built with accessibility in mind\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install @capengage/studio-ui\r\n# or\r\nyarn add @capengage/studio-ui\r\n# or\r\npnpm add @capengage/studio-ui\r\n```\r\n\r\n## 🚀 Quick Start\r\n\r\n### React / Vite Setup\r\n\r\n1. **Import the styles in your main entry file** (`main.tsx` or `App.tsx`):\r\n\r\n```tsx\r\nimport '@capengage/studio-ui/styles.css';\r\n```\r\n\r\n2. **Configure Tailwind CSS** (if you're using Tailwind in your project):\r\n\r\n```js\r\n// tailwind.config.js\r\nexport default {\r\n  content: [\r\n    './src/**/*.{js,jsx,ts,tsx}',\r\n    './node_modules/@capengage/studio-ui/**/*.{js,mjs}', // Add this line\r\n  ],\r\n  theme: {\r\n    extend: {},\r\n  },\r\n  plugins: [],\r\n}\r\n```\r\n\r\n3. **Use components**:\r\n\r\n```tsx\r\nimport { Button, Input, Card } from '@capengage/studio-ui';\r\n\r\nfunction App() {\r\n  return (\r\n    <div>\r\n      <Card>\r\n        <h1>Welcome to Studio UI</h1>\r\n        <Input label=\"Email\" placeholder=\"Enter your email\" />\r\n        <Button variant=\"primary\">Submit</Button>\r\n      </Card>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Next.js Setup (App Router)\r\n\r\n1. **Import styles in your root layout** (`app/layout.tsx`):\r\n\r\n```tsx\r\nimport '@capengage/studio-ui/styles.css';\r\nimport type { Metadata } from 'next';\r\n\r\nexport const metadata: Metadata = {\r\n  title: 'My App',\r\n};\r\n\r\nexport default function RootLayout({\r\n  children,\r\n}: {\r\n  children: React.ReactNode;\r\n}) {\r\n  return (\r\n    <html lang=\"en\">\r\n      <body>{children}</body>\r\n    </html>\r\n  );\r\n}\r\n```\r\n\r\n2. **Configure Tailwind CSS** (`tailwind.config.js`):\r\n\r\n```js\r\n/** @type {import('tailwindcss').Config} */\r\nmodule.exports = {\r\n  content: [\r\n    './pages/**/*.{js,ts,jsx,tsx,mdx}',\r\n    './components/**/*.{js,ts,jsx,tsx,mdx}',\r\n    './app/**/*.{js,ts,jsx,tsx,mdx}',\r\n    './node_modules/@capengage/studio-ui/**/*.{js,mjs}', // Add this line\r\n  ],\r\n  theme: {\r\n    extend: {},\r\n  },\r\n  plugins: [],\r\n};\r\n```\r\n\r\n3. **Use components**:\r\n\r\n```tsx\r\n// app/page.tsx\r\nimport { Button, Card } from '@capengage/studio-ui';\r\n\r\nexport default function Home() {\r\n  return (\r\n    <main>\r\n      <Card>\r\n        <h1>Hello Next.js!</h1>\r\n        <Button>Click me</Button>\r\n      </Card>\r\n    </main>\r\n  );\r\n}\r\n```\r\n\r\n### Next.js Setup (Pages Router)\r\n\r\n1. **Import styles in `_app.tsx`**:\r\n\r\n```tsx\r\nimport '@capengage/studio-ui/styles.css';\r\nimport type { AppProps } from 'next/app';\r\n\r\nexport default function App({ Component, pageProps }: AppProps) {\r\n  return <Component {...pageProps} />;\r\n}\r\n```\r\n\r\n2. Follow the same Tailwind configuration as above.\r\n\r\n## 🎨 Theming\r\n\r\nStudio UI uses CSS variables for theming. You can customize the theme by overriding these variables in your CSS:\r\n\r\n```css\r\n:root {\r\n  /* Primary colors */\r\n  --color-primary-50: #eff6ff;\r\n  --color-primary-500: #3b82f6;\r\n  --color-primary-600: #2563eb;\r\n  \r\n  /* Border radius */\r\n  --radius-sm: 0.25rem;\r\n  --radius-md: 0.375rem;\r\n  --radius-lg: 0.5rem;\r\n}\r\n```\r\n\r\n## 📚 Components\r\n\r\n### Button\r\n\r\n```tsx\r\nimport { Button } from '@capengage/studio-ui';\r\n\r\n<Button variant=\"primary\" size=\"md\">\r\n  Click me\r\n</Button>\r\n\r\n// Variants: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'\r\n// Sizes: 'sm' | 'md' | 'lg'\r\n```\r\n\r\n### Input\r\n\r\n```tsx\r\nimport { Input } from '@capengage/studio-ui';\r\n\r\n<Input \r\n  label=\"Email\"\r\n  placeholder=\"Enter your email\"\r\n  error=\"Invalid email\"\r\n  helperText=\"We'll never share your email\"\r\n/>\r\n```\r\n\r\n### Card\r\n\r\n```tsx\r\nimport { Card, CardHeader, CardBody, CardFooter } from '@capengage/studio-ui';\r\n\r\n<Card variant=\"elevated\" hoverable>\r\n  <CardHeader>\r\n    <h3>Card Title</h3>\r\n  </CardHeader>\r\n  <CardBody>\r\n    <p>Card content goes here</p>\r\n  </CardBody>\r\n  <CardFooter>\r\n    <Button>Action</Button>\r\n  </CardFooter>\r\n</Card>\r\n\r\n// Variants: 'default' | 'outlined' | 'elevated'\r\n```\r\n\r\n## 🎭 Storybook\r\n\r\nRun Storybook locally to explore all components:\r\n\r\n```bash\r\nnpm run storybook\r\n```\r\n\r\n## 🛠️ Development\r\n\r\n### Prerequisites\r\n\r\n- Node.js 18+ \r\n- npm/yarn/pnpm\r\n\r\n### Setup\r\n\r\n```bash\r\n# Clone the repository\r\ngit clone <your-repo-url>\r\n\r\n# Install dependencies\r\nnpm install\r\n\r\n# Run Storybook\r\nnpm run storybook\r\n\r\n# Build the library\r\nnpm run build\r\n```\r\n\r\n### Project Structure\r\n\r\n```\r\nstudio-ui/\r\n├── src/\r\n│   ├── components/\r\n│   │   ├── Button/\r\n│   │   │   ├── Button.tsx\r\n│   │   │   ├── Button.stories.tsx\r\n│   │   │   └── index.ts\r\n│   │   ├── Input/\r\n│   │   └── Card/\r\n│   ├── styles/\r\n│   │   └── globals.css\r\n│   ├── utils/\r\n│   │   └── cn.ts\r\n│   └── index.ts\r\n├── .storybook/\r\n├── dist/            # Built files (generated)\r\n├── package.json\r\n├── tsconfig.json\r\n├── vite.config.ts\r\n└── tailwind.config.js\r\n```\r\n\r\n## 📦 Build\r\n\r\nThe library is built using Vite and outputs:\r\n\r\n- **ESM** (`dist/index.mjs`) - For modern bundlers\r\n- **CJS** (`dist/index.js`) - For Node.js compatibility\r\n- **Types** (`dist/index.d.ts`) - TypeScript definitions\r\n- **Styles** (`dist/styles.css`) - CSS bundle\r\n\r\n## 🤝 Contributing\r\n\r\nContributions are welcome! Please feel free to submit a Pull Request.\r\n\r\n1. Fork the repository\r\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\r\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\r\n4. Push to the branch (`git push origin feature/AmazingFeature`)\r\n5. Open a Pull Request\r\n\r\n## 📄 License\r\n\r\nMIT © Capengage\r\n\r\n## 🙏 Acknowledgments\r\n\r\nInspired by:\r\n- [HeroUI](https://www.heroui.com/)\r\n- [ShadCN UI](https://ui.shadcn.com/)\r\n- [Tailwind CSS](https://tailwindcss.com/)\r\n- [Radix UI](https://www.radix-ui.com/)\r\n\r\n---\r\n\r\nMade with ❤️ by Capengage\r\n","readmeFilename":"README.md","_rev":"1-9cc9ff8da7856ac30525b620b7facced"}