Prism UI 使用教程

徐含微

于 2025-04-03 10:21:25 发布

阅读量609

点赞数 5

本文链接：https://blog.youkuaiyun.com/gitblog_01077/article/details/146974582

版权

Prism UI 使用教程

Prismui A fully customizable component library built on top of shadcn/ui. Beautiful, accessible, and ready for production. 项目地址: https://gitcode.com/gh_mirrors/pr/Prismui

1. 项目介绍

Prism UI 是一个基于 shadcn/ui 的现代、可访问的 React 组件库。它通过扩展和增强 shadcn/ui 的组件，提供了额外的功能、预制的页面部分和复杂的 UI 模式，帮助开发者更快地创建出色的 Web 应用程序。Prism UI 支持 TypeScript，允许开发者自定义所有元素，以匹配他们的品牌风格。

2. 项目快速启动

要开始使用 Prism UI，请按照以下步骤操作：

首先，创建一个新的 Next.js 项目：

npx create-next-app@latest my-app --typescript --tailwind --app

然后，初始化 shadcn/ui：

npx shadcn@latest init

接下来，添加基础组件：

npx shadcn@latest add button

现在，您的项目已经准备好使用 Prism UI 组件了。

3. 应用案例和最佳实践

以下是使用 Prism UI 的几个应用案例和最佳实践：

Hero Sections（英雄区块）

英雄区块是网站着陆页上常见的部分，用于展示关键信息和召唤行动按钮。Prism UI 提供了多种英雄区块布局，您可以根据需要选择和定制。

import { Hero } from '@prismui/components';

function HomePage() {
  return (
    <Hero
      title="欢迎来到我们的网站"
      subtitle="发现更多精彩内容"
      buttonLabel="了解更多"
      buttonLink="/about"
    />
  );
}

Feature Grids（功能网格）

功能网格用于展示产品的特点。Prism UI 提供了灵活的网格布局，帮助您轻松展示产品特性。

import { FeatureGrid } from '@prismui/components';

function FeaturesPage() {
  return (
    <FeatureGrid>
      <Feature
        title="特性一"
        description="这是产品的一个重要特性。"
        icon={<Icon />}
      />
      <Feature
        title="特性二"
        description="这是产品的另一个重要特性。"
        icon={<Icon />}
      />
      // 更多特性...
    </FeatureGrid>
  );
}

Headers & Navigation（头部和导航）

Prism UI 提供了响应式的头部和导航系统，确保您的网站在不同设备上都能提供一致的用户体验。

import { Header } from '@prismui/components';

function MyApp() {
  return (
    <Header
      brand="品牌名称"
      navigation={[
        { title: '首页', href: '/' },
        { title: '关于我们', href: '/about' },
        // 更多导航项...
      ]}
    />
  );
}