├── tsconfig.json
├── apps
└── web
│ ├── content
│ └── docs
│ │ ├── meta.json
│ │ ├── motion
│ │ └── meta.json
│ │ └── ui
│ │ ├── meta.json
│ │ └── props.ts
│ ├── app
│ ├── favicon.ico
│ ├── opengraph-image.png
│ ├── (home)
│ │ ├── page.tsx
│ │ ├── layout.tsx
│ │ └── blocks
│ │ │ └── page.tsx
│ ├── api
│ │ └── search
│ │ │ └── route.ts
│ ├── blocks
│ │ └── preview
│ │ │ └── [blockId]
│ │ │ └── page.tsx
│ └── sitemap.ts
│ ├── public
│ ├── banner.png
│ ├── images
│ │ ├── 10x-deng.png
│ │ ├── brush-line.png
│ │ ├── currents-evangelion.jpg
│ │ └── lines-top.svg
│ ├── r
│ │ ├── utils.json
│ │ ├── badge-demo.json
│ │ ├── badge-lg.json
│ │ ├── badge-sm.json
│ │ ├── toggle-demo.json
│ │ ├── button-demo.json
│ │ ├── button-lg.json
│ │ ├── button-sm.json
│ │ ├── slider-demo.json
│ │ ├── button-xl.json
│ │ ├── button-xs.json
│ │ ├── button-link.json
│ │ ├── badge-info.json
│ │ ├── button-ghost.json
│ │ ├── label.json
│ │ ├── meter-simple.json
│ │ ├── badge-outline.json
│ │ ├── badge-error.json
│ │ ├── badge-secondary.json
│ │ ├── input-lg.json
│ │ ├── input-sm.json
│ │ ├── toggle-outline.json
│ │ ├── input-file.json
│ │ ├── badge-success.json
│ │ ├── badge-warning.json
│ │ ├── textarea-demo.json
│ │ ├── toggle-lg.json
│ │ ├── toggle-sm.json
│ │ ├── button-disabled.json
│ │ ├── button-secondary.json
│ │ ├── slider-range.json
│ │ ├── textarea-lg.json
│ │ ├── textarea-sm.json
│ │ ├── input-demo.json
│ │ ├── badge-with-link.json
│ │ ├── slider-vertical.json
│ │ ├── input-disabled.json
│ │ ├── badge-destructive.json
│ │ ├── button-icon.json
│ │ ├── textarea-disabled.json
│ │ ├── toggle-disabled.json
│ │ ├── button-with-link.json
│ │ ├── avatar-fallback.json
│ │ ├── button-icon-lg.json
│ │ ├── button-icon-sm.json
│ │ ├── form.json
│ │ ├── button-destructive-outline.json
│ │ ├── button-with-icon.json
│ │ ├── use-debounce.json
│ │ ├── badge-with-icon.json
│ │ ├── toggle-with-icon.json
│ │ ├── switch-demo.json
│ │ ├── checkbox-demo.json
│ │ ├── alert-demo.json
│ │ ├── button-loading.json
│ │ ├── checkbox-group.json
│ │ ├── switch-disabled.json
│ │ ├── checkbox-disabled.json
│ │ ├── field-switch.json
│ │ ├── avatar-demo.json
│ │ ├── alert-with-icon.json
│ │ ├── field-checkbox.json
│ │ ├── alert-info.json
│ │ ├── input-with-button.json
│ │ ├── tooltip-demo.json
│ │ ├── alert-error.json
│ │ ├── field-demo.json
│ │ ├── field-error.json
│ │ ├── meter-demo.json
│ │ ├── alert-success.json
│ │ ├── use-mobile.json
│ │ ├── alert-warning.json
│ │ ├── toast-demo.json
│ │ ├── button-outline.json
│ │ ├── menu-hover.json
│ │ ├── number-field-demo.json
│ │ ├── number-field-lg.json
│ │ ├── number-field-sm.json
│ │ ├── button-destructive.json
│ │ ├── field-disabled.json
│ │ ├── slider-with-label-value.json
│ │ ├── field-slider.json
│ │ ├── progress-demo.json
│ │ ├── field-required.json
│ │ ├── textarea-with-label.json
│ │ ├── toast-loading.json
│ │ ├── radio-group-demo.json
│ │ ├── input-with-label.json
│ │ ├── number-field-disabled.json
│ │ ├── number-field-with-range.json
│ │ ├── menu-checkbox.json
│ │ ├── menu-link.json
│ │ ├── meter-with-range.json
│ │ ├── separator.json
│ │ ├── menu-close-on-click.json
│ │ ├── progress-with-label-value.json
│ │ ├── number-field-with-scrub.json
│ │ ├── radio-group-disabled.json
│ │ ├── fieldset.json
│ │ ├── frame-demo.json
│ │ └── toggle-icon-group.json
│ └── vercel.svg
│ ├── postcss.config.js
│ ├── assets
│ └── fonts
│ │ ├── InterVariableFont.woff2
│ │ ├── InterVariableItalic.woff2
│ │ └── Redaction_35-Regular.woff2
│ ├── registry
│ ├── components
│ │ ├── badge-demo.tsx
│ │ ├── badge-lg.tsx
│ │ ├── badge-sm.tsx
│ │ ├── button-demo.tsx
│ │ ├── meter-simple.tsx
│ │ ├── toggle-demo.tsx
│ │ ├── button-lg.tsx
│ │ ├── button-sm.tsx
│ │ ├── button-xl.tsx
│ │ ├── button-xs.tsx
│ │ ├── slider-demo.tsx
│ │ ├── badge-error.tsx
│ │ ├── badge-info.tsx
│ │ ├── button-link.tsx
│ │ ├── input-file.tsx
│ │ ├── slider-range.tsx
│ │ ├── badge-outline.tsx
│ │ ├── badge-success.tsx
│ │ ├── badge-warning.tsx
│ │ ├── button-disabled.tsx
│ │ ├── button-ghost.tsx
│ │ ├── badge-secondary.tsx
│ │ ├── button-outline.tsx
│ │ ├── badge-destructive.tsx
│ │ ├── badge-number.tsx
│ │ ├── input-demo.tsx
│ │ ├── button-destructive.tsx
│ │ ├── button-secondary.tsx
│ │ ├── slider-vertical.tsx
│ │ ├── textarea-demo.tsx
│ │ ├── toggle-outline.tsx
│ │ ├── input-lg.tsx
│ │ ├── input-sm.tsx
│ │ ├── textarea-lg.tsx
│ │ ├── textarea-sm.tsx
│ │ ├── input-disabled.tsx
│ │ ├── textarea-disabled.tsx
│ │ ├── button-destructive-outline.tsx
│ │ ├── badge-with-link.tsx
│ │ ├── toggle-lg.tsx
│ │ ├── toggle-sm.tsx
│ │ ├── button-with-link.tsx
│ │ ├── toggle-disabled.tsx
│ │ ├── avatar-fallback.tsx
│ │ ├── button-icon.tsx
│ │ ├── button-icon-lg.tsx
│ │ ├── button-icon-sm.tsx
│ │ ├── switch-demo.tsx
│ │ ├── button-with-icon.tsx
│ │ ├── switch-disabled.tsx
│ │ ├── badge-with-icon.tsx
│ │ ├── checkbox-demo.tsx
│ │ ├── toggle-with-icon.tsx
│ │ ├── button-loading.tsx
│ │ ├── checkbox-disabled.tsx
│ │ ├── field-switch.tsx
│ │ ├── field-checkbox.tsx
│ │ ├── alert-demo.tsx
│ │ ├── input-with-button.tsx
│ │ ├── avatar-demo.tsx
│ │ ├── field-demo.tsx
│ │ ├── tooltip-demo.tsx
│ │ ├── field-error.tsx
│ │ ├── alert-with-icon.tsx
│ │ ├── alert-info.tsx
│ │ ├── field-slider.tsx
│ │ ├── alert-error.tsx
│ │ ├── slider-with-label-value.tsx
│ │ ├── textarea-with-label.tsx
│ │ ├── alert-success.tsx
│ │ ├── field-disabled.tsx
│ │ ├── alert-warning.tsx
│ │ ├── menu-hover.tsx
│ │ ├── number-field-demo.tsx
│ │ ├── meter-demo.tsx
│ │ ├── toast-demo.tsx
│ │ ├── field-required.tsx
│ │ ├── number-field-lg.tsx
│ │ ├── number-field-sm.tsx
│ │ ├── radio-group-demo.tsx
│ │ ├── number-field-disabled.tsx
│ │ ├── input-with-label.tsx
│ │ ├── number-field-with-range.tsx
│ │ ├── radio-group-disabled.tsx
│ │ ├── toast-loading.tsx
│ │ ├── menu-close-on-click.tsx
│ │ ├── progress-demo.tsx
│ │ ├── menu-checkbox.tsx
│ │ ├── menu-link.tsx
│ │ ├── progress-with-label-value.tsx
│ │ ├── spring-demo.tsx
│ │ ├── number-field-with-scrub.tsx
│ │ ├── number-field-with-formatted-value.tsx
│ │ ├── meter-with-formatted-value.tsx
│ │ ├── meter-with-range.tsx
│ │ ├── toggle-icon-group.tsx
│ │ ├── skeleton-only.tsx
│ │ ├── toggle-group-demo.tsx
│ │ ├── toggle-group-lg.tsx
│ │ ├── toggle-group-sm.tsx
│ │ ├── scroll-area-demo.tsx
│ │ ├── toggle-group-disabled.tsx
│ │ ├── toggle-group-multiple.tsx
│ │ ├── checkbox-group-demo.tsx
│ │ ├── frame-demo.tsx
│ │ ├── group-with-input.tsx
│ │ ├── scroll-area-horizontal.tsx
│ │ ├── toggle-group-outline.tsx
│ │ ├── checkbox-group-disabled.tsx
│ │ ├── switch-with-description.tsx
│ │ ├── progress-with-formatted-value.tsx
│ │ ├── toggle-group-with-disabled-item.tsx
│ │ ├── field-textarea.tsx
│ │ ├── checkbox-card.tsx
│ │ ├── checkbox-with-description.tsx
│ │ ├── alert-with-icon-action.tsx
│ │ ├── menu-radio-group.tsx
│ │ ├── toggle-group-with-separator.tsx
│ │ ├── number-field-with-label.tsx
│ │ ├── select-lg.tsx
│ │ ├── select-sm.tsx
│ │ ├── group-demo.tsx
│ │ ├── field-number-field.tsx
│ │ ├── select-demo.tsx
│ │ ├── select-disabled.tsx
│ │ ├── switch-card.tsx
│ │ ├── menu-nested.tsx
│ │ ├── toggle-group-outline-with-separator.tsx
│ │ ├── select-without-alignment.tsx
│ │ ├── text-type-demo.tsx
│ │ ├── separator-demo.tsx
│ │ ├── menu-group-labels.tsx
│ │ ├── shared-menu-demo.tsx
│ │ ├── button-snap-effect.tsx
│ │ ├── tabs-demo.tsx
│ │ ├── toast-with-action.tsx
│ │ ├── number-field-with-step.tsx
│ │ ├── fieldset-demo.tsx
│ │ ├── tabs-vertical.tsx
│ │ ├── breadcrumb-custom-separator.tsx
│ │ ├── empty-demo.tsx
│ │ ├── radio-group-with-description.tsx
│ │ ├── field-validity.tsx
│ │ └── avatar-size.tsx
│ ├── lib
│ │ └── utils.ts
│ ├── blocks
│ │ ├── login-03
│ │ │ └── page.tsx
│ │ ├── login-04
│ │ │ └── page.tsx
│ │ └── login-05
│ │ │ └── page.tsx
│ ├── ui
│ │ ├── label.tsx
│ │ ├── form.tsx
│ │ ├── checkbox-group.tsx
│ │ ├── skeleton.tsx
│ │ ├── separator.tsx
│ │ └── fieldset.tsx
│ └── hooks
│ │ ├── use-debounce.ts
│ │ └── use-mobile.ts
│ ├── lib
│ ├── utils.ts
│ ├── source.ts
│ └── events.ts
│ ├── components
│ ├── landing
│ │ ├── card-context.ts
│ │ └── landing-hero.tsx
│ ├── cli-commands.tsx
│ └── code-tabs.tsx
│ ├── hooks
│ ├── use-config.ts
│ ├── use-media-query.ts
│ └── use-copy-to-clipboard.ts
│ ├── tsconfig.json
│ ├── next.config.ts
│ ├── components.json
│ ├── config
│ └── site.ts
│ └── types
│ └── component.ts
├── bun.lockb
├── packages
├── ui
│ ├── postcss.config.js
│ ├── src
│ │ ├── lib
│ │ │ └── utils.ts
│ │ ├── components
│ │ │ ├── skeleton.tsx
│ │ │ ├── collapsible.tsx
│ │ │ ├── references.tsx
│ │ │ ├── label.tsx
│ │ │ └── separator.tsx
│ │ ├── hooks
│ │ │ ├── use-mobile.ts
│ │ │ └── use-copy-to-clipboard.ts
│ │ └── index.tsx
│ └── tsconfig.json
└── tsconfig
│ ├── package.json
│ ├── react-library.json
│ ├── nextjs.json
│ └── base.json
├── turbo.json
├── package.json
└── .gitignore
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@uitopia/tsconfig/base.json"
3 | }
4 |
--------------------------------------------------------------------------------
/apps/web/content/docs/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages": ["ui", "motion"]
3 | }
4 |
--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cahyawibawa/ui-topia/HEAD/bun.lockb
--------------------------------------------------------------------------------
/apps/web/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cahyawibawa/ui-topia/HEAD/apps/web/app/favicon.ico
--------------------------------------------------------------------------------
/apps/web/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cahyawibawa/ui-topia/HEAD/apps/web/public/banner.png
--------------------------------------------------------------------------------
/apps/web/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | "@tailwindcss/postcss": {},
4 | },
5 | };
6 |
--------------------------------------------------------------------------------
/apps/web/app/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cahyawibawa/ui-topia/HEAD/apps/web/app/opengraph-image.png
--------------------------------------------------------------------------------
/packages/ui/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | "@tailwindcss/postcss": {},
4 | },
5 | };
6 |
--------------------------------------------------------------------------------
/apps/web/public/images/10x-deng.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cahyawibawa/ui-topia/HEAD/apps/web/public/images/10x-deng.png
--------------------------------------------------------------------------------
/apps/web/public/images/brush-line.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cahyawibawa/ui-topia/HEAD/apps/web/public/images/brush-line.png
--------------------------------------------------------------------------------
/apps/web/assets/fonts/InterVariableFont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cahyawibawa/ui-topia/HEAD/apps/web/assets/fonts/InterVariableFont.woff2
--------------------------------------------------------------------------------
/apps/web/public/images/currents-evangelion.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cahyawibawa/ui-topia/HEAD/apps/web/public/images/currents-evangelion.jpg
--------------------------------------------------------------------------------
/apps/web/assets/fonts/InterVariableItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cahyawibawa/ui-topia/HEAD/apps/web/assets/fonts/InterVariableItalic.woff2
--------------------------------------------------------------------------------
/apps/web/assets/fonts/Redaction_35-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cahyawibawa/ui-topia/HEAD/apps/web/assets/fonts/Redaction_35-Regular.woff2
--------------------------------------------------------------------------------
/apps/web/app/(home)/page.tsx:
--------------------------------------------------------------------------------
1 | import { LandingHero } from "@/components/landing/landing-hero";
2 |
3 | export default function Home() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/ui/badge";
2 |
3 | export default function BadgeDemo() {
4 | return Badge;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-lg.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/ui/badge";
2 |
3 | export default function BadgeLg() {
4 | return Badge;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-sm.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/ui/badge";
2 |
3 | export default function BadgeSm() {
4 | return Badge;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 |
3 | export default function ButtonDemo() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/meter-simple.tsx:
--------------------------------------------------------------------------------
1 | import { Meter } from "@/registry/ui/meter";
2 |
3 | export default function MeterSimpleDemo() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Toggle } from "@/registry/ui/toggle";
2 |
3 | export default function ToggleDemo() {
4 | return Toggle;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-lg.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 |
3 | export default function ButtonLg() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-sm.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 |
3 | export default function ButtonSm() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-xl.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 |
3 | export default function ButtonXl() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-xs.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 |
3 | export default function ButtonXs() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/slider-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Slider } from "@/registry/ui/slider";
2 |
3 | export default function SliderDemo() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-error.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/ui/badge";
2 |
3 | export default function BadgeError() {
4 | return Badge;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-info.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/ui/badge";
2 |
3 | export default function BadgeInfo() {
4 | return Badge;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/app/api/search/route.ts:
--------------------------------------------------------------------------------
1 | import { createFromSource } from "fumadocs-core/search/server";
2 | import { source } from "@/lib/source";
3 |
4 | export const { GET } = createFromSource(source);
5 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-link.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 |
3 | export default function ButtonLink() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/input-file.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/registry/ui/input";
2 |
3 | export default function InputFile() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/slider-range.tsx:
--------------------------------------------------------------------------------
1 | import { Slider } from "@/registry/ui/slider";
2 |
3 | export default function SliderDemo() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/app/(home)/layout.tsx:
--------------------------------------------------------------------------------
1 | import React, { type ReactNode } from "react";
2 |
3 | export default function Layout({ children }: { children: ReactNode }) {
4 | return
{children}
;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-outline.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/ui/badge";
2 |
3 | export default function BadgeOutline() {
4 | return Badge;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-success.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/ui/badge";
2 |
3 | export default function BadgeSuccess() {
4 | return Badge;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-warning.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/ui/badge";
2 |
3 | export default function BadgeWarning() {
4 | return Badge;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 |
3 | export default function ButtonDisabled() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-ghost.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 |
3 | export default function ButtonGhost() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-secondary.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/ui/badge";
2 |
3 | export default function BadgeSecondary() {
4 | return Badge;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-outline.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 |
3 | export default function ButtonOutline() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-destructive.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/ui/badge";
2 |
3 | export default function BadgeDestructive() {
4 | return Badge;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-number.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/ui/badge";
2 |
3 | export default function BadgeWithIcon() {
4 | return 7;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/input-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/registry/ui/input";
2 |
3 | export default function InputDemo() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-destructive.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 |
3 | export default function ButtonDestructive() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-secondary.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 |
3 | export default function ButtonSecondary() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/slider-vertical.tsx:
--------------------------------------------------------------------------------
1 | import { Slider } from "@/registry/ui/slider";
2 |
3 | export default function SliderVertical() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/textarea-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/ui/textarea";
2 |
3 | export default function TextareaDemo() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-outline.tsx:
--------------------------------------------------------------------------------
1 | import { Toggle } from "@/registry/ui/toggle";
2 |
3 | export default function ToggleOutline() {
4 | return Outline Toggle;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/packages/ui/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/apps/web/registry/components/input-lg.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/registry/ui/input";
2 |
3 | export default function InputLg() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/input-sm.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/registry/ui/input";
2 |
3 | export default function InputSm() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/textarea-lg.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/ui/textarea";
2 |
3 | export default function TextareaLg() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/textarea-sm.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/ui/textarea";
2 |
3 | export default function TextareaSm() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/input-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/registry/ui/input";
2 |
3 | export default function InputDisabled() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/textarea-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/ui/textarea";
2 |
3 | export default function TextareaDisabled() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/tsconfig/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@uitopia/tsconfig",
3 | "version": "1.0.0",
4 | "private": true,
5 | "files": [
6 | "base.json",
7 | "nextjs.json",
8 | "react-library.json"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-destructive-outline.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 |
3 | export default function ButtonDestructiveOutline() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-with-link.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | import { Badge } from "@/registry/ui/badge";
4 |
5 | export default function BadgeWithLink() {
6 | return }>Badge;
7 | }
8 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-lg.tsx:
--------------------------------------------------------------------------------
1 | import { Toggle } from "@/registry/ui/toggle";
2 |
3 | export default function ToggleLg() {
4 | return (
5 |
6 | Large
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-sm.tsx:
--------------------------------------------------------------------------------
1 | import { Toggle } from "@/registry/ui/toggle";
2 |
3 | export default function ToggleSm() {
4 | return (
5 |
6 | Small
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/apps/web/content/docs/motion/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Motion",
3 | "description": "A collection of Motion animations.",
4 | "root": true,
5 | "icon": "SquareM",
6 | "pages": ["---Introduction---", "index", "---Components---", "...components"]
7 | }
8 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-with-link.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | import { Button } from "@/registry/ui/button";
4 |
5 | export default function ButtonWithLink() {
6 | return }>Link;
7 | }
8 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Toggle } from "@/registry/ui/toggle";
2 |
3 | export default function ToggleDisabled() {
4 | return (
5 |
6 | Disabled
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/apps/web/registry/components/avatar-fallback.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarFallback } from "@/registry/ui/avatar";
2 |
3 | export default function AvatarFallbackDemo() {
4 | return (
5 |
6 | LT
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-icon.tsx:
--------------------------------------------------------------------------------
1 | import { PlusIcon } from "lucide-react";
2 |
3 | import { Button } from "@/registry/ui/button";
4 |
5 | export default function ButtonIcon() {
6 | return (
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-icon-lg.tsx:
--------------------------------------------------------------------------------
1 | import { PlusIcon } from "lucide-react";
2 |
3 | import { Button } from "@/registry/ui/button";
4 |
5 | export default function ButtonIconLg() {
6 | return (
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-icon-sm.tsx:
--------------------------------------------------------------------------------
1 | import { PlusIcon } from "lucide-react";
2 |
3 | import { Button } from "@/registry/ui/button";
4 |
5 | export default function ButtonIconSm() {
6 | return (
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/apps/web/registry/components/switch-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/ui/label";
2 | import { Switch } from "@/registry/ui/switch";
3 |
4 | export default function SwitchWithLabel() {
5 | return (
6 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-with-icon.tsx:
--------------------------------------------------------------------------------
1 | import { DownloadIcon } from "lucide-react";
2 |
3 | import { Button } from "@/registry/ui/button";
4 |
5 | export default function ButtonWithIcon() {
6 | return (
7 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/apps/web/registry/components/switch-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/ui/label";
2 | import { Switch } from "@/registry/ui/switch";
3 |
4 | export default function SwitchWithLabel() {
5 | return (
6 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/apps/web/registry/components/badge-with-icon.tsx:
--------------------------------------------------------------------------------
1 | import { CheckIcon } from "lucide-react";
2 |
3 | import { Badge } from "@/registry/ui/badge";
4 |
5 | export default function BadgeWithIcon() {
6 | return (
7 |
8 |
9 | Verified
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/apps/web/registry/components/checkbox-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/registry/ui/checkbox";
2 | import { Label } from "@/registry/ui/label";
3 |
4 | export default function CheckboxDemo() {
5 | return (
6 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/packages/tsconfig/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx",
7 | "target": "ES6",
8 | "moduleResolution": "bundler",
9 | "allowJs": true
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/apps/web/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
8 | export function absoluteUrl(path: string) {
9 | return `${process.env.NEXT_PUBLIC_APP_URL}${path}`;
10 | }
11 |
--------------------------------------------------------------------------------
/apps/web/content/docs/ui/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Base",
3 | "description": "A collection of Base UI Components.",
4 | "icon": "SquareAsterisk",
5 | "root": true,
6 | "pages": [
7 | "---Getting Started---",
8 | "index",
9 | "installation",
10 | "---Components---",
11 | "...components"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-with-icon.tsx:
--------------------------------------------------------------------------------
1 | import { BoldIcon } from "lucide-react";
2 |
3 | import { Toggle } from "@/registry/ui/toggle";
4 |
5 | export default function ToggleWithIcon() {
6 | return (
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/apps/web/content/docs/ui/props.ts:
--------------------------------------------------------------------------------
1 | import type { TextEffectProps } from "@/registry/ui/text-effect";
2 | import type { TextLoopProps } from "@/registry/ui/text-loop";
3 | import type { TextTypeProps } from "@/registry/ui/text-type";
4 |
5 | export type TextLoop = TextLoopProps;
6 | export type TextEffect = TextEffectProps;
7 | export type TextType = TextTypeProps;
8 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-loading.tsx:
--------------------------------------------------------------------------------
1 | import { LoaderCircleIcon } from "lucide-react";
2 |
3 | import { Button } from "@/registry/ui/button";
4 |
5 | export default function ButtonLoading() {
6 | return (
7 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/apps/web/registry/components/checkbox-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/registry/ui/checkbox";
2 | import { Label } from "@/registry/ui/label";
3 |
4 | export default function CheckboxDisabledDemo() {
5 | return (
6 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/packages/ui/src/components/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | function Skeleton({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes) {
7 | return (
8 |
12 | );
13 | }
14 |
15 | export { Skeleton };
16 |
--------------------------------------------------------------------------------
/apps/web/registry/components/field-switch.tsx:
--------------------------------------------------------------------------------
1 | import { Field, FieldLabel } from "@/registry/ui/field";
2 | import { Switch } from "@/registry/ui/switch";
3 |
4 | export default function FieldSwitchDemo() {
5 | return (
6 |
7 |
8 |
9 | Email notifications
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/packages/tsconfig/nextjs.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Next.js",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "plugins": [{ "name": "next" }],
7 | "module": "ESNext",
8 | "moduleResolution": "Bundler",
9 | "allowJs": true,
10 | "jsx": "preserve",
11 | "noEmit": true
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/apps/web/registry/blocks/login-03/page.tsx:
--------------------------------------------------------------------------------
1 | import { Login03 } from "@/registry/blocks/login-03/components/login-form";
2 |
3 | export default function Page() {
4 | return (
5 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/apps/web/registry/blocks/login-04/page.tsx:
--------------------------------------------------------------------------------
1 | import { Login04 } from "@/registry/blocks/login-04/components/login-form";
2 |
3 | export default function Page() {
4 | return (
5 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/apps/web/registry/blocks/login-05/page.tsx:
--------------------------------------------------------------------------------
1 | import { Login05 } from "@/registry/blocks/login-05/components/login-form";
2 |
3 | export default function Page() {
4 | return (
5 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/apps/web/registry/components/field-checkbox.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/registry/ui/checkbox";
2 | import { Field, FieldLabel } from "@/registry/ui/field";
3 |
4 | export default function FieldCheckboxDemo() {
5 | return (
6 |
7 |
8 |
9 | Accept terms and conditions
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/apps/web/registry/components/alert-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, AlertDescription, AlertTitle } from "@/registry/ui/alert";
2 |
3 | export default function AlertDemo() {
4 | return (
5 |
6 | Heads up!
7 |
8 | Describe what can be done about it here.
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/apps/web/registry/ui/label.tsx:
--------------------------------------------------------------------------------
1 | import type * as React from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | function Label({ className, ...props }: React.ComponentProps<"label">) {
6 | return (
7 |
12 | );
13 | }
14 |
15 | export { Label };
16 |
--------------------------------------------------------------------------------
/apps/web/registry/components/input-with-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 | import { Input } from "@/registry/ui/input";
3 |
4 | export default function InputWithButton() {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/apps/web/registry/components/avatar-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar";
2 |
3 | export default function AvatarDemo() {
4 | return (
5 |
6 |
10 | LT
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/apps/web/registry/ui/form.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Form as FormPrimitive } from "@base-ui-components/react/form";
4 |
5 | import { cn } from "@/lib/utils";
6 |
7 | function Form({ className, ...props }: FormPrimitive.Props) {
8 | return (
9 |
14 | );
15 | }
16 |
17 | export { Form };
18 |
--------------------------------------------------------------------------------
/apps/web/registry/components/field-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Field,
3 | FieldControl,
4 | FieldDescription,
5 | FieldLabel,
6 | } from "@/registry/ui/field";
7 |
8 | export default function FieldDemo() {
9 | return (
10 |
11 | Name
12 |
13 | Visible on your profile
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/apps/web/components/landing/card-context.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { createContext } from "react";
4 |
5 | type CardsContextType = {
6 | focusedCard: string | null;
7 | setFocusedCard: React.Dispatch>;
8 | };
9 |
10 | export const defaultFocusedCard = {
11 | focusedCard: null,
12 | setFocusedCard: () => {},
13 | };
14 |
15 | export const CardsContext = createContext(defaultFocusedCard);
16 |
--------------------------------------------------------------------------------
/apps/web/hooks/use-config.ts:
--------------------------------------------------------------------------------
1 | import { useAtom } from "jotai";
2 | import { atomWithStorage } from "jotai/utils";
3 |
4 | type Config = {
5 | packageManager: "npm" | "yarn" | "pnpm" | "bun";
6 | installationType: "cli" | "manual";
7 | };
8 |
9 | const configAtom = atomWithStorage("config", {
10 | packageManager: "pnpm",
11 | installationType: "cli",
12 | });
13 |
14 | export function useConfig() {
15 | return useAtom(configAtom);
16 | }
17 |
--------------------------------------------------------------------------------
/apps/web/registry/components/tooltip-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 | import { Tooltip, TooltipPopup, TooltipTrigger } from "@/registry/ui/tooltip";
3 |
4 | export default function TooltipDemo() {
5 | return (
6 |
7 | }>
8 | Hover me
9 |
10 | Helpful hint
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "ui": "tui",
4 | "tasks": {
5 | "build": {
6 | "dependsOn": ["^build"],
7 | "inputs": ["$TURBO_DEFAULT$", ".env*"],
8 | "outputs": ["dist/**", ".next/**", "!.next/cache/**", ".source/**"]
9 | },
10 | "lint": {
11 | "dependsOn": ["^lint"]
12 | },
13 | "dev": {
14 | "cache": false,
15 | "persistent": true
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/registry/components/field-error.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Field,
3 | FieldControl,
4 | FieldError,
5 | FieldLabel,
6 | } from "@/registry/ui/field";
7 |
8 | export default function FieldWithErrorDemo() {
9 | return (
10 |
11 | Email
12 |
13 | Please enter a valid email address.
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/apps/web/registry/components/alert-with-icon.tsx:
--------------------------------------------------------------------------------
1 | import { InfoIcon } from "lucide-react";
2 |
3 | import { Alert, AlertDescription, AlertTitle } from "@/registry/ui/alert";
4 |
5 | export default function AlertWithIcon() {
6 | return (
7 |
8 |
9 | Heads up!
10 |
11 | Describe what can be done about it here.
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/apps/web/registry/components/alert-info.tsx:
--------------------------------------------------------------------------------
1 | import { InfoIcon } from "lucide-react";
2 |
3 | import { Alert, AlertDescription, AlertTitle } from "@/registry/ui/alert";
4 |
5 | export default function AlertInfo() {
6 | return (
7 |
8 |
9 | Heads up!
10 |
11 | Describe what can be done about it here.
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/apps/web/registry/components/field-slider.tsx:
--------------------------------------------------------------------------------
1 | import { Field, FieldDescription, FieldLabel } from "@/registry/ui/field";
2 | import { Slider } from "@/registry/ui/slider";
3 |
4 | export default function FieldSelectDemo() {
5 | return (
6 |
7 | Country
8 |
9 | This is an optional field
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/apps/web/registry/components/alert-error.tsx:
--------------------------------------------------------------------------------
1 | import { CircleAlertIcon } from "lucide-react";
2 |
3 | import { Alert, AlertDescription, AlertTitle } from "@/registry/ui/alert";
4 |
5 | export default function AlertWarning() {
6 | return (
7 |
8 |
9 | Heads up!
10 |
11 | Describe what can be done about it here.
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/apps/web/registry/components/slider-with-label-value.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/ui/label";
2 | import { Slider, SliderValue } from "@/registry/ui/slider";
3 |
4 | export default function SliderWithLabelValue() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/apps/web/registry/components/textarea-with-label.tsx:
--------------------------------------------------------------------------------
1 | import { useId } from "react";
2 |
3 | import { Label } from "@/registry/ui/label";
4 | import { Textarea } from "@/registry/ui/textarea";
5 |
6 | export default function TextareaWithLabel() {
7 | const id = useId();
8 | return (
9 |
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/apps/web/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@uitopia/tsconfig/nextjs.json",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "paths": {
6 | "@/*": ["./*"],
7 | "@/uitopia/*": ["../../packages/ui/src/components/*"]
8 | },
9 | "plugins": [
10 | {
11 | "name": "next"
12 | }
13 | ],
14 | "target": "ES2017"
15 | },
16 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
17 | "exclude": ["node_modules"]
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/registry/components/alert-success.tsx:
--------------------------------------------------------------------------------
1 | import { CircleCheckIcon } from "lucide-react";
2 |
3 | import { Alert, AlertDescription, AlertTitle } from "@/registry/ui/alert";
4 |
5 | export default function AlertSuccess() {
6 | return (
7 |
8 |
9 | Heads up!
10 |
11 | Describe what can be done about it here.
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/apps/web/registry/components/field-disabled.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Field,
3 | FieldControl,
4 | FieldDescription,
5 | FieldLabel,
6 | } from "@/registry/ui/field";
7 |
8 | export default function FieldDisabledDemo() {
9 | return (
10 |
11 | Email
12 |
13 | This field is currently disabled.
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/apps/web/registry/ui/checkbox-group.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui-components/react/checkbox-group";
4 |
5 | import { cn } from "@/lib/utils";
6 |
7 | function CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props) {
8 | return (
9 |
13 | );
14 | }
15 |
16 | export { CheckboxGroup };
17 |
--------------------------------------------------------------------------------
/apps/web/registry/components/alert-warning.tsx:
--------------------------------------------------------------------------------
1 | import { TriangleAlertIcon } from "lucide-react";
2 |
3 | import { Alert, AlertDescription, AlertTitle } from "@/registry/ui/alert";
4 |
5 | export default function AlertWarning() {
6 | return (
7 |
8 |
9 | Heads up!
10 |
11 | Describe what can be done about it here.
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/apps/web/lib/source.ts:
--------------------------------------------------------------------------------
1 | import {
2 | type InferMetaType,
3 | type InferPageType,
4 | loader,
5 | } from "fumadocs-core/source";
6 | import { lucideIconsPlugin } from "fumadocs-core/source/lucide-icons";
7 | import { docs } from "@/.source";
8 |
9 | export const source = loader({
10 | baseUrl: "/docs",
11 | source: docs.toFumadocsSource(),
12 | plugins: [lucideIconsPlugin()],
13 | });
14 |
15 | export type Page = InferPageType;
16 | export type Meta = InferMetaType;
17 |
--------------------------------------------------------------------------------
/apps/web/registry/components/menu-hover.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 | import { Menu, MenuItem, MenuPopup, MenuTrigger } from "@/registry/ui/menu";
3 |
4 | export default function MenuHoverDemo() {
5 | return (
6 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/apps/web/registry/hooks/use-debounce.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | function useDebounce(value: T, delay = 500): T {
4 | const [debouncedValue, setDebouncedValue] = useState(value);
5 |
6 | useEffect(() => {
7 | const timer = setTimeout(() => {
8 | setDebouncedValue(value);
9 | }, delay);
10 |
11 | return () => {
12 | clearTimeout(timer);
13 | };
14 | }, [value, delay]);
15 |
16 | return debouncedValue;
17 | }
18 |
19 | export default useDebounce;
20 |
--------------------------------------------------------------------------------
/apps/web/app/(home)/blocks/page.tsx:
--------------------------------------------------------------------------------
1 | import { BlockDisplay } from "@/components/block-display";
2 |
3 | const FEATURED_BLOCKS = ["login-03", "login-05"];
4 |
5 | export default async function BlocksPage() {
6 | return (
7 |
8 | {FEATURED_BLOCKS.map((block) => (
9 |
13 |
14 |
15 | ))}
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/registry/components/number-field-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | NumberField,
3 | NumberFieldDecrement,
4 | NumberFieldGroup,
5 | NumberFieldIncrement,
6 | NumberFieldInput,
7 | } from "@/registry/ui/number-field";
8 |
9 | export default function NumberFieldDemo() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/packages/tsconfig/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "esModuleInterop": true,
6 | "incremental": false,
7 | "isolatedModules": true,
8 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
9 | "module": "ESNext",
10 | "moduleDetection": "force",
11 | "moduleResolution": "Bundler",
12 | "noUncheckedIndexedAccess": true,
13 | "resolveJsonModule": true,
14 | "skipLibCheck": true,
15 | "strict": true
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/apps/web/registry/components/meter-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Meter,
3 | MeterIndicator,
4 | MeterLabel,
5 | MeterTrack,
6 | MeterValue,
7 | } from "@/registry/ui/meter";
8 |
9 | export default function MeterDemo() {
10 | return (
11 |
12 |
13 | Storage usage
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toast-demo.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/registry/ui/button";
4 | import { toastManager } from "@/registry/ui/toast";
5 |
6 | export default function ToastDemo() {
7 | return (
8 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/registry/components/field-required.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Field,
3 | FieldControl,
4 | FieldError,
5 | FieldLabel,
6 | } from "@/registry/ui/field";
7 |
8 | export default function FieldRequiredDemo() {
9 | return (
10 |
11 |
12 | Password *
13 |
14 |
15 | Please fill out this field.
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/registry/components/number-field-lg.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | NumberField,
3 | NumberFieldDecrement,
4 | NumberFieldGroup,
5 | NumberFieldIncrement,
6 | NumberFieldInput,
7 | } from "@/registry/ui/number-field";
8 |
9 | export default function NumberFieldLg() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/registry/components/number-field-sm.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | NumberField,
3 | NumberFieldDecrement,
4 | NumberFieldGroup,
5 | NumberFieldIncrement,
6 | NumberFieldInput,
7 | } from "@/registry/ui/number-field";
8 |
9 | export default function NumberFieldSm() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/registry/components/radio-group-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/ui/label";
2 | import { Radio, RadioGroup } from "@/registry/ui/radio-group";
3 |
4 | export default function RadioGroupDemo() {
5 | return (
6 |
7 |
10 |
13 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/next.config.ts:
--------------------------------------------------------------------------------
1 | import createBundleAnalyzer from "@next/bundle-analyzer";
2 | import { createMDX } from "fumadocs-mdx/next";
3 | import type { NextConfig } from "next";
4 |
5 | const withAnalyzer = createBundleAnalyzer({
6 | enabled: process.env.ANALYZE === "true",
7 | });
8 |
9 | const nextConfig: NextConfig = {
10 | outputFileTracingIncludes: {
11 | registry: ["./registry/**/*"],
12 | },
13 | };
14 |
15 | const withMDX = createMDX({
16 | configPath: "./source.config.ts",
17 | });
18 |
19 | export default withMDX(nextConfig as any);
20 |
--------------------------------------------------------------------------------
/apps/web/registry/components/number-field-disabled.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | NumberField,
3 | NumberFieldDecrement,
4 | NumberFieldGroup,
5 | NumberFieldIncrement,
6 | NumberFieldInput,
7 | } from "@/registry/ui/number-field";
8 |
9 | export default function NumberFieldDisabled() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/packages/ui/src/components/collapsible.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
4 |
5 | const Collapsible: typeof CollapsiblePrimitive.Root = CollapsiblePrimitive.Root;
6 |
7 | const CollapsibleTrigger: typeof CollapsiblePrimitive.CollapsibleTrigger =
8 | CollapsiblePrimitive.CollapsibleTrigger;
9 |
10 | const CollapsibleContent: typeof CollapsiblePrimitive.CollapsibleContent =
11 | CollapsiblePrimitive.CollapsibleContent;
12 |
13 | export { Collapsible, CollapsibleContent, CollapsibleTrigger };
14 |
--------------------------------------------------------------------------------
/apps/web/registry/components/input-with-label.tsx:
--------------------------------------------------------------------------------
1 | import { useId } from "react";
2 |
3 | import { Input } from "@/registry/ui/input";
4 | import { Label } from "@/registry/ui/label";
5 |
6 | export default function InputWithLabel() {
7 | const id = useId();
8 | return (
9 |
10 |
11 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/registry/components/number-field-with-range.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | NumberField,
3 | NumberFieldDecrement,
4 | NumberFieldGroup,
5 | NumberFieldIncrement,
6 | NumberFieldInput,
7 | } from "@/registry/ui/number-field";
8 |
9 | export default function NumberFieldWithRange() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/hooks/use-media-query.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export function useMediaQuery(query: string) {
4 | const [value, setValue] = React.useState(false);
5 |
6 | React.useEffect(() => {
7 | function onChange(event: MediaQueryListEvent) {
8 | setValue(event.matches);
9 | }
10 |
11 | const result = matchMedia(query);
12 | result.addEventListener("change", onChange);
13 | setValue(result.matches);
14 |
15 | return () => result.removeEventListener("change", onChange);
16 | }, [query]);
17 |
18 | return value;
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/registry/components/radio-group-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/ui/label";
2 | import { Radio, RadioGroup } from "@/registry/ui/radio-group";
3 |
4 | export default function RadioGroupDisabledDemo() {
5 | return (
6 |
7 |
10 |
13 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toast-loading.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/registry/ui/button";
4 | import { toastManager } from "@/registry/ui/toast";
5 |
6 | export default function ToastLoading() {
7 | return (
8 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/packages/ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@uitopia/tsconfig/react-library.json",
3 | "compilerOptions": {
4 | "outDir": "./dist",
5 | "baseUrl": ".",
6 | "paths": {
7 | "@/*": ["./src/*"],
8 | "@/components/*": ["./src/components/*"],
9 | "@/examples/*": ["src/components/elements/texts/*"],
10 | "@/lib/*": ["./src/lib/*"]
11 | }
12 | },
13 | "exclude": ["dist", "node_modules"],
14 | "include": [
15 | ".",
16 | "../../apps/web/registry/ui/sidebar.tsx",
17 | "../../apps/web/components/copy-button.tsx"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/public/r/utils.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "utils",
4 | "type": "registry:lib",
5 | "dependencies": [
6 | "clsx",
7 | "tailwind-merge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/lib/utils.ts",
12 | "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n",
13 | "type": "registry:lib",
14 | "target": "lib/utils.ts"
15 | }
16 | ]
17 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/menu-close-on-click.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 | import { Menu, MenuItem, MenuPopup, MenuTrigger } from "@/registry/ui/menu";
3 |
4 | export default function MenuCloseOnClickDemo() {
5 | return (
6 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/apps/web/registry/components/progress-demo.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | import { Progress } from "@/registry/ui/progress";
6 |
7 | export default function ProgressDemo() {
8 | const [value, setValue] = React.useState(20);
9 |
10 | React.useEffect(() => {
11 | const interval = setInterval(() => {
12 | setValue((current) =>
13 | Math.min(100, Math.round(current + Math.random() * 25)),
14 | );
15 | }, 1000);
16 | return () => clearInterval(interval);
17 | }, []);
18 |
19 | return ;
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/registry/components/menu-checkbox.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 | import {
3 | Menu,
4 | MenuCheckboxItem,
5 | MenuPopup,
6 | MenuTrigger,
7 | } from "@/registry/ui/menu";
8 |
9 | export default function MenuCheckboxDemo() {
10 | return (
11 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/public/images/lines-top.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/apps/web/registry/components/menu-link.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | import { Button } from "@/registry/ui/button";
4 | import { Menu, MenuItem, MenuPopup, MenuTrigger } from "@/registry/ui/menu";
5 |
6 | export default function MenuLinkDemo() {
7 | return (
8 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/apps/web/public/r/badge-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "badge-demo",
4 | "type": "registry:example",
5 | "description": "Basic badge",
6 | "registryDependencies": [
7 | "@uitopia/badge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/badge-demo.tsx",
12 | "content": "import { Badge } from \"@/registry/ui/badge\";\n\nexport default function BadgeDemo() {\n return Badge;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "badge"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/badge-lg.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "badge-lg",
4 | "type": "registry:example",
5 | "description": "Large badge",
6 | "registryDependencies": [
7 | "@uitopia/badge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/badge-lg.tsx",
12 | "content": "import { Badge } from \"@/registry/ui/badge\";\n\nexport default function BadgeLg() {\n return Badge;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "badge"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/badge-sm.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "badge-sm",
4 | "type": "registry:example",
5 | "description": "Small badge",
6 | "registryDependencies": [
7 | "@uitopia/badge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/badge-sm.tsx",
12 | "content": "import { Badge } from \"@/registry/ui/badge\";\n\nexport default function BadgeSm() {\n return Badge;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "badge"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/toggle-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "toggle-demo",
4 | "type": "registry:example",
5 | "description": "Basic toggle",
6 | "registryDependencies": [
7 | "@/toggle"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/toggle-demo.tsx",
12 | "content": "import { Toggle } from \"@/registry/ui/toggle\";\n\nexport default function ToggleDemo() {\n return Toggle;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "toggle"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/progress-with-label-value.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Progress,
3 | ProgressIndicator,
4 | ProgressLabel,
5 | ProgressTrack,
6 | ProgressValue,
7 | } from "@/registry/ui/progress";
8 |
9 | export default function ProgressWithLabelValueDemo() {
10 | return (
11 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/apps/web/public/r/button-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-demo",
4 | "type": "registry:example",
5 | "description": "Default button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-demo.tsx",
12 | "content": "import { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonDemo() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/button-lg.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-lg",
4 | "type": "registry:example",
5 | "description": "Large button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-lg.tsx",
12 | "content": "import { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonLg() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/button-sm.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-sm",
4 | "type": "registry:example",
5 | "description": "Small button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-sm.tsx",
12 | "content": "import { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonSm() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/slider-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "slider-demo",
4 | "type": "registry:example",
5 | "description": "Basic slider",
6 | "registryDependencies": [
7 | "@uitopia/slider"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/slider-demo.tsx",
12 | "content": "import { Slider } from \"@/registry/ui/slider\";\n\nexport default function SliderDemo() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "slider"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/button-xl.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-xl",
4 | "type": "registry:example",
5 | "description": "Extra-large button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-xl.tsx",
12 | "content": "import { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonXl() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/button-xs.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-xs",
4 | "type": "registry:example",
5 | "description": "Extra-small button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-xs.tsx",
12 | "content": "import { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonXs() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/spring-demo.tsx:
--------------------------------------------------------------------------------
1 | // import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar";
2 | // import { SpringElement } from "./spring-element";
3 |
4 | // export default function SpringDemo() {
5 | // return (
6 | //
7 | //
8 | //
12 | // AK
13 | //
14 | //
15 | // );
16 | // }
17 |
--------------------------------------------------------------------------------
/apps/web/public/r/button-link.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-link",
4 | "type": "registry:example",
5 | "description": "Link button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-link.tsx",
12 | "content": "import { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonLink() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/badge-info.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "badge-info",
4 | "type": "registry:example",
5 | "description": "Info badge",
6 | "registryDependencies": [
7 | "@uitopia/badge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/badge-info.tsx",
12 | "content": "import { Badge } from \"@/registry/ui/badge\";\n\nexport default function BadgeInfo() {\n return Badge;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "badge",
18 | "info"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/button-ghost.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-ghost",
4 | "type": "registry:example",
5 | "description": "Ghost button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-ghost.tsx",
12 | "content": "import { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonGhost() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/label.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "label",
4 | "type": "registry:ui",
5 | "files": [
6 | {
7 | "path": "registry/ui/label.tsx",
8 | "content": "import type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Label({ className, ...props }: React.ComponentProps<\"label\">) {\n return (\n \n );\n}\n\nexport { Label };\n",
9 | "type": "registry:ui"
10 | }
11 | ]
12 | }
--------------------------------------------------------------------------------
/apps/web/public/r/meter-simple.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "meter-simple",
4 | "type": "registry:example",
5 | "description": "Meter without label and value",
6 | "registryDependencies": [
7 | "@uitopia/meter"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/meter-simple.tsx",
12 | "content": "import { Meter } from \"@/registry/ui/meter\";\n\nexport default function MeterSimpleDemo() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "meter"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/apps/web/registry/components/number-field-with-scrub.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | NumberField,
3 | NumberFieldDecrement,
4 | NumberFieldGroup,
5 | NumberFieldIncrement,
6 | NumberFieldInput,
7 | NumberFieldScrubArea,
8 | } from "@/registry/ui/number-field";
9 |
10 | export default function NumberFieldDemoWithScrub() {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/apps/web/public/r/badge-outline.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "badge-outline",
4 | "type": "registry:example",
5 | "description": "Outline badge",
6 | "registryDependencies": [
7 | "@uitopia/badge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/badge-outline.tsx",
12 | "content": "import { Badge } from \"@/registry/ui/badge\";\n\nexport default function BadgeOutline() {\n return Badge;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "badge"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/registry/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
4 | return (
5 |
13 | );
14 | }
15 |
16 | export { Skeleton };
17 |
--------------------------------------------------------------------------------
/apps/web/public/r/badge-error.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "badge-error",
4 | "type": "registry:example",
5 | "description": "Error badge",
6 | "registryDependencies": [
7 | "@uitopia/badge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/badge-error.tsx",
12 | "content": "import { Badge } from \"@/registry/ui/badge\";\n\nexport default function BadgeError() {\n return Badge;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "badge",
18 | "error"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/number-field-with-formatted-value.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | NumberField,
3 | NumberFieldDecrement,
4 | NumberFieldGroup,
5 | NumberFieldIncrement,
6 | NumberFieldInput,
7 | } from "@/registry/ui/number-field";
8 |
9 | export default function NumberFieldWithFormattedValue() {
10 | return (
11 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/apps/web/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.ts",
8 | "css": "styles/globals.css",
9 | "baseColor": "zinc",
10 | "cssVariables": true,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "@/components",
15 | "utils": "@/lib/utils",
16 | "ui": "@/components/ui",
17 | "lib": "@/lib",
18 | "hooks": "@/hooks"
19 | },
20 | "iconLibrary": "lucide",
21 | "registries": {
22 | "@uitopia": "https://uitopia.vercel.app/r/{name}.json"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/apps/web/public/r/badge-secondary.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "badge-secondary",
4 | "type": "registry:example",
5 | "description": "Secondary badge",
6 | "registryDependencies": [
7 | "@uitopia/badge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/badge-secondary.tsx",
12 | "content": "import { Badge } from \"@/registry/ui/badge\";\n\nexport default function BadgeSecondary() {\n return Badge;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "badge"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/input-lg.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "input-lg",
4 | "type": "registry:example",
5 | "description": "Large input",
6 | "registryDependencies": [
7 | "@uitopia/input"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/input-lg.tsx",
12 | "content": "import { Input } from \"@/registry/ui/input\";\n\nexport default function InputLg() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "input"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/input-sm.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "input-sm",
4 | "type": "registry:example",
5 | "description": "Small input",
6 | "registryDependencies": [
7 | "@uitopia/input"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/input-sm.tsx",
12 | "content": "import { Input } from \"@/registry/ui/input\";\n\nexport default function InputSm() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "input"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/toggle-outline.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "toggle-outline",
4 | "type": "registry:example",
5 | "description": "Outline toggle",
6 | "registryDependencies": [
7 | "@/toggle"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/toggle-outline.tsx",
12 | "content": "import { Toggle } from \"@/registry/ui/toggle\";\n\nexport default function ToggleOutline() {\n return Outline Toggle;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "toggle"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/meter-with-formatted-value.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Meter,
5 | MeterIndicator,
6 | MeterLabel,
7 | MeterTrack,
8 | MeterValue,
9 | } from "@/registry/ui/meter";
10 |
11 | export default function MeterWithFormattedValueDemo() {
12 | return (
13 |
14 |
15 | Rating
16 | {(_formatted, value) => `${value} / 5`}
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/apps/web/registry/components/meter-with-range.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Meter,
5 | MeterIndicator,
6 | MeterLabel,
7 | MeterTrack,
8 | MeterValue,
9 | } from "@/registry/ui/meter";
10 |
11 | export default function MeterWithRangeDemo() {
12 | return (
13 |
14 |
15 | Bandwidth (Mbps)
16 | {(_formatted, value) => value}
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/apps/web/public/r/input-file.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "input-file",
4 | "type": "registry:example",
5 | "description": "Input type set to file",
6 | "registryDependencies": [
7 | "@uitopia/input"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/input-file.tsx",
12 | "content": "import { Input } from \"@/registry/ui/input\";\n\nexport default function InputFile() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "input",
18 | "file"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/badge-success.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "badge-success",
4 | "type": "registry:example",
5 | "description": "Success badge",
6 | "registryDependencies": [
7 | "@uitopia/badge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/badge-success.tsx",
12 | "content": "import { Badge } from \"@/registry/ui/badge\";\n\nexport default function BadgeSuccess() {\n return Badge;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "badge",
18 | "success"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/badge-warning.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "badge-warning",
4 | "type": "registry:example",
5 | "description": "Warning badge",
6 | "registryDependencies": [
7 | "@uitopia/badge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/badge-warning.tsx",
12 | "content": "import { Badge } from \"@/registry/ui/badge\";\n\nexport default function BadgeWarning() {\n return Badge;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "badge",
18 | "warning"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/textarea-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "textarea-demo",
4 | "type": "registry:example",
5 | "description": "Basic textarea",
6 | "registryDependencies": [
7 | "@uitopia/textarea"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/textarea-demo.tsx",
12 | "content": "import { Textarea } from \"@/registry/ui/textarea\";\n\nexport default function TextareaDemo() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "textarea"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/toggle-lg.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "toggle-lg",
4 | "type": "registry:example",
5 | "description": "Large toggle",
6 | "registryDependencies": [
7 | "@/toggle"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/toggle-lg.tsx",
12 | "content": "import { Toggle } from \"@/registry/ui/toggle\";\n\nexport default function ToggleLg() {\n return (\n \n Large\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "toggle"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/toggle-sm.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "toggle-sm",
4 | "type": "registry:example",
5 | "description": "Small toggle",
6 | "registryDependencies": [
7 | "@/toggle"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/toggle-sm.tsx",
12 | "content": "import { Toggle } from \"@/registry/ui/toggle\";\n\nexport default function ToggleSm() {\n return (\n \n Small\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "toggle"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-icon-group.tsx:
--------------------------------------------------------------------------------
1 | import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
2 |
3 | import { Toggle } from "@/registry/ui/toggle";
4 |
5 | export default function ToggleIconGroup() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/public/r/button-disabled.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-disabled",
4 | "type": "registry:example",
5 | "description": "Disabled button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-disabled.tsx",
12 | "content": "import { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonDisabled() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button",
18 | "disabled"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/button-secondary.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-secondary",
4 | "type": "registry:example",
5 | "description": "Secondary button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-secondary.tsx",
12 | "content": "import { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonSecondary() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/slider-range.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "slider-range",
4 | "type": "registry:example",
5 | "description": "Two-thumb range slider",
6 | "registryDependencies": [
7 | "@uitopia/slider"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/slider-range.tsx",
12 | "content": "import { Slider } from \"@/registry/ui/slider\";\n\nexport default function SliderDemo() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "slider",
18 | "range slider"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/textarea-lg.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "textarea-lg",
4 | "type": "registry:example",
5 | "description": "Large textarea",
6 | "registryDependencies": [
7 | "@uitopia/textarea"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/textarea-lg.tsx",
12 | "content": "import { Textarea } from \"@/registry/ui/textarea\";\n\nexport default function TextareaLg() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "textarea"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/textarea-sm.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "textarea-sm",
4 | "type": "registry:example",
5 | "description": "Small textarea",
6 | "registryDependencies": [
7 | "@uitopia/textarea"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/textarea-sm.tsx",
12 | "content": "import { Textarea } from \"@/registry/ui/textarea\";\n\nexport default function TextareaSm() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "textarea"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/input-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "input-demo",
4 | "type": "registry:example",
5 | "description": "Basic input component without label",
6 | "registryDependencies": [
7 | "@uitopia/input"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/input-demo.tsx",
12 | "content": "import { Input } from \"@/registry/ui/input\";\n\nexport default function InputDemo() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "input"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/skeleton-only.tsx:
--------------------------------------------------------------------------------
1 | import { Skeleton } from "@/registry/ui/skeleton";
2 |
3 | export default function SkeletonOnly() {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-group-demo.tsx:
--------------------------------------------------------------------------------
1 | import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
2 |
3 | import { Toggle, ToggleGroup } from "@/registry/ui/toggle-group";
4 |
5 | export default function ToggleGroupDemo() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-group-lg.tsx:
--------------------------------------------------------------------------------
1 | import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
2 |
3 | import { Toggle, ToggleGroup } from "@/registry/ui/toggle-group";
4 |
5 | export default function ToggleGroupLg() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-group-sm.tsx:
--------------------------------------------------------------------------------
1 | import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
2 |
3 | import { Toggle, ToggleGroup } from "@/registry/ui/toggle-group";
4 |
5 | export default function ToggleGroupSm() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/app/blocks/preview/[blockId]/page.tsx:
--------------------------------------------------------------------------------
1 | import { BlockDisplay } from "@/components/block-display";
2 |
3 | export const dynamic = "force-static";
4 | export const dynamicParams = false;
5 |
6 | type Params = Promise<{ blockId: string }>;
7 | type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>;
8 |
9 | export default async function Page(props: {
10 | params: Params;
11 | searchParams: SearchParams;
12 | }) {
13 | const params = await props.params;
14 | const _searchParams = await props.searchParams;
15 |
16 | return (
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/apps/web/public/r/badge-with-link.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "badge-with-link",
4 | "type": "registry:example",
5 | "description": "Badge with link",
6 | "registryDependencies": [
7 | "@uitopia/badge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/badge-with-link.tsx",
12 | "content": "import Link from \"next/link\";\n\nimport { Badge } from \"@/registry/ui/badge\";\n\nexport default function BadgeWithLink() {\n return }>Badge;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "badge"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/scroll-area-demo.tsx:
--------------------------------------------------------------------------------
1 | import { ScrollArea } from "@/registry/ui/scroll-area";
2 |
3 | const tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-alpha.${i}`);
4 |
5 | export default function ScrollAreaDemo() {
6 | return (
7 |
8 |
9 |
Tags
10 |
11 | {tags.map((tag) => (
12 |
13 | {tag}
14 |
15 | ))}
16 |
17 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-group-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
2 |
3 | import { Toggle, ToggleGroup } from "@/registry/ui/toggle-group";
4 |
5 | export default function ToggleGroupDisabled() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-group-multiple.tsx:
--------------------------------------------------------------------------------
1 | import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
2 |
3 | import { Toggle, ToggleGroup } from "@/registry/ui/toggle-group";
4 |
5 | export default function ToggleGroupMultiple() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/public/r/slider-vertical.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "slider-vertical",
4 | "type": "registry:example",
5 | "description": "Vertical slider",
6 | "registryDependencies": [
7 | "@uitopia/slider"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/slider-vertical.tsx",
12 | "content": "import { Slider } from \"@/registry/ui/slider\";\n\nexport default function SliderVertical() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "slider",
18 | "vertical slider"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/checkbox-group-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/registry/ui/checkbox";
2 | import { CheckboxGroup } from "@/registry/ui/checkbox-group";
3 | import { Label } from "@/registry/ui/label";
4 |
5 | export default function CheckboxGroupDemo() {
6 | return (
7 |
8 |
12 |
16 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/apps/web/registry/components/frame-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Frame,
3 | FrameDescription,
4 | FrameHeader,
5 | FramePanel,
6 | FrameTitle,
7 | } from "@/registry/ui/frame";
8 |
9 | export default function FrameDemo() {
10 | return (
11 |
12 |
13 | Section header
14 | Brief description about the section
15 |
16 |
17 | Section title
18 | Section description
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/apps/web/registry/components/group-with-input.tsx:
--------------------------------------------------------------------------------
1 | import { CopyIcon } from "lucide-react";
2 |
3 | import { Button } from "@/registry/ui/button";
4 | import { Group, GroupItem, GroupSeparator } from "@/registry/ui/group";
5 | import { Input } from "@/registry/ui/input";
6 |
7 | export default function GroupWithInput() {
8 | return (
9 |
10 | }
12 | />
13 |
14 | }
16 | >
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/apps/web/public/r/input-disabled.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "input-disabled",
4 | "type": "registry:example",
5 | "description": "Input with disabled state",
6 | "registryDependencies": [
7 | "@uitopia/input"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/input-disabled.tsx",
12 | "content": "import { Input } from \"@/registry/ui/input\";\n\nexport default function InputDisabled() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "input",
18 | "disabled"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/scroll-area-horizontal.tsx:
--------------------------------------------------------------------------------
1 | import { ScrollArea } from "@/registry/ui/scroll-area";
2 |
3 | export default function ScrollAreaHorizontal() {
4 | return (
5 |
6 |
7 | {Array.from({ length: 20 }).map((_, i) => (
8 |
12 | Item {i + 1}
13 |
14 | ))}
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-group-outline.tsx:
--------------------------------------------------------------------------------
1 | import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
2 |
3 | import { Toggle, ToggleGroup } from "@/registry/ui/toggle-group";
4 |
5 | export default function ToggleGroupOutline() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/public/r/badge-destructive.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "badge-destructive",
4 | "type": "registry:example",
5 | "description": "Destructive badge",
6 | "registryDependencies": [
7 | "@uitopia/badge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/badge-destructive.tsx",
12 | "content": "import { Badge } from \"@/registry/ui/badge\";\n\nexport default function BadgeDestructive() {\n return Badge;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "badge",
18 | "destructive",
19 | "error"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/public/r/button-icon.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-icon",
4 | "type": "registry:example",
5 | "description": "Icon button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-icon.tsx",
12 | "content": "import { PlusIcon } from \"lucide-react\";\n\nimport { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonIcon() {\n return (\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/textarea-disabled.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "textarea-disabled",
4 | "type": "registry:example",
5 | "description": "Disabled textarea",
6 | "registryDependencies": [
7 | "@uitopia/textarea"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/textarea-disabled.tsx",
12 | "content": "import { Textarea } from \"@/registry/ui/textarea\";\n\nexport default function TextareaDisabled() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "textarea",
18 | "disabled"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/toggle-disabled.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "toggle-disabled",
4 | "type": "registry:example",
5 | "description": "Disabled toggle",
6 | "registryDependencies": [
7 | "@/toggle"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/toggle-disabled.tsx",
12 | "content": "import { Toggle } from \"@/registry/ui/toggle\";\n\nexport default function ToggleDisabled() {\n return (\n \n Disabled\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "toggle",
18 | "disabled"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/checkbox-group-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/registry/ui/checkbox";
2 | import { CheckboxGroup } from "@/registry/ui/checkbox-group";
3 | import { Label } from "@/registry/ui/label";
4 |
5 | export default function CheckboxGroupDemo() {
6 | return (
7 |
8 |
12 |
16 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/apps/web/registry/components/switch-with-description.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { Label } from "@/registry/ui/label";
4 | import { Switch } from "@/registry/ui/switch";
5 |
6 | export default function SwitchWithDescriptionDemo() {
7 | const id = React.useId();
8 |
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | By enabling marketing emails, you agree to receive emails.
16 |
17 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/registry/hooks/use-mobile.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | const MOBILE_BREAKPOINT = 768;
4 |
5 | export function useIsMobile() {
6 | const [isMobile, setIsMobile] = React.useState(
7 | undefined,
8 | );
9 |
10 | React.useEffect(() => {
11 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
12 | const onChange = () => {
13 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
14 | };
15 | mql.addEventListener("change", onChange);
16 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
17 | return () => mql.removeEventListener("change", onChange);
18 | }, []);
19 |
20 | return !!isMobile;
21 | }
22 |
--------------------------------------------------------------------------------
/packages/ui/src/hooks/use-mobile.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | const MOBILE_BREAKPOINT = 768;
4 |
5 | export function useIsMobile() {
6 | const [isMobile, setIsMobile] = React.useState(
7 | undefined,
8 | );
9 |
10 | React.useEffect(() => {
11 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
12 | const onChange = () => {
13 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
14 | };
15 | mql.addEventListener("change", onChange);
16 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
17 | return () => mql.removeEventListener("change", onChange);
18 | }, []);
19 |
20 | return !!isMobile;
21 | }
22 |
--------------------------------------------------------------------------------
/apps/web/public/r/button-with-link.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-with-link",
4 | "type": "registry:example",
5 | "description": "Link rendered as button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-with-link.tsx",
12 | "content": "import Link from \"next/link\";\n\nimport { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonWithLink() {\n return }>Link;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/progress-with-formatted-value.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Progress,
5 | ProgressIndicator,
6 | ProgressLabel,
7 | ProgressTrack,
8 | ProgressValue,
9 | } from "@/registry/ui/progress";
10 |
11 | export default function ProgressWithFormattedValueDemo() {
12 | return (
13 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-group-with-disabled-item.tsx:
--------------------------------------------------------------------------------
1 | import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
2 |
3 | import { Toggle, ToggleGroup } from "@/registry/ui/toggle-group";
4 |
5 | export default function ToggleGroupWithDisabledItem() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/public/r/avatar-fallback.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "avatar-fallback",
4 | "type": "registry:example",
5 | "description": "Fallback-only avatar",
6 | "registryDependencies": [
7 | "@uitopia/avatar"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/avatar-fallback.tsx",
12 | "content": "import { Avatar, AvatarFallback } from \"@/registry/ui/avatar\";\n\nexport default function AvatarFallbackDemo() {\n return (\n \n LT\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "avatar"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/field-textarea.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Field,
5 | FieldControl,
6 | FieldDescription,
7 | FieldLabel,
8 | } from "@/registry/ui/field";
9 | import { Textarea } from "@/registry/ui/textarea";
10 |
11 | export default function FieldTextareaDemo() {
12 | return (
13 |
14 | Bio
15 | (
17 | // @ts-ignore
18 |
19 | )}
20 | />
21 |
22 | Write a short bio. Maximum 500 characters.
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/apps/web/registry/components/checkbox-card.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/registry/ui/checkbox";
2 | import { Label } from "@/registry/ui/label";
3 |
4 | export default function CheckboxCardDemo() {
5 | return (
6 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/apps/web/public/r/button-icon-lg.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-icon-lg",
4 | "type": "registry:example",
5 | "description": "Large icon button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-icon-lg.tsx",
12 | "content": "import { PlusIcon } from \"lucide-react\";\n\nimport { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonIconLg() {\n return (\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/button-icon-sm.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-icon-sm",
4 | "type": "registry:example",
5 | "description": "Small icon button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-icon-sm.tsx",
12 | "content": "import { PlusIcon } from \"lucide-react\";\n\nimport { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonIconSm() {\n return (\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "uitopia",
3 | "version": "1.0.0",
4 | "devDependencies": {
5 | "@biomejs/biome": "^2.1.1",
6 | "@uitopia/tsconfig": "workspace:*",
7 | "turbo": "^2.5.0"
8 | },
9 | "engines": {
10 | "node": ">=20.14.0"
11 | },
12 | "license": "MIT",
13 | "packageManager": "bun@1.2.12",
14 | "private": true,
15 | "scripts": {
16 | "dev": "turbo run dev",
17 | "clean": "turbo run clean && rm -rf .turbo && rm -rf node_modules",
18 | "lint": "turbo run lint",
19 | "build": "turbo run build",
20 | "format": "biome format --write .",
21 | "check": "biome check --fix ."
22 | },
23 | "workspaces": [
24 | "apps/*",
25 | "packages/*"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/apps/web/public/r/form.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "form",
4 | "type": "registry:ui",
5 | "dependencies": [
6 | "@base-ui-components/react"
7 | ],
8 | "files": [
9 | {
10 | "path": "registry/ui/form.tsx",
11 | "content": "\"use client\";\n\nimport { Form as FormPrimitive } from \"@base-ui-components/react/form\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Form({ className, ...props }: FormPrimitive.Props) {\n return (\n \n );\n}\n\nexport { Form };\n",
12 | "type": "registry:ui"
13 | }
14 | ]
15 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/checkbox-with-description.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { Checkbox } from "@/registry/ui/checkbox";
4 | import { Label } from "@/registry/ui/label";
5 |
6 | export default function CheckboxWithDescriptionDemo() {
7 | const id = React.useId();
8 |
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | By clicking this checkbox, you agree to the terms and conditions.
16 |
17 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/public/r/button-destructive-outline.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-destructive-outline",
4 | "type": "registry:example",
5 | "description": "Destructive outline button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-destructive-outline.tsx",
12 | "content": "import { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonDestructiveOutline() {\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button",
18 | "delete"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/button-with-icon.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-with-icon",
4 | "type": "registry:example",
5 | "description": "Button with icon",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-with-icon.tsx",
12 | "content": "import { DownloadIcon } from \"lucide-react\";\n\nimport { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonWithIcon() {\n return (\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/use-debounce.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "use-debounce",
4 | "type": "registry:hook",
5 | "files": [
6 | {
7 | "path": "registry/hooks/use-debounce.ts",
8 | "content": "import { useEffect, useState } from \"react\";\n\nfunction useDebounce(value: T, delay = 500): T {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n return () => {\n clearTimeout(timer);\n };\n }, [value, delay]);\n\n return debouncedValue;\n}\n\nexport default useDebounce;\n",
9 | "type": "registry:hook"
10 | }
11 | ]
12 | }
--------------------------------------------------------------------------------
/apps/web/components/cli-commands.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { CodeBlockCommand } from "@/components/code-block-command";
5 |
6 | export default function CliCommands({ name }: { name: string }) {
7 | const installTarget = name.startsWith("@") ? name : `@uitopia/${name}`;
8 |
9 | const commands = React.useMemo(() => {
10 | return {
11 | __bun__: `bunx --bun shadcn@latest add ${installTarget}`,
12 | __npm__: `npx shadcn@latest add ${installTarget}`,
13 | __pnpm__: `pnpm dlx shadcn@latest add ${installTarget}`,
14 | __yarn__: `yarn dlx shadcn@latest add ${installTarget}`,
15 | };
16 | }, [installTarget]);
17 |
18 | return ;
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/public/r/badge-with-icon.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "badge-with-icon",
4 | "type": "registry:example",
5 | "description": "Badge with icon",
6 | "registryDependencies": [
7 | "@uitopia/badge"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/badge-with-icon.tsx",
12 | "content": "import { CheckIcon } from \"lucide-react\";\n\nimport { Badge } from \"@/registry/ui/badge\";\n\nexport default function BadgeWithIcon() {\n return (\n \n \n Verified\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "badge"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/toggle-with-icon.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "toggle-with-icon",
4 | "type": "registry:example",
5 | "description": "Toggle with icon",
6 | "registryDependencies": [
7 | "@/toggle"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/toggle-with-icon.tsx",
12 | "content": "import { BoldIcon } from \"lucide-react\";\n\nimport { Toggle } from \"@/registry/ui/toggle\";\n\nexport default function ToggleWithIcon() {\n return (\n \n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "toggle"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/components/code-tabs.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | import { useConfig } from "@/hooks/use-config";
6 | import { Tabs } from "@/registry/ui/tabs";
7 |
8 | export function CodeTabs({ children }: React.ComponentProps) {
9 | const [config, setConfig] = useConfig();
10 |
11 | const installationType = React.useMemo(() => {
12 | return config.installationType || "cli";
13 | }, [config]);
14 |
15 | return (
16 |
19 | setConfig({ ...config, installationType: value as "cli" | "manual" })
20 | }
21 | className="relative mt-6 w-full"
22 | >
23 | {children}
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/apps/web/public/r/switch-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "switch-demo",
4 | "type": "registry:example",
5 | "description": "Basic switch",
6 | "registryDependencies": [
7 | "@uitopia/switch",
8 | "@uitopia/label"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/switch-demo.tsx",
13 | "content": "import { Label } from \"@/registry/ui/label\";\nimport { Switch } from \"@/registry/ui/switch\";\n\nexport default function SwitchWithLabel() {\n return (\n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "switch",
19 | "label"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/alert-with-icon-action.tsx:
--------------------------------------------------------------------------------
1 | import { InfoIcon } from "lucide-react";
2 |
3 | import {
4 | Alert,
5 | AlertAction,
6 | AlertDescription,
7 | AlertTitle,
8 | } from "@/registry/ui/alert";
9 | import { Button } from "@/registry/ui/button";
10 |
11 | export default function AlertWithIconAction() {
12 | return (
13 |
14 |
15 | Heads up!
16 |
17 | Describe what can be done about it here.
18 |
19 |
20 |
23 |
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/apps/web/registry/components/menu-radio-group.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 | import {
3 | Menu,
4 | MenuPopup,
5 | MenuRadioGroup,
6 | MenuRadioItem,
7 | MenuTrigger,
8 | } from "@/registry/ui/menu";
9 |
10 | export default function MenuRadioGroupDemo() {
11 | return (
12 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/apps/web/registry/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | import { Separator as SeparatorPrimitive } from "@base-ui-components/react/separator";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | function Separator({
6 | className,
7 | orientation = "horizontal",
8 | ...props
9 | }: SeparatorPrimitive.Props) {
10 | return (
11 |
20 | );
21 | }
22 |
23 | export { Separator };
24 |
--------------------------------------------------------------------------------
/apps/web/public/r/checkbox-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "checkbox-demo",
4 | "type": "registry:example",
5 | "description": "Basic checkbox",
6 | "registryDependencies": [
7 | "@uitopia/checkbox",
8 | "@uitopia/label"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/checkbox-demo.tsx",
13 | "content": "import { Checkbox } from \"@/registry/ui/checkbox\";\nimport { Label } from \"@/registry/ui/label\";\n\nexport default function CheckboxDemo() {\n return (\n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "checkbox",
19 | "label"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/config/site.ts:
--------------------------------------------------------------------------------
1 | export const siteConfig = {
2 | creator: "@kyuotaka",
3 | description:
4 | "ui/topia is, a growing collection of experimental components built with shadcn/ui, Motion and Tailwind CSS.",
5 | keywords: [
6 | "Next.js",
7 | "React",
8 | "Tailwind CSS",
9 | "UI Library",
10 | "UI Kit",
11 | "UI Components",
12 | "UI Elements",
13 | "Open Source",
14 | "shadcn/ui",
15 | ],
16 | links: {
17 | github: "https://git.new/ui/topia",
18 | portfolio: "https://cahyawibawa.com/",
19 | },
20 | name: "ui/topia",
21 | ogImage: `${process.env.NEXT_PUBLIC_APP_URL}/opengraph-image.png`,
22 | url: process.env.NEXT_PUBLIC_APP_URL ?? "https://uitopia.vercel.app",
23 | };
24 |
25 | export type SiteConfig = typeof siteConfig;
26 |
--------------------------------------------------------------------------------
/apps/web/public/r/alert-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "alert-demo",
4 | "type": "registry:example",
5 | "description": "Basic alert",
6 | "registryDependencies": [
7 | "@uitopia/alert"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/alert-demo.tsx",
12 | "content": "import { Alert, AlertDescription, AlertTitle } from \"@/registry/ui/alert\";\n\nexport default function AlertDemo() {\n return (\n \n Heads up!\n \n Describe what can be done about it here.
\n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "alert"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/button-loading.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-loading",
4 | "type": "registry:example",
5 | "description": "Loading button",
6 | "registryDependencies": [
7 | "@uitopia/button"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/button-loading.tsx",
12 | "content": "import { LoaderCircleIcon } from \"lucide-react\";\n\nimport { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonLoading() {\n return (\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "button",
18 | "loading"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/checkbox-group.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "checkbox-group",
4 | "type": "registry:ui",
5 | "dependencies": [
6 | "@base-ui-components/react"
7 | ],
8 | "files": [
9 | {
10 | "path": "registry/ui/checkbox-group.tsx",
11 | "content": "\"use client\";\n\nimport { CheckboxGroup as CheckboxGroupPrimitive } from \"@base-ui-components/react/checkbox-group\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props) {\n return (\n \n );\n}\n\nexport { CheckboxGroup };\n",
12 | "type": "registry:ui"
13 | }
14 | ]
15 | }
--------------------------------------------------------------------------------
/apps/web/public/r/switch-disabled.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "switch-disabled",
4 | "type": "registry:example",
5 | "description": "Disabled switch",
6 | "registryDependencies": [
7 | "@uitopia/switch",
8 | "@uitopia/label"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/switch-disabled.tsx",
13 | "content": "import { Label } from \"@/registry/ui/label\";\nimport { Switch } from \"@/registry/ui/switch\";\n\nexport default function SwitchWithLabel() {\n return (\n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "switch",
19 | "label",
20 | "disabled"
21 | ]
22 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-group-with-separator.tsx:
--------------------------------------------------------------------------------
1 | import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
2 |
3 | import {
4 | Toggle,
5 | ToggleGroup,
6 | ToggleGroupSeparator,
7 | } from "@/registry/ui/toggle-group";
8 |
9 | export default function ToggleGroupWithSeparator() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/apps/web/registry/ui/fieldset.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Fieldset as FieldsetPrimitive } from "@base-ui-components/react/fieldset";
4 |
5 | import { cn } from "@/lib/utils";
6 |
7 | function Fieldset({ className, ...props }: FieldsetPrimitive.Root.Props) {
8 | return (
9 |
14 | );
15 | }
16 | function FieldsetLegend({
17 | className,
18 | ...props
19 | }: FieldsetPrimitive.Legend.Props) {
20 | return (
21 |
26 | );
27 | }
28 |
29 | export { Fieldset, FieldsetLegend };
30 |
--------------------------------------------------------------------------------
/apps/web/registry/components/number-field-with-label.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { Label } from "@/registry/ui/label";
4 | import {
5 | NumberField,
6 | NumberFieldDecrement,
7 | NumberFieldGroup,
8 | NumberFieldIncrement,
9 | NumberFieldInput,
10 | } from "@/registry/ui/number-field";
11 |
12 | export default function NumberFieldWithLabel() {
13 | const id = React.useId();
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # Dependencies
4 | node_modules
5 | /.pnp
6 | .pnpm/
7 | .pnp.js
8 |
9 | ##output directories
10 | .map.ts
11 | dist
12 | .source
13 |
14 |
15 | # testing
16 | /coverage
17 |
18 | # next.js
19 | /.next/
20 | /out/
21 |
22 | # production
23 | build
24 |
25 | # misc
26 | .DS_Store
27 | *.pem
28 |
29 | # debug
30 | npm-debug.log*
31 | yarn-debug.log*
32 | yarn-error.log*
33 |
34 | # local env files
35 | .env
36 | .env*.local
37 |
38 | # vercel
39 | .vercel
40 |
41 | # typescriptuild
42 | *.tsbuildinfo
43 | next-env.d.ts
44 |
45 | ## nx
46 | .nx
47 | .nx/cache
48 | .nx/workspace-data
49 |
50 | # Next.js
51 | .next
52 | out
53 |
54 | # Turbo
55 | .turbo
56 |
--------------------------------------------------------------------------------
/apps/web/registry/components/select-lg.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Select,
3 | SelectItem,
4 | SelectPopup,
5 | SelectTrigger,
6 | SelectValue,
7 | } from "@/registry/ui/select";
8 |
9 | const items = [
10 | { label: "Select framework", value: null },
11 | { label: "Next.js", value: "next" },
12 | { label: "Vite", value: "vite" },
13 | { label: "Astro", value: "astro" },
14 | ];
15 |
16 | export default function SelectLg() {
17 | return (
18 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/apps/web/registry/components/select-sm.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Select,
3 | SelectItem,
4 | SelectPopup,
5 | SelectTrigger,
6 | SelectValue,
7 | } from "@/registry/ui/select";
8 |
9 | const items = [
10 | { label: "Select framework", value: null },
11 | { label: "Next.js", value: "next" },
12 | { label: "Vite", value: "vite" },
13 | { label: "Astro", value: "astro" },
14 | ];
15 |
16 | export default function SelectSm() {
17 | return (
18 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/apps/web/registry/components/group-demo.tsx:
--------------------------------------------------------------------------------
1 | import { EllipsisIcon, FilesIcon, FilmIcon } from "lucide-react";
2 |
3 | import { Button } from "@/registry/ui/button";
4 | import { Group, GroupItem, GroupSeparator } from "@/registry/ui/group";
5 |
6 | export default function GroupDemo() {
7 | return (
8 |
9 | }>
10 |
11 | Files
12 |
13 |
14 | }>
15 |
16 | Media
17 |
18 |
19 | }
21 | >
22 |
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/apps/web/registry/components/field-number-field.tsx:
--------------------------------------------------------------------------------
1 | import { Field, FieldDescription } from "@/registry/ui/field";
2 | import {
3 | NumberField,
4 | NumberFieldDecrement,
5 | NumberFieldGroup,
6 | NumberFieldIncrement,
7 | NumberFieldInput,
8 | NumberFieldScrubArea,
9 | } from "@/registry/ui/number-field";
10 |
11 | export default function FieldNumberFieldDemo() {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | Choose a value between 1 and 100.
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/apps/web/registry/components/select-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Select,
3 | SelectItem,
4 | SelectPopup,
5 | SelectTrigger,
6 | SelectValue,
7 | } from "@/registry/ui/select";
8 |
9 | const items = [
10 | { label: "Select framework", value: null },
11 | { label: "Next.js", value: "next" },
12 | { label: "Vite", value: "vite" },
13 | { label: "Astro", value: "astro" },
14 | ];
15 |
16 | export default function SelectDemo() {
17 | return (
18 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/apps/web/registry/components/select-disabled.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Select,
3 | SelectItem,
4 | SelectPopup,
5 | SelectTrigger,
6 | SelectValue,
7 | } from "@/registry/ui/select";
8 |
9 | const items = [
10 | { label: "Select framework", value: null },
11 | { label: "Next.js", value: "next" },
12 | { label: "Vite", value: "vite" },
13 | { label: "Astro", value: "astro" },
14 | ];
15 |
16 | export default function SelectDisabled() {
17 | return (
18 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/apps/web/registry/components/switch-card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { Label } from "@/registry/ui/label";
4 | import { Switch } from "@/registry/ui/switch";
5 |
6 | export default function SwitchCardDemo() {
7 | const id = React.useId();
8 |
9 | return (
10 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/apps/web/registry/components/menu-nested.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 | import {
3 | Menu,
4 | MenuItem,
5 | MenuPopup,
6 | MenuSub,
7 | MenuSubPopup,
8 | MenuSubTrigger,
9 | MenuTrigger,
10 | } from "@/registry/ui/menu";
11 |
12 | export default function MenuNestedDemo() {
13 | return (
14 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/apps/web/registry/components/toggle-group-outline-with-separator.tsx:
--------------------------------------------------------------------------------
1 | import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
2 |
3 | import {
4 | Toggle,
5 | ToggleGroup,
6 | ToggleGroupSeparator,
7 | } from "@/registry/ui/toggle-group";
8 |
9 | export default function ToggleGroupOutlineWithSeparator() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/apps/web/types/component.ts:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from "react";
2 |
3 | export interface ComponentLoaderProps {
4 | name: string;
5 | hasReTrigger?: boolean;
6 | classNameComponentContainer?: string;
7 | showV0Button?: boolean;
8 | }
9 |
10 | export interface ComponentDisplayProps {
11 | component: ReactNode;
12 | hasReTrigger: boolean;
13 | className?: string;
14 | reTriggerKey: number;
15 | reTrigger: () => void;
16 | name: string;
17 | }
18 |
19 | export interface ComponentPreviewProps {
20 | name: string;
21 | hasReTrigger?: boolean;
22 | classNameComponentContainer?: string;
23 | showV0Button?: boolean;
24 | }
25 |
26 | export interface ComponentSourceProps {
27 | name: string;
28 | expandButtonTitle?: string;
29 | defaultExpanded?: boolean;
30 | maxHeight?: string;
31 | className?: string;
32 | }
33 |
--------------------------------------------------------------------------------
/apps/web/hooks/use-copy-to-clipboard.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | export function useCopyToClipboard({
6 | timeout = 2000,
7 | onCopy,
8 | }: {
9 | timeout?: number;
10 | onCopy?: () => void;
11 | } = {}) {
12 | const [isCopied, setIsCopied] = React.useState(false);
13 |
14 | const copyToClipboard = (value: string) => {
15 | if (typeof window === "undefined" || !navigator.clipboard.writeText) {
16 | return;
17 | }
18 |
19 | if (!value) return;
20 |
21 | navigator.clipboard.writeText(value).then(() => {
22 | setIsCopied(true);
23 |
24 | if (onCopy) {
25 | onCopy();
26 | }
27 |
28 | setTimeout(() => {
29 | setIsCopied(false);
30 | }, timeout);
31 | }, console.error);
32 | };
33 |
34 | return { copyToClipboard, isCopied };
35 | }
36 |
--------------------------------------------------------------------------------
/apps/web/public/r/checkbox-disabled.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "checkbox-disabled",
4 | "type": "registry:example",
5 | "description": "Disabled checkbox",
6 | "registryDependencies": [
7 | "@uitopia/checkbox",
8 | "@uitopia/label"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/checkbox-disabled.tsx",
13 | "content": "import { Checkbox } from \"@/registry/ui/checkbox\";\nimport { Label } from \"@/registry/ui/label\";\n\nexport default function CheckboxDisabledDemo() {\n return (\n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "checkbox",
19 | "disabled",
20 | "label"
21 | ]
22 | }
--------------------------------------------------------------------------------
/apps/web/public/r/field-switch.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "field-switch",
4 | "type": "registry:example",
5 | "description": "Field with toggle switch",
6 | "registryDependencies": [
7 | "@uitopia/field",
8 | "@uitopia/switch"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/field-switch.tsx",
13 | "content": "import { Field, FieldLabel } from \"@/registry/ui/field\";\nimport { Switch } from \"@/registry/ui/switch\";\n\nexport default function FieldSwitchDemo() {\n return (\n \n \n \n Email notifications\n \n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "field",
19 | "switch",
20 | "label"
21 | ]
22 | }
--------------------------------------------------------------------------------
/packages/ui/src/components/references.tsx:
--------------------------------------------------------------------------------
1 | import type React from "react";
2 | import { ExternalLink } from "lucide-react";
3 | import { cn } from "@/lib/utils";
4 | import { badgeVariants } from "./badge";
5 |
6 | interface LinkItem {
7 | link: string;
8 | label: string;
9 | }
10 |
11 | export function References({ children }: React.PropsWithChildren) {
12 | return {children}
;
13 | }
14 |
15 | export function Reference({ label, link }: LinkItem) {
16 | return (
17 |
26 | {label}
27 |
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/apps/web/components/landing/landing-hero.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { motion } from "motion/react";
4 | import { useState } from "react";
5 | import { CardsContext, defaultFocusedCard } from "./card-context";
6 | import Cards from "./cards";
7 | import { Header } from "./header";
8 | import "@/styles/home.css";
9 |
10 | export function LandingHero() {
11 | const [focusedCard, setFocusedCard] = useState(
12 | defaultFocusedCard.focusedCard,
13 | );
14 |
15 | return (
16 | setFocusedCard(null)}
19 | >
20 | {/* @ts-ignore */}
21 |
22 |
23 |
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/apps/web/public/r/avatar-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "avatar-demo",
4 | "type": "registry:example",
5 | "description": "Avatar with image and fallback",
6 | "registryDependencies": [
7 | "@uitopia/avatar"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/avatar-demo.tsx",
12 | "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/registry/ui/avatar\";\n\nexport default function AvatarDemo() {\n return (\n \n \n LT\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "avatar"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/alert-with-icon.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "alert-with-icon",
4 | "type": "registry:example",
5 | "description": "Alert with icon",
6 | "registryDependencies": [
7 | "@uitopia/alert"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/alert-with-icon.tsx",
12 | "content": "import { InfoIcon } from \"lucide-react\";\n\nimport { Alert, AlertDescription, AlertTitle } from \"@/registry/ui/alert\";\n\nexport default function AlertWithIcon() {\n return (\n \n \n Heads up!\n \n Describe what can be done about it here.\n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "alert"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/field-checkbox.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "field-checkbox",
4 | "type": "registry:example",
5 | "description": "Field with checkbox",
6 | "registryDependencies": [
7 | "@uitopia/field",
8 | "@uitopia/checkbox"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/field-checkbox.tsx",
13 | "content": "import { Checkbox } from \"@/registry/ui/checkbox\";\nimport { Field, FieldLabel } from \"@/registry/ui/field\";\n\nexport default function FieldCheckboxDemo() {\n return (\n \n \n \n Accept terms and conditions\n \n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "field",
19 | "label",
20 | "checkbox"
21 | ]
22 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/select-without-alignment.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Select,
3 | SelectItem,
4 | SelectPopup,
5 | SelectTrigger,
6 | SelectValue,
7 | } from "@/registry/ui/select";
8 |
9 | const items = [
10 | { label: "Select framework", value: null },
11 | { label: "Next.js", value: "next" },
12 | { label: "Vite", value: "vite" },
13 | { label: "Astro", value: "astro" },
14 | ];
15 |
16 | export default function SelectWithoutAlignment() {
17 | return (
18 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/apps/web/public/r/alert-info.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "alert-info",
4 | "type": "registry:example",
5 | "description": "Info alert",
6 | "registryDependencies": [
7 | "@uitopia/alert"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/alert-info.tsx",
12 | "content": "import { InfoIcon } from \"lucide-react\";\n\nimport { Alert, AlertDescription, AlertTitle } from \"@/registry/ui/alert\";\n\nexport default function AlertInfo() {\n return (\n \n \n Heads up!\n \n Describe what can be done about it here.\n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "alert",
18 | "info"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/app/sitemap.ts:
--------------------------------------------------------------------------------
1 | import type { MetadataRoute } from "next";
2 | import { source } from "@/lib/source";
3 |
4 | export const revalidate = false;
5 |
6 | export default function sitemap(): MetadataRoute.Sitemap {
7 | const url = (path: string): string =>
8 | new URL(path, process.env.NEXT_PUBLIC_APP_URL).toString();
9 |
10 | return [
11 | {
12 | changeFrequency: "monthly",
13 | priority: 1,
14 | url: url("/"),
15 | },
16 | {
17 | changeFrequency: "monthly",
18 | priority: 0.8,
19 | url: url("/docs"),
20 | },
21 | ...source.getPages().map((page) => ({
22 | changeFrequency: "weekly",
23 | lastModified: page.data.lastModified
24 | ? new Date(page.data.lastModified)
25 | : undefined,
26 | priority: 0.5,
27 | url: url(page.url),
28 | })),
29 | ];
30 | }
31 |
--------------------------------------------------------------------------------
/apps/web/public/r/input-with-button.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "input-with-button",
4 | "type": "registry:example",
5 | "description": "Input with button",
6 | "registryDependencies": [
7 | "@uitopia/input",
8 | "@uitopia/button"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/input-with-button.tsx",
13 | "content": "import { Button } from \"@/registry/ui/button\";\nimport { Input } from \"@/registry/ui/input\";\n\nexport default function InputWithButton() {\n return (\n \n \n \n
\n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "input",
19 | "button"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/public/r/tooltip-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "tooltip-demo",
4 | "type": "registry:example",
5 | "description": "Basic tooltip",
6 | "registryDependencies": [
7 | "@/tooltip",
8 | "@/button"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/tooltip-demo.tsx",
13 | "content": "import { Button } from \"@/registry/ui/button\";\nimport { Tooltip, TooltipPopup, TooltipTrigger } from \"@/registry/ui/tooltip\";\n\nexport default function TooltipDemo() {\n return (\n \n }>\n Hover me\n \n Helpful hint\n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "tooltip",
19 | "button"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/text-type-demo.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import TextType from "@/registry/ui/text-type";
4 |
5 | export default function TextLoopDemo() {
6 | return (
7 |
8 | {"Don't forget how "}
9 |
30 | {" you are."}
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/apps/web/public/r/alert-error.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "alert-error",
4 | "type": "registry:example",
5 | "description": "Error alert",
6 | "registryDependencies": [
7 | "@uitopia/alert"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/alert-error.tsx",
12 | "content": "import { CircleAlertIcon } from \"lucide-react\";\n\nimport { Alert, AlertDescription, AlertTitle } from \"@/registry/ui/alert\";\n\nexport default function AlertWarning() {\n return (\n \n \n Heads up!\n \n Describe what can be done about it here.\n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "alert",
18 | "error"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/field-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "field-demo",
4 | "type": "registry:example",
5 | "description": "Field with description",
6 | "registryDependencies": [
7 | "@uitopia/field"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/field-demo.tsx",
12 | "content": "import {\n Field,\n FieldControl,\n FieldDescription,\n FieldLabel,\n} from \"@/registry/ui/field\";\n\nexport default function FieldDemo() {\n return (\n \n Name\n \n Visible on your profile\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "field",
18 | "label",
19 | "helper",
20 | "hint"
21 | ]
22 | }
--------------------------------------------------------------------------------
/apps/web/public/r/field-error.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "field-error",
4 | "type": "registry:example",
5 | "description": "Field showing validation error",
6 | "registryDependencies": [
7 | "@uitopia/field"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/field-error.tsx",
12 | "content": "import {\n Field,\n FieldControl,\n FieldError,\n FieldLabel,\n} from \"@/registry/ui/field\";\n\nexport default function FieldWithErrorDemo() {\n return (\n \n Email\n \n Please enter a valid email address.\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "field",
18 | "label",
19 | "error"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/separator-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Separator } from "@/registry/ui/separator";
2 |
3 | export default function SeparatorDemo() {
4 | return (
5 |
6 |
7 |
base ui
8 |
9 | Unstyled, accessible primitives for fast product UI and design
10 | systems.
11 |
12 |
13 |
14 |
15 |
Blog
16 |
17 |
Docs
18 |
19 |
Source
20 |
21 |
Releases
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/apps/web/public/r/meter-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "meter-demo",
4 | "type": "registry:example",
5 | "description": "Basic meter",
6 | "registryDependencies": [
7 | "@uitopia/meter"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/meter-demo.tsx",
12 | "content": "import {\n Meter,\n MeterIndicator,\n MeterLabel,\n MeterTrack,\n MeterValue,\n} from \"@/registry/ui/meter\";\n\nexport default function MeterDemo() {\n return (\n \n \n Storage usage\n \n
\n \n \n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "meter"
18 | ]
19 | }
--------------------------------------------------------------------------------
/packages/ui/src/hooks/use-copy-to-clipboard.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | export function useCopyToClipboard({
6 | timeout = 2000,
7 | onCopy,
8 | }: {
9 | timeout?: number;
10 | onCopy?: () => void;
11 | } = {}) {
12 | const [isCopied, setIsCopied] = React.useState(false);
13 |
14 | const copyToClipboard = (value: string) => {
15 | if (typeof window === "undefined" || !navigator.clipboard.writeText) {
16 | return;
17 | }
18 |
19 | if (!value) return;
20 |
21 | navigator.clipboard.writeText(value).then(() => {
22 | setIsCopied(true);
23 |
24 | if (onCopy) {
25 | onCopy();
26 | }
27 |
28 | if (timeout !== 0) {
29 | setTimeout(() => {
30 | setIsCopied(false);
31 | }, timeout);
32 | }
33 | }, console.error);
34 | };
35 |
36 | return { isCopied, copyToClipboard };
37 | }
38 |
--------------------------------------------------------------------------------
/apps/web/public/r/alert-success.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "alert-success",
4 | "type": "registry:example",
5 | "description": "Success alert",
6 | "registryDependencies": [
7 | "@uitopia/alert"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/alert-success.tsx",
12 | "content": "import { CircleCheckIcon } from \"lucide-react\";\n\nimport { Alert, AlertDescription, AlertTitle } from \"@/registry/ui/alert\";\n\nexport default function AlertSuccess() {\n return (\n \n \n Heads up!\n \n Describe what can be done about it here.\n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "alert",
18 | "success"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/use-mobile.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "use-mobile",
4 | "type": "registry:hook",
5 | "files": [
6 | {
7 | "path": "registry/hooks/use-mobile.ts",
8 | "content": "import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n const [isMobile, setIsMobile] = React.useState(\n undefined,\n );\n\n React.useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => {\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n };\n mql.addEventListener(\"change\", onChange);\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return !!isMobile;\n}\n",
9 | "type": "registry:hook"
10 | }
11 | ]
12 | }
--------------------------------------------------------------------------------
/apps/web/public/r/alert-warning.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "alert-warning",
4 | "type": "registry:example",
5 | "description": "Warning alert",
6 | "registryDependencies": [
7 | "@uitopia/alert"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/alert-warning.tsx",
12 | "content": "import { TriangleAlertIcon } from \"lucide-react\";\n\nimport { Alert, AlertDescription, AlertTitle } from \"@/registry/ui/alert\";\n\nexport default function AlertWarning() {\n return (\n \n \n Heads up!\n \n Describe what can be done about it here.\n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "alert",
18 | "warning"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/menu-group-labels.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/ui/button";
2 | import {
3 | Menu,
4 | MenuGroup,
5 | MenuGroupLabel,
6 | MenuItem,
7 | MenuPopup,
8 | MenuSeparator,
9 | MenuTrigger,
10 | } from "@/registry/ui/menu";
11 |
12 | export default function MenuGroupLabelsDemo() {
13 | return (
14 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/apps/web/public/r/toast-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "toast-demo",
4 | "type": "registry:example",
5 | "description": "Status toast",
6 | "registryDependencies": [
7 | "@/toast"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/toast-demo.tsx",
12 | "content": "\"use client\";\n\nimport { Button } from \"@/registry/ui/button\";\nimport { toastManager } from \"@/registry/ui/toast\";\n\nexport default function ToastDemo() {\n return (\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "toast",
18 | "button"
19 | ]
20 | }
--------------------------------------------------------------------------------
/packages/ui/src/components/label.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as LabelPrimitive from "@radix-ui/react-label";
4 | import { cva, type VariantProps } from "class-variance-authority";
5 | import * as React from "react";
6 |
7 | import { cn } from "@/lib/utils";
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
11 | );
12 |
13 | const Label: React.ForwardRefExoticComponent<
14 | (React.ComponentPropsWithoutRef &
15 | VariantProps) &
16 | React.RefAttributes>
17 | > = React.forwardRef(({ className, ...props }, ref) => (
18 |
23 | ));
24 | Label.displayName = LabelPrimitive.Root.displayName;
25 |
26 | export { Label };
27 |
--------------------------------------------------------------------------------
/apps/web/public/r/button-outline.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-outline",
4 | "type": "registry:component",
5 | "title": "Button Outline",
6 | "description": "custom shadcn/ui button.",
7 | "dependencies": [
8 | "@radix-ui/react-slot",
9 | "class-variance-authority",
10 | "clsx",
11 | "react",
12 | "tailwind-merge"
13 | ],
14 | "registryDependencies": [
15 | "https://uitopia.vercel.app/r/button.json",
16 | "https://uitopia.vercel.app/r/stack.json"
17 | ],
18 | "files": [
19 | {
20 | "path": "registry/components/button-outline.tsx",
21 | "content": "import { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonOutline() {\n return ;\n}\n",
22 | "type": "registry:component",
23 | "target": "components/button-outline.tsx"
24 | }
25 | ]
26 | }
--------------------------------------------------------------------------------
/apps/web/public/r/menu-hover.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "menu-hover",
4 | "type": "registry:example",
5 | "description": "Open the menu on hover",
6 | "registryDependencies": [
7 | "@uitopia/menu",
8 | "@uitopia/button"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/menu-hover.tsx",
13 | "content": "import { Button } from \"@/registry/ui/button\";\nimport { Menu, MenuItem, MenuPopup, MenuTrigger } from \"@/registry/ui/menu\";\n\nexport default function MenuHoverDemo() {\n return (\n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "menu"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/number-field-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "number-field-demo",
4 | "type": "registry:example",
5 | "description": "A number field",
6 | "registryDependencies": [
7 | "@uitopia/number-field"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/number-field-demo.tsx",
12 | "content": "import {\n NumberField,\n NumberFieldDecrement,\n NumberFieldGroup,\n NumberFieldIncrement,\n NumberFieldInput,\n} from \"@/registry/ui/number-field\";\n\nexport default function NumberFieldDemo() {\n return (\n \n \n \n \n \n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "number field"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/shared-menu-demo.tsx:
--------------------------------------------------------------------------------
1 | // import React from "react";
2 | // import SharedMenu from "./shared-menu";
3 |
4 | // const SharedMenuDemo = () => {
5 | // // ? make sure to give unique ids
6 | // const data = [
7 | // {
8 | // id: 209,
9 | // name: "Skilled Fingers Series",
10 | // price: "0.855",
11 | // img: "/assets/jn.jpg",
12 | // },
13 | // {
14 | // id: 808,
15 | // name: "Vibrant Vibes Series",
16 | // price: "0.209",
17 | // img: "/assets/jgn.jpg",
18 | // },
19 | // ];
20 | // return (
21 | //
22 | //
23 | //
24 | // Shared Menu
25 | //
26 | //
27 | // );
28 | // };
29 |
30 | // export default SharedMenuDemo;
31 |
--------------------------------------------------------------------------------
/apps/web/public/r/number-field-lg.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "number-field-lg",
4 | "type": "registry:example",
5 | "description": "Large number field",
6 | "registryDependencies": [
7 | "@uitopia/number-field"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/number-field-lg.tsx",
12 | "content": "import {\n NumberField,\n NumberFieldDecrement,\n NumberFieldGroup,\n NumberFieldIncrement,\n NumberFieldInput,\n} from \"@/registry/ui/number-field\";\n\nexport default function NumberFieldLg() {\n return (\n \n \n \n \n \n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "number field"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/number-field-sm.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "number-field-sm",
4 | "type": "registry:example",
5 | "description": "Small number field",
6 | "registryDependencies": [
7 | "@uitopia/number-field"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/number-field-sm.tsx",
12 | "content": "import {\n NumberField,\n NumberFieldDecrement,\n NumberFieldGroup,\n NumberFieldIncrement,\n NumberFieldInput,\n} from \"@/registry/ui/number-field\";\n\nexport default function NumberFieldSm() {\n return (\n \n \n \n \n \n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "number field"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/button-destructive.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "button-destructive",
4 | "type": "registry:component",
5 | "title": "Button Destructive",
6 | "description": "custom shadcn/ui button.",
7 | "dependencies": [
8 | "@radix-ui/react-slot",
9 | "class-variance-authority",
10 | "clsx",
11 | "react",
12 | "tailwind-merge"
13 | ],
14 | "registryDependencies": [
15 | "https://uitopia.vercel.app/r/button.json",
16 | "https://uitopia.vercel.app/r/stack.json"
17 | ],
18 | "files": [
19 | {
20 | "path": "registry/components/button-destructive.tsx",
21 | "content": "import { Button } from \"@/registry/ui/button\";\n\nexport default function ButtonDestructive() {\n return ;\n}\n",
22 | "type": "registry:component",
23 | "target": "components/button-destructive.tsx"
24 | }
25 | ]
26 | }
--------------------------------------------------------------------------------
/apps/web/lib/events.ts:
--------------------------------------------------------------------------------
1 | import va from "@vercel/analytics";
2 | import { z } from "zod";
3 |
4 | const eventSchema = z.object({
5 | name: z.enum([
6 | "copy_npm_command",
7 | "copy_usage_import_code",
8 | "copy_usage_code",
9 | "copy_primitive_code",
10 | "copy_theme_code",
11 | "copy_block_code",
12 | "copy_chunk_code",
13 | "enable_lift_mode",
14 | "copy_chart_code",
15 | "copy_chart_theme",
16 | "copy_chart_data",
17 | "copy_color",
18 | ]),
19 | // declare type AllowedPropertyValues = string | number | boolean | null
20 | properties: z
21 | .object({})
22 | .catchall(z.union([z.string(), z.number(), z.boolean(), z.null()]))
23 | .optional(),
24 | });
25 |
26 | export type Event = z.infer;
27 |
28 | export function trackEvent(input: Event): void {
29 | const event = eventSchema.parse(input);
30 | if (event) {
31 | va.track(event.name, event.properties);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/apps/web/registry/components/button-snap-effect.tsx:
--------------------------------------------------------------------------------
1 | import { Trash2 } from "lucide-react";
2 | import { AnimatePresence } from "motion/react";
3 |
4 | import { ThanosSnapEffect } from "./snap-effect";
5 |
6 | export default function SnapEffectDemo() {
7 | return (
8 |
9 |
10 |
11 |
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/registry/components/tabs-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Tabs, TabsList, TabsPanel, TabsTab } from "@/registry/ui/tabs";
2 |
3 | export default function TabsDemo() {
4 | return (
5 |
6 |
7 | Tab 1
8 | Tab 2
9 | Tab 3
10 |
11 |
12 |
13 | Tab 1 content
14 |
15 |
16 |
17 |
18 | Tab 2 content
19 |
20 |
21 |
22 |
23 | Tab 3 content
24 |
25 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/apps/web/public/r/field-disabled.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "field-disabled",
4 | "type": "registry:example",
5 | "description": "Field in disabled state",
6 | "registryDependencies": [
7 | "@uitopia/field"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/field-disabled.tsx",
12 | "content": "import {\n Field,\n FieldControl,\n FieldDescription,\n FieldLabel,\n} from \"@/registry/ui/field\";\n\nexport default function FieldDisabledDemo() {\n return (\n \n Email\n \n This field is currently disabled.\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "field",
18 | "label",
19 | "disabled",
20 | "helper",
21 | "hint"
22 | ]
23 | }
--------------------------------------------------------------------------------
/apps/web/public/r/slider-with-label-value.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "slider-with-label-value",
4 | "type": "registry:example",
5 | "description": "Slider with label and value",
6 | "registryDependencies": [
7 | "@uitopia/slider",
8 | "@uitopia/label"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/slider-with-label-value.tsx",
13 | "content": "import { Label } from \"@/registry/ui/label\";\nimport { Slider, SliderValue } from \"@/registry/ui/slider\";\n\nexport default function SliderWithLabelValue() {\n return (\n \n \n \n \n
\n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "slider",
19 | "label"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/public/r/field-slider.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "field-slider",
4 | "type": "registry:example",
5 | "description": "Field with slider",
6 | "registryDependencies": [
7 | "@uitopia/field",
8 | "@uitopia/slider"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/field-slider.tsx",
13 | "content": "import { Field, FieldDescription, FieldLabel } from \"@/registry/ui/field\";\nimport { Slider } from \"@/registry/ui/slider\";\n\nexport default function FieldSelectDemo() {\n return (\n \n Country\n \n This is an optional field\n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "field",
19 | "slider",
20 | "label",
21 | "helper",
22 | "hint"
23 | ]
24 | }
--------------------------------------------------------------------------------
/apps/web/public/r/progress-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "progress-demo",
4 | "type": "registry:example",
5 | "description": "Animated progress bar",
6 | "registryDependencies": [
7 | "@uitopia/progress"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/progress-demo.tsx",
12 | "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Progress } from \"@/registry/ui/progress\";\n\nexport default function ProgressDemo() {\n const [value, setValue] = React.useState(20);\n\n React.useEffect(() => {\n const interval = setInterval(() => {\n setValue((current) =>\n Math.min(100, Math.round(current + Math.random() * 25)),\n );\n }, 1000);\n return () => clearInterval(interval);\n }, []);\n\n return ;\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "progress"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/field-required.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "field-required",
4 | "type": "registry:example",
5 | "description": "Field with required indicator",
6 | "registryDependencies": [
7 | "@uitopia/field"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/field-required.tsx",
12 | "content": "import {\n Field,\n FieldControl,\n FieldError,\n FieldLabel,\n} from \"@/registry/ui/field\";\n\nexport default function FieldRequiredDemo() {\n return (\n \n \n Password *\n \n \n Please fill out this field.\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "field",
18 | "label",
19 | "required"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/public/r/textarea-with-label.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "textarea-with-label",
4 | "type": "registry:example",
5 | "description": "Textarea labelled with Field",
6 | "registryDependencies": [
7 | "@uitopia/textarea",
8 | "@uitopia/label"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/textarea-with-label.tsx",
13 | "content": "import { useId } from \"react\";\n\nimport { Label } from \"@/registry/ui/label\";\nimport { Textarea } from \"@/registry/ui/textarea\";\n\nexport default function TextareaWithLabel() {\n const id = useId();\n return (\n \n \n \n
\n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "textarea",
19 | "field",
20 | "label"
21 | ]
22 | }
--------------------------------------------------------------------------------
/apps/web/public/r/toast-loading.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "toast-loading",
4 | "type": "registry:example",
5 | "description": "Loading toast",
6 | "registryDependencies": [
7 | "@/toast"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/toast-loading.tsx",
12 | "content": "\"use client\";\n\nimport { Button } from \"@/registry/ui/button\";\nimport { toastManager } from \"@/registry/ui/toast\";\n\nexport default function ToastLoading() {\n return (\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "toast",
18 | "button",
19 | "loading"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/public/r/radio-group-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "radio-group-demo",
4 | "type": "registry:example",
5 | "description": "Basic radio group",
6 | "registryDependencies": [
7 | "@uitopia/radio-group",
8 | "@uitopia/label"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/radio-group-demo.tsx",
13 | "content": "import { Label } from \"@/registry/ui/label\";\nimport { Radio, RadioGroup } from \"@/registry/ui/radio-group\";\n\nexport default function RadioGroupDemo() {\n return (\n \n \n \n \n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "radio",
19 | "label"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/toast-with-action.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/registry/ui/button";
4 | import { toastManager } from "@/registry/ui/toast";
5 |
6 | export default function ToastWithAction() {
7 | return (
8 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/packages/ui/src/components/separator.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as SeparatorPrimitive from "@radix-ui/react-separator";
4 | import * as React from "react";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | const Separator: React.ForwardRefExoticComponent<
9 | React.ComponentPropsWithoutRef &
10 | React.RefAttributes>
11 | > = React.forwardRef(
12 | (
13 | { className, orientation = "horizontal", decorative = true, ...props },
14 | ref,
15 | ) => (
16 |
27 | ),
28 | );
29 | Separator.displayName = SeparatorPrimitive.Root.displayName;
30 |
31 | export { Separator };
32 |
--------------------------------------------------------------------------------
/apps/web/public/r/input-with-label.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "input-with-label",
4 | "type": "registry:example",
5 | "description": "Input with label",
6 | "registryDependencies": [
7 | "@uitopia/input",
8 | "@uitopia/label"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/input-with-label.tsx",
13 | "content": "import { useId } from \"react\";\n\nimport { Input } from \"@/registry/ui/input\";\nimport { Label } from \"@/registry/ui/label\";\n\nexport default function InputWithLabel() {\n const id = useId();\n return (\n \n \n \n
\n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "input",
19 | "label"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/public/r/number-field-disabled.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "number-field-disabled",
4 | "type": "registry:example",
5 | "description": "A disabled number field",
6 | "registryDependencies": [
7 | "@uitopia/number-field"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/number-field-disabled.tsx",
12 | "content": "import {\n NumberField,\n NumberFieldDecrement,\n NumberFieldGroup,\n NumberFieldIncrement,\n NumberFieldInput,\n} from \"@/registry/ui/number-field\";\n\nexport default function NumberFieldDisabled() {\n return (\n \n \n \n \n \n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "number field",
18 | "disabled",
19 | "label"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/number-field-with-step.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | NumberField,
3 | NumberFieldDecrement,
4 | NumberFieldGroup,
5 | NumberFieldIncrement,
6 | NumberFieldInput,
7 | NumberFieldScrubArea,
8 | } from "@/registry/ui/number-field";
9 |
10 | export default function NumberFieldWithStep() {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/apps/web/public/r/number-field-with-range.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "number-field-with-range",
4 | "type": "registry:example",
5 | "description": "A number field with min/max constraints",
6 | "registryDependencies": [
7 | "@uitopia/number-field"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/number-field-with-range.tsx",
12 | "content": "import {\n NumberField,\n NumberFieldDecrement,\n NumberFieldGroup,\n NumberFieldIncrement,\n NumberFieldInput,\n} from \"@/registry/ui/number-field\";\n\nexport default function NumberFieldWithRange() {\n return (\n \n \n \n \n \n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "number field",
18 | "range"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/fieldset-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Field,
3 | FieldControl,
4 | FieldDescription,
5 | FieldLabel,
6 | } from "@/registry/ui/field";
7 | import { Fieldset, FieldsetLegend } from "@/registry/ui/fieldset";
8 |
9 | export default function FieldsetDemo() {
10 | return (
11 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/apps/web/registry/components/tabs-vertical.tsx:
--------------------------------------------------------------------------------
1 | import { Tabs, TabsList, TabsPanel, TabsTab } from "@/registry/ui/tabs";
2 |
3 | export default function TabsVertical() {
4 | return (
5 |
6 |
7 | Tab 1
8 | Tab 2
9 | Tab 3
10 |
11 |
12 |
13 | Tab 1 content
14 |
15 |
16 |
17 |
18 | Tab 2 content
19 |
20 |
21 |
22 |
23 | Tab 3 content
24 |
25 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/apps/web/registry/components/breadcrumb-custom-separator.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | import {
4 | Breadcrumb,
5 | BreadcrumbItem,
6 | BreadcrumbLink,
7 | BreadcrumbList,
8 | BreadcrumbPage,
9 | BreadcrumbSeparator,
10 | } from "@/registry/ui/breadcrumb";
11 |
12 | export default function BreadcrumbDemo() {
13 | return (
14 |
15 |
16 |
17 | }>Home
18 |
19 | /
20 |
21 | }>
22 | Components
23 |
24 |
25 | /
26 |
27 | Breadcrumb
28 |
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/apps/web/registry/components/empty-demo.tsx:
--------------------------------------------------------------------------------
1 | import { BookIcon, RouteIcon } from "lucide-react";
2 |
3 | import { Button } from "@/registry/ui/button";
4 | import {
5 | Empty,
6 | EmptyContent,
7 | EmptyDescription,
8 | EmptyHeader,
9 | EmptyMedia,
10 | EmptyTitle,
11 | } from "@/registry/ui/empty";
12 |
13 | export default function EmptyDemo() {
14 | return (
15 |
16 |
17 |
18 |
19 |
20 | No upcoming meetings
21 | Create a meeting to get started.
22 |
23 |
24 |
25 |
26 |
30 |
31 |
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/apps/web/public/r/menu-checkbox.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "menu-checkbox",
4 | "type": "registry:example",
5 | "description": "Menu with checkbox items",
6 | "registryDependencies": [
7 | "@uitopia/menu",
8 | "@uitopia/button"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/menu-checkbox.tsx",
13 | "content": "import { Button } from \"@/registry/ui/button\";\nimport {\n Menu,\n MenuCheckboxItem,\n MenuPopup,\n MenuTrigger,\n} from \"@/registry/ui/menu\";\n\nexport default function MenuCheckboxDemo() {\n return (\n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "menu",
19 | "checkbox"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/public/r/menu-link.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "menu-link",
4 | "type": "registry:example",
5 | "description": "Menu items as links",
6 | "registryDependencies": [
7 | "@uitopia/menu",
8 | "@uitopia/button"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/menu-link.tsx",
13 | "content": "import Link from \"next/link\";\n\nimport { Button } from \"@/registry/ui/button\";\nimport { Menu, MenuItem, MenuPopup, MenuTrigger } from \"@/registry/ui/menu\";\n\nexport default function MenuLinkDemo() {\n return (\n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "menu",
19 | "link"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/public/r/meter-with-range.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "meter-with-range",
4 | "type": "registry:example",
5 | "description": "Meter with min and max values",
6 | "registryDependencies": [
7 | "@uitopia/meter"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/meter-with-range.tsx",
12 | "content": "\"use client\";\n\nimport {\n Meter,\n MeterIndicator,\n MeterLabel,\n MeterTrack,\n MeterValue,\n} from \"@/registry/ui/meter\";\n\nexport default function MeterWithRangeDemo() {\n return (\n \n \n Bandwidth (Mbps)\n {(_formatted, value) => value}\n
\n \n \n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "meter"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/separator.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "separator",
4 | "type": "registry:ui",
5 | "dependencies": [
6 | "@base-ui-components/react"
7 | ],
8 | "files": [
9 | {
10 | "path": "registry/ui/separator.tsx",
11 | "content": "import { Separator as SeparatorPrimitive } from \"@base-ui-components/react/separator\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Separator({\n className,\n orientation = \"horizontal\",\n ...props\n}: SeparatorPrimitive.Props) {\n return (\n \n );\n}\n\nexport { Separator };\n",
12 | "type": "registry:ui"
13 | }
14 | ]
15 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/radio-group-with-description.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/ui/label";
2 | import { Radio, RadioGroup } from "@/registry/ui/radio-group";
3 |
4 | export default function RadioGroupWithDescriptionDemo() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | Basic features for personal use.
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | Advanced tools for professionals.
22 |
23 |
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/apps/web/public/r/menu-close-on-click.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "menu-close-on-click",
4 | "type": "registry:example",
5 | "description": "Close menu when items are clicked",
6 | "registryDependencies": [
7 | "@uitopia/menu",
8 | "@uitopia/button"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/menu-close-on-click.tsx",
13 | "content": "import { Button } from \"@/registry/ui/button\";\nimport { Menu, MenuItem, MenuPopup, MenuTrigger } from \"@/registry/ui/menu\";\n\nexport default function MenuCloseOnClickDemo() {\n return (\n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "menu"
19 | ]
20 | }
--------------------------------------------------------------------------------
/apps/web/public/r/progress-with-label-value.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "progress-with-label-value",
4 | "type": "registry:example",
5 | "description": "Progress with label and value",
6 | "registryDependencies": [
7 | "@uitopia/progress"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/progress-with-label-value.tsx",
12 | "content": "import {\n Progress,\n ProgressIndicator,\n ProgressLabel,\n ProgressTrack,\n ProgressValue,\n} from \"@/registry/ui/progress\";\n\nexport default function ProgressWithLabelValueDemo() {\n return (\n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "progress",
18 | "label"
19 | ]
20 | }
--------------------------------------------------------------------------------
/packages/ui/src/index.tsx:
--------------------------------------------------------------------------------
1 | // base components shadcn/ui
2 | export * from "./components/accordion";
3 | export * from "./components/alert-dialog";
4 | export * from "./components/badge";
5 | export * from "./components/button";
6 | export * from "./components/card";
7 | export * from "./components/checkbox";
8 | export * from "./components/collapsible";
9 | export * from "./components/dialog";
10 | export * from "./components/dropdown-menu";
11 | export * from "./components/input";
12 | export * from "./components/label";
13 | // misc
14 | export * from "./components/page-header";
15 | export * from "./components/references";
16 | export * from "./components/resizable";
17 | export * from "./components/scroll-area";
18 | export * from "./components/separator";
19 | export * from "./components/sheet";
20 | export * from "./components/sidebar";
21 | export * from "./components/skeleton";
22 | export * from "./components/tabs";
23 | export * from "./components/toggle";
24 | export * from "./components/toggle-group";
25 | export * from "./components/tooltip";
26 |
--------------------------------------------------------------------------------
/apps/web/public/r/number-field-with-scrub.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "number-field-with-scrub",
4 | "type": "registry:example",
5 | "description": "A number field with a scrub area",
6 | "registryDependencies": [
7 | "@uitopia/number-field"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/number-field-with-scrub.tsx",
12 | "content": "import {\n NumberField,\n NumberFieldDecrement,\n NumberFieldGroup,\n NumberFieldIncrement,\n NumberFieldInput,\n NumberFieldScrubArea,\n} from \"@/registry/ui/number-field\";\n\nexport default function NumberFieldDemoWithScrub() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "number field"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/radio-group-disabled.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "radio-group-disabled",
4 | "type": "registry:example",
5 | "description": "Radio group with one option disabled",
6 | "registryDependencies": [
7 | "@uitopia/radio-group",
8 | "@uitopia/label"
9 | ],
10 | "files": [
11 | {
12 | "path": "registry/components/radio-group-disabled.tsx",
13 | "content": "import { Label } from \"@/registry/ui/label\";\nimport { Radio, RadioGroup } from \"@/registry/ui/radio-group\";\n\nexport default function RadioGroupDisabledDemo() {\n return (\n \n \n \n \n \n );\n}\n",
14 | "type": "registry:example"
15 | }
16 | ],
17 | "categories": [
18 | "radio",
19 | "label"
20 | ]
21 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/field-validity.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Field,
5 | FieldControl,
6 | FieldLabel,
7 | FieldValidity,
8 | } from "@/registry/ui/field";
9 |
10 | export default function FieldWithValidityDemo() {
11 | return (
12 |
13 | Email
14 |
15 |
16 | {(validity) => (
17 |
18 | {validity.error && (
19 |
20 | {validity.error}
21 |
22 | )}
23 |
24 |
25 | {JSON.stringify(validity, null, 2)}
26 |
27 |
28 |
29 | )}
30 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/apps/web/public/r/fieldset.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "fieldset",
4 | "type": "registry:ui",
5 | "dependencies": [
6 | "@base-ui-components/react"
7 | ],
8 | "files": [
9 | {
10 | "path": "registry/ui/fieldset.tsx",
11 | "content": "\"use client\";\n\nimport { Fieldset as FieldsetPrimitive } from \"@base-ui-components/react/fieldset\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Fieldset({ className, ...props }: FieldsetPrimitive.Root.Props) {\n return (\n \n );\n}\nfunction FieldsetLegend({\n className,\n ...props\n}: FieldsetPrimitive.Legend.Props) {\n return (\n \n );\n}\n\nexport { Fieldset, FieldsetLegend };\n",
12 | "type": "registry:ui"
13 | }
14 | ]
15 | }
--------------------------------------------------------------------------------
/apps/web/public/r/frame-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "frame-demo",
4 | "type": "registry:example",
5 | "description": "Frame example",
6 | "registryDependencies": [
7 | "@uitopia/frame"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/frame-demo.tsx",
12 | "content": "import {\n Frame,\n FrameDescription,\n FrameHeader,\n FramePanel,\n FrameTitle,\n} from \"@/registry/ui/frame\";\n\nexport default function FrameDemo() {\n return (\n \n \n Section header\n Brief description about the section\n \n \n Section title
\n Section description
\n \n \n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "frame"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/public/r/toggle-icon-group.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "toggle-icon-group",
4 | "type": "registry:example",
5 | "description": "Multiple toggles",
6 | "registryDependencies": [
7 | "@/toggle"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/components/toggle-icon-group.tsx",
12 | "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\n\nimport { Toggle } from \"@/registry/ui/toggle\";\n\nexport default function ToggleIconGroup() {\n return (\n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n",
13 | "type": "registry:example"
14 | }
15 | ],
16 | "categories": [
17 | "toggle"
18 | ]
19 | }
--------------------------------------------------------------------------------
/apps/web/registry/components/avatar-size.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar";
2 |
3 | export default function AvatarSizeDemo() {
4 | return (
5 |
6 |
7 |
11 | AV
12 |
13 |
14 |
18 | AV
19 |
20 |
21 |
25 | AV
26 |
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------