Blocks

https://github.com/tailark/blocks
Admin
Shadcn marketing blocks
Tokens:5,277
Snippets:17
Trust Score:6.5
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Integrate React-Specific ESLint Rules with Plugins

Source: https://github.com/tailark/blocks/blob/main/packages/core/README.md

This JavaScript configuration integrates `eslint-plugin-react-x` and `eslint-plugin-react-dom` to provide React and React DOM-specific linting rules. It assumes these plugins are installed and demonstrates how to add them to the ESLint configuration and enable their recommended TypeScript rules.

```javascript
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
```

--------------------------------

### Expand ESLint for Type-Checked Rules in TypeScript

Source: https://github.com/tailark/blocks/blob/main/packages/core/README.md

This configuration extends the ESLint setup to include type-aware linting rules for TypeScript projects. It requires the `tseslint` package and specifies `tsconfig.node.json` and `tsconfig.app.json` for project context. Ensure you have the necessary TypeScript configuration files.

```javascript
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

--------------------------------

### Tailark Input Component Examples

Source: https://context7.com/tailark/blocks/llms.txt

Showcases the styled Input component, which includes focus states, validation support, and file input handling. The examples demonstrate creating a contact form with email, password, and file input fields, paired with a Label component for accessibility. It also shows how to trigger an error state for the password input.

```tsx
import { Input } from '@tailark/core/ui/input'
import { Label } from '@tailark/core/ui/label'

function ContactForm() {
  return (
    <form className="space-y-4">
      <div>
        <Label htmlFor="email">Email</Label>
        <Input
          id="email"
          type="email"
          placeholder="you@example.com"
          aria-invalid={false}
        />
      </div>

      <div>
        <Label htmlFor="password">Password</Label>
        <Input
          id="password"
          type="password"
          aria-invalid={true} // Shows error state
        />
      </div>

      <div>
        <Label htmlFor="file">Upload File</Label>
        <Input
          id="file"
          type="file"
          accept=".pdf,.doc"
        />
      </div>

      <Button type="submit">Submit</Button>
    </form>
  )
}
```

--------------------------------

### Pricing Component Integration and Customization (React/JSX)

Source: https://context7.com/tailark/blocks/llms.txt

Demonstrates the usage of the pre-built Pricing component from the Dusk Kit and provides an example of creating a custom pricing table. The custom component uses UI primitives like Card, CardHeader, and Button, and allows for dynamic rendering of pricing plans and features.

```tsx
import Pricing from '@tailark/dusk/blocks/pricing/one'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@tailark/core/ui/card'
import { Button } from '@tailark/core/ui/button'
import { Check } from 'lucide-react'

// Use the pre-built component
export default function PricingPage() {
  return <Pricing />
}

// Or customize your own
function CustomPricing() {
  const plans = [
    {
      name: 'Starter',
      price: '$9',
      features: ['10 Projects', '5GB Storage', 'Email Support']
    },
    {
      name: 'Pro',
      price: '$29',
      features: ['Unlimited Projects', '100GB Storage', 'Priority Support', 'Advanced Analytics']
    }
  ]

  return (
    <section className="py-32">
      <div className="mx-auto max-w-6xl px-6">
        <div className="grid gap-6 md:grid-cols-2">
          {plans.map(plan => (
            <Card key={plan.name}>
              <CardHeader>
                <CardTitle>{plan.name}</CardTitle>
                <span className="text-2xl font-semibold">{plan.price} / mo</span>
              </CardHeader>
              <CardContent>
                <ul className="space-y-3">
                  {plan.features.map(feature => (
                    <li key={feature} className="flex items-center gap-2">
                      <Check className="size-4" />
                      {feature}
                    </li>
                  ))}
                </ul>
              </CardContent>
              <CardFooter>
                <Button asChild className="w-full">
                  <a href="/signup">Get Started</a>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
```

--------------------------------

### Card Components Example (React/TSX)

Source: https://context7.com/tailark/blocks/llms.txt

Demonstrates the usage of flexible card components for creating content containers. These cards include headers, titles, descriptions, content areas, and footers, with options for buttons and styling.

```tsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@tailark/core/ui/card'
import { Button } from '@tailark/core/ui/button'

function FeatureCard() {
  return (
    <div className="grid gap-6 md:grid-cols-3">
      <Card>
        <CardHeader>
          <CardTitle>Fast Performance</CardTitle>
          <CardDescription>Lightning-fast load times</CardDescription>
        </CardHeader>
        <CardContent>
          <p>Built with modern web technologies for optimal performance and user experience.</p>
        </CardContent>
        <CardFooter>
          <Button variant="ghost">Learn more</Button>
        </CardFooter>
      </Card>

      <Card className="border-primary">
        <CardHeader>
          <CardTitle>Fully Responsive</CardTitle>
          <CardDescription>Works on all devices</CardDescription>
        </CardHeader>
        <CardContent>
          <p>Responsive design ensures your site looks great on mobile, tablet, and desktop.</p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Easy to Customize</CardTitle>
          <CardDescription>Tailwind-powered styling</CardDescription>
        </CardHeader>
        <CardContent>
          <p>Customize every aspect using Tailwind CSS utility classes.</p>
        </CardContent>
        <CardFooter className="flex gap-2">
          <Button size="sm">Docs</Button>
          <Button size="sm" variant="outline">Examples</Button>
        </CardFooter>
      </Card>
    </div>
  )
}
```

--------------------------------

### Tailark Button Component Examples

Source: https://context7.com/tailark/blocks/llms.txt

Illustrates the usage of the versatile Button component, which is built with Radix UI Slot and class-variance-authority for flexible styling. Examples include default, outline, ghost, destructive variants, and using the button as a child to render it as a link. It supports different sizes ('lg', 'sm').

```tsx
import { Button } from '@tailark/core/ui/button'
import Link from 'next/link'
import { ArrowRight } from 'lucide-react'

function Example() {
  return (
    <div className="flex gap-4">
      {/* Default button */}
      <Button size="lg">
        Click me
      </Button>

      {/* Button as child (renders as link) */}
      <Button asChild variant="outline" size="lg">
        <Link href="/signup">
          Get Started
          <ArrowRight />
        </Link>
      </Button>

      {/* Ghost button */}
      <Button variant="ghost">
        Cancel
      </Button>

      {/* Destructive button */}
      <Button variant="destructive" size="sm">
        Delete
      </Button>
    </div>
  )
}
```

--------------------------------

### Mist Hero Section Block (React/TSX)

Source: https://context7.com/tailark/blocks/llms.txt

Showcases the Mist Kit's minimalist hero section block with perspective transforms and gradient backgrounds. It includes examples of using the pre-built block and a custom implementation.

```tsx
import HeroSection from '@tailark/mist/blocks/hero-section/one'
import { Button } from '@mist/components/ui/button'
import { ChevronRight, CirclePlay } from 'lucide-react'

// Use the pre-built Mist hero
export default function MistHomePage() {
  return <HeroSection />
}

// Or create a custom implementation
function CustomMistHero() {
  return (
    <section className="bg-linear-to-b to-muted from-background">
      <div className="relative py-36">
        <div className="mx-auto max-w-5xl px-6">
          <h1 className="text-5xl font-medium md:text-6xl">
            Simple payments for startups
          </h1>
          <p className="text-muted-foreground my-8 text-xl">
            One tool that does it all. Search, generate, analyze, and chat.
          </p>

          <div className="flex items-center gap-3">
            <Button size="lg">
              Get Started
              <ChevronRight />
            </Button>
            <Button size="lg" variant="outline">
              <CirclePlay className="fill-primary/25 stroke-primary" />
              Watch video
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}
```

--------------------------------

### Add Mist Kit Theme using CSS Variables

Source: https://github.com/tailark/blocks/blob/main/packages/mist-kit/README.md

This CSS snippet defines the root variables for the Mist Kit theme. Copy and paste these into your global CSS file (e.g., `globals.css`) to enable the Mist Kit theme across your project. This ensures all components inherit the correct styling. No external dependencies are required.

```css
:root {
    --radius: 0.625rem;
    --background: var(--color-white);
    --foreground: var(--color-zinc-950);
    --card: var(--color-white);
    --card-foreground: var(--color-zinc-950);
    --popover: var(--color-white);
    --popover-foreground: var(--color-zinc-950);
    --primary: var(--color-indigo-500);
    --primary-foreground: var(--color-white);
    --secondary: var(--color-indigo-100);
    --secondary-foreground: var(--color-indigo-600);
    --muted: var(--color-zinc-100);
    --muted-foreground: var(--color-zinc-600);
    --accent: var(--color-zinc-700);
    --accent-foreground: var(--color-white);
    --destructive: var(--color-red-600);
    --destructive-foreground: var(--color-white);
    --border: var(--color-zinc-200);
    --input: var(--color-zinc-200);
    --ring: var(--color-indigo-500);
    --chart-1: var(--color-blue-500);
    --chart-2: var(--color-indigo-500);
    --chart-3: var(--color-purple-500);
    --chart-4: var(--color-cyan-400);
    --chart-5: var(--color-red-500);
}

```

--------------------------------

### Retrieve Design Kits (Server & Client)

Source: https://context7.com/tailark/blocks/llms.txt

Demonstrates how to fetch available design kits ('Dusk' and 'Mist') using server-side and client-side functions. The server-side function 'getKits' can access the file system, while 'getClientKits' is optimized for client-side rendering. Both functions return an array of Kit objects, each with an 'id' and 'name'.

```typescript
import { getKits, getClientKits, type Kit, type Kits } from '@tailark/www/lib/get-kits'

// Server-side: Get all available kits
async function ServerComponent() {
  const kits = await getKits()
  // Returns: [{ id: 'dusk-ki', name: 'Dusk' }, { id: 'mist-kit', name: 'Mist' }]

  return (
    <div>
      {kits.map(kit => (
        <div key={kit.id}>{kit.name}</div>
      ))}
    </div>
  )
}

// Client-side: Get kits without file system operations
function ClientComponent() {
  const kits = getClientKits()
  // Returns: [{ id: 'dusk-kit', name: 'Dusk' }, { id: 'mist-kit', name: 'Mist' }]

  return (
    <select>
      {kits.map(kit => (
        <option key={kit.id} value={kit.id}>{kit.name}</option>
      ))}
    </select>
  )
}
```

--------------------------------

### Card Component Implementation with Variants (TypeScript/React)

Source: https://github.com/tailark/blocks/blob/main/packages/mist-kit/README.md

Provides the complete TypeScript and React implementation for the Card component and its sub-components (Header, Title, Description, Content, Footer). It utilizes `class-variance-authority` (cva) for variant management and `clsx` (aliased as `cn`) for conditional class merging.

```tsx
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const cardVariants = cva('text-card-foreground rounded-xl', {
    variants: {
        variant: {
            default: 'bg-card border shadow border-transparent ring-1 ring-foreground/5',
            soft: 'bg-foreground/5',
            mixed: 'bg-foreground/5 border border-foreground.5',
        },
    },
    defaultVariants: {
        variant: 'default',
    },
})

export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {}

const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, variant, ...props }, ref) => (
    <div
        ref={ref}
        className={cn(cardVariants({ variant, className }))}
        {...props}
    />
))
Card.displayName = 'Card'

const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
    <div
        ref={ref}
        className={cn('flex flex-col space-y-1.5 p-6', className)}
        {...props}
    />
))
CardHeader.displayName = 'CardHeader'

const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
    <div
        ref={ref}
        className={cn('font-semibold leading-none tracking-tight', className)}
        {...props}
    />
))
CardTitle.displayName = 'CardTitle'

const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
    <div
        ref={ref}
        className={cn('text-muted-foreground text-sm', className)}
        {...props}
    />
))
CardDescription.displayName = 'CardDescription'

const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
    <div
        ref={ref}
        className={cn('p-6 pt-0', className)}
        {...props}
    />
))
CardContent.displayName = 'CardContent'

const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
    <div
        ref={ref}
        className={cn('flex items-center p-6 pt-0', className)}
        {...props}
    />
))
CardFooter.displayName = 'CardFooter'

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
```

--------------------------------

### Card Component Usage with Soft and Mixed Variants

Source: https://github.com/tailark/blocks/blob/main/packages/mist-kit/README.md

Demonstrates how to use the new 'soft' and 'mixed' variants of the Card component in a React application. This shows the JSX structure for applying these variants.

```tsx
<Card variant="soft">
  <CardHeader>Soft Card</CardHeader>
  <CardContent>...</CardContent>
</Card>

<Card variant="mixed">
  <CardHeader>Mixed Card</CardHeader>
  <CardContent>...</CardContent>
</Card>
```

--------------------------------

### Hero Section Block Integration (React/JSX)

Source: https://context7.com/tailark/blocks/llms.txt

This snippet shows how to integrate the pre-built HeroSection component from the Dusk Kit. The HeroSection component is a comprehensive UI element that includes animated navigation, background effects, text animations, staggered button animations, image showcases, and a logo cloud.

```tsx
import HeroSection from '@tailark/dusk/blocks/hero-section/one'

export default function HomePage() {
  // The hero section includes:
  // - Animated header navigation
  // - Gradient background effects
  // - TextEffect animations for headings
  // - AnimatedGroup for staggered button animations
  // - Image showcase with mask effects
  // - Logo cloud section
  return <HeroSection />
}
```

--------------------------------

### Utility Functions for Class Names and Naming (TypeScript)

Source: https://context7.com/tailark/blocks/llms.txt

This snippet showcases utility functions for common development tasks. `cn` merges Tailwind CSS class names with conflict resolution, `titleToNumber` converts string representations of numbers (like 'three') into integers, and `formatComponentName` generates PascalCase component names from category and variant strings.

```typescript
import { cn, titleToNumber, formatComponentName } from '@tailark/www/lib/utils'

// Merge Tailwind classes with conflict resolution
const buttonClasses = cn(
  'px-4 py-2 rounded',
  'bg-blue-500 hover:bg-blue-600',
  someCondition && 'bg-red-500' // Conditionally override
)
// Result: 'px-4 py-2 rounded bg-red-500 hover:bg-blue-600' (if someCondition is true)

// Convert string numbers to integers
const variantNumber = titleToNumber('three') // Returns: 3
const index = titleToNumber('twenty') // Returns: 20

// Format component names from category and variant
const componentName = formatComponentName('hero-section', 'one')
// Returns: 'HeroSectionOne'

const formattedName = formatComponentName('call-to-action', 'three')
// Returns: 'CallToActionThree'

```

--------------------------------

### Implement Neutral Button Variant in React

Source: https://github.com/tailark/blocks/blob/main/packages/mist-kit/README.md

This TypeScript and React code defines a new 'neutral' variant for the Button component. It uses `class-variance-authority` (cva) and `tailwind-merge` (cn) for utility-first CSS class generation. The 'neutral' variant applies a `bg-foreground` and `text-background` style, offering a minimal look. Requires React, `@radix-ui/react-slot`, `class-variance-authority`, and utility functions from '@/lib/utils'.

```tsx
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva('cursor-pointer font-medium inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
    variants: {
        variant: {
            default: 'bg-primary text-primary-foreground hover:brightness-95',
            neutral: 'bg-foreground text-background hover:brightness-95',
            destructive: 'bg-destructive text-destructive-foreground shadow-md hover:bg-destructive/90',
            outline: 'shadow-sm text-foreground shadow-black/15 border border-transparent bg-background ring-1 ring-foreground/10 duration-200 hover:bg-muted/50',
            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
            ghost: 'hover:bg-foreground/5 text-foreground/75 hover:text-foreground',
            link: 'text-primary underline-offset-4 hover:underline',
        },
        size: {
            default: 'h-9 px-4 py-2 rounded-md',
            sm: 'h-8 px-3 rounded-full text-sm',
            lg: 'h-11 px-6 font-medium text-base',
            icon: 'size-9',
        },
    },
    defaultVariants: {
        variant: 'default',
        size: 'sm',
    },
})

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
    asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button'
    return (
        <Comp
            className={cn(buttonVariants({ variant, size, className }))}
            ref={ref}
            {...props}
        />
    )
})
Button.displayName = 'Button'

export { Button, buttonVariants }

```

--------------------------------

### Animated Text Effect Component with Presets (React/JSX)

Source: https://context7.com/tailark/blocks/llms.txt

The TextEffect component allows for various animated typography effects. It supports preset animations like 'fade-in-blur' and 'slide', with options to control animation per character, word, or line. Custom animation variants can also be defined using Framer Motion syntax.

```tsx
import { TextEffect } from '@tailark/core/motion-primitives/text-effect'

function AnimatedHero() {
  return (
    <div className="text-center">
      {/* Fade-in blur effect with character animation */}
      <TextEffect
        preset="fade-in-blur"
        per="char"
        speedSegment={0.5}
        speedReveal={1.2}
        delay={0.3}
        as="h1"
        className="text-5xl font-bold"
      >
        Welcome to Tailark
      </TextEffect>

      {/* Line-by-line fade-in effect */}
      <TextEffect
        per="line"
        preset="slide"
        delay={0.8}
        as="p"
        className="mt-4 text-lg"
        onAnimationComplete={() => console.log('Animation done')}
      >
        Build amazing websites
        with pre-built components
      </TextEffect>

      {/* Custom variants */}
      <TextEffect
        per="word"
        variants={{
          container: {
            visible: {
              transition: { staggerChildren: 0.1 }
            }
          },
          item: {
            hidden: { opacity: 0, scale: 0.5 },
            visible: { opacity: 1, scale: 1 }
          }
        }}
        className="text-xl"
      >
        Custom animation effect
      </TextEffect>
    </div>
  )
}
```
Tokens:
Raw