Shadcn Studio - Shadcn UI Components, Blocks & Templates

index.tsx

import { Button } from "@/components/ui/button"

export function MyComponent() {
  return <Button>Click me</Button>
}

Loading component...

number-generator.tsx

import { Button } from "@/components/ui/button"

export default function MiniCard() {
  return (
    <Card className="w-60 p-4">
      <CardContent className="flex flex-col gap-3">
        <p className="text-sm text-muted-foreground">Random</p>
        <Button onClick={() => alert(Math.random())}>
          Generate
        </Button>
      </CardContent>
    </Card>
  )
}

Loading component...

button.tsx

import { Button } from "@/components/ui/button"

export default function Button() {
  return <Button size="sm">Shadcn/ui</Button>
}

Loading component...

button.tsx

import { Button } from "@/components/ui/button"

export default function Button() {
  return <Button size="outline">Shadcn/studio</Button>
}

Loading component...

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export default function AvatarComponent() {
  return (
    <Avatar>
      <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
      <AvatarFallback className='text-xs'>HR</AvatarFallback>
    </Avatar>
  )
}

Loading component...

todo-list.js

class TodoList {
  constructor() {
    this.todos = [];
  }

  add(task) {
    this.todos.push({ task, done: false });
  }

  toggle(index) {
    if (this.todos[index]) {
      this.todos[index].done = !this.todos[index].done;
    }
  }

  list() {
    return this.todos;
  }
}

const myTodos = new TodoList();
myTodos.add("Build code block component");
myTodos.add("Style it nicely");
myTodos.toggle(0);

console.log(myTodos.list());

Loading component...

pnpm dlx shadcn@latest add @ss-components/code-block-06

Loading component...

todo-list.js

class TodoList {
  constructor() {
    this.todos = [];
  }

  add(task) {
    this.todos.push({ task, done: false });
  }

  toggle(index) {
    if (this.todos[index]) {
      this.todos[index].done = !this.todos[index].done;
    }
  }

  list() {
    return this.todos;
  }
}

const myTodos = new TodoList();
myTodos.add("Build code block component");
myTodos.add("Style it nicely");
myTodos.toggle(0);

console.log(myTodos.list());