├── .eslintrc.json ├── .github └── ISSUE_TEMPLATE │ └── feature_request.md ├── .gitignore ├── .prettierignore ├── LICENSE ├── README.md ├── __registry__ └── index.tsx ├── app ├── (home) │ ├── layout.client.tsx │ ├── layout.tsx │ ├── page.client.tsx │ └── page.tsx ├── api │ └── search │ │ └── route.ts ├── docs │ ├── [[...slug]] │ │ └── page.tsx │ └── layout.tsx ├── favicon.ico ├── global.css └── layout.tsx ├── cli.json ├── components.json ├── components ├── code-block-wrapper.tsx ├── codeblock.tsx ├── component-install.tsx ├── component-preview.tsx ├── component-source.tsx ├── docs │ ├── navbar.tsx │ └── sidebar.tsx ├── layout │ ├── language-toggle.tsx │ ├── root-toggle.tsx │ ├── search-toggle.tsx │ └── theme-toggle.tsx ├── mdx-components.tsx ├── notebook.client.tsx ├── notebook.tsx └── ui │ ├── avatar.tsx │ ├── breadcrumb.tsx │ ├── button.tsx │ ├── card.tsx │ ├── collapsible.tsx │ ├── dropdown-menu.tsx │ ├── icon.tsx │ ├── input.tsx │ ├── popover.tsx │ ├── scroll-area.tsx │ ├── separator.tsx │ ├── sheet.tsx │ ├── sidebar.tsx │ ├── skeleton.tsx │ ├── sonner.tsx │ └── tooltip.tsx ├── content └── docs │ ├── components │ ├── adaptive-container.mdx │ ├── colored-label.mdx │ ├── detail-panel.mdx │ ├── dropdown-menus │ │ ├── 00.mdx │ │ └── meta.json │ ├── icon-hover-button.mdx │ ├── image-carousel.mdx │ ├── select-filter.mdx │ └── tabs │ │ ├── 00.mdx │ │ ├── 01.mdx │ │ ├── focus-tabs.mdx │ │ └── vercel-tabs.mdx │ ├── index.mdx │ ├── installation.mdx │ └── meta.json ├── hooks └── use-mobile.tsx ├── lib ├── cn.ts ├── fonts.ts ├── get-sidebar-tabs.tsx ├── is-active.ts ├── rehype-component.ts ├── source.ts ├── use-copy-button.ts └── utils.ts ├── next.config.mjs ├── package.json ├── pnpm-lock.yaml ├── postcss.config.js ├── prettier.config.cjs ├── public ├── logo.png └── r │ ├── colors │ ├── gray.json │ ├── index.json │ ├── neutral.json │ ├── slate.json │ ├── stone.json │ └── zinc.json │ ├── index.json │ ├── styles │ ├── default │ │ ├── adaptive-container-demo.json │ │ ├── adaptive-container.json │ │ ├── colored-label.json │ │ ├── context.json │ │ ├── detail-panel.json │ │ ├── dropdown-menu-00-demo.json │ │ ├── dropdown-menu-00-variant.json │ │ ├── dropdown-menu-00.json │ │ ├── dynamic-container.json │ │ ├── focus-tabs-demo.json │ │ ├── focus-tabs-variant.json │ │ ├── focus-tabs.json │ │ ├── icon-hover-button-demo.json │ │ ├── icon-hover-button-destructive.json │ │ ├── icon-hover-button-ghost.json │ │ ├── icon-hover-button-link.json │ │ ├── icon-hover-button-outline.json │ │ ├── icon-hover-button-primary.json │ │ ├── icon-hover-button-secondary.json │ │ ├── icon-hover-button.json │ │ ├── image-carousel.json │ │ ├── index.json │ │ ├── select-filter.json │ │ ├── steps-00-demo.json │ │ ├── steps-00.json │ │ ├── steps-demo.json │ │ ├── steps.json │ │ ├── tabs-00.json │ │ ├── tabs-01.json │ │ ├── use-attribute-observer.json │ │ ├── use-mutation-observer.json │ │ ├── utils.json │ │ └── vercel-tabs.json │ └── index.json │ ├── themes.css │ └── themes │ ├── gray.json │ ├── neutral.json │ ├── slate.json │ ├── stone.json │ └── zinc.json ├── registry ├── default │ ├── annui │ │ ├── adaptive-container.tsx │ │ ├── colored-label.tsx │ │ ├── detail-panel.tsx │ │ ├── dropdown-menu-00.tsx │ │ ├── focus-tabs.tsx │ │ ├── icon-hover-button.tsx │ │ ├── image-carousel.tsx │ │ ├── select-filter.tsx │ │ ├── tabs-00.tsx │ │ ├── tabs-01.tsx │ │ └── vercel-tabs.tsx │ ├── example │ │ ├── adaptive-container-demo.tsx │ │ ├── colored-label-colors.tsx │ │ ├── colored-label-dark.tsx │ │ ├── colored-label-demo.tsx │ │ ├── colored-label-opacity.tsx │ │ ├── detail-panel-demo.tsx │ │ ├── detail-panel-sheet.tsx │ │ ├── dropdown-menu-00-demo.tsx │ │ ├── dropdown-menu-00-variant.tsx │ │ ├── focus-tabs-demo.tsx │ │ ├── focus-tabs-variant.tsx │ │ ├── icon-hover-button-both-side.tsx │ │ ├── icon-hover-button-demo.tsx │ │ ├── icon-hover-button-destructive.tsx │ │ ├── icon-hover-button-ghost.tsx │ │ ├── icon-hover-button-link.tsx │ │ ├── icon-hover-button-outline.tsx │ │ ├── icon-hover-button-primary.tsx │ │ ├── icon-hover-button-secondary.tsx │ │ ├── image-carousel-collapsible.tsx │ │ ├── image-carousel-demo.tsx │ │ ├── select-filter-demo.tsx │ │ ├── tabs-00-demo.tsx │ │ ├── tabs-00-hover-underline.tsx │ │ ├── tabs-00-underline.tsx │ │ ├── tabs-01-demo.tsx │ │ └── vercel-tabs-demo.tsx │ └── lib │ │ ├── context.ts │ │ └── utils.ts ├── index.tsx ├── registry-base-colors.ts ├── registry-blocks.ts ├── registry-colors.ts ├── registry-examples.ts ├── registry-hooks.ts ├── registry-lib.ts ├── registry-styles.ts ├── registry-themes.ts ├── registry-ui.ts └── schema.ts ├── scripts └── build-registry.mts ├── source.config.ts ├── tailwind.config.ts ├── tsconfig.json ├── tsconfig.scripts.json └── types └── unist.ts /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "next/core-web-vitals", 4 | "next/typescript" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: "[Feature]" 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the feature** 11 | A clear and concise description of what you want to happen. 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # deps 2 | /node_modules 3 | 4 | # generated content 5 | .contentlayer 6 | .content-collections 7 | .source 8 | 9 | # test & build 10 | /coverage 11 | /.next/ 12 | /out/ 13 | /build 14 | *.tsbuildinfo 15 | 16 | # misc 17 | .DS_Store 18 | *.pem 19 | /.pnp 20 | .pnp.js 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # others 26 | .env*.local 27 | .vercel 28 | next-env.d.ts 29 | 30 | # IDE - IntelliJ IDEA 31 | .idea 32 | *.iml 33 | *.iws 34 | *.ipr -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | .next 4 | build 5 | .source 6 | __registry__/index.tsx -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 AnnUI Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AnnUI 2 | 3 | AnnUI is a collection of re-usable components that you can copy and paste into your web apps. 4 | 5 | ## ✨ Features 6 | 7 | - 🎨 **Highly Customizable** - Inherits shadcn/ui's design philosophy while retaining Radix UI's powerful declarative component design 8 | - 🚀 **Great DX** - Declarative API design, reduced boilerplate code, improved development efficiency 9 | - ♿ **Accessibility** - Built on Radix UI's accessibility support 10 | - 🎭 **Beautiful Animations** - Thoughtfully designed animations providing intuitive visual feedback 11 | - 📦 **Easy to Use** - Quick component installation via shadcn CLI 12 | - 🎯 **TypeScript Support** - Complete TypeScript type definitions 13 | 14 | ## 🚀 Quick Start 15 | 16 | Install components quickly using the CLI tool: 17 | 18 | ```bash 19 | npx shadcn@latest add 20 | ``` 21 | 22 | For example, install the button component: 23 | 24 | ```bash 25 | npx shadcn@latest add button 26 | ``` 27 | 28 | ## 📖 Documentation 29 | 30 | Visit [annui.org](https://annui.org) for complete documentation. 31 | 32 | ## 💖 Credits 33 | 34 | AnnUI is heavily inspired by these excellent projects: 35 | 36 | - [shadcn/ui](https://ui.shadcn.com) 37 | - [Radix UI](https://www.radix-ui.com) 38 | - [MagicUI](https://magicui.design) 39 | 40 | ## 📄 License 41 | 42 | MIT © [AnnUI](LICENSE) 43 | -------------------------------------------------------------------------------- /app/(home)/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react" 2 | 3 | import { Footer, Header } from "./layout.client" 4 | 5 | export default function Layout({ 6 | children, 7 | }: { 8 | children: ReactNode 9 | }): React.ReactElement { 10 | return ( 11 | <> 12 |
13 |
{children}
14 |