mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
3e6252864b
Major Features: - Visual Page Builder with drag-and-drop interface - Shiki syntax highlighting integration via Fumadocs - 10 new blocks (5 newsletter variants + blog/photo/showcase blocks) - AI Voice Settings component - Comprehensive AI documentation Page Builder Features: - Filterable block library with 1/4 scale previews - Drag-to-reorder blocks in canvas - Viewport controls (Desktop/Tablet/Mobile) - Export to React TSX, copy code, download file - Deploy with Hanzo integration - Real-time block rendering with dynamic imports Syntax Highlighting: - GitHub Light/Dark themes for automatic mode support - Multi-color syntax highlighting - Copy-to-clipboard, line numbers, line highlighting - Zero client-side JavaScript (static HTML) New Blocks: - newsletter-01 through newsletter-05 (5 variants) - blog-cards-01 (Modern blog post card layout) - photo-grid-01 (Responsive photo gallery) - showcase-marketing-01, showcase-ecommerce-01, showcase-app-ui-01 New Components: - ai-voice-settings (Voice configuration interface) New Documentation: - AI Actions, Agents, Assistant, Code, Models, Vision, Voice guides - Newsletter blocks documentation Bug Fixes: - Fixed block display registry access pattern - Stubbed billing-dependent blocks with instructions - Replaced iframe previews with direct component rendering - Eliminated 404 errors in block previews Technical Improvements: - Enhanced MDX configuration with Shiki rehype plugin - Integrated Fumadocs CodeBlock wrapper - Improved registry build error handling - Updated component props for better type safety CI/CD: - Added automatic npm publishing on tag creation - Tests must pass before publishing - Automatic GitHub release creation - Documentation deployment to GitHub Pages CHANGELOG: - Created comprehensive CHANGELOG.md with v0.2.0 release notes
69 lines
2.4 KiB
Plaintext
69 lines
2.4 KiB
Plaintext
---
|
|
title: Introduction
|
|
description: Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
|
|
---
|
|
|
|
Hanzo UI is a comprehensive component library available in two ways:
|
|
|
|
1. **NPM Package**: Install `@hanzo/ui` as a dependency for instant access to all components
|
|
2. **Copy & Paste**: Use our CLI to add individual components to your project with full customization
|
|
|
|
**Why offer both approaches?**
|
|
|
|
The npm package provides convenience and automatic updates, while the CLI approach gives you complete ownership and control over the code. Choose what works best for your project.
|
|
|
|
_Build your applications faster with battle-tested, accessible components._
|
|
|
|
## FAQ
|
|
|
|
<Accordion type="multiple">
|
|
|
|
<AccordionItem value="faq-1">
|
|
<AccordionTrigger>
|
|
Why copy/paste and not packaged as a dependency?
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled.
|
|
|
|
Start with some sensible defaults, then customize the components to your needs.
|
|
|
|
One of the drawback of packaging the components in an npm package is that the style is coupled with the implementation. _The design of your components should be separate from their implementation._
|
|
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem value="faq-2">
|
|
<AccordionTrigger>Is it available as an npm package?</AccordionTrigger>
|
|
<AccordionContent>
|
|
Yes! Install `@hanzo/ui` from npm for the full component library, or use our
|
|
CLI (`npx @hanzo/ui add [component]`) to add individual components to your
|
|
project.
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem value="faq-3">
|
|
<AccordionTrigger>
|
|
Which frameworks are supported?
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
|
|
You can use any framework that supports React. [Next.js](https://ui.hanzo.ai/docs/installation/next), [Astro](https://ui.hanzo.ai/docs/installation/astro), [Remix](https://ui.hanzo.ai/docs/installation/remix), [Gatsby](https://ui.hanzo.ai/docs/installation/gatsby) etc.
|
|
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem value="faq-4">
|
|
<AccordionTrigger>
|
|
Can I use this in my project?
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
Yes. Free to use for personal and commercial projects. No attribution required.
|
|
|
|
But hey, let me know if you do. I'd love to see what you build.
|
|
|
|
</AccordionContent>
|
|
|
|
</AccordionItem>
|
|
|
|
</Accordion>
|