StyleUI Components

Installation Instructions

To use these components, you need to install shadcn/ui. Follow these steps:

  1. Run npx shadcn@latest init in your project directory
  2. Follow the prompts to set up shadcn/ui
  3. Install necessary components using npx shadcn@latest add [component-name]

For more detailed instructions, visit the shadcn/ui documentation.

Buttons

Free

Animated Card

Free
Blog thumbnail

tsafi

an opensource ai blog site builder and CMS. launch a blog in minutes.

Floating Navbar

Free

Custom Video Player

Free

ChatGPT Carousel

Free
For Everyone
Let your imagination run wild
For Teams
A superassistant for every member of your team
For Enterprises
Empower your entire workforce with enterprise-grade AI
SearchGPT Prototype
SearchGPT is a prototype of new AI search features
Creative Writing
Unleash your storytelling potential
Code Assistant
Your AI pair programmer
Data Analysis
Uncover insights from your data
Language Learning
Master new languages with AI

Typography Demo

Free

Welcome to the Typography Demo

This is a paragraph demonstrating the base text style. It includes a link to nowhere to show anchor styling.

Lists

  • First item in an unordered list
  • Second item with a nested paragraph

    This paragraph is inside a list item, so it doesn't have a top margin.

  • Third item in the list

Blockquote

This is a blockquote. It's styled with a left border and italic text.

Code

Here's an example of inline code within a paragraph.

const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

greet('World');
Built using NextJS Starter Kit