``` ├── .editorconfig ├── .env.example ├── .eslintrc.js ├── .gitignore ├── .npmrc ├── .prettierrc.json ├── .vscode/ ├── extensions.json ├── settings.json ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── components.json ├── next.config.ts ├── package.json ├── pnpm-lock.yaml ``` ## /.editorconfig ```editorconfig path="/.editorconfig" # Editor configuration, see http://editorconfig.org root = true [*] charset = utf-8 end_of_line = lf indent_style = space indent_size = 2 insert_final_newline = true trim_trailing_whitespace = true [*.md] max_line_length = off trim_trailing_whitespace = false [*.yml] [*.{yml,yaml}] indent_size = 2 ``` ## /.env.example ```example path="/.env.example" BASEPATH= NEXT_PUBLIC_APP_URL= ``` ## /.eslintrc.js ```js path="/.eslintrc.js" module.exports = { extends: ['next/core-web-vitals', 'plugin:@typescript-eslint/recommended', 'plugin:import/recommended', 'prettier'], parserOptions: { project: './tsconfig.json' }, globals: { React: true, JSX: true }, ignorePatterns: ['node_modules/', 'dist/', '.eslintrc.js', '**/*.css'], rules: { 'jsx-a11y/alt-text': 'off', 'react/display-name': 'off', 'react/no-children-prop': 'off', '@next/next/no-img-element': 'off', '@next/next/no-page-custom-font': 'off', '@typescript-eslint/consistent-type-imports': 'error', '@typescript-eslint/ban-ts-comment': 'off', '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/no-unused-vars': 'error', '@typescript-eslint/no-non-null-assertion': 'off', 'lines-around-comment': [ 'error', { beforeBlockComment: true, beforeLineComment: true, allowBlockStart: true, allowObjectStart: true, allowArrayStart: true } ], 'padding-line-between-statements': [ 'error', { blankLine: 'any', prev: 'export', next: 'export' }, { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' }, { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] }, { blankLine: 'always', prev: '*', next: ['function', 'multiline-const', 'multiline-block-like'] }, { blankLine: 'always', prev: ['function', 'multiline-const', 'multiline-block-like'], next: '*' } ], 'newline-before-return': 'error', 'import/newline-after-import': [ 'error', { count: 1 } ], 'import/order': [ 'error', { groups: ['builtin', 'external', ['internal', 'parent', 'sibling', 'index'], ['object', 'unknown']], pathGroups: [ { pattern: 'react', group: 'external', position: 'before' }, { pattern: 'next/** | next', group: 'external', position: 'before' }, { pattern: '~/**', group: 'external', position: 'before' }, { pattern: '@/**', group: 'internal' } ], pathGroupsExcludedImportTypes: ['react', 'type'], 'newlines-between': 'always-and-inside-groups' } ] }, settings: { react: { version: 'detect' }, 'import/parsers': { '@typescript-eslint/parser': ['.ts', '.tsx'] }, 'import/resolver': { node: {}, typescript: { project: './tsconfig.json' } } }, overrides: [ { files: ['*.ts', '*.tsx'], rules: { '@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/no-var-requires': 'off' } } ] } ``` ## /.gitignore ```gitignore path="/.gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.* .yarn/* !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/versions # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files (can opt-in for committing if needed) .env*.local .env # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts ``` ## /.npmrc ```npmrc path="/.npmrc" auto-install-peers = true shamefully-hoist=true ``` ## /.prettierrc.json ```json path="/.prettierrc.json" { "arrowParens": "avoid", "bracketSpacing": true, "htmlWhitespaceSensitivity": "css", "insertPragma": false, "bracketSameLine": false, "jsxSingleQuote": true, "printWidth": 120, "proseWrap": "preserve", "quoteProps": "as-needed", "requirePragma": false, "semi": false, "singleQuote": true, "tabWidth": 2, "trailingComma": "none", "useTabs": false, "plugins": [ "prettier-plugin-tailwindcss" ], "tailwindFunctions": [ "clsx", "cva" ] } ``` ## /.vscode/extensions.json ```json path="/.vscode/extensions.json" { "recommendations": [ "formulahendry.auto-close-tag", "steoates.autoimport", "mgmcdermott.vscode-language-babel", "aaron-bond.better-comments", "streetsidesoftware.code-spell-checker", "naumovs.color-highlight", "mikestead.dotenv", "EditorConfig.EditorConfig", "usernamehw.errorlens", "dbaeumer.vscode-eslint", "eamodio.gitlens", "xabikos.JavaScriptSnippets", "christian-kohler.npm-intellisense", "christian-kohler.path-intellisense", "esbenp.prettier-vscode", "MylesMurphy.prettify-ts", "yoavbls.pretty-ts-errors", "jasonnutter.search-node-modules", "bradlc.vscode-tailwindcss" ] } ``` ## /.vscode/settings.json ```json path="/.vscode/settings.json" { // JS "javascript.updateImportsOnFileMove.enabled": "always", // JSON "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, // VSCode Editor "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit", "source.organizeImports": "never", "source.fixAll.stylelint": "explicit" }, // Extension: Git "git.rebaseWhenSync": true, "git.autofetch": true, "git.enableSmartCommit": true, // Extension: Prettier "prettier.requireConfig": true, // Extension: ESLint "eslint.validate": [ "javascript", "typescript", "javascriptreact", "typescriptreact" ], "eslint.format.enable": true, "eslint.workingDirectories": [ { "mode": "auto" } ], "markdown.extension.toc.updateOnSave": false, "files.insertFinalNewline": true, "editor.linkedEditing": true, "typescript.tsdk": "node_modules/typescript/lib", "cSpell.words": [ "cmdk", "customizer", "jetship", "pixinvent", "shadcn", "themeselection", "turbopack", "vercel" ] } ``` ## /CHANGELOG.md # Changelog All notable changes to this project will be documented in this file. ## v1.0.0-alpha.1 (2025-04-23) ### Added - Initial Release ## /CONTRIBUTING.md # Contributing to shadcn/studio We welcome contributions from the community! Whether you're reporting bugs, suggesting new features, or fixing issues, your help is appreciated 🤝 ## Reporting Issues - Before opening a new issue, please first [search for existing issues](https://github.com/themeselection/shadcn-studio/issues?q=) to avoid duplicates. - Provide detailed reports with as much context as possible, including steps to reproduce the issue, your environment, and any relevant logs or screenshots. - For hard-to-reproduce bugs, please include a minimal reproducible repository or detailed steps to recreate the issue. ## Fixing Existing Issues - Help us by [fixing existing issues](https://github.com/themeselection/shadcn-studio/issues?q=). - Avoid working on issues already assigned to others to prevent duplicate efforts. - If you're interested in working on an issue, please add a comment to request assignment before starting work. This helps maintainers track who's working on what and prevents duplication of effort. - Use the following commit message format for fixes: `fix(): # [description]`. For eg. `fix(avatar): #3 fix bg-color of default avatar` ## Feature Requests - Please note that not all feature requests will be accepted, as some may not align with the vision or scope of the project. Don't take it personally if a request is rejected. ## Pull Requests - Pull requests should address [an open issue](https://github.com/themeselection/shadcn-studio/issues?q=is%3Aissue+is%3Aopen+) **that is assigned to you**. If no issue exists, create one first. If an issue is not assigned to you, please request assignment in the comments before submitting a PR. This ensures we avoid duplicate efforts. - For minor changes like fixing typos, an issue is not required. Feel free to directly open a pull request. - For documentation fixes, including updates to the website, you can also submit a pull request without opening an issue first. ## /LICENSE.md MIT License Copyright (c) 2025 shadcn/studio Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ## /README.md shadcn/studio logo

[shadcn/studio](https://shadcnstudio.com) is an open-source shadcn registry of copy-and-paste components, blocks, and templates—paired with a powerful theme editor to craft, customize, and ship faster. 🚀

MIT License Twitter Follow

themeselection logo Supported by [ThemeSelection](https://themeselection.com), with a commitment to empowering the open-source community. --- ## Table of Contents 📋 - [Table of Contents 📋](#table-of-contents-) - [Overview 🌏](#overview-) - [Not a standard library, but a distribution of components](#not-a-standard-library-but-a-distribution-of-components) - [Why should I use shadcn/studio? 💡](#why-should-i-use-shadcnstudio-) - [This is where shadcn/studio shines ✨](#this-is-where-shadcnstudio-shines-) - [Features ✨](#features-) - [Documentation 📚](#documentation-) - [Available Components 🧩](#available-components-) - [Component Examples](#component-examples) - [Community 🤝](#community-) - [Credits 🤘](#credits-) - [License ©](#license-) - [Useful Links 🎁](#useful-links-) --- ## Overview 🌏 **This isn't a traditional component library or a replacement for Shadcn**. Instead, it's a unique collection offers customizable variants of components, blocks, and templates. Preview, customize, and copy-paste them into your apps with ease. Building on the solid foundation of the Shadcn registry, we've enhanced it with custom-designed components & blocks to give you a head start. This allows you to craft, customize, and ship your projects faster and more efficiently. ### Not a standard library, but a distribution of components Following the philosophy of Shadcn, shadcn/studio isn't a conventional “install-from-NPM” library. Rather, it's an open-source distribution of components designed for maximum adaptability. You can copy the code, modify styles, adjust logic, or integrate it with other tools—free from the limitations of typical libraries. This "open code" model empowers you to customize with confidence and creativity. ## Why should I use shadcn/studio? 💡 shadcn/ui aims to provide core components with a unique distribution system, allowing developers to copy and paste reusable, customizable UI elements directly into their codebase. While this approach offers flexibility and control, it comes with some limitations: a lack of diverse component variants examples, limited theme customization options, and limited pre-built blocks. Additionally, its extensive customization options, though powerful, can sometimes feel overwhelming, especially for those seeking a more guided or streamlined experience. ## This is where shadcn/studio shines ✨ An open-source Shadcn registry of copy-and-paste components, blocks, and templates—paired with a powerful theme editor to craft, customize, and ship faster 🚀. It provides a robust toolkit for building stunning, interactive user interfaces with ease. - **Open-source:** Dive into a growing, community-driven collection of copy-and-paste components, blocks, and templates. - **Component & Blocks variants:** Access a diverse, collection of customizable shadcn component and block variants to quickly build and style your UI with ease. - **Animated variants with Motion:** Add smooth, modern animations to your components, enhancing user experiences with minimal effort. - **Powerful theme editor:** Tailor your UI effortlessly with real-time previews, ensuring consistent, branded designs delivered faster. ## Features ✨ 1. **Live Theme Generator:** See your shadcn components transform instantly as you experiment with styles in real time. 2. **Color Mastery:** Play with background, text, and border hues using a sleek color picker for a unified design. 3. **Typography Fine-Tuning:** Perfect your text with adjustable font sizes, weights, and transformations for a polished look. 4. **Tailwind v4 Compatibility:** Effortlessly use Tailwind v4, supporting OKLCH, HSL, RGB & HEX color formats. 5. **Stunning Theme Starters:** Kick off with gorgeous pre-built themes and customize light or dark modes in a breeze. 6. **Hold to Save Theme:** Preserve your custom themes with a quick hold, making them easy to reuse or share later. ## Documentation 📚 For comprehensive documentation, please visit [shadcnstudio.com](https://shadcnstudio.com). ## Available Components 🧩 shadcn/studio provides an open-source collection of copy-and-paste Shadcn Components designed to accelerate your project development. Below is a summary of the available component categories: ### Component Examples
Avatar Badge Breadcrumb
Shadcn Avatar Shadcn Badge Shadcn Breadcrumb
[Explore all components](https://shadcnstudio.com/docs/components/avatar) ## Community 🤝 Join the shadcn/studio community to discuss the library, ask questions, and share your experiences: - 🐦 [Follow us on Twitter](https://x.com/ShadCNStudio) - 🎮 [Join us on Discord](https://discord.com/invite/kBHkY7DekX) ## Credits 🤘 We are grateful for the contributions of the open-source community, particularly: - [shadcn/ui](https://ui.shadcn.com/) - [tweakcn](https://tweakcn.com/) (Our Theme Editor is heavily inspired by tweakcn) These projects form the backbone of shadcn/studio, allowing us to build a powerful shadcn registry of copy-and-paste components. ## License © - Copyright © [ThemeSelection](https://themeselection.com/) - Licensed under [MIT](https://github.com/themeselection/shadcn-studio/blob/main/LICENSE.md) - shadcn/studio is an open-source shadcn registry of copy-and-paste components, blocks, and templates—paired with a powerful theme editor to craft, customize, and ship faster. ## Useful Links 🎁 - [Saas Boilerplates](https://themeselection.com/item/category/saas-boilerplate) - [Next.js Admin Template](https://themeselection.com/item/category/next-js-admin-template/) - [Vue CheatSheet](https://vue-cheatsheet.themeselection.com/) - [Freebies](https://themeselection.com/item/category/freebies/) - [Free Admin Templates](https://themeselection.com/item/category/free-admin-templates/) - [Bootstrap 5 CheatSheet](https://bootstrap-cheatsheet.themeselection.com/) ## /components.json ```json path="/components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "src/app/globals.css", "baseColor": "zinc", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "hooks": "@/registry/new-york/hooks", "lib": "@/registry/new-york/lib", "utils": "@/registry/new-york/lib/utils", "ui": "@/registry/new-york/ui" }, "iconLibrary": "lucide" } ``` ## /next.config.ts ```ts path="/next.config.ts" import type { NextConfig } from 'next' const nextConfig: NextConfig = { basePath: process.env.BASEPATH, redirects: async () => { return [ { source: '/', destination: '/theme-editor', permanent: true }, { source: '/docs', destination: '/docs/getting-started/introduction', permanent: true } ] }, images: { remotePatterns: [ { protocol: 'https', hostname: 'images.unsplash.com' } ] } } export default nextConfig ``` ## /package.json ```json path="/package.json" { "name": "shadcn-studio-internal", "version": "1.0.0-alpha.1", "license": "MIT", "publishConfig": { "access": "public" }, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "next lint", "lint:fix": "next lint --fix", "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,md,mdx}\"", "check-types": "tsc --noEmit", "registry:build": "shadcn build", "registry:theme-generate": "tsx scripts/generate-theme-registry.ts", "clean": "rm -rf .next *.tsbuildinfo", "clean:node_modules": "rm -rf .next node_modules *.tsbuildinfo" }, "dependencies": { "@radix-ui/react-accordion": "^1.2.3", "@radix-ui/react-avatar": "^1.1.3", "@radix-ui/react-checkbox": "^1.1.4", "@radix-ui/react-collapsible": "^1.1.3", "@radix-ui/react-context-menu": "^2.2.7", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-label": "^2.1.2", "@radix-ui/react-menubar": "^1.1.7", "@radix-ui/react-popover": "^1.1.6", "@radix-ui/react-radio-group": "^1.2.3", "@radix-ui/react-scroll-area": "^1.2.3", "@radix-ui/react-select": "^2.1.6", "@radix-ui/react-separator": "^1.1.2", "@radix-ui/react-slider": "^1.2.3", "@radix-ui/react-slot": "^1.1.2", "@radix-ui/react-switch": "^1.1.3", "@radix-ui/react-tabs": "^1.1.3", "@radix-ui/react-toggle": "^1.1.2", "@radix-ui/react-toggle-group": "^1.1.2", "@radix-ui/react-tooltip": "^1.1.8", "@tanstack/react-table": "^8.21.2", "chroma-js": "^3.1.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "hast-util-to-jsx-runtime": "^2.3.6", "lucide-react": "^0.483.0", "next": "^15.2.4", "next-themes": "^0.4.6", "react": "^19.0.0", "react-day-picker": "8.10.1", "react-dom": "^19.0.0", "react-resizable-panels": "^2.1.7", "react-use": "^17.6.0", "recharts": "^2.15.1", "server-only": "^0.0.1", "shadcn": "2.4.0-canary.13", "shepherd.js": "^14.5.0", "sonner": "^2.0.1", "tailwind-merge": "^3.0.2", "tw-animate-css": "^1.2.4" }, "devDependencies": { "@tailwindcss/postcss": "^4.0.15", "@types/chroma-js": "^3.1.1", "@types/eslint": "^8.56.12", "@types/node": "^22.13.13", "@types/react": "^19.0.12", "@types/react-dom": "^19.0.4", "@typescript-eslint/eslint-plugin": "^7.18.0", "@typescript-eslint/parser": "^7.18.0", "eslint": "^8.57.1", "eslint-config-next": "^15.2.4", "eslint-config-prettier": "^10.1.1", "eslint-plugin-import": "^2.31.0", "prettier": "^3.5.3", "prettier-plugin-tailwindcss": "^0.6.11", "shiki": "^3.2.2", "tailwindcss": "^4.0.15", "typescript": "5.5.4" } } ``` The content has been capped at 50000 tokens, and files over NaN bytes have been omitted. The user could consider applying other filters to refine the result. The better and more specific the context, the better the LLM can follow instructions. If the context seems verbose, the user can refine the filter using uithub. Thank you for using https://uithub.com - Perfect LLM context for any GitHub repo.