ShadcnStore

Appearance

Components ​

Shadcnstore isn't your typical component library. Instead of just giving you buttons and inputs, we give you complete, ready-to-use UI blocks. Think hero sections, pricing tables, product cards, the stuff you actually need to build real apps.

Here's what makes us different: every block you see in Figma can be installed in your codebase with a single command. Design something? Install it. No rebuilding from scratch.

What You're Working With ​

We've got over 150+ production-ready blocks organized into three categories:

Application - Dashboard stuff, data tables, forms, admin panels, etc...
E-commerce - Product cards, checkout flows, shopping carts, etc...
Marketing - Hero sections, pricing tables, testimonials, CTAs, etc...

Each block is built with shadcn/ui components and styled with Tailwind CSS v4. Everything uses Figma Variables, so changing colors or spacing is as easy as swapping a variable.

How to Use Blocks ​

Finding What You Need ​

Open the Assets panel in Figma (left sidebar), and you'll see blocks organized by category. Marketing blocks in one folder, etc.

Or just browse shadcnstore.com first. See a block you like? Preview it, check the responsive version, then grab it from Figma.

Using a Block ​

  1. Drag it onto your canvas from Assets
  2. Customize using the properties panel (show/hide elements, change text, swap images)
  3. Adjust colors through variables, not by detaching
  4. Hand off the block name to your developer

That's it. Your developer runs one CLI command and gets the exact same block in code.

Customizing Blocks ​

All blocks use Figma Variables, which means you can change colors and spacing without breaking anything.

Quick Example ​

Say you want to customize the hero-1 block:

In Figma:

  • Change background color: swap background variable to surface
  • Change button color: swap primary to accent
  • Adjust spacing: change spacing/8 to spacing/12

In Code: Your developer installs it:

bash
npx shadcn@latest add "https://shadcnstore.com/r/hero-1"

Then applies the same changes:

tsx
// Change bg-background to bg-surface
// Change bg-primary to bg-accent  
// Change gap-8 to gap-12

The variables match exactly. No confusion, no guesswork.

Building Pages with Blocks ​

The real power comes from combining blocks. Here's how you'd build a landing page:

In Figma:

  1. Create a new frame (1440px wide for desktop)
  2. Drag in blocks:
    • hero-1 at the top
    • feature-grid-2 below it
    • pricing-1 for your plans
    • cta-1 at the bottom
  3. Adjust spacing between sections
  4. Toggle to dark mode and make sure it looks good

In Code:

tsx
import { Hero1 } from '@/components/blocks/marketing/hero-1'
import { FeatureGrid2 } from '@/components/blocks/marketing/feature-grid-2'
import { Pricing1 } from '@/components/blocks/marketing/pricing-1'
import { CTA1 } from '@/components/blocks/marketing/cta-1'

export default function LandingPage() {
  return (
    <main>
      <Hero1 />
      <FeatureGrid2 />
      <Pricing1 />
      <CTA1 />
    </main>
  )
}

Install them all:

bash
npx shadcn@latest add "https://shadcnstore.com/r/hero-1"
npx shadcn@latest add "https://shadcnstore.com/r/feature-grid-2"
npx shadcn@latest add "https://shadcnstore.com/r/pricing-1"
npx shadcn@latest add "https://shadcnstore.com/r/cta-1"

Done. You just built a complete landing page.

How Blocks Are Organized ​

We organize blocks by what you're actually building:

Application

  • Dashboard widgets, stats cards, activity feeds
  • Data tables with sorting and filters
  • Form layouts and multi-step wizards
  • Sidebar navigation and command menus

E-commerce

  • Product cards and detail pages
  • Shopping carts and checkout flows
  • Order tracking and history
  • Wishlists and quick views

Marketing

  • Hero sections and headers
  • Feature showcases and comparisons
  • Pricing tables with billing toggles
  • Testimonials and social proof
  • CTA sections and newsletter signups

Each category has multiple sections with different variations. Find what you need, grab it, customize it.

Component Properties ​

Blocks come with properties so you can customize without detaching:

Toggle features: Show/hide optional elements (badges, icons, labels)
Edit content: Change text, swap images, switch icons
Switch variants: Different sizes, layouts, or styles

Pro tip: Always check the properties panel before detaching. Most customizations are already built-in. Keep your blocks connected so you get updates automatically.

The Workflow ​

Here's how designers and developers work together with shadcnstore:

1. Discovery (Both) Browse blocks on shadcnstore.com together. Preview them, test responsive behavior, pick what works.

2. Design (Designer) Open the block in Figma. Customize colors and spacing using variables. Compose multiple blocks into pages. Share the block names with your developer.

3. Development (Developer) Install blocks via CLI. Apply the same customizations (variables match exactly). Integrate into the app.

4. Review (Both) Compare the live app with Figma. Everything should match because you're using the same variables.

No screenshots, no ambiguity. One source of truth.

Quick Tips ​

For Designers:

  • Check shadcnstore.com before building anything new
  • Use variables for colors and spacing, not hard-coded values
  • Keep blocks connected to the library for updates
  • Document any customizations in Figma comments

For Developers:

  • Install blocks via CLI instead of copying code from screenshots
  • Variable names in Figma match your Tailwind classes
  • Test light and dark modes together
  • Reference shadcnstore.com previews for responsive behavior

For Both:

  • Communicate using block names/IDs, not screenshots
  • Test at mobile (375px), tablet (768px), and desktop (1440px)
  • Remember that Figma design = Web preview = Installed code

Updates ​

We add new blocks and improve existing ones regularly. When updates are available:

  1. Check the changelog to see what changed
  2. Test updates in a Figma branch first
  3. Accept the updates you want
  4. Tell your developer if any installed blocks have updates

Stay informed:

Need Help? ​

Next Steps ​

Want to dig deeper?

Copyright © 2025-2026 ShadcnStore