FAQ
Frequently asked questions about ShadcnStore blocks and installation.
General Questions
What is ShadcnStore?
ShadcnStore is a curated collection of beautiful, production-ready UI blocks built with shadcn/ui and Tailwind CSS v4. Unlike traditional component libraries, you get the actual source code, giving you complete control over customization and styling.
How is ShadcnStore different from shadcn/ui?
While shadcn/ui provides individual components (buttons, inputs, etc.), ShadcnStore provides complete UI blocks composed of multiple shadcn/ui components working together. Think of it as the next layer up: shadcn/ui gives you building blocks, ShadcnStore gives you blueprints.
Do I need to know React to use ShadcnStore?
Yes, ShadcnStore blocks are built for React-based projects (React, Next.js, etc.). Basic knowledge of React and JSX is recommended, though many blocks can be used as-is with minimal modifications.
Can I use ShadcnStore blocks in my existing project?
Yes! As long as your project uses React with Tailwind CSS and has shadcn/ui set up, you can install ShadcnStore blocks. The blocks are designed to integrate seamlessly with existing shadcn/ui components.
Are ShadcnStore blocks accessible?
Yes, all blocks follow accessibility best practices and use shadcn/ui components as their foundation, which are built with accessibility in mind. However, you should still test accessibility in your specific use case.
Installation & Setup
Do I need to authenticate for free blocks?
No! Free blocks can be installed without any authentication:
npx shadcn@latest add https://shadcnstore.com/r/[component].jsonHow do I know if a block is free or premium?
Blocks are clearly marked on our website with badges. You can also try installing without a token - if it requires authentication, you'll get a clear error message.
Can I use environment variables instead of adding the token to each command?
Yes! Set your license key as an environment variable:
export SHADCN_STORE_TOKEN="your-license-key"
npx shadcn@latest add "https://shadcnstore.com/r/[component].json?token=$SHADCN_STORE_TOKEN"Remember to quote the URL to handle special characters properly.
What's the difference between Personal and Team licenses?
Both give access to all premium blocks. Key differences:
- Personal License: For individual use only
- Team License: Can be shared with up to 25 team members
- Commercial Rights: Both include full commercial usage rights
- Support: Both include priority support
I'm getting authentication errors. What should I do?
Here are the most common solutions:
- Verify your license key is correct and active
- Quote the URL when using query parameters:
"https://...?token=key" - Try the query parameter method as it's the most reliable
- Check your internet connection and firewall settings
- Contact support if issues persist
Where do blocks get installed in my project?
Blocks are installed based on your components.json configuration, typically in:
- Components directory: Usually
components/orsrc/components/ - UI components: In the
ui/subdirectory (for shadcn/ui components) - Utilities: In your configured
lib/directory
Can I modify the installed blocks?
Absolutely! That's the whole point of ShadcnStore. Once installed, you own the code completely and can customize it however you need. The blocks serve as a starting point for your customizations.
What happens if I install a block that already exists?
The shadcn CLI will prompt you to confirm whether you want to overwrite the existing files. Choose carefully to avoid losing custom modifications.
Licensing & Commercial Use
Can I use ShadcnStore blocks in commercial projects?
Yes! Both Personal and Team licenses include full commercial usage rights. You can use the blocks in client projects, SaaS applications, and products you sell.
Can I redistribute ShadcnStore blocks?
No, you cannot redistribute the original block code or create competing libraries using our blocks. However, you can use them in client projects and customize them as needed.
What if my team has more than 25 developers?
Contact us at hello@shadcnstore.com for enterprise licensing options. We can accommodate larger teams with custom arrangements.
Do licenses expire?
No! ShadcnStore licenses are lifetime purchases. Once you buy a license, you have permanent access to all current and future blocks (with some exceptions for major version upgrades).
Can I transfer my license to someone else?
Personal licenses are non-transferable. Team licenses can be transferred to a new team owner by contacting support.
Technical Questions
What versions of React are supported?
ShadcnStore blocks work with React 16.8+ (hooks required) and are tested with React 18+. They support both client-side and server-side rendering.
Do blocks work with TypeScript?
Yes! All blocks are written in TypeScript and include full type definitions. JavaScript projects are also supported.
What about Next.js compatibility?
Blocks are fully compatible with both Next.js App Router and Pages Router. They work with Next.js 12+ and are optimized for Next.js 13+ features.
Can I use blocks with other frameworks?
Blocks are designed for React, but you might be able to adapt them to other frameworks:
- Vue: Would require significant conversion work
- Svelte: Possible but would need manual porting
- Angular: Not recommended due to different paradigms
Do blocks work with Tailwind CSS v3?
No! ShadcnStore blocks are built with Tailwind CSS v4 support and require it for proper styling. Ensure your project is using Tailwind CSS v4.
What about custom Tailwind configurations?
Blocks work with custom Tailwind configurations as long as you:
- Have the required shadcn/ui CSS variables defined
- Use compatible color tokens and spacing scales
- Include necessary Tailwind plugins (if any)
Can I use blocks without shadcn/ui?
No, blocks depend on shadcn/ui components and design tokens. You need to have shadcn/ui properly set up in your project.
Customization & Theming
How do I customize block colors?
Blocks use CSS variables for theming. You can customize colors by:
- Updating CSS variables in your global CSS file
- Using Tailwind utilities to override specific elements
- Creating custom color tokens in your Tailwind config
See our theming guide for detailed instructions.
Do blocks support dark mode?
Yes! All blocks include dark mode support out of the box. They automatically adapt when you add the dark class to your HTML element.
See our dark mode guide for setup instructions.
Can I change the styling approach (CSS-in-JS, styled-components, etc.)?
Blocks are built with Tailwind CSS classes. Converting to other styling approaches would require manual work to rewrite the styling layer.
How do I add animations to blocks?
You can add animations using:
- Tailwind CSS animations (built-in or custom)
- Framer Motion for complex animations
- CSS transitions for simple hover effects
- Animation libraries like Lottie for rich animations
Troubleshooting
Blocks look broken or unstyled
Check that you have:
- Tailwind CSS properly configured and imported
- shadcn/ui initialized in your project
- Required CSS variables defined in your global CSS
- Proper import paths in your
components.json
Components show TypeScript errors
Ensure that:
- All dependencies are installed (
npm install) - Import paths are correct based on your
components.json - shadcn/ui components are up to date
- TypeScript version is compatible (4.5+)
Responsive design isn't working
Verify:
- Tailwind CSS responsive prefixes are working in your setup
- Viewport meta tag is present in your HTML head
- No custom CSS is overriding responsive styles
Performance issues with blocks
Consider:
- Code splitting large blocks that aren't immediately visible
- Lazy loading images and heavy components
- Optimizing bundle size by removing unused Tailwind classes
- Using React.memo for blocks that don't change frequently
Support & Community
How do I get help with installation issues?
- Check this FAQ for common solutions
- Review our installation guide and troubleshooting guide
- Join our Discord community for help and discussions
- Contact support via our contact form
Can I request new blocks or features?
Yes! We welcome feature requests and block suggestions:
- Email us at hello@shadcnstore.com
- Join our Discord at discord.gg/skHzmDHj for community discussions
- Contact us via our contact form
How often are new blocks added?
We regularly add new blocks and update existing ones. License holders get access to all new blocks automatically.
Do you offer refunds?
We do not provide refunds after purchase as it falls under the digital goods category.
Additionally, all blocks include free versions in each category, allowing you to test them before making a purchase. If you have any questions or concerns, feel free to reach out.
How do I stay updated on new releases?
- Follow us on Twitter
- Check our changelog at shadcnstore.com/changelog
- Subscribe to our newsletter (coming soon)
Still have questions? Don't hesitate to reach out:
- Join our Discord community for discussions and help
- Contact us via our contact form
We're here to help! 🚀