Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nrjdalal/shadcn-ui-snippets
Simply import and use shadcn-ui components in your project
https://github.com/nrjdalal/shadcn-ui-snippets
radix radix-ui shadcn shadcn-ui vscode vscode-extension
Last synced: 2 months ago
JSON representation
Simply import and use shadcn-ui components in your project
- Host: GitHub
- URL: https://github.com/nrjdalal/shadcn-ui-snippets
- Owner: nrjdalal
- License: mit
- Created: 2023-10-27T01:25:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-28T19:52:42.000Z (9 months ago)
- Last Synced: 2024-05-02T02:54:47.750Z (7 months ago)
- Topics: radix, radix-ui, shadcn, shadcn-ui, vscode, vscode-extension
- Language: JavaScript
- Homepage:
- Size: 397 KB
- Stars: 89
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# shadcn-ui-snippets
- Raise your karma, even beginners - [How to contribute?](#how-to-contribute)
- Checkout more amazing projects at [nrjdalal](https://rdt.li/gh-follow) / [nrjdalal.com](https://nrjdalal.com)
### What is this?
Install the extension given below and easily import and use shadcn-ui components with ease using snippets within VSCode. Just type `cn` or `shadcn` in you jsx/tsx file and you will get a list of all the components to choose from.
[https://marketplace.visualstudio.com/items?itemName=VeroXyle.shadcn-ui-snippets](https://rdt.li/shadcn-ui-snippets)
### How it works
| Snippet | Description |
| ----------------- | -------------------------------------- |
| `cn-help` | How to use shadcn/ui snippets |
| `cni-[component]` | Adds imports for the component |
| `cnx-[component]` | Adds jsx/tsx for the component |
| `cnp-[component]` | Adds page based components like 'form' |
### How to use?
1. Components
For `Alert` component, type `cni-alert` to add imports in your jsx/tsx file, and to use the component, use `cnx-alert`.
> Similarly, for any other component, use `cni-[component]` to add imports and `cnx-[component]` to use.
```tsx
// cni-alert
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
// cnx-alert
;
Heads up!
You can add components and dependencies to your app using the cli.
```
2. Page based components
> Some compenents are page specific and can be imported using `cnp-[component]`, modular parts to be added later.
```tsx
// cnp-form
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"
import { Button } from "@/components/ui/button"
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
const formSchema = z.object({
username: z.string().min(2, {
message: "Username must be at least 2 characters.",
}),
})
export default function Page() {
const form = useForm>({
resolver: zodResolver(formSchema),
defaultValues: {
username: "",
},
})
const onSubmit = (values: z.infer) => {
console.log(values)
}
return (
(
Username
This is your public display name.
)}
/>
Submit
)
}
```
### To be added later
> Some components require useState, etc to also be used, so they will be added later.
- Calendar
- Combobox
- Data Table
- Date Picker
- Toast
### How to contribute?
#### e.g. for `Alert` component
1. add `alert.md` file in `src/components` folder
2. add imports, default and variants (e.g. destructive) as shown below
3. do not forget to seperate each snippet with `---`
4. run `bun run generate` to generate the snippets
- for multiword components like Hover Card, use `hover-card.md` as the file name
- for edits, find the component file and make changes accordingly
````md
import -
```jsx
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
```
---
default -
```jsx
Heads up!
You can add components to your app using the cli.
```
---
destructive -
```jsx
Error
Your session has expired. Please log in again.
```
````
Template for new components - `src/components/component-name.md`
- remove variant and preceding '---' if no variant is available
````md
import -
```jsx
// paste the import statement here
```
---
default -
```jsx
// paste the default usage code here
```
---
variant -
```jsx
// paste the variant usage code here
```
````