16 |
17 | {props.children}
18 |
19 |
20 |
21 |
23 |
6 |
7 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/apps/docs/src/registry/ui/collapsible.tsx:
--------------------------------------------------------------------------------
1 | import * as CollapsiblePrimitive from "@kobalte/core/collapsible"
2 |
3 | const Collapsible = CollapsiblePrimitive.Root
4 |
5 | const CollapsibleTrigger = CollapsiblePrimitive.Trigger
6 |
7 | const CollapsibleContent = CollapsiblePrimitive.Content
8 |
9 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
10 |
--------------------------------------------------------------------------------
/apps/docs/src/routes/(app)/examples/cards.tsx:
--------------------------------------------------------------------------------
1 | import { Cards } from "~/components/cards"
2 | import { MetaTags } from "~/components/meta-tags"
3 |
4 | export default function CardsRoute() {
5 | return (
6 | <>
7 |
7 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/packages/cli/src/utils/resolve-import.ts:
--------------------------------------------------------------------------------
1 | import { createMatchPath, type ConfigLoaderSuccessResult } from "tsconfig-paths"
2 |
3 | export async function resolveImport(
4 | importPath: string,
5 | config: Pick
6 | Badge
7 | Secondary
8 | Outline
9 | Error
10 | Round
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/apps/docs/src/registry/example/text-field-demo.tsx:
--------------------------------------------------------------------------------
1 | import { TextField, TextFieldInput, TextFieldLabel } from "~/registry/ui/text-field"
2 |
3 | export default function TextFieldDemo() {
4 | return (
5 |
6 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/apps/docs/src/registry/example/delta-bar-demo.tsx:
--------------------------------------------------------------------------------
1 | import { DeltaBar } from "~/registry/ui/delta-bar"
2 |
3 | export default function DeltaBarDemo() {
4 | return (
5 |
8 |
11 |
6 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/apps/docs/src/registry/example/aspect-ratio-demo.tsx:
--------------------------------------------------------------------------------
1 | import { AspectRatio } from "~/registry/ui/aspect-ratio"
2 |
3 | export default function AspectRatioDemo() {
4 | return (
5 | DeltaBar with default increase behavior
7 |DeltaBar with increase seen as negative
9 |
11 | Tooltip content
12 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/apps/docs/public/site.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "SolidUI",
3 | "short_name": "SolidUI",
4 | "icons": [
5 | {
6 | "src": "/android-chrome-192x192.png",
7 | "sizes": "192x192",
8 | "type": "image/png",
9 | "purpose": "maskable"
10 | },
11 | {
12 | "src": "/android-chrome-512x512.png",
13 | "sizes": "512x512",
14 | "type": "image/png",
15 | "purpose": "maskable"
16 | }
17 | ],
18 | "theme_color": "#ffffff",
19 | "background_color": "#ffffff",
20 | "display": "standalone"
21 | }
--------------------------------------------------------------------------------
/apps/docs/public/registry/ui/collapsible.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "collapsible",
3 | "dependencies": [
4 | "@kobalte/core"
5 | ],
6 | "files": [
7 | {
8 | "name": "collapsible.tsx",
9 | "content": "import * as CollapsiblePrimitive from \"@kobalte/core/collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.Trigger\n\nconst CollapsibleContent = CollapsiblePrimitive.Content\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"
10 | }
11 | ],
12 | "type": "ui"
13 | }
--------------------------------------------------------------------------------
/apps/docs/src/registry/example/radio-group-demo.tsx:
--------------------------------------------------------------------------------
1 | import { For } from "solid-js"
2 |
3 | import { RadioGroup, RadioGroupItem, RadioGroupItemLabel } from "~/registry/ui/radio-group"
4 |
5 | export default function RadioGroupDemo() {
6 | return (
7 |
7 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/apps/docs/src/registry/example/progress-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Progress, ProgressLabel, ProgressValueLabel } from "~/registry/ui/progress"
2 |
3 | export default function ProgressDemo() {
4 | return (
5 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/apps/docs/src/components/component-example.tsx:
--------------------------------------------------------------------------------
1 | import type { Component, ComponentProps } from "solid-js"
2 | import { splitProps } from "solid-js"
3 |
4 | import { cn } from "~/lib/utils"
5 |
6 | const ComponentExample: Component
9 |
10 |
14 | 11 | You agree to our Terms of Service and Privacy Policy. 12 |
13 |
10 |
14 | )
15 | }
16 |
17 | export { ComponentExample }
18 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "composite": false,
6 | "declaration": true,
7 | "declarationMap": true,
8 | "esModuleInterop": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "inlineSources": false,
11 | "isolatedModules": true,
12 | "moduleResolution": "bundler",
13 | "noUnusedLocals": false,
14 | "noUnusedParameters": false,
15 | "preserveWatchOutput": true,
16 | "skipLibCheck": true,
17 | "strict": true
18 | },
19 | "exclude": ["node_modules", "dist"]
20 | }
21 |
--------------------------------------------------------------------------------
/apps/docs/src/components/component-source.tsx:
--------------------------------------------------------------------------------
1 | import type { Component, ComponentProps } from "solid-js"
2 |
3 | import { cn } from "~/lib/utils"
4 | import { CodeBlockWrapper } from "~/components/code-block-wrapper"
5 |
6 | interface ComponentSourceProps extends ComponentProps<"div"> {
7 | src: string
8 | }
9 |
10 | const ComponentSource: Component
11 | {props.children}
12 |
13 |
9 |
13 |
14 |
15 | ## Grab a copy
16 |
17 | https://www.figma.com/community/file/1203061493325953101
18 |
--------------------------------------------------------------------------------
/packages/cli/src/utils/get-package-info.ts:
--------------------------------------------------------------------------------
1 | import fs from "node:fs"
2 | import { dirname, resolve } from "node:path"
3 | import { fileURLToPath } from "node:url"
4 |
5 | type PackageJSON = {
6 | name: string
7 | description: string
8 | version: string
9 | }
10 |
11 | const __filename = fileURLToPath(import.meta.url)
12 | const __dirname = dirname(__filename)
13 |
14 | export function getPackageInfo() {
15 | const location = resolve(__dirname, "..", "package.json")
16 | return readJSONSync(location) as PackageJSON
17 | }
18 |
19 | function readJSONSync(path: string) {
20 | const content = fs.readFileSync(path, { encoding: "utf-8" })
21 | return JSON.parse(content)
22 | }
23 |
--------------------------------------------------------------------------------
/apps/docs/src/registry/example/flex-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Card } from "~/registry/ui/card"
2 | import { Flex } from "~/registry/ui/flex"
3 |
4 | export default function FlexDemo() {
5 | return (
6 |
9 |
12 | Tickets sold
10 |9,876
11 |
13 |
16 | Average Selling Price
14 |$ 175.20
15 |
6 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/apps/docs/src/registry/example/toggle-group-demo.tsx:
--------------------------------------------------------------------------------
1 | import { IconBold, IconItalic, IconUnderline } from "~/components/icons"
2 | import { ToggleGroup, ToggleGroupItem } from "~/registry/ui/toggle-group"
3 |
4 | export default function ToggleGroupDemo() {
5 | return (
6 |
7 |
10 | Radix Primitives
8 |An open-source UI component library.
9 |
12 |
18 | Blog
13 | Docs
15 | Source
17 |
13 | Oops! Page not found.
14 |
15 | The page you're looking for doesn't exist or has been moved.
16 |
17 |
18 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/apps/docs/src/registry/example/slider-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Slider,
3 | SliderFill,
4 | SliderLabel,
5 | SliderThumb,
6 | SliderTrack,
7 | SliderValueLabel
8 | } from "~/registry/ui/slider"
9 |
10 | export default function SliderDemo() {
11 | return (
12 |
20 | Money
21 |
23 |
13 |
21 |
14 |
20 |
16 | {props.children}
17 |
18 |
19 |
9 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/apps/docs/src/registry/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import type { ValidComponent } from "solid-js"
2 | import { splitProps } from "solid-js"
3 |
4 | import type { PolymorphicProps } from "@kobalte/core/polymorphic"
5 | import * as SkeletonPrimitive from "@kobalte/core/skeleton"
6 |
7 | import { cn } from "~/lib/utils"
8 |
9 | type SkeletonRootProps
10 |
18 |
11 |
14 | Welcome back!
12 |Here's a list of your tasks for this month!
13 |
15 |
17 |
17 |
27 |
28 | )
29 | }
30 |
31 | export { AspectRatio }
32 |
--------------------------------------------------------------------------------
/apps/docs/src/routes/(app)/docs/components/badge.mdx:
--------------------------------------------------------------------------------
1 |
9 |
21 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/apps/docs/src/routes/(app)/docs/components/badge-delta.mdx:
--------------------------------------------------------------------------------
1 | Your favorite fruit is: {value()}
22 |
13 |
15 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/apps/docs/src/routes/(app)/docs/components/bar-list.mdx:
--------------------------------------------------------------------------------
1 |
6 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "extends": [
4 | "eslint:recommended",
5 | "plugin:@typescript-eslint/eslint-recommended",
6 | "plugin:@typescript-eslint/recommended",
7 | "plugin:solid/recommended",
8 | "plugin:tailwindcss/recommended"
9 | ],
10 | "plugins": ["solid", "tailwindcss"],
11 | "rules": {
12 | "@typescript-eslint/consistent-type-imports": "error",
13 | "@typescript-eslint/no-unused-vars": [
14 | "error",
15 | {
16 | "argsIgnorePattern": "^_",
17 | "varsIgnorePattern": "^_",
18 | "caughtErrorsIgnorePattern": "^_"
19 | }
20 | ],
21 | "tailwindcss/classnames-order": "error",
22 | "tailwindcss/no-custom-classname": "off"
23 | },
24 | "settings": {
25 | "tailwindcss": {
26 | "callees": ["cn", "cva"],
27 | "config": "tailwind.config.cjs"
28 | }
29 | },
30 | "overrides": [
31 | {
32 | "files": ["*.ts", "*.tsx"],
33 | "parser": "@typescript-eslint/parser"
34 | }
35 | ],
36 | "ignorePatterns": ["*.config.*", "*.json"]
37 | }
38 |
--------------------------------------------------------------------------------
/apps/docs/src/components/mdx-header.tsx:
--------------------------------------------------------------------------------
1 | import { Show } from "solid-js"
2 | import { A } from "@solidjs/router"
3 |
4 | import { cn } from "~/lib/utils"
5 | import { badgeVariants } from "~/registry/ui/badge"
6 |
7 | import { IconExternalLink } from "./icons"
8 |
9 | type HeaderProps = {
10 | title: string
11 | description: string
12 | docs?: string
13 | }
14 |
15 | export function MDXHeader(props: HeaderProps) {
16 | return (
17 | BadgeDelta with pre-defined status icons
7 |
8 | text
9 | text
10 | text
11 | text
12 | text
13 |
14 | BadgeDelta without text
15 |
16 |
22 |
18 |
21 | {(docs) => (
22 |
28 | Docs
29 |
33 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/apps/docs/src/registry/example/carousel-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Index } from "solid-js"
2 |
3 | import { Card, CardContent } from "~/registry/ui/card"
4 | import {
5 | Carousel,
6 | CarouselContent,
7 | CarouselItem,
8 | CarouselNext,
9 | CarouselPrevious
10 | } from "~/registry/ui/carousel"
11 |
12 | export default function CarouselDemo() {
13 | return (
14 | {props.title}
19 |{props.description}
20 |
20 |
21 |
22 | {index + 1}
23 |
24 |
25 |
26 |
2 | 
3 |
4 | SolidUI 5 |
6 | 7 | 8 | This is an unofficial port of [shadcn/ui](https://github.com/shadcn-ui/ui) & [tremor-raw](https://github.com/tremorlabs/tremor-raw) to [Solid](https://www.solidjs.com/). 9 | 10 | Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. **Use this to build your own component library**. 11 | 12 |  13 | 14 | ## Documentation 15 | 16 | Visit https://www.solid-ui.com to view the documentation. 17 | 18 | ## License 19 | 20 | Published under the [MIT license](LICENSE). Built by [@stefan-karger](https://github.com/stefan-karger), [@michaelessiet](https://github.com/michaelessiet) & [community](https://github.com/stefan-karger/solid-ui/graphs/contributors). 21 | 22 | 23 |
20 |
21 |
22 | {index + 1}
23 |
24 |
25 |
26 |
29 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/apps/docs/public/registry/ui/separator.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "separator",
3 | "dependencies": [
4 | "@kobalte/core"
5 | ],
6 | "files": [
7 | {
8 | "name": "separator.tsx",
9 | "content": "import type { ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\nimport * as SeparatorPrimitive from \"@kobalte/core/separator\"\n\nimport { cn } from \"~/lib/utils\"\n\ntype SeparatorRootProps{children}
32 | {scripts}
33 |
34 |
35 | )}
36 | />
37 | ))
38 |
--------------------------------------------------------------------------------
/apps/docs/src/registry/example/carousel-size-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Index } from "solid-js"
2 |
3 | import { Card, CardContent } from "~/registry/ui/card"
4 | import {
5 | Carousel,
6 | CarouselContent,
7 | CarouselItem,
8 | CarouselNext,
9 | CarouselPrevious
10 | } from "~/registry/ui/carousel"
11 |
12 | export default function CarouselSizeDemo() {
13 | return (
14 |
25 |
26 |
27 | {index + 1}
28 |
29 |
30 |
31 |
26 |
27 |
28 | {index + 1}
29 |
30 |
31 |
32 | Card Content
53 |Card Footer
56 |
8 | One
9 |
10 |
16 | Two
17 |
18 |
22 | Three
23 |
24 |
45 |
48 | Tickets sold
46 |9,876
47 |
49 |
52 | Average Selling Price
50 |$ 175.20
51 |
14 |
15 | RC
17 |
18 |
27 |
19 |
26 | @solidjs
20 |Simple and performant reactivity for building user interfaces.
21 |
22 |
25 |
29 |
30 |
31 | {index + 1}
32 |
33 |
34 |
35 |