Skip to content
This repository was archived by the owner on Jun 28, 2026. It is now read-only.

Commit 230f5ab

Browse files
tanerengiiintanerengiiin
committed
feat(tailwind): add installation sections
1 parent 0c146b0 commit 230f5ab

24 files changed

Lines changed: 605 additions & 395 deletions

File tree

‎apps/showcase/__store__/index.tsx‎

Lines changed: 21 additions & 207 deletions
Large diffs are not rendered by default.

‎apps/showcase/demo/tailwind/label/basic-demo.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { InputText } from '@/components/ui/inputtext';
2+
import { Label } from '@/components/ui/label';
3+
4+
export default function BasicDemo() {
5+
return (
6+
<div className="flex flex-wrap justify-center">
7+
<div className="flex flex-col gap-2 w-full max-w-sm">
8+
<Label htmlFor="username">Username</Label>
9+
<InputText id="username" placeholder="Enter username" />
10+
</div>
11+
</div>
12+
);
13+
}

‎apps/showcase/demo/tailwind/label/label-pt.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Label } from '@/components/ui/label';
2+
3+
export default function LabelPTDemo() {
4+
return <Label htmlFor="username">Username</Label>;
5+
}

‎apps/showcase/demo/tailwind/label/required-demo.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { InputText } from '@/components/ui/inputtext';
2+
import { Label } from '@/components/ui/label';
3+
4+
export default function RequiredDemo() {
5+
return (
6+
<div className="flex flex-wrap justify-center">
7+
<div className="flex flex-col gap-2 w-full max-w-sm">
8+
<Label htmlFor="email" className="font-medium">
9+
Email <span aria-hidden="true">*</span>
10+
</Label>
11+
<InputText id="email" type="email" placeholder="name@example.com" required aria-required="true" />
12+
</div>
13+
</div>
14+
);
15+
}

‎apps/showcase/docs/tailwind/components/badge/features.mdx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,33 @@ component: badge
66

77
<DocDemoViewer name="badge:basic-demo" mode="collapsible"/>
88

9+
## Installation
10+
11+
<DocTabs value="CLI">
12+
<DocTabsList>
13+
<DocTabsTab value="CLI">Shadcn CLI</DocTabsTab>
14+
<DocTabsTab value="Manual">Manual</DocTabsTab>
15+
</DocTabsList>
16+
<DocTabsPanel value="CLI">
17+
```bash
18+
npx shadcn@latest add @primereact/badge
19+
```
20+
</DocTabsPanel>
21+
<DocTabsPanel value="Manual">
22+
Copy and paste the following code into your project
23+
<DocSourceViewer name="components/ui/badge" />
24+
Update the import paths to match your project setup.
25+
</DocTabsPanel>
26+
</DocTabs>
27+
928
## Usage
1029

1130
```tsx
12-
import { Badge } from '@primereact/ui/badge';
31+
import { Badge } from '@/components/ui/badge';
1332
```
1433

1534
```tsx
16-
<Badge />
35+
<Badge>Badge</Badge>
1736
```
1837

1938
## Examples

‎apps/showcase/docs/tailwind/components/breadcrumb/features.mdx‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,42 @@ component: breadcrumb
66

77
<DocDemoViewer name="breadcrumb:basic-demo" mode="collapsible"/>
88

9+
## Installation
10+
11+
<DocTabs value="CLI">
12+
<DocTabsList>
13+
<DocTabsTab value="CLI">Shadcn CLI</DocTabsTab>
14+
<DocTabsTab value="Manual">Manual</DocTabsTab>
15+
</DocTabsList>
16+
<DocTabsPanel value="CLI">
17+
```bash
18+
npx shadcn@latest add @primereact/breadcrumb
19+
```
20+
</DocTabsPanel>
21+
<DocTabsPanel value="Manual">
22+
Copy and paste the following code into your project
23+
<DocSourceViewer name="components/ui/breadcrumb" />
24+
Update the import paths to match your project setup.
25+
</DocTabsPanel>
26+
</DocTabs>
27+
928
## Usage
1029

1130
```tsx
12-
import { Breadcrumb } from '@primereact/ui/breadcrumb';
31+
import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
1332
```
1433

1534
```tsx
1635
<Breadcrumb>
17-
<Breadcrumb.List>
18-
<Breadcrumb.Item />
19-
<Breadcrumb.Separator />
20-
</Breadcrumb.List>
36+
<BreadcrumbList>
37+
<BreadcrumbItem>
38+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
39+
</BreadcrumbItem>
40+
<BreadcrumbSeparator />
41+
<BreadcrumbItem>
42+
<BreadcrumbCurrent>Current Page</BreadcrumbCurrent>
43+
</BreadcrumbItem>
44+
</BreadcrumbList>
2145
</Breadcrumb>
2246
```
2347

‎apps/showcase/docs/tailwind/components/card/features.mdx‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,42 @@ component: card
66

77
<DocDemoViewer name="card:basic-demo" mode="collapsible" />
88

9+
## Installation
10+
11+
<DocTabs value="CLI">
12+
<DocTabsList>
13+
<DocTabsTab value="CLI">Shadcn CLI</DocTabsTab>
14+
<DocTabsTab value="Manual">Manual</DocTabsTab>
15+
</DocTabsList>
16+
<DocTabsPanel value="CLI">
17+
```bash
18+
npx shadcn@latest add @primereact/card
19+
```
20+
</DocTabsPanel>
21+
<DocTabsPanel value="Manual">
22+
Copy and paste the following code into your project
23+
<DocSourceViewer name="components/ui/card" />
24+
Update the import paths to match your project setup.
25+
</DocTabsPanel>
26+
</DocTabs>
27+
928
## Usage
1029

1130
```tsx
12-
import { Card } from '@primereact/ui/card';
31+
import { Card, CardBody, CardCaption, CardContent, CardFooter, CardSubTitle, CardTitle } from '@/components/ui/card';
1332
```
1433

1534
```tsx
16-
<Card.Root>
17-
<Card.Body>
18-
<Card.Caption>
19-
<Card.Title />
20-
<Card.Subtitle />
21-
</Card.Caption>
22-
<Card.Content />
23-
<Card.Footer />
24-
</Card.Body>
25-
</Card.Root>
35+
<Card>
36+
<CardBody>
37+
<CardCaption>
38+
<CardTitle>Title</CardTitle>
39+
<CardSubTitle>Subtitle</CardSubTitle>
40+
</CardCaption>
41+
<CardContent />
42+
<CardFooter />
43+
</CardBody>
44+
</Card>
2645
```
2746

2847
## Examples

‎apps/showcase/docs/tailwind/components/chip/features.mdx‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,39 @@ component: chip
66

77
<DocDemoViewer name="chip:basic-demo" mode="collapsible" hideName />
88

9+
## Installation
10+
11+
<DocTabs value="CLI">
12+
<DocTabsList>
13+
<DocTabsTab value="CLI">Shadcn CLI</DocTabsTab>
14+
<DocTabsTab value="Manual">Manual</DocTabsTab>
15+
</DocTabsList>
16+
<DocTabsPanel value="CLI">
17+
```bash
18+
npx shadcn@latest add @primereact/chip
19+
```
20+
</DocTabsPanel>
21+
<DocTabsPanel value="Manual">
22+
Copy and paste the following code into your project
23+
<DocSourceViewer name="components/ui/chip" />
24+
Update the import paths to match your project setup.
25+
</DocTabsPanel>
26+
</DocTabs>
27+
928
## Usage
1029

1130
```tsx
12-
import { Chip } from '@primereact/ui/chip';
31+
import { Chip, ChipLabel, ChipStart, ChipEnd, ChipRemove } from '@/components/ui/chip';
1332
```
1433

1534
```tsx
16-
<Chip.Root>
17-
<Chip.Start />
18-
<Chip.Label />
19-
<Chip.End>
20-
<Chip.Remove />
21-
</Chip.End>
22-
</Chip.Root>
35+
<Chip>
36+
<ChipStart />
37+
<ChipLabel>Label</ChipLabel>
38+
<ChipEnd>
39+
<ChipRemove />
40+
</ChipEnd>
41+
</Chip>
2342
```
2443

2544
## Examples

‎apps/showcase/docs/tailwind/components/drawer/features.mdx‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,44 @@ component: drawer
66

77
<DocDemoViewer name="drawer:basic-demo" mode="collapsible" hideName />
88

9+
## Installation
10+
11+
<DocTabs value="CLI">
12+
<DocTabsList>
13+
<DocTabsTab value="CLI">Shadcn CLI</DocTabsTab>
14+
<DocTabsTab value="Manual">Manual</DocTabsTab>
15+
</DocTabsList>
16+
<DocTabsPanel value="CLI">
17+
```bash
18+
npx shadcn@latest add @primereact/drawer
19+
```
20+
</DocTabsPanel>
21+
<DocTabsPanel value="Manual">
22+
Copy and paste the following code into your project
23+
<DocSourceViewer name="components/ui/drawer" />
24+
Update the import paths to match your project setup.
25+
</DocTabsPanel>
26+
</DocTabs>
27+
928
## Usage
1029

1130
```tsx
12-
import { Drawer } from '@primereact/ui/drawer';
31+
import { Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerPortal, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
1332
```
1433

1534
```tsx
16-
<Drawer.Root>
17-
<Drawer.Trigger />
18-
<Drawer.Backdrop />
19-
<Drawer.Portal>
20-
<Drawer.Header>
21-
<Drawer.Title />
22-
<Drawer.Close />
23-
</Drawer.Header>
24-
<Drawer.Content />
25-
<Drawer.Footer />
26-
</Drawer.Portal>
27-
</Drawer.Root>
35+
<Drawer>
36+
<DrawerTrigger />
37+
<DrawerBackdrop />
38+
<DrawerPortal>
39+
<DrawerHeader>
40+
<DrawerTitle />
41+
<DrawerClose />
42+
</DrawerHeader>
43+
<DrawerContent />
44+
<DrawerFooter />
45+
</DrawerPortal>
46+
</Drawer>
2847
```
2948

3049
## Examples

‎apps/showcase/docs/tailwind/components/fieldset/features.mdx‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,38 @@ component: fieldset
66

77
<DocDemoViewer name="fieldset:basic-demo" mode="collapsible"/>
88

9+
## Installation
10+
11+
<DocTabs value="CLI">
12+
<DocTabsList>
13+
<DocTabsTab value="CLI">Shadcn CLI</DocTabsTab>
14+
<DocTabsTab value="Manual">Manual</DocTabsTab>
15+
</DocTabsList>
16+
<DocTabsPanel value="CLI">
17+
```bash
18+
npx shadcn@latest add @primereact/fieldset
19+
```
20+
</DocTabsPanel>
21+
<DocTabsPanel value="Manual">
22+
Copy and paste the following code into your project
23+
<DocSourceViewer name="components/ui/fieldset" />
24+
Update the import paths to match your project setup.
25+
</DocTabsPanel>
26+
</DocTabs>
27+
928
## Usage
1029

1130
```tsx
12-
import { Fieldset } from '@primereact/ui/fieldset';
31+
import { Fieldset, FieldsetContent, FieldsetLegend, FieldsetTitle } from '@/components/ui/fieldset';
1332
```
1433

1534
```tsx
16-
<Fieldset.Root>
17-
<Fieldset.Legend>
18-
<Fieldset.Trigger>
19-
<Fieldset.Indicator />
20-
<Fieldset.Title />
21-
</Fieldset.Trigger>
22-
</Fieldset.Legend>
23-
<Fieldset.Content />
24-
</Fieldset.Root>
35+
<Fieldset>
36+
<FieldsetLegend>
37+
<FieldsetTitle>Legend</FieldsetTitle>
38+
</FieldsetLegend>
39+
<FieldsetContent />
40+
</Fieldset>
2541
```
2642

2743
## Examples

0 commit comments

Comments
 (0)