UI Blocks

Sushify Next.js includes a comprehensive library of 78+ pre-built UI blocks across 17 categories, powered by Tailark and fully integrated into the Sushify ecosystem. These production-ready components are built with Tailwind CSS and shadcn/ui, automatically adapt to your chosen color theme, and are wired up to work with Sushify's authentication, payments, and other business features out of the box.

What are Blocks?

Blocks are fully-functional, copy-paste ready UI sections that you can use directly in your application. Each block:

• ✅ Fully responsive (mobile, tablet, desktop)
• ✅ Dark mode compatible
• ✅ Theme-aware (works with all 19 color themes)
• ✅ Accessible (built on Radix UI primitives)
• ✅ Type-safe (TypeScript)
• ✅ Production-ready

Available Block Categories

How to Use Blocks

1. Browse the Gallery

Visit /blocks/hero-section to explore all available blocks visually.

2. Find the Component

Each block shows its file path. For example, "Hero Section One" is located at:

modules/ui/tailark/hero-section/one/index.tsx

3. Import and Use

Import the component in your page or layout:

import { HeroSection } from "@ui/tailark/hero-section/one";

export default function HomePage() {
  return (
    <main>
      <HeroSection />
      {/* Your other sections */}
    </main>
  );
}

4. Customize

Modify the content, styling, or behavior to match your needs. All blocks use standard Tailwind classes and shadcn/ui components.

Block Structure

Each block follows a consistent structure:

modules/ui/tailark/
├── hero-section/
│   ├── one/
│   │   └── index.tsx       # Hero Section variant 1
│   ├── two/
│   │   └── index.tsx       # Hero Section variant 2
│   └── ...
├── features/
│   ├── one/
│   │   └── index.tsx
│   └── ...
└── ...

Customization

Theming

All blocks automatically use your selected color theme from globals.css:

@import "@repo/tailwind-config/color-kits/cyberpunk.css";

Change the theme import, and all blocks update automatically. See the Styling documentation for all available themes.

Dark Mode

Blocks support dark mode out of the box using Tailwind's dark: variant:

<div className="bg-background text-foreground dark:bg-background dark:text-foreground">
  {/* Content automatically adapts */}
</div>

Responsive Design

All blocks are mobile-first and responsive:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Adapts to screen size */}
</div>

Theme Compatibility

All blocks work seamlessly with all 19 available themes:

Visit the Themes Gallery to preview how blocks look in different themes.