Page Not Found
10 |11 | Visit{" "} 12 | 13 | start.solidjs.com 14 | {" "} 15 | to learn how to build SolidStart apps. 16 |
17 |
20 |
27 | Border Beam
28 |
29 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/components/panda/src/stories/border-beam/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { BorderBeam } from "@/ui/border-beam";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
16 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/components/panda/src/stories/dot-pattern/stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "storybook-solidjs";
2 |
3 | import { getStory } from "@/lib/storybook";
4 | import { DotPattern } from "@/ui/dot-pattern";
5 |
6 | const meta: Meta23 | Dot Pattern 24 |
25 |
17 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/components/panda/src/stories/grid-pattern/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { GridPattern } from "@/ui/grid-pattern";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta18 | Grid Pattern 19 |
20 |
8 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/components/panda/src/stories/iphone-15/stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "storybook-solidjs";
2 |
3 | import { getStory } from "@/lib/storybook";
4 | import { IPhone15 } from "@/ui/iphone-15";
5 |
6 | const meta: Meta
20 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/components/panda/src/stories/meteors/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { Meteors } from "@/ui/meteors";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
16 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/components/panda/src/stories/no-signal-screen/stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "storybook-solidjs";
2 |
3 | import { getStory } from "@/lib/storybook";
4 | import { NoSignalScreen } from "@/ui/no-signal-screen";
5 |
6 | const meta: Meta24 | No Signal 25 |
26 |
14 |
24 |
32 | Circles
33 |
34 |
35 |
37 |
38 |
40 |
41 |
42 |
44 |
45 |
47 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/components/panda/src/stories/orbiting-circles/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { OrbitingCircles } from "@/ui/orbiting-circles";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
17 |
31 | Retro Grid
32 |
33 |
34 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/components/panda/src/stories/retro-grid/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { RetroGrid } from "@/ui/retro-grid";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
18 | 
23 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/components/panda/src/stories/ripple/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { Ripple } from "@/ui/ripple";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
23 |
8 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/components/panda/src/stories/safari/stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "storybook-solidjs";
2 |
3 | import { getStory } from "@/lib/storybook";
4 | import { Safari } from "@/ui/safari";
5 |
6 | const meta: Meta
14 |
23 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/components/panda/src/stories/spotlight/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { Spotlight } from "@/ui/spotlight";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta40 | Spotlight 41 |
42 |
14 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/components/panda/src/stories/typing-animation/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { TypingAnimation } from "@/ui/typing-animation";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
8 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/components/panda/src/stories/word-rotate/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { WordRotate } from "@/ui/word-rotate";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta54 | {localProps.children} 55 |
56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /components/panda/src/ui/flip-text.tsx: -------------------------------------------------------------------------------- 1 | import { css, cx } from "styled-system/css"; 2 | 3 | import { Motion, type VariantDefinition } from "solid-motionone"; 4 | 5 | import { type Component, For, mergeProps } from "solid-js"; 6 | 7 | export interface FlipTextProps { 8 | text: string; 9 | duration?: number; 10 | delayMultiple?: number; 11 | states?: { 12 | initial: VariantDefinition; 13 | animate: VariantDefinition; 14 | }; 15 | class?: string; 16 | } 17 | 18 | export const FlipText: Component
33 |
34 | {(char, i) => (
35 |
43 | {char === " " ? : char}
44 |
45 | )}
46 |
47 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/components/panda/src/ui/gradual-spacing.tsx:
--------------------------------------------------------------------------------
1 | import { css, cx } from "styled-system/css";
2 |
3 | import { Motion, type Options } from "solid-motionone";
4 |
5 | import { type Component, For, mergeProps } from "solid-js";
6 |
7 | export interface GradualSpacingProps {
8 | text: string;
9 | duration?: number;
10 | delayMultiple?: number;
11 | states?: {
12 | hidden: Options["exit"];
13 | visible: Options["inView"];
14 | };
15 | class?: string;
16 | }
17 |
18 | export const GradualSpacing: Component
33 |
34 | {(char, i) => (
35 |
44 | {char === " " ? : char}
45 |
46 | )}
47 |
48 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/components/panda/src/ui/letter-pullup.tsx:
--------------------------------------------------------------------------------
1 | import { css, cx } from "styled-system/css";
2 |
3 | import { animate, inView, stagger } from "motion";
4 | import { type Component, For, mergeProps, onCleanup, onMount } from "solid-js";
5 |
6 | export interface LetterPullupProps {
7 | text: string;
8 | class?: string;
9 | delay?: number;
10 | }
11 |
12 | export const LetterPullup: Component
35 |
36 | {(letter, i) => (
37 |
40 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/components/panda/src/ui/number-ticker.tsx:
--------------------------------------------------------------------------------
1 | import { animate, inView } from "motion";
2 | import {
3 | type Component,
4 | type JSX,
5 | mergeProps,
6 | onMount,
7 | splitProps,
8 | } from "solid-js";
9 |
10 | export interface NumberTickerProps extends JSX.HTMLAttributes{letter === " " ? : letter}
38 | )}
39 |
40 |
41 | {(word, i) => (
42 |
51 | {word}
52 |
53 | )}
54 |
55 |
56 | );
57 | };
58 |
--------------------------------------------------------------------------------
/components/panda/src/ui/word-pullup.tsx:
--------------------------------------------------------------------------------
1 | import { css, cx } from "styled-system/css";
2 |
3 | import { type Component, For, mergeProps } from "solid-js";
4 | import { Motion } from "solid-motionone";
5 |
6 | export interface WordPullupProps {
7 | text: string;
8 | class?: string;
9 | delay?: number;
10 | }
11 |
12 | export const WordPullup: Component
17 |
18 | {(letter, i) => (
19 |
27 | {letter}
28 |
29 | )}
30 |
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/components/panda/src/ui/word-rotate.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | type Component,
3 | type JSX,
4 | Show,
5 | createEffect,
6 | createSignal,
7 | mergeProps,
8 | onCleanup,
9 | splitProps,
10 | } from "solid-js";
11 | import { Motion, type MotionComponentProps, Presence } from "solid-motionone";
12 |
13 | export interface WordRotateProps
14 | extends JSX.HTMLAttributes
20 |
22 | ),
23 | ],
24 | parameters: {
25 | controls: {
26 | matchers: {
27 | color: /(background|color)$/i,
28 | date: /Date$/i,
29 | },
30 | },
31 | },
32 | };
33 |
34 | export default preview;
35 |
--------------------------------------------------------------------------------
/components/tailwind/.storybook/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/components/tailwind/README.md:
--------------------------------------------------------------------------------
1 | # Tailwind + Mystic UI
2 |
3 | You can use Mystic UI with your Tailwind projects, also works with tailwind based frameworks like [Solid UI](https://www.solid-ui.com/) and [shadcn-solid](https://shadcn-solid.com/).
4 |
--------------------------------------------------------------------------------
/components/tailwind/biome.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
3 | "extends": ["../../biome.json"]
4 | }
5 |
--------------------------------------------------------------------------------
/components/tailwind/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@mystic-ui/tailwind",
3 | "private": true,
4 | "type": "module",
5 | "devDependencies": {
6 | "@biomejs/biome": "1.9.4",
7 | "@mystic-ui/registry": "workspace:*",
8 | "@storybook/addon-essentials": "^8.4.7",
9 | "@storybook/addon-themes": "^8.4.7",
10 | "@storybook/builder-vite": "^8.4.7",
11 | "@storybook/docs-tools": "^8.4.7",
12 | "@types/bun": "latest",
13 | "autoprefixer": "^10.4.20",
14 | "postcss": "^8.4.49",
15 | "storybook": "^8.4.7",
16 | "storybook-solidjs": "^1.0.0-beta.6",
17 | "storybook-solidjs-vite": "^1.0.0-beta.6",
18 | "tailwindcss": "^3.4.16",
19 | "ts-deepmerge": "^7.0.2",
20 | "vite-tsconfig-paths": "^5.1.4"
21 | },
22 | "scripts": {
23 | "storybook": "storybook dev -p 6006",
24 | "build-storybook": "storybook build",
25 | "format": "biome format src",
26 | "lint": "biome lint src",
27 | "check": "biome check src"
28 | },
29 | "dependencies": {
30 | "@tsparticles/engine": "^3.7.1",
31 | "@tsparticles/slim": "^3.7.1",
32 | "clsx": "^2.1.1",
33 | "motion": "^11.13.1",
34 | "solid-icons": "^1.1.0",
35 | "solid-js": "^1.9.3",
36 | "solid-motionone": "^1.0.2",
37 | "tailwind-merge": "^2.5.5"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/components/tailwind/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/components/tailwind/src/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
8 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/android/stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "storybook-solidjs";
2 |
3 | import { getStory } from "@/lib/storybook";
4 | import { Android } from "@/ui/android";
5 |
6 | const meta: Meta
6 |
7 | 🎉
{" "} 8 | 9 | Introducing Magic UI 10 | 11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/animated-gradient-text/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { AnimatedGradientText } from "@/ui/animated-gradient-text";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta{" "} 8 | 9 | Introducing Magic UI 10 | 11 |
7 |
8 | ✨ Introducing Mystic UI
9 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/animated-shiny-text/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { AnimatedShinyText } from "@/ui/animated-shiny-text";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
17 | Sanjana Airlines,
Sajana Textiles.
18 |
19 | 20 | Get the best advices from our experts, including expert artists, 21 | painters, marathon enthusiasts and RDX, totally free. 22 |
23 |
6 | Border Beam
7 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/border-beam/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { BorderBeam } from "@/ui/border-beam";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
6 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/dot-pattern/stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "storybook-solidjs";
2 |
3 | import { getStory } from "@/lib/storybook";
4 | import { DotPattern } from "@/ui/dot-pattern";
5 |
6 | const meta: MetaDot Pattern
7 |
6 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/grid-pattern/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { GridPattern } from "@/ui/grid-pattern";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: MetaGrid Pattern
7 |
6 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/iphone-15/stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "storybook-solidjs";
2 |
3 | import { getStory } from "@/lib/storybook";
4 | import { IPhone15 } from "@/ui/iphone-15";
5 |
6 | const meta: Meta
6 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/meteors/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { Meteors } from "@/ui/meteors";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
6 |
7 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/no-signal-screen/stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "storybook-solidjs";
2 |
3 | import { getStory } from "@/lib/storybook";
4 | import { NoSignalScreen } from "@/ui/no-signal-screen";
5 |
6 | const meta: Meta
6 |
12 | Circles
13 |
14 |
16 |
17 |
19 |
20 |
21 |
23 |
24 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/orbiting-circles/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { OrbitingCircles } from "@/ui/orbiting-circles";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
6 |
7 | Retro Grid
8 |
9 |
10 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/retro-grid/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { RetroGrid } from "@/ui/retro-grid";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
6 |
11 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/ripple/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { Ripple } from "@/ui/ripple";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
11 |
6 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/safari/stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "storybook-solidjs";
2 |
3 | import { getStory } from "@/lib/storybook";
4 | import { Safari } from "@/ui/safari";
5 |
6 | const meta: Meta
6 |
7 |
8 | Shimmer Button
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/shimmer-button/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { ShimmerButton } from "@/ui/shimmer-button";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
6 |
6 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/sparkles/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { SparklesCore } from "@/ui/sparkles";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
7 |
16 | 17 | Build great products 18 |
19 |
6 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/spotlight/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { Spotlight } from "@/ui/spotlight";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta8 | Spotlight 9 |
10 |
6 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/starfield/stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "storybook-solidjs";
2 |
3 | import { getStory } from "@/lib/storybook";
4 | import { Starfield } from "@/ui/starfield";
5 |
6 | const meta: MetaStarfield
7 |
6 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/typing-animation/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { TypingAnimation } from "@/ui/typing-animation";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
6 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/components/tailwind/src/stories/word-rotate/stories.tsx:
--------------------------------------------------------------------------------
1 | import { getStory } from "@/lib/storybook";
2 | import { WordRotate } from "@/ui/word-rotate";
3 | import type { Meta, StoryObj } from "storybook-solidjs";
4 |
5 | const meta: Meta
18 |
19 |
20 | {props.children}
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/components/tailwind/src/ui/animated-shiny-text.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import {
3 | type JSX,
4 | type ParentComponent,
5 | mergeProps,
6 | splitProps,
7 | } from "solid-js";
8 |
9 | export interface AnimatedShinyTextProps
10 | extends JSX.HTMLAttributes42 | {localProps.children} 43 |
44 | ); 45 | }; 46 | -------------------------------------------------------------------------------- /components/tailwind/src/ui/blur-in.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | type JSX, 3 | type ParentComponent, 4 | mergeProps, 5 | splitProps, 6 | } from "solid-js"; 7 | import { Motion } from "solid-motionone"; 8 | 9 | export interface BlurInProps extends JSX.HTMLAttributes
32 |
33 | {(char, i) => (
34 |
42 | {char === " " ? : char}
43 |
44 | )}
45 |
46 |
47 | );
48 | };
49 |
--------------------------------------------------------------------------------
/components/tailwind/src/ui/gradual-spacing.tsx:
--------------------------------------------------------------------------------
1 | import { Motion, type Options } from "solid-motionone";
2 |
3 | import { cn } from "@/lib/utils";
4 | import { type Component, For, mergeProps } from "solid-js";
5 |
6 | export interface GradualSpacingProps {
7 | text: string;
8 | duration?: number;
9 | delayMultiple?: number;
10 | states?: {
11 | hidden: Options["exit"];
12 | visible: Options["inView"];
13 | };
14 | class?: string;
15 | }
16 |
17 | export const GradualSpacing: Component
32 |
33 | {(char, i) => (
34 |
43 | {char === " " ? : char}
44 |
45 | )}
46 |
47 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/components/tailwind/src/ui/letter-pullup.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { animate, inView, stagger } from "motion";
3 | import { type Component, For, mergeProps, onCleanup, onMount } from "solid-js";
4 |
5 | export interface LetterPullupProps {
6 | text: string;
7 | class?: string;
8 | delay?: number;
9 | }
10 |
11 | export const LetterPullup: Component
34 |
35 | {(letter, i) => (
36 |
48 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/components/tailwind/src/ui/meteors.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import {
3 | type Component,
4 | For,
5 | type JSX,
6 | createEffect,
7 | createSignal,
8 | mergeProps,
9 | } from "solid-js";
10 |
11 | export interface MeteorsProps {
12 | number?: number;
13 | }
14 | export const Meteors: Component
44 | {letter === " " ? : letter}
45 |
46 | )}
47 |
58 | {props.children}
59 |
60 |
61 | );
62 | };
63 |
--------------------------------------------------------------------------------
/components/tailwind/src/ui/retro-grid.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { type Component, mergeProps } from "solid-js";
3 |
4 | export interface RetroGridProps {
5 | angle?: number;
6 | class?: string;
7 | }
8 |
9 | export const RetroGrid: Component
19 | {/* Grid */}
20 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/components/tailwind/src/ui/spotlight.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import type { Component } from "solid-js";
3 |
4 | export interface SpotlightProps {
5 | class?: string;
6 | fill?: string;
7 | }
8 |
9 | export const Spotlight: Component
21 |
34 |
35 |
36 | {/* Background Gradient */}
37 |
38 |
40 |
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/components/tailwind/src/ui/typing-animation.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | type Component,
3 | createEffect,
4 | createSignal,
5 | mergeProps,
6 | onCleanup,
7 | } from "solid-js";
8 |
9 | export interface TypingAnimationProps {
10 | text: string;
11 | duration?: number;
12 | }
13 |
14 | export const TypingAnimation: Component
41 |
51 |
42 |
37 |
38 | {(word, i) => (
39 |
48 | {word}
49 |
50 | )}
51 |
52 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/components/tailwind/src/ui/word-pullup.tsx:
--------------------------------------------------------------------------------
1 | import { Motion } from "solid-motionone";
2 |
3 | import { cn } from "@/lib/utils";
4 | import { type Component, For, mergeProps } from "solid-js";
5 |
6 | export interface WordPullupProps {
7 | text: string;
8 | class?: string;
9 | delay?: number;
10 | }
11 |
12 | export const WordPullup: Component
17 |
18 | {(letter, i) => (
19 |
27 | {letter}
28 |
29 | )}
30 |
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/components/tailwind/src/ui/word-rotate.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | type Component,
3 | type JSX,
4 | Show,
5 | createEffect,
6 | createSignal,
7 | mergeProps,
8 | onCleanup,
9 | splitProps,
10 | } from "solid-js";
11 | import { Motion, type MotionComponentProps, Presence } from "solid-motionone";
12 |
13 | export interface WordRotateProps
14 | extends JSX.HTMLAttributes\n\t\t\t\n\t\t\t\t{(char, i) => (\n\t\t\t\t\t\n\t\t\t\t\t\t{char === \" \" ? : char}\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t \n\t\t
\n\t);\n};\n"}
--------------------------------------------------------------------------------
/packages/registry/panda/gradual-spacing.json:
--------------------------------------------------------------------------------
1 | {"id":"gradual-spacing","dependencies":["solid-motionone"],"content":"import { css, cx } from \"styled-system/css\";\n\nimport { Motion, type Options } from \"solid-motionone\";\n\nimport { type Component, For, mergeProps } from \"solid-js\";\n\nexport interface GradualSpacingProps {\n\ttext: string;\n\tduration?: number;\n\tdelayMultiple?: number;\n\tstates?: {\n\t\thidden: Options[\"exit\"];\n\t\tvisible: Options[\"inView\"];\n\t};\n\tclass?: string;\n}\n\nexport const GradualSpacing: Component\n\t\t\t\n\t\t\t\t{(char, i) => (\n\t\t\t\t\t\n\t\t\t\t\t\t{char === \" \" ? : char}\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t \n\t\t
\n\t);\n};\n"}
--------------------------------------------------------------------------------
/packages/registry/panda/letter-pullup.json:
--------------------------------------------------------------------------------
1 | {"id":"letter-pullup","dependencies":["motion"],"content":"import { css, cx } from \"styled-system/css\";\n\nimport { animate, inView, stagger } from \"motion\";\nimport { type Component, For, mergeProps, onCleanup, onMount } from \"solid-js\";\n\nexport interface LetterPullupProps {\n\ttext: string;\n\tclass?: string;\n\tdelay?: number;\n}\n\nexport const LetterPullup: Component\n\t\t\t\n\t\t\t\t{(letter, i) => (\n\t\t\t\t\t \n\t\t
\n\t);\n};\n"}
--------------------------------------------------------------------------------
/packages/registry/panda/number-ticker.json:
--------------------------------------------------------------------------------
1 | {"id":"number-ticker","dependencies":["motion"],"content":"import { animate, inView } from \"motion\";\nimport {\n\ttype Component,\n\ttype JSX,\n\tmergeProps,\n\tonMount,\n\tsplitProps,\n} from \"solid-js\";\n\nexport interface NumberTickerProps extends JSX.HTMLAttributes{letter === \" \" ? : letter}
\n\t\t\t\t)}\n\t\t\t\n\t\t\t\n\t\t\t\t{(letter, i) => (\n\t\t\t\t\t\n\t\t\t\t\t\t{letter} \n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t \n\t\t
\n\t);\n};\n"}
--------------------------------------------------------------------------------
/packages/registry/panda/word-rotate.json:
--------------------------------------------------------------------------------
1 | {"id":"word-rotate","dependencies":["solid-motionone"],"content":"import {\n\ttype Component,\n\ttype JSX,\n\tShow,\n\tcreateEffect,\n\tcreateSignal,\n\tmergeProps,\n\tonCleanup,\n\tsplitProps,\n} from \"solid-js\";\nimport { Motion, type MotionComponentProps, Presence } from \"solid-motionone\";\n\nexport interface WordRotateProps\n\textends JSX.HTMLAttributes\n\t\t\t\n\t\t\t\t{(char, i) => (\n\t\t\t\t\t\n\t\t\t\t\t\t{char === \" \" ? : char}\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t \n\t\t
\n\t);\n};\n"}
--------------------------------------------------------------------------------
/packages/registry/tailwind/gradual-spacing.json:
--------------------------------------------------------------------------------
1 | {"id":"gradual-spacing","dependencies":["solid-motionone"],"content":"import { Motion, type Options } from \"solid-motionone\";\n\nimport { cn } from \"@/lib/utils\";\nimport { type Component, For, mergeProps } from \"solid-js\";\n\nexport interface GradualSpacingProps {\n\ttext: string;\n\tduration?: number;\n\tdelayMultiple?: number;\n\tstates?: {\n\t\thidden: Options[\"exit\"];\n\t\tvisible: Options[\"inView\"];\n\t};\n\tclass?: string;\n}\n\nexport const GradualSpacing: Component\n\t\t\t\n\t\t\t\t{(char, i) => (\n\t\t\t\t\t\n\t\t\t\t\t\t{char === \" \" ? : char}\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t \n\t\t
\n\t);\n};\n"}
--------------------------------------------------------------------------------
/packages/registry/tailwind/letter-pullup.json:
--------------------------------------------------------------------------------
1 | {"id":"letter-pullup","dependencies":["motion"],"content":"import { cn } from \"@/lib/utils\";\nimport { animate, inView, stagger } from \"motion\";\nimport { type Component, For, mergeProps, onCleanup, onMount } from \"solid-js\";\n\nexport interface LetterPullupProps {\n\ttext: string;\n\tclass?: string;\n\tdelay?: number;\n}\n\nexport const LetterPullup: Component\n\t\t\t\n\t\t\t\t{(letter, i) => (\n\t\t\t\t\t\n\t\t\t\t\t\t{letter === \" \" ? : letter}\n\t\t\t\t\t
\n\t\t\t\t)}\n\t\t\t\n\t\t\n\t);\n};\n"}
--------------------------------------------------------------------------------
/packages/registry/tailwind/number-ticker.json:
--------------------------------------------------------------------------------
1 | {"id":"number-ticker","dependencies":["motion"],"content":"import { animate, inView } from \"motion\";\nimport {\n\ttype Component,\n\ttype JSX,\n\tmergeProps,\n\tonMount,\n\tsplitProps,\n} from \"solid-js\";\n\nexport interface NumberTickerProps extends JSX.HTMLAttributes\n\t\t\t\t
\n\t\t\n\t);\n};\n"}
--------------------------------------------------------------------------------
/packages/registry/tailwind/typing-animation.json:
--------------------------------------------------------------------------------
1 | {"id":"typing-animation","content":"import {\n\ttype Component,\n\tcreateEffect,\n\tcreateSignal,\n\tmergeProps,\n\tonCleanup,\n} from \"solid-js\";\n\nexport interface TypingAnimationProps {\n\ttext: string;\n\tduration?: number;\n}\n\nexport const TypingAnimation: Component\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t{(word, i) => (\n\t\t\t\t\t\n\t\t\t\t\t\t{word} \n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t \n\t\t
\n\t);\n};\n"}
--------------------------------------------------------------------------------
/packages/registry/tailwind/word-pullup.json:
--------------------------------------------------------------------------------
1 | {"id":"word-pullup","dependencies":["solid-motionone"],"content":"import { Motion } from \"solid-motionone\";\n\nimport { cn } from \"@/lib/utils\";\nimport { type Component, For, mergeProps } from \"solid-js\";\n\nexport interface WordPullupProps {\n\ttext: string;\n\tclass?: string;\n\tdelay?: number;\n}\n\nexport const WordPullup: Component\n\t\t\t\n\t\t\t\t{(letter, i) => (\n\t\t\t\t\t\n\t\t\t\t\t\t{letter} \n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t \n\t\t
\n\t);\n};\n"}
--------------------------------------------------------------------------------
/packages/registry/tailwind/word-rotate.json:
--------------------------------------------------------------------------------
1 | {"id":"word-rotate","dependencies":["solid-motionone"],"content":"import {\n\ttype Component,\n\ttype JSX,\n\tShow,\n\tcreateEffect,\n\tcreateSignal,\n\tmergeProps,\n\tonCleanup,\n\tsplitProps,\n} from \"solid-js\";\nimport { Motion, type MotionComponentProps, Presence } from \"solid-motionone\";\n\nexport interface WordRotateProps\n\textends JSX.HTMLAttributes16 | Open [http://localhost:5173](http://localhost:5173) to view it in the browser. 17 | 18 | ### `npm run build` 19 | 20 | Builds the app for production to the `dist` folder.
21 | It correctly bundles Solid in production mode and optimizes the build for the best performance. 22 | 23 | The build is minified and the filenames include the hashes.
24 | Your app is ready to be deployed! 25 | 26 | ## Deployment 27 | 28 | Learn more about deploying your application with the [documentations](https://vite.dev/guide/static-deploy.html) 29 | -------------------------------------------------------------------------------- /templates/vite-panda/bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheComputerM/mystic-ui/c7b3f1e9150c0474d8a5e62f807c8312e0e4b17f/templates/vite-panda/bun.lockb -------------------------------------------------------------------------------- /templates/vite-panda/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
16 | Open [http://localhost:5173](http://localhost:5173) to view it in the browser. 17 | 18 | ### `npm run build` 19 | 20 | Builds the app for production to the `dist` folder.
21 | It correctly bundles Solid in production mode and optimizes the build for the best performance. 22 | 23 | The build is minified and the filenames include the hashes.
24 | Your app is ready to be deployed! 25 | 26 | ## Deployment 27 | 28 | Learn more about deploying your application with the [documentations](https://vite.dev/guide/static-deploy.html) 29 | -------------------------------------------------------------------------------- /templates/vite-tailwind/bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheComputerM/mystic-ui/c7b3f1e9150c0474d8a5e62f807c8312e0e4b17f/templates/vite-tailwind/bun.lockb -------------------------------------------------------------------------------- /templates/vite-tailwind/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
7 | 
8 |
10 | );
11 | }
12 |
13 | export default App;
14 |
--------------------------------------------------------------------------------
/templates/vite-tailwind/src/assets/solid.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/templates/vite-tailwind/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/templates/vite-tailwind/src/index.tsx:
--------------------------------------------------------------------------------
1 | /* @refresh reload */
2 | import { render } from 'solid-js/web'
3 | import './index.css'
4 | import App from './App.tsx'
5 |
6 | const root = document.getElementById('root')
7 |
8 | render(() => 16 | 17 | ```ts 18 | import { clsx, type ClassValue } from "clsx" 19 | import { twMerge } from "tailwind-merge" 20 | 21 | export function cn(...inputs: ClassValue[]) { 22 | return twMerge(clsx(inputs)) 23 | } 24 | ``` -------------------------------------------------------------------------------- /website/src/entry-client.tsx: -------------------------------------------------------------------------------- 1 | // @refresh reload 2 | import { StartClient, mount } from "@solidjs/start/client"; 3 | 4 | mount(() =>
{children}
16 | {scripts}
17 |
18 |
19 | )}
20 | />
21 | ));
22 |
--------------------------------------------------------------------------------
/website/src/global.d.ts:
--------------------------------------------------------------------------------
1 | ///