---
name: "@styleui"
slug: "styleui"
description: "Expertly crafted layouts and components for your next big idea"
category: "Animated components"
tags: ["animation", "cards"]
framework: "react"
license: "MIT"
author: "heyfabrika"
website: "https://www.styleui.dev/"
github: "https://github.com/heyfabrika/styleui"
registry: "https://www.styleui.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 69
component_count: 4
generated_at: "2026-09-21T01:50:16.753Z"
---

# @styleui

Expertly crafted layouts and components for your next big idea

## Links

- Website: https://www.styleui.dev/
- GitHub: https://github.com/heyfabrika/styleui
- Registry JSON: https://www.styleui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/styleui
- This file: https://sh4dcn.vercel.app/md/styleui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.styleui.dev/r/registry.json
pnpm dlx shadcn@latest add https://www.styleui.dev/r/registry.json
bunx shadcn@latest add https://www.styleui.dev/r/registry.json
# clone the source repo
git clone https://github.com/heyfabrika/styleui.git
# fetch the raw registry index
curl -s https://www.styleui.dev/r/registry.json
```

## Components (4)

| name | type | description | install |
| --- | --- | --- | --- |
| animated-list | registry:component | An animated list component to showcase your content. | `npx shadcn@latest add https://www.styleui.dev/r/animated-list.json` |
| counter | registry:component | Animated counter that increases from 0 to a given value in a smooth animation. | `npx shadcn@latest add https://www.styleui.dev/r/counter.json` |
| notio | registry:block | A template block that includes a hero section, a features section, a pricing section, and a footer section. Ships StyleUI's Base UI primitives so the install m… | `npx shadcn@latest add https://www.styleui.dev/r/notio.json` |
| axis | registry:block | A template block that includes a hero section, feature highlights, tools, pricing, testimonials, and a footer section. Ships StyleUI's Button (Base UI) at comp… | `npx shadcn@latest add https://www.styleui.dev/r/axis.json` |

## For AI agents

```text
You are adding components from @styleui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/styleui.md) for the component list.
2. Fetch the machine-readable index: https://www.styleui.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: styleui).
```