DOCSEARCHbyAlgolia
Submit Docs

shadcn-ui-blocks

repository·master·Indexed 18 days ago

https://github.com/shadcnblocks/shadcn-ui-blocks

A collection of 55 free, ready-to-use marketing blocks built for React, Tailwind CSS, and shadcn/ui. The library is compatible with the official shadcn CLI and is built using Tailwind 4. It includes specialized components such as CodeBlock for syntax-highlighted code with Shiki, BackgroundLines for animated SVG effects, and various UI blocks like Changelog1.

Tokens
6.4K
Snippets
22
Records
27
Agent score
60%

What's inside shadcn-ui-blocks

  1. Overview of Free Shadcn UI Blocks

    master
    Free Shadcn UI Blocks is a collection of 55 marketing blocks designed for use with shadcn/ui, Tailwind CSS, and React. These blocks are ready-to-use components built as an expansion of the standard shadcn/ui library. You can browse the available blocks at the official website.

  2. Download blocks using the shadcn CLI

    master

    All blocks in this collection are compatible with the official shadcn CLI. You can use the CLI to download and integrate these blocks directly into your project. For detailed instructions on using the CLI with these blocks, refer to the official shadcnblocks CLI documentation.

    https://docs.shadcnblocks.com/blocks/shadcn-cli/

  3. Configure Tailwind 4 for Shadcn UI Blocks

    master

    The blocks are built using Tailwind 4. To ensure proper styling and compatibility in your project, you should refer to the provided Tailwind configuration/globals file to get started with your setup.

    https://www.shadcnblocks.com/tailwind/globals.css

  4. How ChartContainer and ChartConfig work together

    master

    The ChartContainer uses the provided config to generate dynamic CSS variables. For every key in your config, it creates a CSS variable named --color-{key}.

    This allows you to use these colors directly in your Recharts components (like Bar or Line) using the fill or stroke props with the var() function. The ChartStyle component handles the injection of these variables into the DOM, supporting both light and dark themes automatically.

    // 1. Define config with keys matching your data
const config = {
  desktop: {
    label: "Desktop Users",
    color: "#2563eb",
    theme: {
      dark: "#3b82f6"
    }
  }
} satisfies ChartConfig

// 2. Use the generated CSS variable in the chart
<ChartContainer config={config}>
  <BarChart data={data}>
    <Bar dataKey="desktop" fill="var(--color-desktop)" />
  </BarChart>
</ChartContainer>

  5. Automatic filename icon mapping

    master

    The CodeBlockFilename component automatically selects an icon from react-icons/si based on the filename provided. It uses pattern matching (including extensions and specific filenames) to determine the correct icon.

    Supported patterns include:

    • Extensions: *.ts, *.js, *.py, *.css, *.md, etc.
    • Specific files: Dockerfile, package.json, components.json, tailwind.config.*, next.config.*.
    • Wildcards: *.astro, *.module.css.

    You can override the automatic icon by passing an icon prop to CodeBlockFilename.

  6. Use the CodeBlock component

    master

    The CodeBlock component is a compound component designed to display syntax-highlighted code with support for multiple files, language switching, and copy-to-clipboard functionality. It uses a context-based pattern where the parent CodeBlock manages the state of the currently active language/file.

    Core Components:

    • CodeBlock: The root provider. Requires a data array of CodeBlockData objects.
    • CodeBlockHeader: A container for the top bar (tabs, selectors, copy button).
    • CodeBlockFiles: A container for file tabs/indicators.
    • CodeBlockFilename: Displays the icon and name of the currently active file.
    • CodeBlockSelect: A wrapper around Radix UI Select to switch between languages/files.
    • CodeBlockBody: The container for the actual code content.
    • CodeBlockItem: The individual code display element for a specific language/file. It handles syntax highlighting via Shiki.
    • CodeBlockCopyButton: A button that copies the code of the currently active item to the clipboard.
    import {
  CodeBlock,
  CodeBlockHeader,
  CodeBlockFiles,
  CodeBlockFilename,
  CodeBlockSelect,
  CodeBlockSelectTrigger,
  CodeBlockSelectValue,
  CodeBlockSelectContent,
  CodeBlockSelectItem,
  CodeBlockBody,
  CodeBlockItem,
  CodeBlockContent,
  CodeBlockCopyButton
} from '@/components/kibo-ui/code-block';

const data = [
  { language: 'typescript', filename: 'index.ts', code: 'const x = 1;' },
  { language: 'bash', filename: 'install.sh', code: 'npm install' },
];

export function MyCodeBlock() {
  return (
    <CodeBlock data={data} defaultValue="typescript">
      <CodeBlockHeader>
        <CodeBlockFiles>
          {data.map((item) => (
            <CodeBlockFilename key={item.filename}>{item.filename}</CodeBlockFilename>
          ))}
        </CodeBlockFiles>
        <CodeBlockSelect>
          <CodeBlockSelectTrigger>
            <CodeBlockSelectValue />
          </CodeBlockSelectTrigger>
          <CodeBlockSelectContent>
            {data.map((item) => (
              <CodeBlockSelectItem key={item.language} value={item.language}>
                {item.language}
              </CodeBlockSelectItem>
            ))}
          </CodeBlockSelectContent>
        </CodeBlockSelect>
        <CodeBlockCopyButton />
      </CodeBlockHeader>
      <CodeBlockBody>
        {data.map((item) => (
          <CodeBlockItem key={item.language} value={item.language}>
            <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>
          </CodeBlockItem>
        ))}
      </CodeBlockBody>
    </CodeBlock>
  );
}

  7. Use ChartContainer to wrap Recharts components

    master

    The ChartContainer component is the primary wrapper for your charts. It provides the ChartContext required by tooltips and legends and injects CSS variables for colors based on your config. It uses RechartsPrimitive.ResponsiveContainer internally to ensure the chart scales correctly.

    Props:

    • config: The ChartConfig object defining labels and colors.
    • id: An optional string to uniquely identify the chart (used for CSS scoping).
    • className: Additional classes for the container.
    • children: Recharts components (e.g., BarChart, LineChart) wrapped in a ResponsiveContainer context.
    <ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <Bar dataKey="desktop" fill="var(--color-desktop)" />
  </BarChart>
</ChartContainer>

  8. Use the Toaster component to display notifications

    master

    The Toaster component is the global container responsible for rendering toast notifications. It uses the useToast hook to listen for new toast events and renders them within a ToastProvider. To use it, you should include the <Toaster /> component at a high level in your application (e.g., in your root layout) so that notifications can appear regardless of the current view.

    Notifications are triggered via the useToast hook, which provides a toast() function to dispatch titles, descriptions, and actions.

    import { Toaster } from "@/components/ui/toaster"

// In your root layout or App component
export default function Layout({ children }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  )
}

// To trigger a toast in another component:
import { useToast } from "@/hooks/use-toast"

export function MyComponent() {
  const { toast } = useToast()

  return (
    <button onClick={() => toast({ 
      title: "Success", 
      description: "Your changes have been saved." 
    })}>
      Show Toast
    </button>
  )
}

  9. Use CodeBlockContent for syntax highlighting

    master

    The CodeBlockContent component renders the actual syntax-highlighted HTML using Shiki. It supports several configuration options to control how code is processed.

    Props:

    • children: The raw code string.
    • language: The BundledLanguage to use for highlighting.
    • themes: An object defining light and dark themes (defaults to github-light and github-dark-default).
    • syntaxHighlighting: Boolean to enable/disable highlighting (defaults to true). If false, it renders a fallback <pre><code> block.

    Note: This component uses dangerouslySetInnerHTML to inject the HTML generated by Shiki.

    <CodeBlockContent 
  language="typescript" 
  themes={{ light: 'github-light', dark: 'github-dark' }}
>
  const hello = 'world';
</CodeBlockContent>

  10. Configure MagicCardProps

    master

    The MagicCard component accepts the following props to customize the hover effect:

    PropTypeDefaultDescription
    childrenReact.ReactNode(required)The content to be rendered inside the card.
    gradientSizenumber200The radius of the radial gradient in pixels.
    gradientColorstring#262626The color used for the radial gradient center.
    gradientOpacitynumber0.8The opacity of the gradient effect.
    gradientFromstring#9E7AFFThe starting color of the gradient transition.
    gradientTostring#FE8BBBThe ending color of the gradient transition.
    classNamestring(none)Additional CSS classes for the container div.
    ...propsReact.HTMLAttributes<HTMLDivElement>(none)All other standard HTML div attributes.

  11. Use CodeBlockCopyButton for clipboard actions

    master

    The CodeBlockCopyButton provides a pre-configured button to copy the code of the currently active item in a CodeBlock context to the user's clipboard.

    Props:

    • asChild: If true, the button will merge its functionality into the provided child element (useful for custom button components).
    • onCopy: Callback function triggered when the copy is successful.
    • onError: Callback function triggered if the copy fails.
    • timeout: Duration in milliseconds to show the 'copied' state before reverting to the default icon (defaults to 2000).
    • className: Standard CSS class names.
    <CodeBlockCopyButton 
  onCopy={() => console.log('Copied!')} 
  timeout={3000}
/>

  12. Configure Changelog1Props

    master

    The Changelog1 component accepts the following props:

    PropTypeDefaultDescription
    titlestring"Changelog"The main heading for the section
    descriptionstring"Get the latest updates..."The sub-heading text
    entriesChangelogEntry[]defaultEntriesAn array of version update objects
    classNamestringundefinedAdditional CSS classes for the container