Building with npui Examples

Learn how to create and contribute your own interactive examples using npui components.

What are npui Examples?

npui examples are practical demonstrations of how to combine and utilize various npui components to build real-world UI patterns. They showcase best practices, common use cases, and inspire new ideas for your projects.

How to Create Your Own Example

Creating an example is straightforward. You simply combine existing npui components (or even custom ones you've built on top of npui) to form a functional and visually appealing UI snippet.

Example Structure

A basic structure for an npui example component.

my-custom-example.tsx

1import { Button } from "@/components/ui/button";
2import { Card } from "@/components/ui/card";
3
4export function MyCustomExample() {
5  return (
6    <Card className="p-6 max-w-md mx-auto">
7      <h3 className="text-xl font-semibold mb-4">Example Card</h3>
8      <p className="text-npui-muted-foreground mb-6">
9        This is a custom example combining npui components.
10      </p>
11      <Button>Action Button</Button>
12    </Card>
13  );
14}

Remember to import the necessary components from `@/components/ui` and wrap your example in a functional React component.

Contribute Your Examples

We encourage the community to contribute their own creative examples! If you've built something cool with npui and want to share it, follow these steps:

Fork the npui GitHub repository.
Create a new branch for your example.
Add your example component file(s) to the `examples` directory.
Update the `app/examples/page.tsx` to include a link/preview to your new example.
Submit a pull request with a clear description of your example.

Suggest or Contribute an Example